UI: 澜品优选权益+权收背景图

lin

2026-04-27 e4793c64386ac9313a7471a65dd8605328aa0690

 pages/quanshou/index.vue

@@ -1,46 +1,51 @@
<script>

import tehuichongzhi from "@/pages/quanshou/components/tehuichongzhi.vue";  //虚拟
import lanyaerji from "@/pages/quanshou/components/lanyaerji.vue"; // 实物
import xianlianghaojjuab from "@/pages/quanshou/components/xianlianghaojjuab.vue";
import tehuichongzhi from "@/pages/quanshou/components/tehuichongzhi.vue";
import lanyaerji from "@/pages/quanshou/components/lanyaerji.vue";
import list from "@/pages/quanshou/components/list.vue";
import heijing from "@/pages/quanshou/components/heijing.vue";

export default {
  name: "index",
  components: {
    xianlianghaojjuab,
    tehuichongzhi,
    lanyaerji,
    list,
    heijing
  },
  data() {
    return {
      tips:'',
      active: 0,
      VIP: 1, // 1黄金 2铂金 3黑金
      VIP: 2, // 1黄金 2铂金 3黑金
      lst:[],
      vipConfig: {
        1: {
          bg: "/static/imgs/quanshou/TBBG1.png",
          box: "/static/imgs/quanshou/NEWBOX1.png",
          title: "/static/imgs/quanshou/VIPTXT1.png",
          level: "/static/imgs/quanshou/VIP1.png",
          bg: "/static/img/quanshou/TBBG1.png",
          box: "/static/img/quanshou/VIPBOX1.png",
          title: "/static/img/quanshou/VIPTXT1.png",
          level: "/static/img/quanshou/VIPLVL1.png",
          textClass: "vip1-text",
          progressBg: "#BBA767",
          growText: " 88800/100000",
          benefitText: "297.00"
        },
        2: {
          bg: "/static/imgs/quanshou/TBBG2.png",
          box: "/static/imgs/quanshou/NEWBOX2.png",
          title: "/static/imgs/quanshou/VIPTXT2.png",
          level: "/static/imgs/quanshou/VIP2.png",
          bg: "/static/img/quanshou/TBBG2.png",
          box: "/static/img/quanshou/VIPBOX2.png",
          title: "/static/img/quanshou/VIPTXT2.png",
          level: "/static/img/quanshou/VIPLVL2.png",
          textClass: "vip2-text",
          progressBg: "#8094A6",
          growText: " 88800/100000",
          benefitText: "594.00"
        },
        3: {
          bg: "/static/imgs/quanshou/TBBG3.png",
          box: "/static/imgs/quanshou/VIPBOX3.png",
          title: "/static/imgs/quanshou/VIPTXT3.png",
          level: "/static/imgs/quanshou/VIPLVL3.png",
          bg: "/static/img/quanshou/TBBG3.png",
          box: "/static/img/quanshou/VIPBOX3.png",
          title: "/static/img/quanshou/VIPTXT3.png",
          level: "/static/img/quanshou/VIPLVL3.png",
          textClass: "vip3-text",
          progressBg: "#7B776E",
          growText: " 88800/100000",
@@ -48,6 +53,7 @@
        }
      },
      total: 0,
      isAgree: 0,
    };
  },
  computed: {
@@ -58,12 +64,9 @@
  onLoad(pro) {

    const _this = this;
    this.isAgree = uni.getStorageSync('boughtEquity')
    uni.request({
      url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+_this.$util.getUserInfo().phone,
      data:{
        customerId: uni.getStorageSync('qxgLogin').customerId,
        appId: uni.getStorageSync('qxgLogin').appId
      },
      url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+_this.$util.getUserInfo().phone+'&appId='+'47be9559-6b1b-42dd-84ed-25d028065013',
      success: function (res) {
        if(res.data.code==200){
          _this.lst = res.data.data;
@@ -76,6 +79,7 @@
              _this.total += parseFloat(item.amount);
            }
          })
          console.log('_this.lst',_this.lst)
          _this.total = Intl.NumberFormat('zh-CN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
@@ -88,6 +92,12 @@
    })
  },
  methods: {
    goHome(){
      // uni.switchTab({
      //   url: '/pages/user/index'
      // });
      uni.navigateBack()
    },
    numbs(period) {
      const obj ={
        1:'一',
@@ -100,23 +110,21 @@
      const _this = this;
      uni.request({
        url: _this.$webHost+'/api/v2/memberEquity/getUrlByShop/'+_this.$util.getUserInfo().phone,
        data:{
          customerId: uni.getStorageSync('qxgLogin').customerId,
          appId: uni.getStorageSync('qxgLogin').appId
        },
        success: function (res) {
          if(res.data.code==200){
            uni.request( {
              url: _this.$webHost+'/api/v2/memberEquity/clickUrlByShop/'+_this.$util.getUserInfo().phone,
            })
            uni.navigateTo( {
              url: '/pages/web/index?webUel=' + encodeURIComponent(res.data.data.url)
              url: '/pages/users/web_page/index?webUel=' + encodeURIComponent(res.data.data.url)
            })
          } else {
            uni.showToast( {
              title: res.data.data || res.data.msg,
              icon: 'none'
            })
            _this.tips = res.data.data || res.data.msg;
            _this.$refs.life.open()
            // uni.showToast( {
            //   title: res.data.data || res.data.msg,
            //   icon: 'none'
            // })
          }
        }
      })
@@ -127,10 +135,6 @@
      const _this = this;
      uni.request({
        url: _this.$webHost+'/api/v2/shop/findExpressNo?phone='+_this.$util.getUserInfo().phone,
        data:{
          customerId: uni.getStorageSync('qxgLogin').customerId,
          appId: uni.getStorageSync('qxgLogin').appId
        },
        success: function (res) {
          if(res.data.code==200){
            _this.tips = res.data.data;
@@ -150,68 +154,200 @@
</script>

<template>
  <view style="background: white;">
  <view style="background: url('/static/img/qsBg.png') no-repeat top center; background-size: 100%;background-color: #fff;height: 100%;">
    <!-- 顶部 VIP 卡片 -->
    <view class="vip-box"   :style="{ backgroundImage: `url(${currentVip.box})` }" >
       <view style="position: relative">
         <image :src="currentVip.level" style="height: 200rpx;width: 100%;"></image>
         <view style="position: absolute;top: 120rpx;left: 48rpx;color: #754200;font-size: 28rpx;"  :class="VIP==1?'vip1-num':'vip2-num'">已购会员{{ total }}</view>
       </view>
      <view class="card-wrap" style="margin-top: 38rpx;">
        <view class="card-item" v-for="i in lst" :class="i.isBuy?'card-item-buy':''">
<!--          <view class="card-title">{{numbs(i.period)}}期会员</view>-->
          <view class="card-title">{{i.buyDate}}</view>
          <view class="card-price">
            <text>¥</text>
            <text class="card-num" >{{ i.amount }}</text>
<!--    <view-->
<!--        class="vip-bg"-->
<!--        :style="{ backgroundImage: `url(${currentVip.bg})` }"-->
<!--    >-->
<!--      <view-->
<!--          class="vip-box"-->
<!--          :style="{ backgroundImage: `url(${currentVip.box})` }"-->
<!--      >-->
<!--        <view>-->
<!--          <image :src="currentVip.title" style="width: 160rpx;height: 45rpx;" />-->
<!--        </view>-->

<!--        <view class="gradient-text big-text" :class="currentVip.textClass">-->
<!--          成长值  {{ currentVip.growText }}-->
<!--        </view>-->

<!--        <view-->
<!--            class="progress-bar"-->
<!--            :style="{ background: currentVip.progressBg }"-->
<!--        >-->
<!--          <view class="progress-inner" v-if="VIP==1" style="width: 29.7%"/>-->
<!--          <view class="progress-inner" v-if="VIP==2" style="width: 59.4%"/>-->
<!--          <view class="progress-inner" v-if="VIP==3" style="width: 89.1%"/>-->
<!--        </view>-->

<!--        <view class="gradient-text small-text" :class="currentVip.textClass">-->
<!--          已购会员{{ total }}-->
<!--        </view>-->

<!--        <image-->
<!--            :src="currentVip.level"-->
<!--            style="width: 210rpx;height: 210rpx;position: absolute;top: -70rpx;right: 0;"-->
<!--        />-->
<!--      </view>-->
<!--    </view>-->
    <!--  新版  -->
    <view style="padding-bottom: 200rpx;">
      <!--   返回   -->
      <view class="head" style="position: relative;height: 90rpx;padding:0 30rpx;">
        <view style="display: flex;justify-content: flex-start;position: absolute;left: 0;top: 15rpx;padding-left: 30rpx;z-index: 9;color: #FFFFFF;">
          <view  @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back arrow-left" style="margin-top: 80rpx;">
         <uv-icon name="arrow-left" color="#ffffff" size="22"></uv-icon>
  <!--          <view  @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back icon-shouye4" :style="{ height:  '80rpx',lineHeight:  '80rpx'}" >-->
          </view>
          <view class="card-date" style="height: 40rpx"> </view>
          <!--          <view class="card-date">{{ i.buyDate }}</view>-->
          <view class="has-buy">{{ i.isBuy?'已扣款' : '待扣款' }}</view>
        </view>
      </view>
      <!--   尊享会员年卡   -->
      <view style="background: url('/static/img/qsBg3.png') no-repeat top center; background-size: 100%;width: 690rpx;height: 388rpx;margin: 0 auto;margin-bottom: 40rpx;margin-top: 35rpx;">
        <view style="padding: 40rpx;padding-top: 220rpx;">
<!--          <view style="font-size: 44rpx;font-weight: bold;background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">尊享会员年卡</view>-->
<!--          <view style="font-size: 28rpx;font-weight: 400;background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">会员预计最高节省1359.27元</view>-->
          <view style="display: flex;margin-top: 30rpx;align-items: self-end;">
            <view v-if="lst.length" style="font-size: 24rpx;width: 70%;">
              <p style="font-size: 36rpx;color: #253567;font-weight: bold;">¥{{lst[0].amount.toFixed(2)}} 99<span style="font-size: 28rpx;margin-left: 20rpx;">{{lst[0].isBuy?'已扣款' : '待扣款'}}</span></p>
<!--              <p style="font-size: 48rpx;color: #253567;font-weight: bold;">¥99.00<span style="font-size: 28rpx;margin-left: 20rpx;">已扣款</span></p>-->
<!--              <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">{{lst[0].buyDate}}</p>-->
            </view>
            <view v-if="lst.length" style="width: 164rpx;height: 58rpx;text-align: center;line-height: 58rpx;margin-top: 40rpx;display: flex;justify-content: center;align-items: center;">
              <p style="color: #253567;font-size: 28rpx;">{{lst[0].buyDate}}</p>
<!--              <p style="color: #253567;font-size: 28rpx;">2026-02-03</p>-->
            </view>
          </view>
        </view>
      </view>
      <!--   专享会员生活权益   -->
      <view style="padding: 0 30rpx; background-color: #FFFFFF;padding-top: 3rpx;border-top-left-radius: 50rpx;border-top-right-radius: 50rpx;">
        <view class="content-title" style="text-align: center;margin-top: 50rpx;margin-bottom: 40rpx;">
<!--          <image style="width: 111rpx;height: 8rpx;" src="/static/img/qsLeft.png"></image>-->
          <view style="font-size: 36rpx;color: #333333;margin: 0 20rpx;">
            <span class="content-title-item">虚拟权益</span>
          </view>
          <view style="color: #666666;font-size: 24rpx;">专享权益以实际兑换页面为准</view>
<!--          <image style="width: 111rpx;height: 8rpx;" src="/static/img/qsRight.png"></image>-->
        </view>
        <view class="life" style="background: url('/static/img/qsLife.png') no-repeat top center; background-size: 100%;width: 100%;height: 500rpx;">

        </view>
        <view class="life" style="background: url('/static/img/qsLife2.png') no-repeat top center; background-size: 100%;width: 100%;height: 700rpx;margin-top: 40rpx;">

        </view>
<!--        <view style="width: 690rpx;margin-top: 40rpx;text-align: center;">-->
<!--          <button @click="toHuiyuan" style="height: 100rpx;padding: 25rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">兑换生活权益</button>-->
<!--          <view style="color: #FFFFFF;font-size: 24rpx;padding-top: 20rpx;padding-bottom: 10rpx;">以上权益仅为预览展示，实际以兑换页面为准</view>-->
<!--        </view>-->
        <view class="content-title" style="text-align: center;margin-top: 50rpx;margin-bottom: 40rpx;">
<!--          <image style="width: 111rpx;height: 8rpx;" src="/static/img/qsLeft.png"></image>-->
          <view style="font-size: 36rpx;color: #333333;margin: 0 20rpx;">
            <span class="content-title-item">实物权益</span>
          </view>
          <view style="color: #666666;font-size: 24rpx;">专享权益以实际兑换页面为准</view>
<!--          <image style="width: 111rpx;height: 8rpx;" src="/static/img/qsRight.png"></image>-->
        </view>
        <view class="physical" style="background: url('/static/img/qsPhysical.png') no-repeat top center; background-size: 100%;width: 100%;height: 982rpx;">

        </view>
<!--        <view style="width: 690rpx;margin-top: 40rpx;text-align: center;">-->
<!--          <button @click="getTips" style="height: 100rpx;padding: 25rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">查询实物权益</button>-->
<!--          <view style="color: #FFFFFF;font-size: 24rpx;padding-top: 20rpx;padding-bottom: 40rpx;">以上权益仅为预览展示，实际以商城发出为准</view>-->
<!--        </view>-->
      </view>
      <view style="width: 690rpx;display: flex;gap: 20rpx;position: fixed;bottom: 40rpx;left: 30rpx;z-index: 5;">
        <button @click="toHuiyuan" style="width:50%;height: 100rpx;line-height: 100rpx;color: #ffffff;border-radius: 50rpx;font-size: 34rpx;background-color: #CD8319">虚拟权益</button>
        <button @click="getTips" style="width:50%;height: 100rpx;line-height: 100rpx;color: #ffffff;border-radius: 50rpx;font-size: 34rpx;background-color: #4766FE">实物权益</button>
      </view>
    </view>

    <!-- 会员购买 + 权益部分 -->
    <view class="content-wrap">
<!--    <view class="content-wrap">-->
<!--      <view class="card-wrap">-->
<!--        <view class="card-item" v-for="i in lst">-->
<!--          <view class="card-title">{{numbs(i.period)}}期会员</view>-->
<!--          <view class="card-price">-->
<!--            <text>¥</text>-->
<!--            <text class="card-num">{{ i.amount }}</text>-->
<!--            <text>/{{i.dateType}}</text>-->
<!--          </view>-->
<!--          <view class="card-date">{{ i.buyDate }}</view>-->
<!--          <view class="has-buy">{{ i.isBuy?'已扣款' : '待扣款' }}</view>-->
<!--        </view>-->
<!--      </view>-->

<!--      <view class="tab-wrap">-->
<!--        <text @click="active=0" :class="active==0?'active':''">实物权益</text>-->
<!--        <text @click="active=1" :class="active==1?'active':''">虚拟权益</text>-->
<!--      </view>-->

      <view class="tab-wrap">
        <text @click="active=0" :class="active==0?'active':''">实物权益</text>
        <text @click="active=1" :class="active==1?'active':''">虚拟权益</text>
      </view>
<!--      <view class="note" style="margin-bottom: 20rpx;" v-if="active==0">页面展示为实物样例，实际以用户收到的商品为准</view>-->

      <view class="note" style="margin-bottom: 20rpx;text-align: center" v-if="active==0">页面展示为实物样例，实际以用户收到的商品为准</view>
<!--      <lanyaerji v-if="active==0" />-->

      <lanyaerji v-if="active==0" style="margin:0 30rpx;"/>
<!--      <template v-else>-->
<!--        <xianlianghaojjuab v-show="VIP==1" />-->
<!--        <tehuichongzhi v-show="VIP==1" style="margin-top: 50rpx;" />-->
<!--        <list v-show="VIP==2" style="margin-top: 10rpx;" />-->
<!--        <heijing v-show="VIP==3" style="margin-top: 10rpx;" />-->
<!--      </template>-->

      <tehuichongzhi v-else :VIP="VIP"  style="margin-top: 50rpx;" />

      <view style="text-align: center;margin: 30rpx;">
        <button class="exchange-btn" v-if="active==0" @click="getTips">我要查物流</button>
        <button class="exchange-btn"  v-else  @click="toHuiyuan">我要兑换</button>
        <view class="note" v-if="active==0">* 页面为实物样例，实际用户收到的商品为准</view>
        <view class="note" v-else>* 页面为虚拟权益预览，实际用户以当日兑换内容为准</view>
      </view>
    </view>
<!--      <view style="margin-top: 30rpx;text-align: center">-->
<!--        <button class="exchange-btn" v-if="active==0" @click="getTips">查询物流单号</button>-->
<!--        <button class="exchange-btn"  v-else  @click="toHuiyuan">兑换我的虚拟权益</button>-->
<!--        <view class="note" v-if="active==0"></view>-->
<!--        <view class="note" v-else>* 虚拟权益以实际兑换为准</view>-->
<!--      </view>-->
<!--    </view>-->


    <uni-popup type="center" ref="comment" >
      <view style="background-image: url('/static/imgs/BOXSDF.png');border-radius: 48rpx;padding: 28rpx ;width: 650rpx;background-repeat: no-repeat;background-size: 100% 100%">
        <view style="text-align: center;padding-top: 30rpx;" >
          <image src="/static/imgs/yifa.png" style="width:372rpx;height: 240rpx;"></image>
      <view style="position: relative;border-radius: 48rpx;padding: 28rpx 0;width: 538rpx;background: #FFFFFF;padding-top: 0;background: url('/static/img/qsTipsBg.png') no-repeat left center; background-size: 100%;height: 612rpx;">
        <view style="width: 100%;height: 200rpx;border-radius: 48rpx;">
          <view style="text-align: center;padding-top: 30rpx;" >
            <image src="/static/img/yifa.png" style="width: 560rpx;height: 252rpx;"></image>
          </view>
        </view>
        <view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 34rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
        <view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 84rpx;margin-bottom: 40rpx;padding: 0 28rpx;">
          <view>{{ tips }}</view>
        </view>
        <view @click="$refs.comment.close()" style="font-weight: 500;font-size: 32rpx;color: #fff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background: #FF1472;border-radius: 40rpx ;">好的</view>
        <view @click="$refs.comment.close()" style="position: absolute;width: 400rpx;bottom: 80rpx;left: 41rpx;font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #4766FE;border-radius: 56rpx">好的</view>
      </view>
    </uni-popup>

    <uni-popup type="center" ref="life" >
      <view style="position: relative;border-radius: 48rpx;padding: 28rpx 0;width: 538rpx;background: #FFFFFF;padding-top: 0;background: url('/static/img/qsTipsBg.png') no-repeat left center; background-size: 100%;height: 612rpx;">
        <view style="width: 100%;height: 200rpx;border-radius: 48rpx;">
          <view style="text-align: center;padding-top: 30rpx;">
            <image src="/static/img/qsLifeIcon.png" style="width: 560rpx;height: 252rpx;"></image>
          </view>
        </view>
        <view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 84rpx;margin-bottom: 40rpx;padding: 0 28rpx;">
          <view>{{ tips }}</view>
        </view>
        <view @click="$refs.life.close()" style="position: absolute;width: 400rpx;bottom: 80rpx;left: 41rpx;font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #4766FE;border-radius: 56rpx;">好的</view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">

.content-title-item {
  position: relative;
  z-index: 2;
}
.content-title-item::after {
  content: '';
  position: absolute;
  left: -5rpx;
  z-index: -1;
  bottom: 6rpx; /* 根据需要调整距离 */
  width: calc(100% + 10rpx); /* 与标题宽度相同 */
  height: 10rpx; /* 边框厚度 */
  border-radius: 10rpx;
  background: linear-gradient(90deg, #9DB7FF, #6584DB)
}
/* 顶部 VIP 样式 */
.vip-bg {
  background-size: 100%;
@@ -220,7 +356,12 @@
  padding-bottom: 150rpx;
}
.vip-box {
  background-repeat: no-repeat;padding:20rpx 30rpx 60rpx 30rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 280rpx;
  margin: 0 30rpx;
  padding: 35rpx;
  position: relative;
}
.gradient-text {
  -webkit-background-clip: text;
@@ -269,11 +410,11 @@

/* 内容区 */
.content-wrap {
  padding: 30rpx 0;
  background: #fff;
  border-radius: 50rpx 50rpx 0 0;
  padding: 30rpx;
  background: #F4F4F4;
  border-radius: 24rpx 24rpx 0 0;
  position: relative;
  top: -60rpx;
  top: -100rpx;
}
.card-wrap {
  display: flex;
@@ -281,12 +422,12 @@
  margin-bottom: 40rpx;
}
.card-item {
  background: #f5f5f5;
  background: #fff;
  border-radius: 24rpx;
  padding-top: 60rpx;
  text-align: center;
  //width: calc(50% - 14rpx);
  width: 100%;
  padding-bottom: 48rpx;
  width: calc(50% - 15rpx);
  position: relative;
}
.card-title {
@@ -305,41 +446,23 @@
  margin: 0 8rpx;
}
.card-date {
  font-size: 24rpx;
  margin-top: 28rpx;
  border-radius: 0rpx 0rpx 24rpx 24rpx;
  background: #fff;
  //background: #EAEAEA;
  color: #666666;
  padding: 16rpx 0;
  font-size: 20rpx;
  color: #666;
  margin-top: 18rpx;
}
.has-buy {
  background: #FF922C;
  border-radius: 8rpx;
  border-radius: 0 24rpx 0 24rpx;
  height: 42rpx;
  width: 92rpx;
  font-size: 24rpx;
  color: #fff;
  position: absolute;
  top: -21rpx;
  left: 28rpx;
  top: 0;
  right: 0;
  line-height: 42rpx;
  display: none;
}
.card-item-buy {
  background: #fff;
}
.card-item-buy{
  .card-date{
    //background: #FF922C;
    background: #fff;
    color: white;
  }
  .has-buy{
    display: block;
  }

}
/* tab */
.tab-wrap {
  display: flex;
@@ -359,7 +482,7 @@
    display: block;
    width: 50rpx;
    height: 8rpx;
    background: linear-gradient( 91deg, #FDFAFF 0%, #F9C969 100%);
    background: linear-gradient(271deg, #FFE4A1 0%, #FFC57A 51%, #FFE1B9 100%);
    border-radius: 32rpx;
    position: absolute;
    bottom: -20rpx;
@@ -372,16 +495,13 @@
  font-weight: 600;
  font-size: 36rpx;
  color: #FFD39A;
  padding: 10rpx;
  background: linear-gradient( 91deg, #A97132 0%, #542C09 100%);
  padding: 26rpx;
  background: linear-gradient(271deg, #2A1601 0%, #3B2106 51%);
  border-radius: 200rpx;
}
.note {
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}
.vip2-num{
  color: #8E1768 !important;
}
</style>