个人中心

src/pages.json

@@ -25,6 +25,12 @@
 				"navigationBarTitleText": "标签管理"
 			}
 		},
+		{
+			"path": "pages/cardHolder/exchangeCard",
+			"style": {
+				"navigationBarTitleText": "交换名片申请"
+			}
+		},
 		{
 			"path": "pages/index/chat",
 			"style": {
@@ -50,15 +56,15 @@
 			}
 		},
 		{
-			"path": "pages/mine/setSubscription",
+			"path": "pages/mine/setServiceAutoReply",
 			"style": {
-				"navigationBarTitleText": "服务号提醒设置"
+				"navigationBarTitleText": "客服自动回复设置"
 			}
 		},
 		{
-			"path": "pages/mine/setServiceAutoReply",
+			"path": "pages/mine/authentication",
 			"style": {
-				"navigationBarTitleText": "客服自动回复设置"
+				"navigationBarTitleText": "认证"
 			}
 		}
 		

src/pages/cardHolder/cardHolder.vue

@@ -14,7 +14,7 @@
           <img class="searchPic" src="/static/images/search.png">
           <input class="inputs" type="text">
         </div>
-        <div class="messageDiv">
+        <div class="messageDiv" @click="toExChange()">
           <img class="pic" src="/static/images/headPic1.jpg"> <!--55*55-->
           <p class="tipText">...</p>
         </div>
@@ -167,6 +167,18 @@
       </div>
     </movable-area>
 
+    <!--添加备注-->
+    <div class="newRemarksDiv" v-show="false">
+      <div class="newRemarksBox">
+        <p class="title">添加备注</p>
+        <textarea class="remarksText" placeholder="请输入备注内容（建议在50以内）"></textarea>
+        <div class="confirmDiv">
+          <button class="cancel" type="button">取消</button>
+          <button class="save" type="button">保存</button>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -196,6 +208,11 @@ export default {
       wx.navigateTo({
         url: './labelManage'
       });
+    },
+    toExChange() {
+      wx.navigateTo({
+        url: './exchangeCard'
+      });
     }
   }
 }

src/pages/cardHolder/exchangeCard.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="cx-exchange-card">
+
+    <div class="cardsDiv">
+      <div class="cardHeadDiv">
+        <div class="imgDiv">
+          <img class="headPic" src="/static/images/avart2.jpg">
+          <img class="vip" src="/static/images/vip.png">
+        </div>
+        <div class="textDiv">
+          <p class="userName">冯小刚</p>
+          <p class="occupation">导演</p>  <!--occupation=>职业-->
+          <p class="company">小刚影视传媒集团有限公司</p>
+        </div>
+        <div class="clickShow">
+          <p class="show">&gt;</p>
+        </div>
+      </div>
+      <div class="applyReasonDiv" v-show="false">
+        <p class="text">申请理由：希望能有共同合作的机会</p>
+      </div>
+      <div class="confirmDiv">
+        <p class="refuse">拒绝</p>
+        <p class="agree">同意</p>
+      </div>
+    </div>
+
+    <div class="cardsDiv">
+      <div class="cardHeadDiv">
+        <div class="imgDiv">
+          <img class="headPic" src="/static/images/avart2.jpg">
+          <img class="vip" src="/static/images/vip.png">
+        </div>
+        <div class="textDiv">
+          <p class="userName">冯小刚</p>
+          <p class="occupation">导演</p>  <!--occupation=>职业-->
+          <p class="company">小刚影视传媒集团有限公司</p>
+        </div>
+        <div class="clickShow">
+          <p class="show">&gt;</p>
+        </div>
+      </div>
+      <div class="applyReasonDiv" v-show="true">
+        <p class="text">申请理由：希望能有共同合作的机会</p>
+      </div>
+      <div class="confirmDiv">
+        <p class="refuse">拒绝</p>
+        <p class="agree">同意</p>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>
+

src/pages/cardHolder/labelManage.vue

@@ -23,13 +23,29 @@
     <div class="newLabelDiv" v-if="newLabelDivFlag">
       <div class="newLabelBox">
         <p class="title">新建标签</p>
-        <input class="newLabelName" v-text="inputText" type="text" placeholder="请输入分组名称，不超过10个字">
+        <input class="newLabelName" v-model="inputText" type="text" placeholder="请输入分组名称，不超过10个字">
         <div class="confirmBox">
