'绑定UI升级'

src/components/tab.vue

 <template>
-  <div class="tab-style">
+ <!-- <div class="tab-style">
     <span @click="tabNum1 = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span>
     <span @click="tabNum1 = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span>
     <span @click="tabNum1 = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span>
+  </div>-->
+  <div class="tab-style">
+    <div :class="{'tab-content-bg':tabNum1 == 0}" class="tab-content" @click="tabNum1 = 0;sendTabNum()"><img :src="tabNum1 == 0?check1:uncheck1"><span
+      :class="{'colored':tabNum1 == 0}">基本信息</span></div>
+    <div :class="{'tab-content-bg':tabNum1 == 1}" class="tab-content" @click="tabNum1 = 1;sendTabNum()"><img :src="tabNum1 == 1?check2:uncheck2"><span
+      :class="{'colored':tabNum1 == 1}">银行信息</span></div>
+    <div :class="{'tab-content-bg':tabNum1 == 2}" class="tab-content" @click="tabNum1 = 2;sendTabNum()"><img :src="tabNum1 == 2?check3:uncheck3"><span
+      :class="{'colored':tabNum1 == 2}">开票信息</span></div>
   </div>
 </template>
 <script>
@@ -39,29 +47,50 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.tab-style{
+  .tab-style {
     position: relative;
     z-index: 50;
     background-color: #fff;
-    display:flex;
+    display: flex;
     justify-content: center;
-    padding-top:12px;
+    padding-top: 12px;
     padding-bottom: 8px;
     align-items: center;
-    box-shadow:0 2px 3px 0  rgba(220,220,221,0.50);
-    span{
+    box-shadow: 0 2px 3px 0 rgba(220, 220, 221, 0.50);
+
+    .tab-content {
       display: block;
-        width:112px;
+      width: 45.9%;
       height: 32px;
-        border-radius:16px;
+      background: rgba(220, 220, 221, 0.26);
+      border-radius: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      span {
+        margin-left: 2%;
+        font-size: 14px;
+        color: #383F45;
+        font-weight: 600;
+        font-family: PingFangSC-Semibold;
       }
-    img{
-        width:112px;
-        height: 32px;
-        margin-right:5.7px;
+
+      .colored {
+        color: @headerColor
+      }
+    }
+    .tab-content-bg{
+      background: rgba(0,70,156,0.10);
+    }
+
+    img {
+      height: 16px;
+      // margin-right:5.7px;
+    }
+
+    .tab-content:nth-of-type(2) {
+      margin-left: 7px;
     }
-    span:nth-of-type(2){
-        margin:0 10px;
   }
-}
 </style>

src/pages/distributorSign/tab.vue

@@ -68,7 +68,7 @@ export default {
       }
 
       .colored {
-        color: #00469C
+        color: @headerColor
       }
     }
     .tab-content-bg{

src/pages/userBind/np/bankInfo.vue

@@ -174,7 +174,7 @@ export default {
             .top-word {
               font-family: PingFangSC-Semibold;
               font-size: 15px;
-              color: #00469c;
+              color: @headerColor;
               letter-spacing: 0.46px;
               .sum {
                 font-family: PingFangSC-Semibold;

src/pages/userBind/np/naturePerson.vue

@@ -7,7 +7,7 @@
  -->
 <template>
   <h-view id="base-info1" class="public-style" title="基本信息">
-    <h-header :proportion="[5,1,1]" class="header">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn" @click="$routeGo()">
         <img src="@/assets/userBind/arrow.png" >
         <span>用户绑定</span>
@@ -1506,31 +1506,12 @@ export default {
       padding-right: 21px;
     }
   }
-  .header {
-    background-color: #00469c;
-    color: #fff;
-    .h-header-btn {
-      img {
-        width: 16px;
-        height: 16px;
-        margin-left: 4px;
-      }
-      span {
-        color: #fff;
-        font-family: PingFangSC-Semibold;
-        margin-left: 16px;
-        font-size: 17px;
-        letter-spacing: 0.6px;
-        line-height: 24px;
-      }
-    }
-  }
   .content {
     height: 76%;
     .userInfo {
       height: 45px;
       line-height: 45px;
-      color: #00469c;
+      color: @headerColor;
       margin-top: -10px;
       font-size: 15px;
       margin-left: 16px;
@@ -1541,7 +1522,7 @@ export default {
       display: block;
       width: 4px;
       height: 20px;
-      background-color: #00469c;
+      background-color: @headerColor;
       position: absolute;
       left: -15px;
       top: 12px;
@@ -1646,9 +1627,9 @@ export default {
   .put {
     width: 175px;
     height: 45px;
-    color: #00469c;
+    color: @headerColor;
     border-radius: 4px;
-    border: 1px solid #00469c;
+    border: 1px solid @headerColor;
     background-color: #fafafa;
   }
   .put-approved {
@@ -1656,14 +1637,14 @@ export default {
     height: 45px;
     color: #fff;
     border-radius: 4px;
-    background-color: #00469c;
+    background-color: @headerColor;
   }
   .save {
     width: 175px;
     height: 45px;
     color: #fff;
     border-radius: 4px;
-    background-color: #00469c;
+    background-color: @headerColor;
   }
   .footer-button {
     padding-top: 15px;
@@ -1694,7 +1675,7 @@ export default {
       span {
         font-family: PingFangSC-Semibold;
         font-size: 15px;
-        color: #00469c;
+        color: @headerColor;
         letter-spacing: 0.47px;
       }
       img {
@@ -1719,7 +1700,7 @@ export default {
   .add-card {
     width: 358px;
     height: 40px;
-    background: #00469c;
+    background: @headerColor;
     border-radius: 4px;
     color: #fff;
   }

src/pages/userBind/org/bankInfo.vue

@@ -182,7 +182,7 @@ export default {
             .top-word {
               font-family: PingFangSC-Semibold;
               font-size: 15px;
-              color: #00469c;
+              color: @headerColor;
               letter-spacing: 0.46px;
               .sum {
                 font-family: PingFangSC-Semibold;

src/pages/userBind/org/enterprise.vue

@@ -7,7 +7,7 @@
  -->
 <template>
   <h-view id="base-info" class="public-style" title="基本信息">
-    <h-header :proportion="[5,1,1]" class="header">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn" @click="$routeGo()">
         <img src="@/assets/userBind/arrow.png" >
         <span>用户绑定</span>
@@ -507,8 +507,8 @@ export default {
         // legal_person: '',
         cell_phone: null,
         living_address: '',
-        id_card_date_from: '',// 法定代表人身份证有效期从
-        id_card_date_to: '', //法定代表人身份证有效期到
+        id_card_date_from: '', // 法定代表人身份证有效期从
+        id_card_date_to: '', // 法定代表人身份证有效期到
       },
       baseInfo: {
         district_id: '',
@@ -546,7 +546,7 @@ export default {
         auth_person_id_card: '',
         auth_person_position: '',
         auth_id_card_date_from: '', // 授权人身份证有效期从
-        auth_id_card_date_to: '',// 授权人身份证有效期到
+        auth_id_card_date_to: '', // 授权人身份证有效期到
       },
       idCardFront: '', // 身份证正面图片
       idCardBack: '', // 身份证反面图片
@@ -1259,7 +1259,7 @@ export default {
           hlsPopup.showLongCenter('请拍照')
         } else {
           if (ocrType === 'idCard') {
-            type === 'front' ? (vm.idCardFront = imgdata, vm.idCardIdentify(imgdata),vm.idCardFrontEditFlag = true) : (vm.idCardBack = imgdata,vm.idCardBackIdentify(imgdata),vm.idCardBackEditFlag = true)
+            type === 'front' ? (vm.idCardFront = imgdata, vm.idCardIdentify(imgdata), vm.idCardFrontEditFlag = true) : (vm.idCardBack = imgdata, vm.idCardBackIdentify(imgdata), vm.idCardBackEditFlag = true)
           } else if (ocrType === 'bankCard') {
             vm.bankImg = imgdata
             vm.bankCardIdentify(imgdata)
@@ -1288,7 +1288,7 @@ export default {
           hlsPopup.showLongCenter('请选择一张图片')
         } else {
           if (ocrType === 'idCard') {
-            type === 'front' ? (vm.idCardFront = imgUrl[0], vm.idCardIdentify(imgUrl[0]),vm.idCardFrontEditFlag = true) : (vm.idCardBack = imgUrl[0],vm.idCardBackIdentify(imgUrl[0]),vm.idCardBackEditFlag = true)
+            type === 'front' ? (vm.idCardFront = imgUrl[0], vm.idCardIdentify(imgUrl[0]), vm.idCardFrontEditFlag = true) : (vm.idCardBack = imgUrl[0], vm.idCardBackIdentify(imgUrl[0]), vm.idCardBackEditFlag = true)
           } else if (ocrType === 'bankCard') {
             vm.bankImg = imgUrl[0]
             vm.bankCardIdentify(imgUrl[0])
@@ -1787,27 +1787,6 @@ export default {
       padding-right:21px;
     }
   }
-  .header {
-    background-color: #00469c;
-    color: #fff;
-
-    .h-header-btn {
-      img {
-        width: 16px;
-        height: 16px;
-        margin-left: 4px;
-      }
-
-      span {
-        font-family: PingFangSC-Semibold;
-        color: #fff;
-        margin-left: 16px;
-        font-size: 17px;
-        letter-spacing: 0.6px;
-        line-height: 24px;
-      }
-    }
-  }
 
   .content {
     margin-top: 3px;
@@ -1825,7 +1804,7 @@ export default {
       height: 40px;
       line-height: 40px;
       background-color: #fafafa;
-      color: #00469c;
+      color: @headerColor;
       font-size: 15px;
       margin-left: 16px;
       position: relative;
@@ -1836,7 +1815,7 @@ export default {
       display: block;
       width: 4px;
       height: 20px;
-      background-color: #00469c;
+      background-color: @headerColor;
       position: absolute;
       left: -15px;
       top: 10px;
@@ -1872,7 +1851,7 @@ export default {
         div {
           width: 100%;
           height: 100%;
-          border: 1px solid #00469c;
+          border: 1px solid @headerColor;
           border-radius: 3px;
         }
       }
@@ -2025,9 +2004,9 @@ export default {
   .put {
     width: 175px;
     height: 45px;
-    color: #00469c;
+    color: @headerColor;
     border-radius: 4px;
-    border: 1px solid #00469c;
+    border: 1px solid @headerColor;
     background-color: #fafafa;
   }
   .put-approved {
@@ -2035,14 +2014,14 @@ export default {
     height: 45px;
     color: #fff;
     border-radius: 4px;
-    background-color: #00469c;
+    background-color: @headerColor;
   }
   .save {
     width: 175px;
     height: 45px;
     color: #fff;
     border-radius: 4px;
-    background-color: #00469c;
+    background-color: @headerColor;
   }
 
   .footer-button {
@@ -2078,7 +2057,7 @@ export default {
       span {
         font-family: PingFangSC-Semibold;
         font-size: 15px;
-        color: #00469c;
+        color: @headerColor;
         letter-spacing: 0.47px;
       }
 
@@ -2106,7 +2085,7 @@ export default {
   .add-card {
     width: 358px;
     height: 40px;
-    background: #00469c;
+    background: @headerColor;
     border-radius: 4px;
     color: #fff;
   }

src/pages/userBind/userBind.vue

 <template>
   <h-view id="user-bind" class="public-style" title="用户绑定">
-    <h-header :proportion="[5,1,1]" class="header">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="$routeGo(-1)">
         <span>用户绑定</span>
@@ -15,12 +15,18 @@
         <p>绑定成功后，您即可使用APP中合同查询、还款查询等功能。</p>
       </div>
       <p>选择用户类型</p>
-      <h-button :class="flag==0?'nature':'org'" @click.native="flag = 0">
+      <!--<h-button :class="flag==0?'nature':'org'" @click.native="flag = 0">
         <img src="@/assets/userBind/np.png" class="n-img" >自然人
       </h-button>
       <h-button :class="flag==1?'nature':'org'" @click.native="flag = 1">
         <img src="@/assets/userBind/entr.png" class="o-img" >企业
-      </h-button>
+      </h-button>-->
+      <div class="bind-wrap" @click="flag = 0">
+        <img :src="flag==0? bindnped:bindnp">
+      </div>
+      <div class="bind-wrap" @click="flag = 1">
+        <img :src="flag==1? bindorged:bindorg">
+      </div>
       <h-button class="enter" @click.native="changePage">
         进入
         <img src="@/assets/userBind/right.png" >
@@ -33,6 +39,10 @@ export default {
   data () {
     return {
       flag: 0,
+      bindnp: require('@/assets/userBind/bindnp.png'),
+      bindnped: require('@/assets/userBind/bindnped.png'),
+      bindorg: require('@/assets/userBind/bindorg.png'),
+      bindorged: require('@/assets/userBind/bindorged.png'),
     }
   },
   created () {
@@ -61,25 +71,6 @@ export default {
 </script>
 <style lang="less" scoped type="text/less">
 #user-bind {
-  .header {
-    background-color: #00469c;
-    color: #fff;
-    .h-header-btn {
-      img {
-        width: 16px;
-        height: 16px;
-        margin-left: 4px;
-      }
-      span {
-        color: #fff;
-        font-family: PingFangSC-Semibold;
-        margin-left: 16px;
-        font-size: 17px;
-        letter-spacing: 0.6px;
-        line-height: 24px;
-      }
-    }
-  }
   .content {
     .info {
       height: 88px;
@@ -123,8 +114,13 @@ export default {
       margin-left: 16px;
       margin-top: 24px;
     }
-    .nature,
-    .org,
+    .bind-wrap{
+      width: 92%;
+      margin: 10px auto;
+      img{
+        width: 100%;
+      }
+    }
     .enter {
       display: block;
       width: 343px;
@@ -140,28 +136,8 @@ export default {
       justify-content: center;
       align-items: center;
     }
-    .nature {
-      color: rgba(0, 70, 156, 1);
-      background-color: rgba(0, 98, 217, 0.1);
-      border: 1px solid rgba(0, 70, 156, 1);
-    }
-    .n-img {
-      width: 18.3px;
-      height: 21px;
-      margin-right: 8px;
-    }
-    .o-img {
-      width: 22.5px;
-      height: 19.5px;
-      margin-right: 8px;
-    }
-    .org {
-      background-color: rgba(220, 220, 221, 0.3);
-      color: rgba(101, 100, 100, 1);
-      border: none;
-    }
     .enter {
-      background-color: rgba(0, 70, 156, 1);
+      background-color: @headerColor;
       color: #fff;
       margin-top: 80px;
       img {