diff --git a/yudao-ui-app/App.vue b/yudao-ui-app/App.vue
index 755454fb3..d1cd86338 100644
--- a/yudao-ui-app/App.vue
+++ b/yudao-ui-app/App.vue
@@ -15,7 +15,9 @@
   import {
     mapActions
   } from 'vuex'
-
+  import {
+    memberGradeInfo
+  } from '@/api/member.js';
   export default {
     globalData: {
       spid: 0,
@@ -27,6 +29,16 @@
       id: 0
     },
     onLaunch: function(option) {
+      const res =  memberGradeInfo().then((res) =>{
+        if(res.data.some((item) => !!!parseInt(item.isExist))){
+          uni.setTabBarItem({
+            index: 2,
+             text: 'text',
+            pagePath: '/pages/member_equity/index'
+          })
+        }
+      })
+
       let that = this;
       // #ifdef H5
       uni.getSystemInfo({
diff --git a/yudao-ui-app/pages.json b/yudao-ui-app/pages.json
index 25c9a715e..dee55e5e6 100644
--- a/yudao-ui-app/pages.json
+++ b/yudao-ui-app/pages.json
@@ -573,7 +573,7 @@
 				"text": "分类"
 			},
       {
-      	"pagePath": "pages/member_record/index",
+      	"pagePath": "pages/member_application/index",
       	"iconPath": "static/images/2-001.png",
       	"selectedIconPath": "static/images/2-002.png",
       	"text": "会员申请"
diff --git a/yudao-ui-app/pages/member_application/index.vue b/yudao-ui-app/pages/member_application/index.vue
index e26a09936..ed40e667e 100644
--- a/yudao-ui-app/pages/member_application/index.vue
+++ b/yudao-ui-app/pages/member_application/index.vue
@@ -1,144 +1,166 @@
 <template>
   <view class="box">
+    <image class="phone-money" src='../../static/images/phoneMoney.png'></image>
     <view class="box-member">
-      <view :class="[activeIndex.includes(index)  && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']" v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
-        <view class="member-image">
-          <image src='../../static/images/f.png'></image>
-        </view>
-        <view class="member-text">
-          <view class="text-title">
-            <text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
-            <view></view>
+      <view class="box-title">
+        <image src='../../static/images/memberTitle.png'></image>
+      </view>
+      <view class="member-list">
+        <view
+          :class="[activeIndex.includes(index)  && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']"
+          v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
+          <view class="member-image">
+            <image src='../../static/images/f.png'></image>
+          </view>
+          <view class="member-text">
+            <view class="text-title">
+              <text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
+              <view></view>
+            </view>
+            <text class="text-content">{{item.gearRemarks}}</text>
           </view>
-          <text class="text-content">{{item.gearRemarks}}</text>
         </view>
       </view>
     </view>
     <view class="box-privilege">
-      <view class="privilege-item" v-for="(item,index) in 4" :key="index">
-        <image src='../../static/images/f.png'></image>
-        <text class="privilege-text">
-          开通立享大额话费返送。
-        </text>
+      <view class="box-title">
+        <image src='../../static/images/memberTitle.png'></image>
+      </view>
+      <view class="privilege-list">
+        <view class="privilege-item" v-for="(item,index) in 4" :key="index">
+          <image src='../../static/images/vip1.png'></image>
+          <text class="privilege-text">
+            开通立享大额话费返送。
+          </text>
+        </view>
       </view>
     </view>
-    <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
+    <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo">
+    </paymentMember>
     <button class="box-submit" @click="goPay">立即充值</button>
   </view>
 </template>
 
 <script>
   import {
-  	memberGradeInfo
+    memberGradeInfo
   } from '@/api/member.js';
   import paymentMember from '@/components/paymentMember';
-import store from '@/store/index';
+  import store from '@/store/index';
   export default {
     name: "member_application",
     components: {
-    	paymentMember
+      paymentMember
     },
     data() {
       return {
-        memberData:[],
-        payInfo:{
+        memberData: [],
+        payInfo: {
           userPhone: '',
           confirmPhone: '',
           orderInfos: []
         },
         payMode: [{
-        		name: "微信支付",
-        		icon: "icon-weixinzhifu",
-        		value: 'WXPAY',
-        		title: '微信快捷支付'
-        	},
-        	{
-        		name: "支付宝",
-        		icon: "icon-zhifubao",
-        		value: 'ALIPAY',
-        		title: '支付宝快捷支付'
-        	}
+            name: "微信支付",
+            icon: "icon-weixinzhifu",
+            value: 'WXPAY',
+            title: '微信快捷支付'
+          },
+          {
+            name: "支付宝",
+            icon: "icon-zhifubao",
+            value: 'ALIPAY',
+            title: '支付宝快捷支付'
+          }
         ],
         pay_close: false,
-        activeIndex:[],
+        activeIndex: [],
         form: {
-          phone:''
+          phone: ''
         },
 
       };
     },
     async onLoad() {
-    const res = await memberGradeInfo()
-    this.memberData = res.data
+      // uni.setTabBarItem({
+      //   index: 2,
+      //    text: 'text',
+      //   pagePath: '/pages/member_equity/index'
+      // })
+      // uni.switchTab({
+      //   url:'/pages/member_equity/index'
+      // })
+      const res = await memberGradeInfo()
+      this.memberData = res.data
     },
     methods: {
-      handleMember(value,index){
-        if(!!parseInt(value.isExist))  return
-        if(this.activeIndex.includes(index)){
-          this.activeIndex = this.activeIndex.filter(item =>  item !== index)
-        }else{
+      handleMember(value, index) {
+        if (!!parseInt(value.isExist)) return
+        if (this.activeIndex.includes(index)) {
+          this.activeIndex = this.activeIndex.filter(item => item !== index)
+        } else {
           this.activeIndex.push(index)
         }
       },
-     /**
-      * 打开支付组件
-      *
-      */
-     goPay() {
-    if(this.activeIndex.length){
-      this.$set(this, 'pay_close', true);
-      const orderInfos = this.activeIndex.map((item) => {
-        return {
-          ...this.memberData[item],
-          gearId:this.memberData[item].id
+      /**
+       * 打开支付组件
+       *
+       */
+      goPay() {
+        if (this.activeIndex.length) {
+          this.$set(this, 'pay_close', true);
+          const orderInfos = this.activeIndex.map((item) => {
+            return {
+              ...this.memberData[item],
+              gearId: this.memberData[item].id
+            }
+          })
+          this.payInfo = {
+            userPhone: store.state.app.userInfo.mobile,
+            orderInfos
+          }
         }
-      })
-      this.payInfo = {
-        userPhone: store.state.app.userInfo.mobile,
-        orderInfos
-      }
-    }
-     },
-     /**
-      * 事件回调
-      *
-      */
-     onChangeFun: function(e) {
-     	let opt = e;
-     	let action = opt.action || null;
-     	let value = opt.value != undefined ? opt.value : null;
-     	(action && this[action]) && this[action](value);
-     },
-     /**
-      * 关闭支付组件
-      *
-      */
-     payClose: function() {
-     	this.pay_close = false;
-     },
-     /**
-      * 支付成功回调
-      *
-      */
-     pay_complete: function() {
-     	this.status = false;
-     	this.page = 1;
-     	this.$set(this, 'bargain', []);
-     	this.$set(this, 'pay_close', false);
-     	this.getBargainUserList();
-     },
-     /**
-      * 支付失败回调
-      *
-      */
-     pay_fail: function() {
-     	this.pay_close = false;
-     },
+      },
+      /**
+       * 事件回调
+       *
+       */
       onChangeFun: function(e) {
-      	let opt = e;
-      	let action = opt.action || null;
-      	let value = opt.value != undefined ? opt.value : null;
-      	(action && this[action]) && this[action](value);
+        let opt = e;
+        let action = opt.action || null;
+        let value = opt.value != undefined ? opt.value : null;
+        (action && this[action]) && this[action](value);
+      },
+      /**
+       * 关闭支付组件
+       *
+       */
+      payClose: function() {
+        this.pay_close = false;
+      },
+      /**
+       * 支付成功回调
+       *
+       */
+      pay_complete: function() {
+        this.status = false;
+        this.page = 1;
+        this.$set(this, 'bargain', []);
+        this.$set(this, 'pay_close', false);
+        this.getBargainUserList();
+      },
+      /**
+       * 支付失败回调
+       *
+       */
+      pay_fail: function() {
+        this.pay_close = false;
+      },
+      onChangeFun: function(e) {
+        let opt = e;
+        let action = opt.action || null;
+        let value = opt.value != undefined ? opt.value : null;
+        (action && this[action]) && this[action](value);
       },
     }
   };
@@ -146,158 +168,261 @@ import store from '@/store/index';
 
 <style lang="scss" scoped>
   .box {
-    padding: 0 40rpx;
+    position: relative;
+    padding: 207rpx 40rpx 0 40rpx;
+    height: 100vh;
+    background: url(../../static/images/bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    .phone-money {
+      width: 604rpx;
+      height: 140rpx;
+      position: absolute;
+      top: 2%;
+      left: 15%;
+    }
 
     .box-member {
-      border-radius: 20rpx;
+      box-shadow: 0px 0px 15px -5px #000;
       width: 100%;
-      margin-top: 207rpx;
-      padding: 83rpx 30rpx 30rpx 30rpx;
-      background: linear-gradient(#FFD55D,#FD752F);
+      border-radius: 20px;
+      box-sizing: border-box;
+      border: 1px solid transparent;
+      background-image: linear-gradient(#FFD55D, #FD752F),
+        linear-gradient(to bottom, #FFD55D, #FDCB3B);
+      background-origin: border-box;
+      background-clip: content-box, border-box;
+      border-radius: 20px;
+      position: relative;
 
-      .member-item {
-        display: flex;
-        justify-content: space-between;
-        background: #fff;
-        margin-bottom: 20rpx;
-        padding: 30rpx 20rpx 27rpx 20rpx;
-        border-radius: 20rpx;
+      .box-title {
+        position: absolute;
+        top: -5.5%;
+        left: -203rpx;
+        margin-left: 50%;
 
-        .member-image {
-          width: 104rpx;
-          height: 104rpx;
-          border-radius: 35rpx;
-          background: linear-gradient(#FFEBB2,#FDCB3B);
-          padding: 20rpx;
-
-          image {
-            width: 100%;
-            height: 100%;
-          }
-        }
-
-        .member-text {
+        image {
+          width: 406rpx;
+          height: 87rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &::before {
+            content: '会员详情介绍';
+            position: absolute;
+            font-size: 34rpx;
+            font-family: Adobe Heiti Std;
+            font-weight: normal;
+            color: #FF4B47;
+            text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
+          }
+        }
+
+      }
+
+      .member-list {
+        margin: 83rpx 30rpx 30rpx 30rpx;
+        position: relative;
+
+        .member-item {
+          padding: 30rpx 20rpx 27rpx 20rpx;
           display: flex;
-          flex-direction: column;
           justify-content: space-between;
-          flex: .9;
+          background: #fff;
+          margin-bottom: 20rpx;
+          border-radius: 20rpx;
 
-          .text-title {
-            margin-top: -14rpx;
-            font-size: 32rpx;
-            font-weight: bolder;
-            transform: skew(-6deg, 0);
+          .member-image {
+            width: 104rpx;
+            height: 104rpx;
+            border-radius: 35rpx;
+            background: linear-gradient(#FFEBB2, #FDCB3B);
+            padding: 20rpx;
+
+            image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .member-text {
             display: flex;
+            flex-direction: column;
             justify-content: space-between;
-            text{
-              text{
-                color: #C80D00;
-              }
-            }
-            view{
-              width: 18rpx;
-              height: 6rpx;
-              background: #FEAC49;
-              border-radius: 3rpx;
-            }
-          }
+            flex: .9;
 
-          .text-content {
-            font-size: 24rpx;
-            color: #747474;
-          }
-        }
-      }
-      .member-active{
-        transition: .3s;
-        background: linear-gradient(#FF995F,#DA0E00);
+            .text-title {
+              margin-top: -14rpx;
+              font-size: 32rpx;
+              font-weight: bolder;
+              transform: skew(-6deg, 0);
+              display: flex;
+              justify-content: space-between;
 
-        .member-image {
-          background: linear-gradient(#FF995F,#DA0E00);
-        }
-
-        .member-text {
-          .text-title {
-            text{
-              color: #fff;
-                text{
-                  color: rgb(223,208,42);
+              text {
+                text {
+                  color: #C80D00;
                 }
-            }
-            view{
-              background: #fff;
               }
-          }
-          .text-content {
-            color: #fff;
+
+              view {
+                width: 18rpx;
+                height: 6rpx;
+                background: #FEAC49;
+                border-radius: 3rpx;
+              }
+            }
+
+            .text-content {
+              font-size: 24rpx;
+              color: #747474;
+            }
           }
         }
-      }
 
-      .member-disbled{
-        transition: .3s;
-        background: linear-gradient(#EFEFEF,#BCBCBC);
+        .member-active {
+          transition: .3s;
+          background: linear-gradient(#FF995F, #DA0E00);
 
-        .member-image {
-          background: linear-gradient(#AAAAAA,#989898);
+          .member-image {
+            background: linear-gradient(#FF995F, #FDCB3B);
+          }
+
+          .member-text {
+            .text-title {
+              text {
+                color: #fff;
+
+                text {
+                  color: rgb(223, 208, 42);
+                }
+              }
+
+              view {
+                background: #fff;
+              }
+            }
+
+            .text-content {
+              color: #fff;
+            }
+          }
         }
 
-        .member-text {
-          .text-title {
-            text{
-              color: #868585;
-                text{
+        .member-disbled {
+          transition: .3s;
+          background: linear-gradient(#EFEFEF, #BCBCBC);
+
+          .member-image {
+            background: linear-gradient(#AAAAAA, #989898);
+          }
+
+          .member-text {
+            .text-title {
+              text {
+                color: #868585;
+
+                text {
                   color: #868585;
                 }
-            }
-            view{
-              background: #fff;
               }
-          }
-          .text-content {
-            color: #5C5C5C;
+
+              view {
+                background: #fff;
+              }
+            }
+
+            .text-content {
+              color: #5C5C5C;
+            }
           }
         }
       }
     }
 
     .box-privilege {
+      box-shadow: 0px 0px 15px -5px #000;
       border-radius: 36rpx;
       width: 100%;
-      margin-top: 44rpx;
-      padding: 84rpx 10rpx 40rpx 10rpx;
-      background: linear-gradient(#FFD55D,#FD7630);
+      margin-top: 12%;
+      border-radius: 20px;
+      box-sizing: border-box;
+      border: 1px solid transparent;
+      background-image: linear-gradient(#FFD55D, #FD752F),
+        linear-gradient(to bottom, #FFEBB2, #FDCB3B);
+      background-origin: border-box;
+      background-clip: content-box, border-box;
+      border-radius: 20px;
       display: flex;
       flex: 1;
+      position: relative;
 
-      .privilege-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        background: #fff;
-        padding: 16rpx 16rpx;
-        border-radius: 20rpx;
-        margin: 0 10rpx;
+      .box-title {
+        position: absolute;
+        top: -9%;
+        left: -203rpx;
+        margin-left: 50%;
 
         image {
-          width: 87rpx;
+          width: 406rpx;
           height: 87rpx;
-          border-radius: 50%;
-          margin-bottom: 15rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &::before {
+            content: '特权详情';
+            position: absolute;
+            font-size: 34rpx;
+            font-family: Adobe Heiti Std;
+            font-weight: normal;
+            color: #FF4B47;
+            text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
+          }
         }
 
-        .privilege-text {
-          color: #000000;
-          line-height: 36rpx;
-          text-align: center;
-          font-size: 26rpx;
+      }
+
+      .privilege-list {
+        margin: 84rpx 10rpx 40rpx 10rpx;
+        display: flex;
+        justify-content: space-between;
+
+        .privilege-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: space-between;
+          background: #fff;
+          padding: 16rpx 16rpx;
+          border-radius: 20rpx;
+          margin: 0 10rpx;
+
+          image {
+            width: 96rpx;
+            height: 96rpx;
+            border-radius: 50%;
+            margin-bottom: 15rpx;
+          }
+
+          .privilege-text {
+            color: #000000;
+            line-height: 36rpx;
+            text-align: center;
+            font-size: 26rpx;
+          }
         }
+
       }
     }
 
     .box-submit {
-      background: linear-gradient(#FFC82B,#FD7A32);
+      background: linear-gradient(#FFC82B, #FD7A32);
       margin-top: 127rpx;
       margin-bottom: 75rpx;
       display: flex;
@@ -309,4 +434,4 @@ import store from '@/store/index';
       font-size: 32rpx;
     }
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/yudao-ui-app/pages/member_equity/index.vue b/yudao-ui-app/pages/member_equity/index.vue
index 7564d02e2..9ebfd89b3 100644
--- a/yudao-ui-app/pages/member_equity/index.vue
+++ b/yudao-ui-app/pages/member_equity/index.vue
@@ -10,19 +10,17 @@
         <text>再升1级即可获得【XX】等6项权益</text>
       </view>
       <view class="member-right">
-   <image src='../../static/images/f.png'></image>
+   <image src='../../static/images/vipStar.png'></image>
     <text >会员等级3级</text>
       <button>立即续费</button>
       </view>
     </view>
     <view class="box-equity">
-      <view class="equity-text">
-        <view class="equity-title">
-        </view>
+     <view class="equity-text">
         <text class="equity-member">我的会员权益</text>
         <text class="equity-look">查看权益></text>
       </view>
-     <view class="equity-item" v-for="(item,index) in 2" :key="index">
+    <view class="equity-item" v-for="(item,index) in 2" :key="index">
         <view class="equity-grade">
           <text>办理档次【640元】档</text>
           <text>办理日期：2021.12.30</text>
@@ -101,10 +99,14 @@
 
 <style lang="scss" scoped>
   .box {
-    padding: 36rpx 40rpx;
     background: #fff;
     height: 100vh;
+    background: url(../../static/images/memberBg.png);
+     background-size: cover;
+      background-repeat: no-repeat;
+      background-attachment: fixed;
     .box-member {
+      padding: 36rpx 40rpx;
       border-radius: 20rpx;
       width: 100%;
       // padding: 20rpx 20rpx 30rpx 20rpx;
@@ -162,34 +164,34 @@
     }
 
     .box-equity {
-      border-radius: 20rpx;
+      // border-radius: 20rpx;
       width: 100%;
-      margin-top: 10%;
-      padding: 40rpx 10rpx 40rpx 10rpx;
-      // background: #fff;
+      padding: 0 40rpx;
+      background: url(../../static/images/memberEquity.png);
+      background-size: 100%;
+       background-repeat: no-repeat;
       display: flex;
       flex-direction: column;
+      position: relative;
+
       .equity-text{
-        display: flex;
-        align-items: center;
-        position: relative;
-        .equity-title{
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 200rpx;
-          height: 90rpx;
-          background: #fff;
-          border-radius: 8px;/* 设置圆角 */
-          transform: perspective(8px)scale(1.1, 1.3) rotateX(5deg);
-          		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
-          transform-origin: bottom left;
-          margin-right: 20rpx;
-         }
-         .equity-member{
-           position: absolute;
+        margin:5% 0;
+      display: flex;
+      align-items: center;
+      height: 10%;
+        .equity-member{
+          margin: 0 10%;
+          font-size: 30rpx;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #FFFFFF;
          }
+
         .equity-look{
+          font-size: 28rpx;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #FF4922;
         }
       }
       .equity-item {
@@ -198,10 +200,9 @@
         flex-direction: column;
         justify-content: space-between;
         border-radius: 20rpx;
-        margin: 15rpx;
-        padding: 30rpx 24rpx;
+        margin: 0 20rpx 20rpx 20rpx;
+        // padding: 30rpx 24rpx;
         .equity-grade{
-          background: greenyellow;
           border-radius: 10rpx 10rpx;
           padding: 20rpx;
           display: flex;
@@ -209,9 +210,10 @@
         }
         .equity-money {
           display: flex;
-          justify-content: space-between;
+          justify-content: space-around;
           flex-wrap: wrap;
           .money-box{
+            width: 46%;
             padding: 24rpx 25rpx;
             border-radius: 10px;
             display: flex;
diff --git a/yudao-ui-app/pages/member_others/index.vue b/yudao-ui-app/pages/member_others/index.vue
index 43fb76811..d96c23255 100644
--- a/yudao-ui-app/pages/member_others/index.vue
+++ b/yudao-ui-app/pages/member_others/index.vue
@@ -11,178 +11,184 @@
       </u--form>
     </view>
     <view class="box-member">
-      <view :class="[activeIndex.includes(index)  && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']" v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
-        <view class="member-image">
-          <image src='../../static/images/f.png'></image>
-        </view>
-       <view class="member-text">
-         <view class="text-title">
-           <text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
-           <view></view>
-         </view>
-         <text class="text-content">{{item.gearRemarks}}</text>
-       </view>
+      <view class="box-title">
+        <image src='../../static/images/memberTitle.png'></image>
       </view>
-      <view class="member-prompt">
-        * 办理三个项目即可升级会员2，会员2享XX权益。
+      <view class="member-list">
+        <view
+          :class="[activeIndex.includes(index)  && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']"
+          v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
+          <view class="member-image">
+            <image src='../../static/images/f.png'></image>
+          </view>
+          <view class="member-text">
+            <view class="text-title">
+              <text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
+              <view></view>
+            </view>
+            <text class="text-content">{{item.gearRemarks}}</text>
+          </view>
+        </view>
+        <view class="member-prompt">
+          * 办理三个项目即可升级会员2，会员2享XX权益。
+        </view>
       </view>
     </view>
-    <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
+    <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo">
+    </paymentMember>
     <button class="box-submit" @click="goPay">立即充值</button>
   </view>
 </template>
 
 <script>
   import {
-  	memberGradeInfo
+    memberGradeInfo
   } from '@/api/member.js';
   import paymentMember from '@/components/paymentMember';
-import store from '@/store/index';
+  import store from '@/store/index';
   export default {
     name: "member_application",
     components: {
-    	paymentMember
+      paymentMember
     },
     data() {
       return {
-        memberData:[],
-        payInfo:{
+        memberData: [],
+        payInfo: {
           userPhone: '',
           confirmPhone: '',
           orderInfos: []
         },
         payMode: [{
-        		name: "微信支付",
-        		icon: "icon-weixinzhifu",
-        		value: 'WXPAY',
-        		title: '微信快捷支付'
-        	},
-        	{
-        		name: "支付宝",
-        		icon: "icon-zhifubao",
-        		value: 'ALIPAY',
-        		title: '支付宝快捷支付'
-        	}
+            name: "微信支付",
+            icon: "icon-weixinzhifu",
+            value: 'WXPAY',
+            title: '微信快捷支付'
+          },
+          {
+            name: "支付宝",
+            icon: "icon-zhifubao",
+            value: 'ALIPAY',
+            title: '支付宝快捷支付'
+          }
         ],
         pay_close: false,
-        activeIndex:[],
+        activeIndex: [],
         form: {
-          userPhone:'',
-          confirmPhone:''
+          userPhone: '',
+          confirmPhone: ''
         },
         rules: {
-          userPhone: [
-            {
+          userPhone: [{
               required: true,
               message: '手机号不能为空',
               // 触发器可以同时用blur和change
               trigger: ['change', 'blur']
             },
-           {
-           			pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[1-25-9])\d{8}$/g,
-           			// 正则检验前先将值转为字符串
-           			transform(value) {
-           				return String(value);
-           			},
-           			message: '手机号不正确（190.193号段不可充值）',
-                trigger: ['change', 'blur']
-           		},
-          ],
-          confirmPhone:[
             {
+              pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[1-25-9])\d{8}$/g,
+              // 正则检验前先将值转为字符串
+              transform(value) {
+                return String(value);
+              },
+              message: '手机号不正确（190.193号段不可充值）',
+              trigger: ['change', 'blur']
+            },
+          ],
+          confirmPhone: [{
               required: true,
               message: '手机号确认不能为空',
               // 触发器可以同时用blur和change
               trigger: ['change', 'blur']
             },
             {
-            			validator: (rule, value, callback) => {
-            				return this.form.userPhone == this.form.confirmPhone
-            			},
-            			message: '手机号不一致',
-            			trigger: ['change','blur'],
-            		}
+              validator: (rule, value, callback) => {
+                return this.form.userPhone == this.form.confirmPhone
+              },
+              message: '手机号不一致',
+              trigger: ['change', 'blur'],
+            }
           ]
         }
       };
     },
     async onLoad() {
-    const res = await memberGradeInfo()
-    this.memberData = res.data
+      const res = await memberGradeInfo()
+      this.memberData = res.data
     },
     methods: {
-      handleMember(value,index){
-        if(!!parseInt(value.isExist))  return
-        if(this.activeIndex.includes(index)){
-          this.activeIndex = this.activeIndex.filter(item =>  item !== index)
-        }else{
+      handleMember(value, index) {
+        if (!!parseInt(value.isExist)) return
+        if (this.activeIndex.includes(index)) {
+          this.activeIndex = this.activeIndex.filter(item => item !== index)
+        } else {
           this.activeIndex.push(index)
         }
       },
-     /**
-      * 打开支付组件
-      *
-      */
-     goPay() {
-       this.$refs.uForm.validate().then(res => {
-       				if(this.activeIndex.length){
-       				  this.$set(this, 'pay_close', true);
-       				  const orderInfos = this.activeIndex.map((item) => {
-       				    return {
-       				      ...this.memberData[item],
-       				      gearId:this.memberData[item].id
-       				    }
-       				  })
-       				  this.payInfo = {
-       				    userPhone: this.form.userPhone,
-                  confirmPhone: this.form.confirmPhone,
-       				    orderInfos
-       				  }
-       				}
-       			}).catch(errors => {
-       				uni.$u.toast('校验失败')
-       			})
-     },
-     /**
-      * 事件回调
-      *
-      */
-     onChangeFun: function(e) {
-     	let opt = e;
-     	let action = opt.action || null;
-     	let value = opt.value != undefined ? opt.value : null;
-     	(action && this[action]) && this[action](value);
-     },
-     /**
-      * 关闭支付组件
-      *
-      */
-     payClose: function() {
-     	this.pay_close = false;
-     },
-     /**
-      * 支付成功回调
-      *
-      */
-     pay_complete: function() {
-     	this.status = false;
-     	this.page = 1;
-     	this.$set(this, 'bargain', []);
-     	this.$set(this, 'pay_close', false);
-     	this.getBargainUserList();
-     },
-     /**
-      * 支付失败回调
-      *
-      */
-     pay_fail: function() {
-     	this.pay_close = false;
-     },
+      /**
+       * 打开支付组件
+       *
+       */
+      goPay() {
+        this.$refs.uForm.validate().then(res => {
+          if (this.activeIndex.length) {
+            this.$set(this, 'pay_close', true);
+            const orderInfos = this.activeIndex.map((item) => {
+              return {
+                ...this.memberData[item],
+                gearId: this.memberData[item].id
+              }
+            })
+            this.payInfo = {
+              userPhone: this.form.userPhone,
+              confirmPhone: this.form.confirmPhone,
+              orderInfos
+            }
+          }
+        }).catch(errors => {
+          uni.$u.toast('校验失败')
+        })
+      },
+      /**
+       * 事件回调
+       *
+       */
       onChangeFun: function(e) {
-      	let opt = e;
-      	let action = opt.action || null;
-      	let value = opt.value != undefined ? opt.value : null;
-      	(action && this[action]) && this[action](value);
+        let opt = e;
+        let action = opt.action || null;
+        let value = opt.value != undefined ? opt.value : null;
+        (action && this[action]) && this[action](value);
+      },
+      /**
+       * 关闭支付组件
+       *
+       */
+      payClose: function() {
+        this.pay_close = false;
+      },
+      /**
+       * 支付成功回调
+       *
+       */
+      pay_complete: function() {
+        this.status = false;
+        this.page = 1;
+        this.$set(this, 'bargain', []);
+        this.$set(this, 'pay_close', false);
+        this.getBargainUserList();
+      },
+      /**
+       * 支付失败回调
+       *
+       */
+      pay_fail: function() {
+        this.pay_close = false;
+      },
+      onChangeFun: function(e) {
+        let opt = e;
+        let action = opt.action || null;
+        let value = opt.value != undefined ? opt.value : null;
+        (action && this[action]) && this[action](value);
       },
     }
   };
@@ -190,148 +196,291 @@ import store from '@/store/index';
 
 <style lang="scss" scoped>
   .box {
-    padding: 63rpx 40rpx;
-  .box-phone {
-      .u-form-item{
+    position: relative;
+    padding: 8% 40rpx 0 40rpx;
+    height: 100vh;
+    background: url(../../static/images/bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    .box-phone {
+      .u-form-item {
         margin-bottom: 32rpx;
       }
-     ::v-deep .u-form-item__body {
+
+      ::v-deep .u-form-item__body {
         height: 100rpx;
         border-radius: 20rpx;
         padding: 0 30rpx;
         background: #fff;
       }
     }
-   .box-member {
-     border-radius: 20rpx;
-     width: 100%;
-     margin-top: 60rpx;
-     padding: 83rpx 30rpx 30rpx 30rpx;
-     background: linear-gradient(#FFD55D,#FD752F);
 
-     .member-item {
-       display: flex;
-       justify-content: space-between;
-       background: #fff;
-       margin-bottom: 20rpx;
-       padding: 30rpx 20rpx 27rpx 20rpx;
-       border-radius: 20rpx;
+    .phone-money {
+      width: 604rpx;
+      height: 140rpx;
+      position: absolute;
+      top: 2%;
+      left: 15%;
+    }
 
-       .member-image {
-         width: 104rpx;
-         height: 104rpx;
-         border-radius: 35rpx;
-         background: linear-gradient(#FFEBB2,#FDCB3B);
-         padding: 20rpx;
+    .box-member {
+      margin-top: 10%;
+      box-shadow: 0px 0px 15px -5px #000;
+      width: 100%;
+      border-radius: 20px;
+      box-sizing: border-box;
+      border: 1px solid transparent;
+      background-image: linear-gradient(#FFD55D, #FD752F),
+        linear-gradient(to bottom, #FFD55D, #FDCB3B);
+      background-origin: border-box;
+      background-clip: content-box, border-box;
+      border-radius: 20px;
+      position: relative;
 
-         image {
-           width: 100%;
-           height: 100%;
-         }
-       }
+      .box-title {
+        position: absolute;
+        top: -5.5%;
+        left: -203rpx;
+        margin-left: 50%;
 
-       .member-text {
-         display: flex;
-         flex-direction: column;
-         justify-content: space-between;
-         flex: .9;
+        image {
+          width: 406rpx;
+          height: 87rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
-         .text-title {
-           margin-top: -14rpx;
-           font-size: 32rpx;
-           font-weight: bolder;
-           transform: skew(-6deg, 0);
-           display: flex;
-           justify-content: space-between;
-           text{
-             text{
-               color: #C80D00;
-             }
-           }
-           view{
-             width: 18rpx;
-             height: 6rpx;
-             background: #FEAC49;
-             border-radius: 3rpx;
-           }
-         }
+          &::before {
+            content: '会员详情介绍';
+            position: absolute;
+            font-size: 34rpx;
+            font-family: Adobe Heiti Std;
+            font-weight: normal;
+            color: #FF4B47;
+            text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
+          }
+        }
 
-         .text-content {
-           font-size: 24rpx;
-           color: #747474;
-         }
-       }
-     }
-     .member-active{
-       transition: .3s;
-       background: linear-gradient(#FF995F,#DA0E00);
+      }
 
-       .member-image {
-         background: linear-gradient(#FF995F,#DA0E00);
-       }
+      .member-list {
+        margin: 83rpx 30rpx 30rpx 30rpx;
+        position: relative;
 
-       .member-text {
-         .text-title {
-           text{
-             color: #fff;
-               text{
-                 color: rgb(223,208,42);
-               }
-           }
-           view{
-             background: #fff;
-             }
-         }
-         .text-content {
-           color: #fff;
-         }
-       }
-     }
+        .member-item {
+          padding: 30rpx 20rpx 27rpx 20rpx;
+          display: flex;
+          justify-content: space-between;
+          background: #fff;
+          margin-bottom: 20rpx;
+          border-radius: 20rpx;
 
-     .member-disbled{
-       transition: .3s;
-       background: linear-gradient(#EFEFEF,#BCBCBC);
+          .member-image {
+            width: 104rpx;
+            height: 104rpx;
+            border-radius: 35rpx;
+            background: linear-gradient(#FFEBB2, #FDCB3B);
+            padding: 20rpx;
 
-       .member-image {
-         background: linear-gradient(#AAAAAA,#989898);
-       }
+            image {
+              width: 100%;
+              height: 100%;
+            }
+          }
 
-       .member-text {
-         .text-title {
-           text{
-             color: #868585;
-               text{
-                 color: #868585;
-               }
-           }
-           view{
-             background: #fff;
-             }
-         }
-         .text-content {
-           color: #5C5C5C;
-         }
-       }
-     }
-     .member-prompt{
-       display: flex;
-       justify-content: center;
-       font-size: 24rpx;
-       color: #fff;
-     }
-   }
+          .member-text {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            flex: .9;
 
-   .box-submit {
-     background: linear-gradient(#FFC82B,#FD7A32);
-     margin-top: 127rpx;
-     margin-bottom: 75rpx;
-     display: flex;
-     justify-content: center;
-     align-items: center;
-     height: 87rpx;
-     border-radius: 44rpx;
-     color: #fff;
-     font-size: 32rpx;
-   }
+            .text-title {
+              margin-top: -14rpx;
+              font-size: 32rpx;
+              font-weight: bolder;
+              transform: skew(-6deg, 0);
+              display: flex;
+              justify-content: space-between;
+
+              text {
+                text {
+                  color: #C80D00;
+                }
+              }
+
+              view {
+                width: 18rpx;
+                height: 6rpx;
+                background: #FEAC49;
+                border-radius: 3rpx;
+              }
+            }
+
+            .text-content {
+              font-size: 24rpx;
+              color: #747474;
+            }
+          }
+        }
+
+        .member-active {
+          transition: .3s;
+          background: linear-gradient(#FF995F, #DA0E00);
+
+          .member-image {
+            background: linear-gradient(#FF995F, #FDCB3B);
+          }
+
+          .member-text {
+            .text-title {
+              text {
+                color: #fff;
+
+                text {
+                  color: rgb(223, 208, 42);
+                }
+              }
+
+              view {
+                background: #fff;
+              }
+            }
+
+            .text-content {
+              color: #fff;
+            }
+          }
+        }
+
+        .member-disbled {
+          transition: .3s;
+          background: linear-gradient(#EFEFEF, #BCBCBC);
+
+          .member-image {
+            background: linear-gradient(#AAAAAA, #989898);
+          }
+
+          .member-text {
+            .text-title {
+              text {
+                color: #868585;
+
+                text {
+                  color: #868585;
+                }
+              }
+
+              view {
+                background: #fff;
+              }
+            }
+
+            .text-content {
+              color: #5C5C5C;
+            }
+          }
+        }
+
+        .member-prompt {
+          display: flex;
+          justify-content: center;
+          font-size: 24rpx;
+          color: #fff;
+        }
+      }
+    }
+
+    .box-privilege {
+      box-shadow: 0px 0px 15px -5px #000;
+      border-radius: 36rpx;
+      width: 100%;
+      margin-top: 12%;
+      border-radius: 20px;
+      box-sizing: border-box;
+      border: 1px solid transparent;
+      background-image: linear-gradient(#FFD55D, #FD752F),
+        linear-gradient(to bottom, #FFEBB2, #FDCB3B);
+      background-origin: border-box;
+      background-clip: content-box, border-box;
+      border-radius: 20px;
+      display: flex;
+      flex: 1;
+      position: relative;
+
+      .box-title {
+        position: absolute;
+        top: -9%;
+        left: -203rpx;
+        margin-left: 50%;
+
+        image {
+          width: 406rpx;
+          height: 87rpx;
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &::before {
+            content: '特权详情';
+            position: absolute;
+            font-size: 34rpx;
+            font-family: Adobe Heiti Std;
+            font-weight: normal;
+            color: #FF4B47;
+            text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
+          }
+        }
+
+      }
+
+      .privilege-list {
+        margin: 84rpx 10rpx 40rpx 10rpx;
+        display: flex;
+        justify-content: space-between;
+
+        .privilege-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: space-between;
+          background: #fff;
+          padding: 16rpx 16rpx;
+          border-radius: 20rpx;
+          margin: 0 10rpx;
+
+          image {
+            width: 96rpx;
+            height: 96rpx;
+            border-radius: 50%;
+            margin-bottom: 15rpx;
+          }
+
+          .privilege-text {
+            color: #000000;
+            line-height: 36rpx;
+            text-align: center;
+            font-size: 26rpx;
+          }
+        }
+
+      }
+    }
+
+    .box-submit {
+      background: linear-gradient(#FFC82B, #FD7A32);
+      margin-top: 127rpx;
+      margin-bottom: 75rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 87rpx;
+      border-radius: 44rpx;
+      color: #fff;
+      font-size: 32rpx;
+    }
   }
 </style>
diff --git a/yudao-ui-app/pages/member_record/index.vue b/yudao-ui-app/pages/member_record/index.vue
index c239bddd2..3e51c0f6a 100644
--- a/yudao-ui-app/pages/member_record/index.vue
+++ b/yudao-ui-app/pages/member_record/index.vue
@@ -8,7 +8,7 @@
       </view>
         <view class="item-text">
         <text>充值档次：{{item.grade}}</text>
-        <text>日期：{{item.createTime}}</text>
+        <text>日期：{{item.stringCreateTime}}</text>
         </view>
   </view>
   </view>
@@ -36,17 +36,17 @@
         this.memberData.sort((a,b) =>{
             let aIndex = this.keyword.indexOf(a.userPhone)
             let bIndex = this.keyword.indexOf(b.userPhone)
+            console.log(aIndex,bIndex)
              if(aIndex > bIndex) return -1
               if(aIndex < bIndex) return 1
           if(a.userPhone == b.userPhone){
-              return a.createTime - b.createTime
+              return a.stringCreateTime - b.stringCreateTime
           }else{
-            if(a.createTime<b.createTime) return -1
-            if(a.createTime>b.createTime) return 1
+            if(a.stringCreateTime<b.stringCreateTime) return -1
+            if(a.stringCreateTime>b.stringCreateTime) return 1
             return 0
           }
         })
-        console.log(this.memberData)
       },1000)
       },
     methods: {
diff --git a/yudao-ui-app/pages/member_renew/index.vue b/yudao-ui-app/pages/member_renew/index.vue
index 2c2c3cfd3..d7cc2ca20 100644
--- a/yudao-ui-app/pages/member_renew/index.vue
+++ b/yudao-ui-app/pages/member_renew/index.vue
@@ -7,23 +7,30 @@
         </u-form-item>
       </u--form>
     </view>
-    <view class="box-member">
-      <view :class="[activeIndex.includes(index)  && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']" v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
-        <view class="member-image">
-          <image src='../../static/images/f.png'></image>
+   <view class="box-member">
+      <view class="box-title">
+        <image src='../../static/images/memberTitle.png'></image>
+      </view>
+      <view class="member-list">
+        <view
+          :class="[activeIndex.includes(index)  && 'member-active',!!parseInt(item.isExist) && 'member-disbled', 'member-item']"
+          v-for="(item,index) in memberData" :key="index" @click="handleMember(item,index)">
+          <view class="member-image">
+            <image src='../../static/images/f.png'></image>
+          </view>
+          <view class="member-text">
+            <view class="text-title">
+              <text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
+              <view></view>
+            </view>
+            <text class="text-content">{{item.gearRemarks}}</text>
+          </view>
+        </view>
+        <view class="member-prompt">
+          * 办理三个项目即可升级会员2，会员2享XX权益。
         </view>
-     <view class="member-text">
-       <view class="text-title">
-         <text>{{item.name.split('得')[0]}}<text>得{{item.name.split('得')[1]}}</text></text>
-         <view></view>
-       </view>
-       <text class="text-content">{{item.gearRemarks}}</text>
-     </view>
       </view>
-      <view class="member-prompt">
-        * 办理三个项目即可升级会员2，会员2享XX权益。
       </view>
-    </view>
     <paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
     <button class="box-submit" @click="goPay">立即充值</button>
   </view>
@@ -166,153 +173,292 @@ import store from '@/store/index';
 </script>
 
 <style lang="scss" scoped>
-  .box {
-    padding: 63rpx 40rpx;
-    .u-input{
-      background: #fff !important;
-    }
-  .box-phone {
-      .u-form-item{
-        margin-bottom: 32rpx;
-      }
-     ::v-deep .u-form-item__body {
-        height: 100rpx;
-        border-radius: 20rpx;
-        padding: 0 30rpx;
-        background: #fff;
-      }
-    }
+ .box {
+   position: relative;
+   padding: 8% 40rpx 0 40rpx;
+   height: 100vh;
+   background: url(../../static/images/bg.png);
+   background-size: cover;
+   background-repeat: no-repeat;
+   background-attachment: fixed;
+
+   .box-phone {
+     .u-form-item {
+       margin-bottom: 32rpx;
+     }
+
+     ::v-deep .u-form-item__body,.u-input {
+       height: 100rpx;
+       border-radius: 20rpx;
+       padding: 0 30rpx;
+       background: #fff !important;
+     }
+   }
+
+   .phone-money {
+     width: 604rpx;
+     height: 140rpx;
+     position: absolute;
+     top: 2%;
+     left: 15%;
+   }
+
    .box-member {
-     border-radius: 20rpx;
+     margin-top: 10%;
+     box-shadow: 0px 0px 15px -5px #000;
      width: 100%;
-     margin-top: 60rpx;
-     padding: 83rpx 30rpx 30rpx 30rpx;
-     background: linear-gradient(#FFD55D,#FD752F);
+     border-radius: 20px;
+     box-sizing: border-box;
+     border: 1px solid transparent;
+     background-image: linear-gradient(#FFD55D, #FD752F),
+       linear-gradient(to bottom, #FFD55D, #FDCB3B);
+     background-origin: border-box;
+     background-clip: content-box, border-box;
+     border-radius: 20px;
+     position: relative;
 
-      .member-item {
-        display: flex;
-        justify-content: space-between;
-        background: #fff;
-        margin-bottom: 20rpx;
-        padding: 30rpx 20rpx 27rpx 20rpx;
-        border-radius: 20rpx;
+     .box-title {
+       position: absolute;
+       top: -5.5%;
+       left: -203rpx;
+       margin-left: 50%;
 
-        .member-image {
-          width: 104rpx;
-          height: 104rpx;
-          border-radius: 35rpx;
-          background: linear-gradient(#FFEBB2,#FDCB3B);
-          padding: 20rpx;
+       image {
+         width: 406rpx;
+         height: 87rpx;
+         position: relative;
+         display: flex;
+         align-items: center;
+         justify-content: center;
 
-          image {
-            width: 100%;
-            height: 100%;
-          }
-        }
+         &::before {
+           content: '会员详情介绍';
+           position: absolute;
+           font-size: 34rpx;
+           font-family: Adobe Heiti Std;
+           font-weight: normal;
+           color: #FF4B47;
+           text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
+         }
+       }
 
-        .member-text {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          flex: .9;
+     }
 
-          .text-title {
-            margin-top: -14rpx;
-            font-size: 32rpx;
-            font-weight: bolder;
-            transform: skew(-6deg, 0);
-            display: flex;
-            justify-content: space-between;
-            text{
-              text{
-                color: #C80D00;
-              }
-            }
-            view{
-              width: 18rpx;
-              height: 6rpx;
-              background: #FEAC49;
-              border-radius: 3rpx;
-            }
-          }
+     .member-list {
+       margin: 83rpx 30rpx 30rpx 30rpx;
+       position: relative;
 
-          .text-content {
-            font-size: 24rpx;
-            color: #747474;
-          }
-        }
-      }
-      .member-active{
-        transition: .3s;
-        background: linear-gradient(#FF995F,#DA0E00);
+       .member-item {
+         padding: 30rpx 20rpx 27rpx 20rpx;
+         display: flex;
+         justify-content: space-between;
+         background: #fff;
+         margin-bottom: 20rpx;
+         border-radius: 20rpx;
 
-        .member-image {
-          background: linear-gradient(#FF995F,#DA0E00);
-        }
+         .member-image {
+           width: 104rpx;
+           height: 104rpx;
+           border-radius: 35rpx;
+           background: linear-gradient(#FFEBB2, #FDCB3B);
+           padding: 20rpx;
 
-        .member-text {
-          .text-title {
-            text{
-              color: #fff;
-                text{
-                  color: rgb(223,208,42);
-                }
-            }
-            view{
-              background: #fff;
-              }
-          }
-          .text-content {
-            color: #fff;
-          }
-        }
-      }
+           image {
+             width: 100%;
+             height: 100%;
+           }
+         }
 
-      .member-disbled{
-        transition: .3s;
-        background: linear-gradient(#EFEFEF,#BCBCBC);
+         .member-text {
+           display: flex;
+           flex-direction: column;
+           justify-content: space-between;
+           flex: .9;
 
-        .member-image {
-          background: linear-gradient(#AAAAAA,#989898);
-        }
+           .text-title {
+             margin-top: -14rpx;
+             font-size: 32rpx;
+             font-weight: bolder;
+             transform: skew(-6deg, 0);
+             display: flex;
+             justify-content: space-between;
 
-        .member-text {
-          .text-title {
-            text{
-              color: #868585;
-                text{
-                  color: #868585;
-                }
-            }
-            view{
-              background: #fff;
-              }
-          }
-          .text-content {
-            color: #5C5C5C;
-          }
-        }
-      }
-      .member-prompt{
-        display: flex;
-        justify-content: center;
-        font-size: 24rpx;
-        color: #fff;
-      }
-    }
+             text {
+               text {
+                 color: #C80D00;
+               }
+             }
 
+             view {
+               width: 18rpx;
+               height: 6rpx;
+               background: #FEAC49;
+               border-radius: 3rpx;
+             }
+           }
 
-    .box-submit {
-      background: linear-gradient(#FFC82B,#FD7A32);
-      margin-top: 127rpx;
-      margin-bottom: 75rpx;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 87rpx;
-      border-radius: 44rpx;
-      color: #fff;
-      font-size: 32rpx;
-    }
-  }
+           .text-content {
+             font-size: 24rpx;
+             color: #747474;
+           }
+         }
+       }
+
+       .member-active {
+         transition: .3s;
+         background: linear-gradient(#FF995F, #DA0E00);
+
+         .member-image {
+           background: linear-gradient(#FF995F, #FDCB3B);
+         }
+
+         .member-text {
+           .text-title {
+             text {
+               color: #fff;
+
+               text {
+                 color: rgb(223, 208, 42);
+               }
+             }
+
+             view {
+               background: #fff;
+             }
+           }
+
+           .text-content {
+             color: #fff;
+           }
+         }
+       }
+
+       .member-disbled {
+         transition: .3s;
+         background: linear-gradient(#EFEFEF, #BCBCBC);
+
+         .member-image {
+           background: linear-gradient(#AAAAAA, #989898);
+         }
+
+         .member-text {
+           .text-title {
+             text {
+               color: #868585;
+
+               text {
+                 color: #868585;
+               }
+             }
+
+             view {
+               background: #fff;
+             }
+           }
+
+           .text-content {
+             color: #5C5C5C;
+           }
+         }
+       }
+
+       .member-prompt {
+         display: flex;
+         justify-content: center;
+         font-size: 24rpx;
+         color: #fff;
+       }
+     }
+   }
+
+   .box-privilege {
+     box-shadow: 0px 0px 15px -5px #000;
+     border-radius: 36rpx;
+     width: 100%;
+     margin-top: 12%;
+     border-radius: 20px;
+     box-sizing: border-box;
+     border: 1px solid transparent;
+     background-image: linear-gradient(#FFD55D, #FD752F),
+       linear-gradient(to bottom, #FFEBB2, #FDCB3B);
+     background-origin: border-box;
+     background-clip: content-box, border-box;
+     border-radius: 20px;
+     display: flex;
+     flex: 1;
+     position: relative;
+
+     .box-title {
+       position: absolute;
+       top: -9%;
+       left: -203rpx;
+       margin-left: 50%;
+
+       image {
+         width: 406rpx;
+         height: 87rpx;
+         position: relative;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+
+         &::before {
+           content: '特权详情';
+           position: absolute;
+           font-size: 34rpx;
+           font-family: Adobe Heiti Std;
+           font-weight: normal;
+           color: #FF4B47;
+           text-shadow: 1px 5px 5px rgba(255, 195, 30, 0.78);
+         }
+       }
+
+     }
+
+     .privilege-list {
+       margin: 84rpx 10rpx 40rpx 10rpx;
+       display: flex;
+       justify-content: space-between;
+
+       .privilege-item {
+         display: flex;
+         flex-direction: column;
+         align-items: center;
+         justify-content: space-between;
+         background: #fff;
+         padding: 16rpx 16rpx;
+         border-radius: 20rpx;
+         margin: 0 10rpx;
+
+         image {
+           width: 96rpx;
+           height: 96rpx;
+           border-radius: 50%;
+           margin-bottom: 15rpx;
+         }
+
+         .privilege-text {
+           color: #000000;
+           line-height: 36rpx;
+           text-align: center;
+           font-size: 26rpx;
+         }
+       }
+
+     }
+   }
+
+   .box-submit {
+     background: linear-gradient(#FFC82B, #FD7A32);
+     margin-top: 127rpx;
+     margin-bottom: 75rpx;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     height: 87rpx;
+     border-radius: 44rpx;
+     color: #fff;
+     font-size: 32rpx;
+   }
+ }
 </style>
diff --git a/yudao-ui-app/static/images/bg.png b/yudao-ui-app/static/images/bg.png
new file mode 100644
index 000000000..c77579935
Binary files /dev/null and b/yudao-ui-app/static/images/bg.png differ
diff --git a/yudao-ui-app/static/images/memberBg.png b/yudao-ui-app/static/images/memberBg.png
new file mode 100644
index 000000000..1642d2464
Binary files /dev/null and b/yudao-ui-app/static/images/memberBg.png differ
diff --git a/yudao-ui-app/static/images/memberEquity.png b/yudao-ui-app/static/images/memberEquity.png
new file mode 100644
index 000000000..827a534eb
Binary files /dev/null and b/yudao-ui-app/static/images/memberEquity.png differ
diff --git a/yudao-ui-app/static/images/memberTitle.png b/yudao-ui-app/static/images/memberTitle.png
new file mode 100644
index 000000000..46ef7fb7b
Binary files /dev/null and b/yudao-ui-app/static/images/memberTitle.png differ
diff --git a/yudao-ui-app/static/images/phoneMoney.png b/yudao-ui-app/static/images/phoneMoney.png
new file mode 100644
index 000000000..1b985012b
Binary files /dev/null and b/yudao-ui-app/static/images/phoneMoney.png differ
diff --git a/yudao-ui-app/static/images/vip1.png b/yudao-ui-app/static/images/vip1.png
new file mode 100644
index 000000000..fd9e19d33
Binary files /dev/null and b/yudao-ui-app/static/images/vip1.png differ
diff --git a/yudao-ui-app/static/images/vipStar.png b/yudao-ui-app/static/images/vipStar.png
new file mode 100644
index 000000000..b1b318c0c
Binary files /dev/null and b/yudao-ui-app/static/images/vipStar.png differ