样式更新

zhaoxing

2023-05-17 d7e647c108f57fc41b89d50ea93e15c60b87b282

 pages/vip/vip.vue

@@ -1,72 +1,70 @@
<template>
   <view style="overflow-x: hidden;">
      <view class="bg">
         <image class="bg-img" src="/static/vip/bg.png" mode=""></image>
      </view>
		
      <view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }">
         <image class="nav-back" src="/static/vip/back.png" mode="" @click="back"></image>
         <text class="nav-title">会员中心</text>
         <view class="nav-space"></view>
      </view>
      
      <view class="info" :style="{marginTop: statusBarHeight + 44 + 'px'}">
         <image class="info-bg" src="/static/vip/info-bg.png" mode=""></image>
			
         <view class="info-content">
            <view class="info-avatar">
               <image style="border-radius: 50%;" class="info-avatar-pic" :src="userInfo.avatar" mode=""></image>
      <view class="box">
		
         <view class="info">
            <image class="info-bg" src="/static/vip/info-bg.png" mode=""></image>
				
            <view class="info-content">
               <view class="info-avatar">
                  <image style="border-radius: 50%;" class="info-avatar-pic" :src="userInfo.avatar" mode=""></image>
               </view>
               <view class="info-name">
                  <text class="info-name">{{ userInfo.nick_name }}</text>
                  <text class="info-level">开通套餐享专属特权</text>
               </view>
            </view>
            <view class="info-name">
               <text class="info-name">{{ userInfo.nick_name }}</text>
               <text class="info-level">开通套餐享专属特权</text>
				
            <view class="info-asset">
               <view class="info-asset-item">
                  <text class="iai-title">当前剩余对话次数</text>
                  <text class="iai-value">{{num}}</text>
               </view>
               <!-- <view class="info-asset-item">
                  <text class="iai-title">金币</text>
                  <text class="iai-value">2563</text>
               </view>
               <view class="info-asset-item">
                  <text class="iai-title">优惠券</text>
                  <text class="iai-value">3</text>
               </view> -->
            </view>
         </view>
         
         <view class="info-asset">
            <view class="info-asset-item">
               <text class="iai-title">当前剩余对话次数</text>
               <text class="iai-value">{{num}}</text>
            </view>
            <!-- <view class="info-asset-item">
               <text class="iai-title">金币</text>
               <text class="iai-value">2563</text>
            </view>
            <view class="info-asset-item">
               <text class="iai-title">优惠券</text>
               <text class="iai-value">3</text>
            </view> -->
         <view class="main-title">
            <text>会员充值</text>
         </view>
      </view>
		
      <view class="main-title">
         <text>会员充值</text>
      </view>
		
      <scroll-view scroll-x>
         <view class="recharge">
            <view class="recharge-item" :class="current == index ? 'recharge-item-active': ''" v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '30rpx': ''}" @click="rechargeChange(index)">
               <view class="recharge-tag" >
                  <text class="recharge-tag-text"> {{item.type == 1 ? '按次计费' : '按时计费'}} </text>
         <scroll-view scroll-x>
            <view class="recharge">
               <view class="recharge-item" :class="current == index ? 'recharge-item-active': ''" v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '0rpx': ''}" @click="rechargeChange(index)">
                  <view class="recharge-tag" >
                     <text class="recharge-tag-text"> {{item.type == 1 ? '按次计费' : '按时计费'}} </text>
                  </view>
                  <text class="recharge-item-duration">{{ item.title }}</text>
                  <view class="recharge-item-price">
                     <text class="rmb">￥</text>
                     <text class="recharge-item-price-text">{{ item.price }}</text>
                  </view>
                  <text v-if="item.type == 1" class="recharge-item-des">{{ '内含'+item.num+'次对话'}}</text>
                  <text v-else class="recharge-item-des"> 无限次对话 </text>
                  <text v-if="item.type == 1 && item.days != 0" class="recharge-item-des">{{ item.days+'天内有效'}}</text>
                  <text style="text-decoration: line-through;font-size: 30rpx;" class="recharge-item-des">{{ item.origin_price }}</text>
               </view>
               <text class="recharge-item-duration">{{ item.title }}</text>
               <view class="recharge-item-price">
                  <text class="rmb">￥</text>
                  <text class="recharge-item-price-text">{{ item.price }}</text>
               </view>
               <text v-if="item.type == 1" class="recharge-item-des">{{ '内含'+item.num+'次对话'}}</text>
               <text v-else class="recharge-item-des"> 无限次对话 </text>
               <text v-if="item.type == 1 && item.days != 0" class="recharge-item-des">{{ item.days+'天内有效'}}</text>
               <text style="text-decoration: line-through;font-size: 30rpx;" class="recharge-item-des">{{ item.origin_price }}</text>
            </view>
         </scroll-view>
         <view class="button update" hover-class="hover" @click="updateNow">
            <text class="button-text">立即支付</text>
         </view>
      </scroll-view>
      
      <view class="button update" hover-class="hover" @click="updateNow">
         <text class="button-text">立即升级</text>
		
      </view>
		
      <text class="tip">专属AI 1秒响应</text>
      <!-- <text class="tip">专属AI 1秒响应</text>
      
      <view class="main-title">
         <text>会员特权</text>
@@ -77,7 +75,7 @@
            <image class="privilege-item-pic" :src="item.pic" mode=""></image>
            <text class="privilege-item-text">{{ item.text }}</text>
         </view>
      </view>
      </view> -->
   </view>
