添加共享列表，修改共享功能相关代码

Liuyi

2024-10-19 42e5ea86f7edc9361227edd979a8ae1952713161

 pages/index/index.vue

@@ -1,42 +1,94 @@
<script setup>
    import { onMounted, ref } from "vue";
   import { getVipInfoApi } from '../../api/index.js'
   import { getUserInfo } from '../../api/index.js'
   //胶囊高度
   import { getVipInfoApi,getUserInfo,reportLossApi,removeCardApi } from '../../api/index.js'
   import { onShow,getCurrentPages } from '@dcloudio/uni-app'
   //状态栏高度
   const topHeight = ref(0)
   function getTopHeight(){
      if(uni.getMenuButtonBoundingClientRect){
         topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
         // topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
         topHeight.value = uni.getMenuButtonBoundingClientRect().top * 2
      }
   }
   /**
    * 会员卡相关
    */
   const vipInfo = ref()
   const cardInfo = ref({
      id:'',
      userName:'微信用户',
      headImg:'',
      userPhone:'',
		
      waterCardNumber:'',
      balance:'',
      count:'',
      state:'',//state:true：挂失，false：正常
      userCardType:'',//userCardType：true：共享卡，false：正常卡
   })
   const isLoss = ref(false)
   const isVip = ref(false)
   const isShareCard = ref(false)
   //获取会员卡信息
   async function getVipInfo(){
      let res = await getUserInfo()
      if(res.data.userInfo.waterCardNumber){
         let res1 = await getVipInfoApi()
         vipInfo.value = res1.data
         isVip.value = false
      }else{
         isVip.value = false
      }
    async function getVipInfo(){
      await getVipInfoApi().then((res) =>{
         if(res.code == 200 && res.data.id){
            cardInfo.value.waterCardNumber = res.data.cardNumber
            cardInfo.value.state = res.data.state == 2 ? true : false//state:2：挂失，1：正常
            cardInfo.value.userCardType = res.data.userCardType == 2 ? true : false //userCardType：2：共享卡，1：正常卡
				
            isLoss.value = cardInfo.value.state 
            isShareCard.value = cardInfo.value.userCardType 
            if(res.data.cardType == 1){
               cardInfo.value.balance = res.data.balance
            }else if(res.data.cardType == 2){
               cardInfo.value.count = res.data.count
            }
            isVip.value = true
            console.log('cardInfo',cardInfo.value,'isShareCard.value',isShareCard.value)
         }
      })
   }
   //获取用户信息
   async function getInfo(){
       await getUserInfo().then(async(res) =>{
         if(res.code == 200){
            cardInfo.value.userName = res.data.userInfo.userName ?  res.data.userInfo.userName : cardInfo.value.userName
            cardInfo.value.headImg = res.data.userInfo.headImg
            cardInfo.value.userPhone = res.data.userInfo.userPhone
            cardInfo.value.id = res.data.userInfo.id
            await getVipInfo()
            console.log('00000',cardInfo.value)
            uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
         }
      })
   }
   /**
    * 扫码取水相关
    */
   function toScan(){
      //调用二维码扫描接口
      uni.scanCode({
         scanType: ['qrCode'],
         success: function (res) {
            console.log('条码内容：' + res.result);
            uni.navigateTo({
               url:'/pages/scanWater/index'
            })
         }
      });
   }
   /**
    * 功能列表相关
    */
   const functionList = ref([
      {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/balanceRecord/index'},
      {text:'消费记录',icon:'../../static/images/index/icon32.png',url:''},
      {text:'充值记录',icon:'../../static/images/index/icon33.png',url:''},
      {text:'账户共享',icon:'../../static/images/index/icon34.png',url:''},
      {text:'优惠卷',icon:'../../static/images/index/icon35.png',url:''},
      {text:'电子发票',icon:'../../static/images/index/icon36.png',url:''},
      {text:'联系客服',icon:'../../static/images/index/icon37.png',url:''},
      {text:'推广分佣',icon:'../../static/images/index/icon38.png',url:''},
      {text:'余额记录',icon:'../../static/images/index/icon31.png',bgColor:'#16b387',url:'/pages/functionList/balanceRecord/index',isUrl:1},
      {text:'消费记录',icon:'../../static/images/index/icon32.png',bgColor:'#329ae8',url:'/pages/functionList/paymentRecord/index',isUrl:1},
      {text:'充值记录',icon:'../../static/images/index/icon33.png',bgColor:'#f0a50e',url:'/pages/functionList/rechargeRecord/index',isUrl:1},
      {text:'水卡共享',icon:'../../static/images/index/icon34.png',bgColor:'#55ca8c',url:'/pages/functionList/share/cardShare/index',isUrl:1},
      {text:'故障上报',icon:'../../static/images/index/icon35.png',bgColor:'#a88ff1',url:'/pages/infoBreakdown/index',isUrl:1},
      {text:'优惠卷',icon:'../../static/images/index/icon36.png',bgColor:'#18bfc4',url:'',isUrl:4},
      {text:'会员卡挂失',icon:'../../static/images/index/icon37.png',bgColor:'#4875f0',url:'',isUrl:2},
      {text:'会员卡注销',icon:'../../static/images/index/icon38.png',bgColor:'#f45088',url:'',isUrl:3},
   ])
   function navTo(itemUrl){
      if(itemUrl){
@@ -45,79 +97,175 @@
         })
      }
   }
   //获取用户地理位置
   async function getUserLocation(){
      wx.getLocation({
         type: 'wgs84',
         success(res){
         const latitude = res.latitude
         const longitude = res.longitude
         const speed = res.speed
         const accuracy = res.accuracy
         },
         fail(e){
            console.log('e',e)
   //功能列表点击功能
   async function setEvent(isUrl,url){
      if(isUrl == 1){
         navTo(url)
      }else if(isUrl == 2){
         if(cardInfo.value.waterCardNumber){
            uni.showModal({
                  title: '会员卡挂失',
                  content: '确认挂失会员卡？',
                  success: async function(res) {
                  if (res.confirm) {
                     await reportLossApi(cardInfo.value.waterCardNumber).then(async(res) =>{
                        if(res.code == 200){
                           uni.showToast({
                              title: '已挂失',
                              duration: 2000,
                           });
                           await getVipInfoApi().then((res) =>{
                              if(res.code == 200){
                                 if(res.data.state == 2){
                                    isLoss.value = true
                                 }
                              }
                           })
                        }
                     })
                  }
               }
            })
         }else{
            uni.showToast({
               title:'未绑定会员卡！',
               icon:'none'
            })
         }
      })
      console.log('location')
      }else if(isUrl == 3){
         if(cardInfo.value.waterCardNumber){
            uni.showModal({
                  title: '会员卡注销',
                  content: '确认注销会员卡？',
                  success: async function(res) {
                  if (res.confirm) {
                     await removeCardApi(cardInfo.value.waterCardNumber).then(async(res) =>{
                        if(res.code == 200){
                           uni.showToast({
                              title: '已注销',
                              duration: 2000,
                              icon:'none',
                           });
                           await getVipInfoApi().then((res) =>{
                              if(res.code == 200){
                                 if(!res.data.id){
                                    isVip.value = false
                                    cardInfo.value.balance = ''
                                    cardInfo.value.count = ''
                                    cardInfo.value.waterCardNumber = ''
                                    uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
                                 }
                              }
                           })
                        }
                     })
                  }else{
                     console.log('点击了取消8')
                  }
               }
            })
         }else{
               uni.showToast({
                  title:'未绑定会员卡！',
                  icon:'none'
               })
         }
      }else{
         uni.showToast({
            title: '该功能正在升级中！',
            duration: 2000,
            icon:'none',
         });
      }
   }
   function upGrade(){
      uni.showToast({
         title: '该功能正在升级中！',
         duration: 2000,
         icon:'none',
      });
   }
   onMounted( async() =>{
      getTopHeight()
      await getVipInfo()
      // await getUserLocation()
   })
   onShow(async() =>{
      await getInfo()
   })
   uni.showShareMenu({
     withShareTicket: true,
     menus: ['shareAppMessage', 'shareTimeline'],
     success: function () {
       console.log('分享菜单显示成功');
     },
     fail: function (err) {
       console.error('分享菜单显示失败', err);
     }
   });
	

</script>

<template>
   <view class="container">
      <view class="content">
         <view class="card-box" :style="{paddingTop:topHeight + 'rpx'}">
            <view class="user-info" >
               <image class="user-img" src='../../static/images/index/head.png' alt=''></image>
               <text @click="navTo('/pages/userInfo/index')">{{cardInfo.userName}}</text>
               <image @click="navTo('/pages/userInfo/index')" class="user-more"src="../../static/images/index/back.png"></image>
               <view class="user-add-card" @click="navTo('/pages/addCard/index')">
                  <image src='../../static/images/index/vip-add.png' alt=''></image>
                  <text>添加会员卡</text>
               </view>
            </view>
            <view class="card">
               <view class="card-content">
                  <view v-if="isVip" class="card-title">
                     <view>会员卡</view>
                     <image src="../../static/images/index/code1.png" alt=""></image>
                  </view>
                  <view v-else class="card-add">
                     <view @click="navTo('/pages/addCard/index')">
                        <image src="../../static/images/index/vip-add.png" alt=""></image>
                        <text>添加会员卡</text>
                     </view>
                  </view>
                  <view class="card-info">
                     <view class="info-head"><image src="../../static/images/index/hend1.png" alt=""></image></view>
                     <view class="info-content">
                        <view class="info-content-top">
                           <view>张大左</view>
                           <view>vip1</view>
               <image class="card-bg" src="../../static/images/index/card11.png" alt=""></image>
               <view v-if="isShareCard" class="share-card">共享卡号：{{cardInfo.waterCardNumber}}</view>
               <view v-if="!isShareCard" class="card-content">
                  <view class="card-left">
                     <view class="left-top">
                        <view>
                           <image v-if="isVip"  src="../../static/images/index/code1.png" alt=""></image>
                           <text>会员卡&nbsp;</text>
                           <text class="lossed" v-if="isLoss && isVip">&nbsp;[已挂失]</text>
                        </view>
                        <view class="info-content-bottom">YL123654987521</view>
                        <view v-if="isVip">ID:{{cardInfo.waterCardNumber}}</view>
                     </view>
                     <view class="info-more"><image src="../../static/images/index/back.png"></image></view>
                     <!-- <view v-if="cardInfo.userPhone" class="left-bottom">电话：{{cardInfo.userPhone}}</view> -->
                  </view>
                  <view class="card-bottom">
                     <view>我的积分：200</view>
                     <view>消费折扣：9.9折</view>
                  <view class="card-right">
                     <view class="card-right-top">
                        <!-- <view @click="navTo('/pages/addCard/index')">
                           <image src='../../static/images/index/vip-add.png' alt=''></image>
                           <text>添加会员卡</text>
                        </view> -->
                        <text v-if="isVip">金额卡</text>
                        <text v-if="!isVip">未绑定会员卡</text>
                        <text v-if="isVip">{{cardInfo.balance}}元</text>
                     </view>
                     <view v-if="isVip" class="card-right-bottom" @click="navTo('/pages/recharge/index')">充值</view>
                  </view>
               </view>
            </view>
         </view>
         <view class="function-box1">
            <view class="box1-bg box1-one" @click="navTo('/pages/sendWater/index')">
            <view class="box1-bg box1-one" @click="upGrade()">
               <image src="../../static/images/index/home21.png" alt=""></image>
               <view>送水到家</view>
            </view>
            <view class="box1-bg box1-two">
               <view>账户余额（元)</view>
            <view @click="navTo('/pages/facilityList/index')" class="box1-bg box1-two">
               <image src="../../static/images/index/icon22.png" alt=""></image>
               <view>附近设备</view>
               <!-- <view>账户余额（元)</view>
               <view class="recharge">
                  <text>￥</text>
                  <text>120.00</text>
               </view>
               <view @click="navTo('/pages/recharge/index')">
                  充值
               </view>
               </view> -->
            </view>
            <view class="box1-bg box1-three">
            <view class="box1-bg box1-three" @click="toScan()">
               <image src="../../static/images/index/icon23.png" alt=""></image>
               <view>扫码取水</view>
            </view>