-          <button class="cancel" @click="newLabelCancel()">取消</button>
-          <button class="save" @click="newLabelSave()">保存</button>
+          <button class="cancel" @click="newLabelCancel()" type="button">取消</button>
+          <button class="save" @click="newLabelSave()" type="button">保存</button>
         </div>
       </div>
     </div>
+
+    <!--删除名片-->
+    <div class="delCardDiv" v-show="false">
+      <div class="delCardBox">
+        <p class="imgBox">
+          <img class="img" src="/static/images/warning.png">
+        </p>
+        <p class="title">确定删除冯小刚的名片？</p>
+        <div class="confirmDiv">
+          <button class="cancel" type="button">取消</button>
+          <button class="delete" type="button">删除</button>
+        </div>
+      </div>
+    </div>
+
+    
   </div>
 </template>
 
@@ -78,9 +94,14 @@ export default {
       this.newLabelDivFlag = false;
     },
     newLabelSave() {
-      this.labelData.push({text: this.inputText, num: 5});
-      this.newLabelDivFlag = false;
-      this.inputText = '';
+      if (this.inputText == '') {
+        console.log('不能为空！');
+        return;
+      } else {
+        this.labelData.push({text: this.inputText, num: 5});
+        this.newLabelDivFlag = false;
+        this.inputText = '';
+      }
       console.log(this.labelData);
     }
   }

src/pages/mine/authentication.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="cx-authentication">
+    
+    <!--头部-->
+    <div class="headDiv">
+      <p class="title">
+        温馨提示：
+        <br>
+        1. 认证后同等情况下将优先被推荐；
+        <br>
+        2. 认证后发布的内容优先推送至发现；
+        <br>
+        3. 认证用户有特殊标识，提高可信度。
+      </p>
+    </div>
+
+    <!--姓名-->
+    <div class="userNameDiv">
+      <p class="title">真实姓名：</p>
+      <p class="name">{{userName}}</p>
+    </div>
+
+    <!--添加身份证照DIV-->
+    <div class="idDiv">
+      <div class="picBox">
+        <p class="text">+</p>
+      </div>
+      <div class="picBox">
+        <p class="text">+</p>
+      </div>
+    </div>
+
+    <!--提示-->
+    <div class="tipsDiv">
+      <p class="text">身份证（人像面）</p>
+      <p class="text">身份证（国徽面）</p>
+    </div>
+
+    <!--举例-->
+    <div class="exampleDiv">
+      <img class="pic" src="/static/images/idBefore.png">
+      <img class="pic" src="/static/images/idAfter.png">
+    </div>
+
+    <!--提交按钮-->
+    <div>
+      <p>提交</p>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      userName: '康娟'
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>
+
+

src/pages/mine/mine.vue

@@ -1,64 +1,152 @@
 <template>
-    <div class="cx-mine">
-        <!--头部DIV-->
-        <div class="topDiv">
-            <div class="topPicBox">
-                <img class="headPic" src="/static/images/headPic2.jpg">
-                <img class="headwear" src="/static/images/vip.png">
-            </div>
-            <div class="userInfoDiv">
-                <p class="userName">康娟</p>
-                <p class="vipExprise">VIP有效期至2019-11-25</p>
-            </div>
-            <div class="vipRenew">
-                <p class="text">VIP续费</p>
-            </div>
+  <div class="cx-mine">
+    <movable-area class="moveMenuBox">
+      <movable-view class="moveMenuCont" :x="tran" :y="vert" direction="all" damping="30" friction="5" @change="handleChange">
+        <img class="moveMenuPic" src="/static/images/headPic5.jpg">
+        <p class="msgText">80</p>
+        <p class="text">聊一聊</p>
+      </movable-view>
+
+      <!--头部-->
+      <div class="headDivBox">
+        <div class="imgBox">
+          <img class="headImg" :src="userInfo.avatarUrl">
+          <img class="vip" src="/static/images/vip.png" v-if="userInfo.isVip">
+          <img class="authen" src="/static/images/presonAuthen.png"> <!--认证-->
+        </div>
+        <div class="userInfoBox">
+          <p class="userName">{{userInfo.name}}</p>
+          <p class="userVipExp" v-if="userInfo.isVip">VIP有效期至{{userInfo.vipExpirse}}</p>
+        </div>
+        <div class="vipRenew">
+          <p class="text" v-text="userInfo.isVip ? 'VIP续费' : '成为VIP'"></p>
+        </div>
+      </div>
+
+      <!--基本信息-->
+      <div class="userInfoDivBox">
+        <div class="optionsDiv toRight">
+          <img class="img" src="/static/images/money.png">
+          <p class="num">{{userInfo.myMoney}}</p>
+          <p class="text">我的钱包</p>
+        </div>
+
+        <div class="optionsDiv toRight">
+          <img class="img" src="/static/images/goods.png">
+          <p class="num">{{userInfo.myGoodsNum}}件</p>
+          <p class="text">商品管理</p>
+        </div>
+
+        <div class="optionsDiv">
+          <img class="img" src="/static/images/CRM.png">
+          <p class="num">{{userInfo.myCustomerNum}}人</p>
+          <p class="text">客户管理</p>
         </div>