</template>

@@ -217,11 +215,17 @@
   }
</script>

<style scoped>
   page {
     background: #30324f;
   }
</style>
<style lang="scss">
   .main-title {
      padding: 30rpx 30rpx;
      font-size: 34rpx;
      color: #1C1C1C;
      padding: 32rpx 0 0;
      font-size: 36rpx;
      font-weight: 600;
      color: #30324f;
   }
   
   .tip {
@@ -234,22 +238,17 @@
   }
   
   .rmb {
      font-size: 26rpx;
      color: #E3BE83;
      font-size: 24rpx;
      font-weight: 600;
   }
   
   .bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 400rpx;
      z-index: -2;
		
      &-img {
         width: 100%;
         height: 100%;
      }
   .box {
      border: 2rpx solid #fff;
      background: url('@/static/vip/card_bg.jpg') #E9EEFA no-repeat;
      background-size: 100% auto;
      margin: 120rpx 32rpx 32rpx;
      padding: 32rpx;
      border-radius: 24rpx;
   }
   
   .hover {
@@ -265,8 +264,6 @@
      width: 750rpx;
      height: 44px;
      padding: 0 30rpx;
      background-image: url('~@/static/vip/nav-bg.png');
      background-size: 100%;
      z-index: 99;
      
      &-back {
@@ -275,8 +272,8 @@
      }
      
      &-title {
         color: #FFFFFF;
         font-size: 42rpx;
         color: #fff;
         font-size: 40rpx;
      }
      
      &-space {
@@ -287,33 +284,29 @@
   
   .info {
      position: relative;
      padding: 0 15rpx;
      width: 730rpx;
      height: 360rpx;
      
      &-bg {
         position: absolute;
         width: 730rpx;
         height: 360rpx;
         width: 100%;
         z-index: -1;
      }
      
      &-content {
         padding: 70rpx 50rpx 0 50rpx;
         margin-bottom: 50rpx;
         margin-bottom: 48rpx;
         display: flex;
         flex-direction: row;
         align-items: center;
      }
      
      &-avatar {
         margin-right: 30rpx;
         margin-right: 20rpx;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         width: 85rpx;
         height: 85rpx;
         width: 84rpx;
         height: 84rpx;
         background-color: #fff;
         padding: 1rpx;
         border-radius: 50%;
@@ -327,17 +320,19 @@
      &-name {
         display: flex;
         flex-direction: column;
         color: #FFFFFF;
         font-size: 35rpx;
         color: #30324f;
         font-size: 32rpx;
         font-weight: 600;
      }
      
      &-level {
         margin-top: 15rpx;
         font-size: 24rpx;
         font-size: 32rpx;
         font-weight: 600;
      }
      
      &-asset {
         padding: 0 50rpx;
         padding: 0 8rpx;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -351,37 +346,36 @@
   
   .iai {
      &-title {
         margin-bottom: 20rpx;
         margin-right: 100rpx;
         font-size: 24rpx;
         color: #CFB386;
         font-size: 28rpx;
         font-weight: 600;
         color: #30324f;
      }
      
      &-value {
         font-size: 35rpx;
         color: #FFFFFF;
         font-size: 36rpx;
         color: #30324f;
      }
   }
   
   .recharge {
      position: relative;
      margin-bottom: 35rpx;
      margin: 36rpx 0 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      
      &-tag {
         position: absolute;
         top: -2rpx;
         top: -24rpx;
         left: -2rpx;
         width: 170rpx;
         height: 36rpx;
         padding: 0 24rpx;
         height: 48rpx;
         border-radius: 100rpx 100rpx 100rpx 0;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         background-image: url('~@/static/vip/tag.png');
         background-size: 100%;
         background: #4D63E4;
         
         &-text {
            font-size: 20rpx;
@@ -393,25 +387,28 @@
      &-item {
         position: relative;
         padding: 40rpx 0;
         margin-left: 15rpx;
         width: 200rpx;
         width: 220rpx;
         height: 230rpx;
         flex-shrink: 0;
         margin-right: 24rpx;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: solid 2rpx #F2F2F3;
         border-radius: 12rpx;
         background: #fff;
         border: 2rpx solid #fff;
         border-radius: 24rpx;
         color: #62491B;
         
         &-active {
            border-color: #EDD2A9;
            background-color: #FBF1E5;
            color: #364089;
            border-color: #C5C9F7;
            background-image: linear-gradient(to right, #F0F2FF, #DBDCFE);
         }
         
         &-duration {
            margin-bottom: 30rpx;
            font-size: 26rpx;
            color: #1C1C1C;
            margin-bottom: 12rpx;
            font-size: 32rpx;
            font-weight: 600;
         }
         
         &-price {
@@ -422,13 +419,12 @@
            
            &-text {
               font-size: 48rpx;
               color: #E3BE83;
               font-weight: 900;
            }
         }
         
         &-des {
            font-size: 22rpx;
            color: #A5A3A2;
         }
      }
   }
@@ -439,17 +435,17 @@
      align-items: center;
      justify-content: center;
      height: 85rpx;
      border-radius: 50rpx;
      background-image: linear-gradient(#EFCF9E, #E4BF85);
      border-radius: 24rpx;
      background: #302cd9;
      
      &-text {
         font-size: 30rpx;
         color: #1C1C1C;
         color: #fff;
      }
   }
   
   .update {
      margin: 35rpx 30rpx 20rpx 30rpx;
      margin-top: 36rpx;
   }
   
   .privilege {