@@ -126,29 +274,29 @@
            <view class="box2-title"><text>功能列表</text></view>
            <view class="box2-content">
               <block v-for="(item,index) in functionList" :key="index">
                  <view class="box2-item"  @click="navTo(item.url)">
                     <image :src= "item.icon" alt=""></image>
                  <view class="box2-item"  @click="setEvent(item.isUrl,item.url)">
                     <view class="box2-item-img" :style="{background:item.bgColor}"><image :src= "item.icon" alt=""></image></view>
                     <view class="box2-item-text">{{item.text}}</view>
                  </view>
               </block>
            </view>
         </view>
         <view class="advertisement-box"><image src="../../static/images/index/bg4.png" alt=""></image></view>
         <view class="advertisement-box" @click="upGrade"><image src="../../static/images/index/bg4.png" alt=""></image></view>
         <view class="service-box">
            <view class="service-title"><text>服务指南</text></view>
            <view class="service-content">
               <view class="service-bg">
               <view class="service-bg" @click="navTo('/pages/station/index')">
                  <view>
                     <image src="../../static/images/index/icon51.png" alt=""></image>
                     <text>附近站点</text>
                  </view>
                  <view class="service-info">蔡家供水服务中心正在营业中……</view>
                  <view class="service-info">服务中心正在营业中……</view>
                  <view>
                     <text>查看更多</text>
                     <image src="../../static/images/index/more-info5.png" alt=""></image>
                  </view>
               </view>
               <view class="service-bg">
               <view class="service-bg" @click="upGrade">
                     <view>
                        <image src="../../static/images/index/notice5.png" alt=""></image>
                        <text>公示公告</text>