+      </div>
 
-        <div class="options" @click="subscription()">
-            <img class="optionPic" src="/static/images/clock.png">
-            <p class="text">服务号提醒服务</p>
-            <p class="more">></p>
+      <!--名片管理-->
+      <div class="optionsBox">
+        <div class="imgBox">
+          <img class="img" src="/static/images/mine-card.png">
+          <p class="text" v-show="false">●</p>
         </div>
+        <p class="title">名片管理</p>
+        <p class="toMore">&gt;</p>
+      </div>
 
-        <div class="options" @click="customerService()">
-            <img class="optionPic" src="/static/images/service.png">
-            <p class="text">客服自动回复设置</p>
-            <p class="more">></p>
+      <!--邀请好友-->
+      <div class="optionsBox">
+        <div class="imgBox">
+          <img class="img" src="/static/images/mine-share.png">
+          <p class="text" v-show="true">●</p>
         </div>
-        
-        <div class="options">
-            <img class="optionPic" src="/static/images/help.png">
-            <p class="text">帮助与反馈</p>
-            <p class="more">></p>
+        <p class="title">邀请好友</p>
+        <p class="toMore">&gt;</p>
+      </div>
+
+      <!--认证-->
+      <div class="optionsBox">
+        <div class="imgBox">
+          <img class="img" src="/static/images/mine-authen.png">
+          <p class="text" v-show="true">●</p>
+        </div>
+        <p class="title">认证</p>
+        <p class="toMore">&gt;</p>
+      </div>
+
+      <!--服务号提醒-->
+      <div class="optionsBox">
+        <div class="imgBox">
+          <img class="img" src="/static/images/mine-remind.png">
+          <p class="text" v-show="false">●</p>
         </div>
-    </div>
+        <p class="title">服务号提醒</p>
+        <p class="toMore">&gt;</p>
+      </div>
+
+      <!--隐私-->
+      <div class="optionsBox">
+        <div class="imgBox">
+          <img class="img" src="/static/images/mine-private.png">
+          <p class="text" v-show="false">●</p>
+        </div>
+        <p class="title">隐私</p>
+        <p class="toMore">&gt;</p>
+      </div>
+
+      <!--聊一聊自动回复设置-->
+      <div class="optionsBox">
+        <div class="imgBox">
+          <img class="img" src="/static/images/mine-service.png">
+          <p class="text" v-show="false">●</p>
+        </div>
+        <p class="title">聊一聊自动回复设置</p>
+        <p class="toMore">&gt;</p>
+      </div>
+
+      <!--帮助与反馈-->
+      <div class="optionsBox">
+        <div class="imgBox">
+          <img class="img" src="/static/images/mine-help.png">
+          <p class="text" v-show="false">●</p>
+        </div>
+        <p class="title">帮助与反馈</p>
+        <p class="toMore">&gt;</p>
+      </div>
+
+    </movable-area>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
+  data() {
+    return {
+      tran: 350,     //横轴(移动菜单)
+      vert: 500,     //纵轴(移动菜单)
+      userInfo: {name: '康娟', avatarUrl: '../../static/images/headPic3.jpg', isVip: true, vipExpirse: '2019-11-25', myMoney: 200.01, myGoodsNum: 500, myCustomerNum: 1000}
+    }
+  },
 
-        }
-    },
+  onLoad() {
 
-    onLoad() {
+  },
 
+  methods: {
+    handleChange(e) {
+      // console.log(e);
+      this.tran = e.detail.x;
+      this.vert = e.detail.y;
+      if (this.tran <= 188) {
+          console.log('超过中间线了');
+          this.tran = 0;
+      } else {
+          this.tran = 350;
+      }
+      // console.log('X:', this.tran);
+      // console.log('Y:', this.vert);
     },
-
-    methods: {
-        subscription() {
-            wx.navigateTo({
-                url: './setSubscription'
-            });
-        },
-        customerService() {
-            wx.navigateTo({
-                url: './setServiceAutoReply'
-            });
-        }
-    }
+  }
 
 }
 </script>

