CommunityApp/pagesM/pages/mine_interest.vue

<template>
  <view class="dt-page">
    <image class="hd-bg" src="http://139.9.103.171:1888/img/image/interest_hd.png" mode="widthFix"></image>
    <view class="mn-wrap">
      <view class="level">钻石卡会员</view>
      <view class="progress-wrap">
        <view class="progress-value" :style="'width:'+growingValue+'%'"></view>
      </view>
      <view class="level-info">
        <view class="next-level">下一个等级：铂金卡</view>
        <view class="growing">成长值：{{current}}/{{total}}</view>
      </view>

      <view class="explain-wrap">
        1. 会员可按会员卡等级,享对应等级折扣(钻石卡享9折、铂金卡享9.4折、金卡享9.6折、银卡享9.8折)。\n\n2. 线上线下促销活动。\n\n3. 会员消费享积分(10元积1分)。\n\n1. 会员可按会员卡等级,享对应等级折扣(钻石卡享9折、铂金卡享9.4折、金卡享9.6折、银卡享9.8折)。\n\n2. 线上线下促销活动。\n\n3. 会员消费享积分(10元积1分)。\n\n1. 会员可按会员卡等级,享对应等级折扣(钻石卡享9折、铂金卡享9.4折、金卡享9.6折、银卡享9.8折)。\n\n2. 线上线下促销活动。\n\n3. 会员消费享积分(10元积1分)。\n\n1. 会员可按会员卡等级,享对应等级折扣(钻石卡享9折、铂金卡享9.4折、金卡享9.6折、银卡享9.8折)。\n\n2. 线上线下促销活动。\n\n3. 会员消费享积分(10元积1分)。\n\n1. 会员可按会员卡等级,享对应等级折扣(钻石卡享9折、铂金卡享9.4折、金卡享9.6折、银卡享9.8折)。\n\n2. 线上线下促销活动。\n\n3. 会员消费享积分(10元积1分)。
      </view>
      <view class="explain-fix"></view>
    </view>

  </view>
</template>
<script>
export default {
  data(){
    return {
      current:0,
      total:2000
    }
  },
  computed:{
    growingValue(){
      if(this.total>0){
        return (this.current/this.total).toFixed(2) * 100
      } 
      return 0
    },
  },
  methods:{
    onLoadPage(){
	  wx.hideShareMenu();
      this.current = 1000
    }
  }
}
</script>

<style lang="scss" scoped>
.dt-page{
  position: relative;
  min-height:100vh;
  background-color: #f2f2f2;
  .hd-bg{
    position:absolute;
    top:0;
    left:0;
    width:100vw;  
    height:450upx;
  }
  .mn-wrap{
    position:relative;
    margin:0 auto;
    width:690upx;
    color:#fff;
    z-index:2;
    .level{
      padding:47upx 0 37upx;
      font-size:48upx;
      font-weight:500;
      line-height:1;
      
    }
    .progress-wrap{
      position: relative;
      width:100%;
      height:10upx;
      border-radius:6upx;
      z-index:6;
      .progress-value{
        width:0%;
        height:100%;
        background-color: #fff;
        border-radius:6upx;
        transition:all 1s ease;
      }
    }
    .progress-wrap:before{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:10upx;
      box-sizing: border-box;
      border:1upx solid #fff;
      border-radius:6upx;
      content:'';
    }
    .level-info{
      margin-top:20upx;
      display:flex;
      justify-content: space-between;
      font-size:24upx;
      font-weight:500;
    }

    .explain-wrap{
      margin:40upx 0;
      padding:30upx;
      background-color:#fff;
      color:$dt-text-color;
      border-radius:10upx;
      white-space: pre-wrap;
      line-height:1.5;
    }
    .explain-fix{
      width:100%;
      height: 2rpx;
    }
  }
}
</style>