@@ -162,24 +310,6 @@
            </view>
         </view>
      </view>
		
      <!-- 微信授权弹窗 -->
      <!-- <uni-popup ref="popupRef" background-color="#fff">
         <view class="popup-content">
            <text class="popup-title">微信登录</text>
            <view class="hr"></view>
            <view class="img-box"><img src="../../static/images/login/logo.png" alt="" class="img"/></view>
            <view class="info-box">
               <view class="info-text1">青源直饮水平台申请获取以下权限:</view>
               <view class="hr2"></view>
               <view class="info-text2">· 获得你的公开信息（昵称、头像、地区及性别)</view>
               <view class="button-box">
                  <button  class="button1" @click="popupRef.close('bottom')">取消</button>
                  <button  class="button2" @click="wxLoginFn()">确定</button>
               </view>
            </view>
         </view>
      </uni-popup> -->
   </view>
</template>
<style lang="scss" scoped>
@@ -194,146 +324,142 @@
         .card-box{
            width: 100%;
            height: auto;
            // background: #a0b5c7;
            box-sizing: border-box;
            padding: 0 32rpx;
            background: linear-gradient(to bottom,#5EA1FA,#D2F2FE);
            .user-info{
               width:100%;
               height:100rpx;
               // background: #06BF5E;
               display: flex;
               align-items: center;
               padding-left:15rpx;
               box-sizing: border-box;
               margin-bottom: 14rpx;
               display:flex;
               position:relative;
               .user-img{
                  width:90rpx;
                  height:90rpx;
                  margin-right:20rpx;
               }
               text{
                  margin-right:20rpx;
                  color: #fff;
               }
               .user-more{
                  width: 12rpx;
                  height: 28rpx;
               }
               .user-add-card{
                  display:flex;
                  align-items:center;
                  height:40rpx;
                  font-size:22rpx;
                  background:linear-gradient(to right,#B1D9FD,#65A7FD);
                  border-radius:50rpx;
                  padding: 0 8rpx;
                  position: absolute;
                  bottom:0;
                  right:0;
                  image{
                     width:28rpx;
                     height:28rpx;
                     margin-right:10rpx;
                  }
               }
            }
            .card{
               width: 100%;
               height: 304rpx;
               background-image: url("../../static/images/index/card1.png");
               background-repeat: no-repeat;
               background-size: 100%;
               height: 290rpx;
               position:relative;
               .card-bg{
                  height:290rpx;
                  width:100%;
                  top:0;
                  position: absolute;
                  z-index:1;
               }
               .share-card{
                  position:absolute;
                  top:16rpx;
                  left:28rpx;
                  z-index:100;
                  font-weight:400;
                  font-size: 36rpx;
                  color: #FFFFFF;
               }
               .card-content{
                  width: 100%;
                  height: 100%;
                  box-sizing: border-box;
                  // background: #AFD5FF;
                  padding: 14rpx 42rpx 64rpx 22rpx;
                  .card-title{
                     width:100%;
                     height:64rpx;
                  padding:20rpx 15rpx;
                  display: flex;
                  justify-content:space-between;
                  font-weight: 300;
                  font-size: 30rpx;
                  color: #FFFFFF;
                  z-index:100;
                  .card-left{
                     height:100%;
                     display: flex;
                     justify-content: flex-end;
                     // background: #82fec5;
                     align-items: center;
                     view{
                        font-weight:300;
                        font-size: 36rpx;
                        color: #FFFFFF;
                        letter-spacing:5rpx;
                        text-align: left;
                     }
                     image{
                        width:64rpx;
                        height:64rpx;
                     }
                  }
                  .card-add{
                     width:100%;
                     height:64rpx;
                     display: flex;
                     justify-content: flex-end;
                     align-items: center;
                     view{
                        width: 172rpx;
                        height:38rpx;
                        border-radius:24rpx;
                        background: #fff;
                        display: flex;
                        justify-content:flex-start;
                        align-items:center;
                        image{
                           width:22rpx;
                           height:22rpx;
                           margin-left:15rpx;
                        }
                        text{
                           font-weight: 300;
                           font-size: 20rpx;
                           color: #0088FF;
                           margin-left:15rpx;
                        }
                     }
                  }
                  .card-info{
                     width: 100%;
                     height:100rpx;
                     // background: #8ff6c3;
                     margin-top: 18rpx;
                     display: flex;
                     justify-content: flex-start;
                     align-items: center;
                     .info-head{
                        width: 100rpx;
                        height:100rpx;
                        margin-right: 20rpx;
                        image{
                           width: 100rpx;
                           height:100rpx;
                        }
                     }
                     .info-content{
                        width: 216rpx;//108+86+22
                        height:100rpx;
                        // background: #54dac4;
                     justify-content:space-between;
                     flex-direction:column;
                     align-items:flex-start;
                     z-index:100;
                     .left-top{
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: flex-start;
                        .info-content-top{
                           width: 100%;
                        view:first-child{
                           display: flex;
                           justify-content:space-between;
                           align-items:center;
                           margin-bottom:8rpx;
                           view:first-child{
                              width: 108rpx;
                              height: 50rpx;
                              font-weight: 400;
                           align-items: center;
                           image{
                              width:48rpx;
                              height:48rpx;
                           }
                           text{
                              font-weight:400;
                              font-size: 36rpx;
                              color: #FFFFFF;
                              text-align: left;
                           }
                           view:last-child{
                              width: 86rpx;
                              height: 32rpx;
                              font-weight:300;
                              font-size: 26rpx;
                              color: #FFFFFF;
                              text-align: center;
                              background-image: url('../../static/images/index/vip1.png');
                           .lossed{
                              color:#fff;
                           }
                        }
                        .info-content-bottom{
                           width: 100%;
                           font-weight: 300;
                           font-size: 20rpx;
                           color: #FFFFFF;
                           letter-spacing:5rpx;
                           text-align: left;
                        }
                     }
                     .info-more{
                        width: 12rpx;
                        height: 28rpx;
                        margin-left:274rpx;
                        image{
                           width: 12rpx;
                           height: 28rpx;
                        view:last-child{
                           margin-left:10rpx;
                           font-size: 26rpx;
                           font-weight:500;
                        }
                     }
                  }
                  .card-bottom{
                     margin-top:36rpx;
                     width:100%;
                  .card-right{
                     display: flex;
                     justify-content:space-evenly;
                     font-weight: 300;
                     font-size: 20rpx;
                     color: #D8D8D8;
                     line-height: 0rpx;
                     text-align: center;
                     justify-content: space-between;
                     align-items:flex-end;
                     flex-direction: column;
                     height:100%;
                     z-index:100;
                     .card-right-top{
                        align-items:flex-end;
                        display: flex;
                        justify-content: space-between;
                        flex-direction: column;
                        font-size:34rpx;
                        text:last-child{
                           font-weight:500;
                        }
                     }
                     .card-right-bottom{
                        width:137rpx;
                        height:56rpx;
                        background:linear-gradient(to right,#65A7FD ,#B1D9FD);
                        border-radius:50rpx;
                        text-align: center;
                        line-height: 56rpx;
                        color:#212DDE;
                        font-weight: 400;
                     }
                  }
               }
            }
@@ -341,7 +467,7 @@
         .function-box1{
            width:100%;
            box-sizing:border-box;
            height: 227rpx;
            height: 215rpx;
            padding: 20rpx 32rpx 15rpx;
            // background: rgba(85, 170, 0, 0.1);
            display:flex;
@@ -349,7 +475,7 @@
            align-items:center;
            .box1-bg{
               width:212rpx;
               height:200rpx;
               height:180rpx;
               border-radius:24rpx;
               background: #fff;
               box-shadow:0 0 12rpx 2rpx rgba(13,118,255,0.16);
@@ -370,45 +496,51 @@
               }
            }
            .box1-two{
               box-sizing: border-box;
               padding:25rpx 0 10rpx;
               font-weight: 300;
               font-size: 32rpx;
               color: #000000;
               display: flex;
               flex-direction:column;
               align-items:center;
               justify-content:space-around;
               view:first-child{
                  font-weight: 300;
                  font-size: 24rpx;
                  color: #464646;
                  text-align: center;
                  margin-bottom:10rpx;
               justify-content:space-evenly;
               image{
                  width:96rpx;
                  height: 96rpx;
                  // margin-bottom:20rpx;
               }
               .recharge{
                  text:first-child{
                     font-weight: 500;
                     font-size: 32rpx;
                     color: #000;
                  }
                  text:last-child{
                     font-weight: 300;
                     font-size: 32rpx;
                     color: #2269E5;
                  }
               }
               view:last-child{
                  width: 140rpx;
                  height: 80rpx;
                  font-weight:300;
                  font-size: 24rpx;
                  color: #000141;
                  background-image: url('../../static/images/index/icon22.png');
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 100% 100%;
                  text-align:center;
                  line-height:80rpx;
                  margin-top:10rpx;
               }
               // view:first-child{
               //    font-weight: 300;
               //    font-size: 24rpx;
               //    color: #464646;
               //    text-align: center;
               //    margin-bottom:10rpx;
               // }
               // .recharge{
               //    text:first-child{
               //       font-weight: 500;
               //       font-size: 32rpx;
               //       color: #000;
               //    }
               //    text:last-child{
               //       font-weight: 300;
               //       font-size: 32rpx;
               //       color: #2269E5;
               //    }
               // }
               // view:last-child{
               //    width: 140rpx;
               //    height: 70rpx;
               //    font-weight:300;
               //    font-size: 24rpx;
               //    color: #000141;
               //    background-image: url('../../static/images/index/icon22.png');
               //    background-repeat: no-repeat;
               //    background-position: center;
               //    background-size: 100% 100%;
               //    text-align:center;
               //    line-height:70rpx;
               //    margin-top:10rpx;
               // }
            }
            .box1-three{
               font-weight: 300;
@@ -429,7 +561,7 @@
         .function-box2{
            width:100%;
            box-sizing:border-box;
            height: 443rpx;//374 + 44 + 距离 + 底部padding32
            height: 429rpx;//374 + 44 + 距离 + 底部padding32
            padding:0 32rpx 15rpx;
            // background: rgba(46, 121, 170, 0.5);
            .box2-title{
@@ -445,7 +577,7 @@
               box-sizing: border-box;
               padding:22rpx 35rpx;
               width: 686rpx;
               height:374rpx;
               height:360rpx;
               background: #fff;
               border-radius: 24rpx;
               box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.1);
@@ -460,9 +592,18 @@
                  flex-direction:column;
                  justify-content:space-between;
                  align-items: center;
                  image{
                  .box2-item-img{
                     width: 90rpx;
                     height:90rpx;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     // background: #65A7FD;
                     border-radius:50%;
                     image{
                        width: 48rpx;
                        height:48rpx;
                     }
                  }
                  .box2-item-text{
                     width:100%;