src/pages/mine/setSubscription.vue

@@ -1,35 +0,0 @@
-
-<!--服务号设置页面-->
-<template>
-    <div class="cx-subscription">
-        <div class="options top">
-            <p class="text">名片被浏览提醒</p>
-            <switch class="btnPic" checked color="#53A7FA"></switch>
-        </div>
-
-        <div class="options">
-            <p class="text">名片被收藏提醒</p>
-            <switch class="btnPic" color="#53A7FA"></switch>
-        </div>
-
-        <div class="options">
-            <p class="text">名片交换提醒</p>
-            <switch class="btnPic" color="#53A7FA"></switch>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-
-        }
-    }
-}
-</script>
-
-<style lang="less">
-
-</style>
-

src/static/less/cx-style.less

@@ -1730,6 +1730,80 @@
         margin-bottom: 80rpx;
     }
   }
+  /*添加备注*/
+  .newRemarksDiv {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    background-color: rgba(67, 70, 86, 0.21);
+
+    .newRemarksBox {
+      margin: 425rpx auto;
+      padding: 30rpx 30rpx 40rpx 30rpx;
+      box-sizing: border-box;
+      width: 670rpx;
+      height: 550rpx;
+      border-radius: 40rpx;
+      background-color: #fff;
+
+      .title {
+        margin: 0 auto;
+        width: 155rpx;
+        height: 50rpx;
+        font-size: 36rpx;
+        color: #434656;
+        line-height: 50rpx;
+        letter-spacing: 2.22rpx;
+      }
+    }
+
+    .remarksText {
+      margin-top: 47rpx;
+      padding: 26rpx 30rpx;
+      box-sizing: border-box;
+      width: 610rpx;
+      height: 262rpx;
+      border-radius: 40rpx;
+      border: 1rpx solid #979797;
+    }
+
+    .confirmDiv {
+      margin-top: 47rpx;
+      display: flex;
+      width: auto;
+      height: 74rpx;
+
+      .cancel {
+        margin-right: 10rpx;
+        padding: 16rpx 118rpx;
+        box-sizing: border-box;
+        width: 300rpx;
+        height: 74rpx;
+        font-size: 30rpx;
+        color: #434656;
+        line-height: 42rpx;
+        border-radius: 37rpx;
+        letter-spacing: 1.85rpx;
+        border: 1rpx solid #434656;
+      }
+
+      .save {
+        padding: 16rpx 118rpx;
+        box-sizing: border-box;
+        width: 300rpx;
+        height: 74rpx;
+        font-size: 30rpx;
+        color: #fff;
+        line-height: 42rpx;
+        border-radius: 37rpx;
+        letter-spacing: 1.85rpx;
+        background-color: #50A8FC;
+      }
+    }
+  }
 }
 
 /*标签管理*/
@@ -1785,6 +1859,7 @@
       }
     }
   }
+  /*新建标签*/
   .newLabelDiv {
     width: 100%;
     height: 100%;
@@ -1853,6 +1928,203 @@
     }
     }
   }
