Liuyi
2024-11-27 98a835cc45adbe5ef8ee3cca5ad478f7df673b80
pages/index/index.vue
@@ -19,6 +19,7 @@
      userName:'微信用户',
      headImg:'',
      userPhone:'',
      integral:'',
      
      waterCardNumber:'',
      balance:'',
@@ -60,6 +61,7 @@
         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.integral = res.data.userInfo.integral
            // showHeadImg.value = BASE_URL + '/upload' + cardInfo.value.headImg
            cardInfo.value.userPhone = res.data.userInfo.userPhone
            cardInfo.value.id = res.data.userInfo.id
@@ -338,7 +340,7 @@
            </view>
         </view>
         <view class="function-box1">
            <view class="box1-bg box1-one" @click="upGrade">
            <view class="box1-bg box1-one" @click="navTo('/pages/preSendWater/index')">
               <image src="../../static/images/index/home21.png" alt=""></image>
               <view>送水到家</view>
            </view>
@@ -363,10 +365,19 @@
            </view>
         </view>
         <!-- 积分商城 -->
         <view class="advertisement-box" @click="navTo('/pages/pointsMall/index')">
         <!-- <view class="advertisement-box" @click="upGrade"> -->
            <image src="../../static/images/index/banner2.png" alt=""></image>
            <image src="../../static/images/index/banner1.png" alt=""></image>
         <view class="advertisement-box" @click="navTo('/pagesPoints/pointsMall/index')">
            <view class="point-advert">
               <view class="advert-image">
                  <image  class="image-icon3" src="../../static/images/index/advert-icon3.svg"></image>
                  <image class="image-icon1" src="../../static/images/index/advert-icon1.svg"></image>
                  <image  class="image-icon2" src="../../static/images/index/advert-icon2.svg"></image>
                  <image  class="image-icon4" src="../../static/images/index/advert-icon4.svg"></image>
               </view>
               <view class="advert-title">
                  <view class="advert-title1">积分商城</view>
                  <view class="advert-title2"><text>点击进入</text></view>
               </view>
            </view>
         </view>
         <view class="service-box">
            <view class="service-title"><text>服务指南</text></view>
@@ -709,11 +720,81 @@
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            image{
               width:320rpx;
            .point-advert{
               width:640rpx;
               height:136rpx;
               border-radius:10rpx;
               background:linear-gradient(140deg,#5c9dff 0%,#b5dcff 30%,#52aafc 70%,#b5dcff 90%,#5daffc 100%);
               display: flex;
               justify-content: space-around;
               align-items: center;
               box-shadow: 0 0 4rpx 2rpx #4978de;
               .advert-title{
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  color: #fff;
                  font-size:46rpx;
                  font-weight:800;
                  text-shadow:4rpx 2rpx #5EA1FA;
                  .advert-title2{
                     margin-top:10rpx;
                     font-size:28rpx;
                     font-weight:500;
                     width:180rpx;
                     height:40rpx;
                     background: #5c9dff;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     border-radius:30rpx;
                     letter-spacing:2rpx;
                  }
               }
               .advert-image{
                  width:200rpx;
                  height:100%;
                  // background: #76bfa1;
                  position: relative;
                  .image-icon1{
                     position:absolute;
                     left: calc(50% - 65rpx);
                     top: calc(50% - 65rpx);
                     width:130rpx;
                     height:130rpx;
                     transform: rotate(20deg);
                  }
                  .image-icon2{
                     position:absolute;
                     left:60%;
                     top: calc(50% - 30rpx);
                     width:90rpx;
                     height:90rpx;
                     transform: rotate(-10deg);
                  }
                  .image-icon3{
                     position:absolute;
                     left: calc(50% - 100rpx);
                     top: 30%;
                     width:80rpx;
                     height:80rpx;
                     transform: rotate(-10deg);
                  }
                  .image-icon4{
                     position:absolute;
                     left:140%;
                     top: 60%;
                     width:50rpx;
                     height:50rpx;
                     transform: rotate(5deg);
                  }
               }
            }
            // image{
            //    width:320rpx;
            //    height:136rpx;
            //    border-radius:10rpx;
            // }
         }
         .service-box{
            width: 100%;