+  /*删除名片*/
+  .delCardDiv {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    background-color: rgba(67, 70, 86, 0.21);
+    .delCardBox {
+      padding: 50rpx 30rpx 30rpx 30rpx;
+      box-sizing: border-box;
+      margin: 465rpx auto;
+      width: 670rpx;
+      height: 405rpx;
+      background-color: #fff;
+      border-radius: 40rpx;
+      .imgBox {
+        margin: 0 auto;
+        width: 100rpx;
+        height: 100rpx;
+        .img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .title {
+        margin: 40rpx 162rpx 69rpx 157rpx;
+        width: 351rpx;
+        height: 42rpx;
+        color: #434656;
+        font-size: 30rpx;
+        line-height: 42rpx;
+        letter-spacing: 1.85rpx;
+      }
+      .confirmDiv {
+        display: flex;
+        width: auto;
+        height: 74rpx;
+        .cancel {
+          padding: 16rpx 118rpx;
+          box-sizing: border-box;
+          width: 300rpx;
+          height: 74rpx;
+          font-size: 30rpx;
+          color: #434656;
+          line-height: 42rpx;
+          border-radius: 37rpx;
+          letter-spacing: 1.85rpx;
+          border: 1rpx solid rgba(67, 70, 86, 1);
+        }
+        .delete {
+          padding: 16rpx 118rpx;
+          box-sizing: border-box;
+          width: 300rpx;
+          height: 74rpx;
+          color: #fff;
+          font-size: 30rpx;
+          line-height: 42rpx;
+          border-radius: 37rpx;
+          letter-spacing: 1.85rpx;
+          background-color: #50A8FC;
+        }
+      }
+    }
+  }
+
+}
+
+/*交换名片申请*/
+.cx-exchange-card {
+  .cardsDiv {
+    margin-top: 30rpx;
+    margin-left: 40rpx;
+    padding-bottom: 20rpx;
+    box-sizing: border-box;
+    width: 670rpx;
+    height: auto;
+    border-radius: 20rpx;
+    box-shadow: 4rpx 0 10rpx 2rpx rgba(0, 0, 0, 0.2);
+    .cardHeadDiv {
+      padding: 20rpx 21rpx 0 29rpx;
+      box-sizing: border-box;
+      width: 100%;
+      height: auto;
+      display: flex;
+      .imgDiv {
+        position: relative;
+        margin-right: 23rpx;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 54rpx;
+        border: 4rpx solid #50A8FC;
+        .headPic {
+          width: 100%;
+          height: 100%;
+          border-radius: 50rpx;
+        }
+        .vip {
+          position: absolute;
+          top: -24rpx;
+          right: -24rpx;
+          width: 48rpx;
+          height: 48rpx;
+        }
+      }
+      .textDiv {
+        width: 430rpx;
+        height: auto;
+        .userName {
+          width: 115rpx;
+          height: 42rpx;
+          font-size: 30rpx;
+          color: #434656;
+          line-height: 42rpx;
+          letter-spacing: 1.85rpx;
+        }
+        .occupation {
+          margin-top: 4rpx;
+          width: 60rpx;
+          height: 33rpx;
+          color: #9B9B9B;
+          font-size: 24rpx;
+          line-height: 33rpx;
+          letter-spacing: 1.48rpx;
+        }
+        .company {
+          margin-top: 8rpx;
+          max-width: 430rpx;
+          height: 33rpx;
+          color: #434656;
+          font-size: 24rpx;
+          line-height: 33rpx;
+          letter-spacing: 1.48rpx;
+        }
+      }
+      .clickShow {
+        margin-top: 37rpx;
+        margin-left: 10rpx;
+        width: 40rpx;
+        height: 40rpx;
+        .show {
+          width: 100%;
+          height: 100%;
+          color: #50A8FC;
+          font-size: 40rpx;
+          line-height: 40rpx;
+          text-align: center;
+        }
+      }
+    }
+    .applyReasonDiv {
+      margin-top: 30rpx;
+      width: 100%;
+      height: auto;
+      border-top: 1rpx solid #E5E5E5;
+      .text {
+        margin-top: 19rpx;
+        margin-left: 30rpx;
+        width: 610rpx;
+        height: 33rpx;
+        color: #9B9B9B;
+        font-size: 24rpx;
+        line-height: 33rpx;
+        letter-spacing: 1.48rpx;
+      }
+    }
+    .confirmDiv {
+      margin-top: 40rpx;
+      margin-left: 371rpx;
+      width: auto;
+      height: 50rpx;
+      display: flex;
+      .refuse {
+        margin-right: 30rpx;
+        width: 119rpx;
+        height: 50rpx;
+        color: #50A8FC;
+        font-size: 28rpx;
+        text-align: center;
+        line-height: 50rpx;
+        border-radius: 30rpx;
+        border: 1rpx solid #50A8FC;
+      }
+  
+      .agree {
+        width: 119rpx;
+        height: 50rpx;
+        color: #fff;
+        font-size: 28rpx;
+        text-align: center;
+        line-height: 50rpx;
+        border-radius: 30rpx;
+        background-color: #50A8FC;
+      }
+    }
+  }
 }
 
 /*聊一聊*/
@@ -2255,128 +2527,355 @@
     }
 }
 
-/*个人中心*/
-.cx-mine {
-    .topDiv {
-        padding-top: 30rpx;
-        padding-left: 40rpx;
-        box-sizing: border-box;
-        display: flex;
+/*谁收藏了我页面(名片)*/
+.cx-showWhoCollecMe {
+    .top {
+        border-top: 1px solid #E5E5E5;
+    }
+
+    .options {
         width: 100%;
-        height: 210rpx;
-        background:linear-gradient(180deg, rgba(136, 211, 254, 1) 0%, rgba(80, 168, 252, 1) 100%);
+        height: 154rpx;
+        display: flex;
+        border-bottom: 1px solid #E5E5E5;
+
         .topPicBox {
             position: relative;
-            margin-right: 30rpx;
-            width: 120rpx;
-            height: 120rpx;
+            margin: 26rpx 20rpx 28rpx 30rpx;
+            width: 100rpx;
+            height: 100rpx;
+
             .headPic {
-                margin: 10rpx;
-                width: 100rpx;
-                height: 100rpx;
+                width: 100%;
+                height: 100%;
                 border-radius: 50rpx;
             }
-            .headwear {
+
+            .authenPic {
                 position: absolute;
-                top: 0;
+                bottom: 0;
                 right: 0;
-                width: 40rpx;
-                height: 40rpx;
+                width: 28rpx;
+                height: 28rpx;
+            }
+
+            .vipPic {
+                position: absolute;
+                top: -17rpx;
+                right: -15rpx;
+                width: 41rpx;
+                height: 41rpx;
             }
         }
-        .userInfoDiv {
-            margin-top: 15rpx;
-            width: auto;
-            height: 90rpx;
+
+        .textBox {
+            margin-top: 20rpx;
+            margin-right: 109rpx;
+            width: 250rpx;
+            height: 112rpx;
+
             .userName {
-                width: 72rpx;
-                height: 50rpx;
-                line-height: 50rpx;
-                color: #fff;
-                font-size: 36rpx;
+                width: 90rpx;
+                height: 42rpx;
+                line-height: 42rpx;
+                color: #434656;
+                font-size: 30rpx;
             }
-            .vipExprise {
-                margin-top: 4rpx;
-                width: 270rpx;
+
+            .describe {
+                width: 250rpx;
                 height: 33rpx;
+                color: #9B9B9B;
                 line-height: 33rpx;
-                color: #fff;
                 font-size: 24rpx;
             }
+
+            .time {
+                width: 177rpx;
+                height: 28rpx;
+                color: #9B9B9B;
+                line-height: 28rpx;
+                font-size: 20rpx;
+            }
         }
-        .vipRenew {
-            margin-top: 20rpx;
-            margin-left: 77rpx;
-            width: 190rpx;
-            height: 54rpx;
-            border-radius: 27rpx;
-            background-color: #fff;
+
+        .exchangeCardDiv {
+            margin-top: 52rpx;
+
             .text {
-                margin: 6rpx 36rpx 6rpx 37rpx;
-                width: 117rpx;
-                height: 42rpx;
-                color: #50A8FC;
-                line-height: 42rpx;
-                font-size: 30rpx;
+                padding: 5rpx 26rpx;
+                box-sizing: border-box;
+                width: 201rpx;
+                height: 50rpx;
+                line-height: 40rpx;
+                color: #fff;
+                border-radius: 25rpx;
+                font-size: 28rpx;
+                background-color: #50A8FC;
             }
         }
     }
-    .options {
-        width: 100%;
-        height: 88rpx;
-        display: flex;
-        border-bottom: 1rpx solid #E5E5E5;
-        .optionPic {
-            margin: 28rpx 30rpx;
-            width: 48rpx;
-            height: 32rpx;
+}
+
+/*个人中心*/
+.cx-mine {
+  .moveMenuBox {
+    .moveMenuCont {
+
+    }
+    /*头部*/
+    .headDivBox {
+      width: 100%;
+      height: auto;
+      display: flex;
+      .imgBox {
+        position: relative;
+        margin: 30rpx 30rpx 0 40rpx;
+        width: 100rpx;
+        height: 100rpx;
+        .headImg {
+          width: 100rpx;
+          height: 100rpx;
+          border-radius: 50rpx;
+        }
+        .vip {
+          position: absolute;
+          top: -15rpx;
+          right: -15rpx;
+          width: 40rpx;
+          height: 40rpx;
         }
-        .text {
-            margin-top: 23rpx;
-            width: 320rpx;
-            height: 42rpx;
-            color: #434656;
-            font-size: 30rpx;
-            line-height: 42rpx;
+        .authen {
+          position: absolute;
+          bottom: 0;
+          right: -5rpx;
+          width: 28rpx;
+          height: 28rpx;
         }
-        .more {
-            margin: 31rpx 30rpx 31rpx 352rpx;
-            width: 13rpx;
-            height: 26rpx;
-            line-height: 26rpx;
-            font-size: 40rpx;
-            color: #C7C7CC;
+      }
+      .userInfoBox {
+        margin-top: 39rpx;
+        width: 270rpx;
+        height: auto;
+        .userName {
+          width: 72rpx;
+          height: 50rpx;
+          color: #434656;
+          font-size: 36rpx;
+          line-height: 50rpx;
+        }
+        .userVipExp {
+          margin-top: 4rpx;
+          width: 270rpx;
+          height: 33rpx;
+          color: #9B9B9B;
+          font-size: 24rpx;
+          line-height: 33rpx;
         }
+      }
+      .vipRenew {
+        margin-top: 53rpx;
+        margin-left: 100rpx;
+        width: 180rpx;
+        height: 54rpx;
+        border-radius: 27rpx;
+        border: 1rpx solid #50A8FC;
+        .text {
+          margin: 6rpx 35rpx;
+          width: 109rpx;
+          height: 42rpx; 
+          color: #50A8FC;
+          font-size: 30rpx;
+          line-height: 42rpx;
+        }
+      }
     }
-
-}
-
-/*服务号提醒设置页面(个人中心)*/
-.cx-subscription {
-    .top {
-        border-top: 1rpx solid #E5E5E5;
-    }
-    .options {
-        width: 100%;
-        height: 88rpx;
-        border-bottom: 1rpx solid #E5E5E5;
-        display: flex;
+    /*基本信息*/
+    .userInfoDivBox {
+      margin-top: 60rpx;
+      margin-bottom: 40rpx;
+      padding: 0 30rpx;
+      box-sizing: border-box;
+      width: 100%;
+      height: auto;
+      display: flex;
+      .optionsDiv {
+        width: 210rpx;
+        height: 210rpx;
+        background: linear-gradient(rgba(66, 197, 255, 1), rgba(80, 168, 252, 1));
+        border-radius: 20rpx;
+        .img {
+          margin-top: 25rpx;
+          margin-left: 75rpx;
+          width: 57rpx;
+          height: 57rpx;
+        }
+        .num {
+          margin-top: 18rpx;
+          width: 100%;
+          height: 42rpx;
+          color: #fff;
+          font-size: 30rpx;
+          text-align: center;
+          line-height: 42rpx;
+        }
         .text {
-            margin: 24rpx 378rpx 22rpx 30rpx;
-            width: 210rpx;
-            height: 42rpx;
-            line-height: 42rpx;
-            color: #434656;
-            font-size: 30rpx;
+          margin-top: 10rpx;
+          width: 100%;
+          height: 28rpx;
+          color: #fff;
+          font-size: 20rpx;
+          text-align: center;
+          line-height: 28rpx;
         }
-        .btnPic {
-            margin-top: 13rpx;
-            width: 102rpx;
-            height: 62rpx;
+      }
+      .toRight {
+        margin-right: 30rpx;
+      }
+    }
+    /*各项功能*/
+    .optionsBox {
+      padding: 23rpx 30rpx;
+      box-sizing: border-box;
+      width: 750rpx;
+      height: 88rpx;
+      display: flex;
+      border-bottom: 1rpx solid #e5e5e5;
+      .imgBox {
+        position: relative;
+        margin-top: 5rpx;
+        width: 35rpx;
+        height: 35rpx;
+        .img {
+          margin-top: 1rpx;
+          width: 33rpx;
+          height: 33rpx;
+        }
+        .text {
+          position: absolute;
+          top: -10rpx;
+          right: 13rpx;
+          width: 5rpx;
+          height: 5px;
+          color: #D0021B;
+          font-size: 25rpx;
         }
+      }
+      .title {
+        margin-left: 19rpx;
+        width: 270rpx;
+        height: 42rpx;
+        color: #434656;
+        font-size: 30rpx;
+        line-height: 42rpx;
+      }
+      .toMore {
+        margin-top: 8rpx;
+        margin-left: 350rpx;
+        width: 16rpx;
+        height: 26rpx;
+        font-size: 40rpx;
+        color: #C7C7CC;
+        text-align: center;
+        line-height: 26rpx;
+      }
     }
+  }
 }
 
+/*认证(个人中心)*/
+.cx-authentication {
+  .headDiv {
+    margin-top: 20rpx;
+    margin-left: 30rpx;
+    width: 516rpx;
+    height: 168rpx;
+    .title {
+      width: 100%;
+      height: 100%;
+      color: #D0021B;
+      font-size: 30rpx;
+      line-height: 42rpx;
+    }
+  }
+  .userNameDiv {
+    margin-top: 30rpx;
+    width: 750rpx;
+    height: 88rpx;
+    display: flex;
+    border-top: 1rpx solid #e5e5e5;
+    border-bottom: 1rpx solid #e5e5e5;
+    .title {
+      margin: 23rpx 30rpx;
+      width: 150rpx;
+      height: 42rpx;
+      color: #434656;
+      font-size: 30rpx;
+      line-height: 42rpx;
+    }
+    .name {
+      margin-top: 23rpx;
+      width: 60rpx;
+      height: 42rpx;
+      color: #9B9B9B;
+      font-size: 30rpx;
+      line-height: 42rpx;
+    }
+  }
+  .idDiv {
+    margin-top: 60rpx;
+    width: 100%;
+    height: auto;
+    display: flex;
+    .picBox {
+      position: relative;
+      margin-left: 30rpx;
+      width: 330rpx;
+      height: 208rpx;
+      border-radius: 20rpx;
+      background-color: #F5F5F5;
+      border: 1rpx solid #979797;
+      .text {
+        position: absolute;
+        top: 76rpx;
+        left: 137rpx;
+        width: 56rpx;
+        height: 56rpx;
+        color: #ccc;
+        line-height: 56rpx;
+        font-size: 50rpx;
+      }
+    }
+  }
+  .tipsDiv {
+    margin-top: 30rpx;
+    width: 100%;
+    height: 33rpx;
+    display: flex;
+    .text {
+      margin-left: 30rpx;
+      width: 330rpx;
+      height: 33rpx;
+      color: #434656;
+      font-size: 24rpx;
+      text-align: center;
+      line-height: 33rpx;
+    }
+  }
+  .exampleDiv {
+    margin-top: 29rpx;
+    padding-left: 95rpx;
+    box-sizing: border-box;
+    width: 100%;
+    height: 137rpx;
+    display: flex;
+    .pic {
+      margin-right: 158rpx;
+      width: 202rpx;
+      height: 137rpx;
+    }
+  }
+}
 
 /*客服自动回复设置(个人中心)*/
 .cx-service {
@@ -2431,85 +2930,6 @@
     }
 }
 
-/*谁收藏了我页面(名片)*/
-.cx-showWhoCollecMe {
-    .top {
-        border-top: 1px solid #E5E5E5;
-    }
-    .options {
-        width: 100%;
-        height: 154rpx;
-        display: flex;
-        border-bottom: 1px solid #E5E5E5;
-        .topPicBox {
-            position: relative;
-            margin: 26rpx 20rpx 28rpx 30rpx;
-            width: 100rpx;
-            height: 100rpx;
-            .headPic{
-                width: 100%;
-                height: 100%;
-                border-radius: 50rpx;
-            }
-            .authenPic {
-                position: absolute;
-                bottom: 0;
-                right: 0;
-                width: 28rpx;
-                height: 28rpx;
-            }
-            .vipPic {
-                position: absolute;
-                top: -17rpx;
-                right: -15rpx;
-                width: 41rpx;
-                height: 41rpx;
-            }
-        }
-        .textBox {
-            margin-top: 20rpx;
-            margin-right: 109rpx;
-            width: 250rpx;
-            height: 112rpx;
-            .userName{
-                width: 90rpx;
-                height: 42rpx;
-                line-height: 42rpx;
-                color: #434656;
-                font-size: 30rpx;
-            }
-            .describe {
-                width: 250rpx;
-                height: 33rpx;
-                color: #9B9B9B;
-                line-height: 33rpx;
-                font-size: 24rpx;
-            }
-            .time {
-                width: 177rpx;
-                height: 28rpx;
-                color: #9B9B9B;
-                line-height: 28rpx;
-                font-size: 20rpx;
-            }
-        }
-        .exchangeCardDiv {
-            margin-top: 52rpx;
-            .text {
-                padding: 5rpx 26rpx;
-                box-sizing: border-box;
-                width: 201rpx;
-                height: 50rpx;
-                line-height: 40rpx;
-                color: #fff;
-                border-radius: 25rpx;
-                font-size: 28rpx;
-                background-color: #50A8FC;
-            }
-        }
-    }
-}
-
 /*可移动菜单*/
 .moveMenuBox {
   width: 750rpx;