'修改tab'

src/pages/distributorSign/details-tab.vue

@@ -2,33 +2,36 @@
  * @Description: 详情tab
  * @Author: your name
  * @Date: 2019-09-25 19:47:59
- * @LastEditTime: 2019-09-27 13:33:08
+ * @LastEditTime: 2019-11-08 17:00:06
  * @LastEditors: Please set LastEditors
  -->
 <template>
   <div class="tab-style">
-    <span @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span>
-    <span @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span>
-    <span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span>
+    <div :class="{'tab-content-bg':tabNum == 0}" class="tab-content" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?base:unbase"><span
+      :class="{'colored':tabNum == 0}">基本信息</span></div>
+    <div :class="{'tab-content-bg':tabNum == 1}" class="tab-content" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?trial:untrial"><span
+      :class="{'colored':tabNum == 1}">租赁信息</span></div>
+    <div :class="{'tab-content-bg':tabNum == 2}" class="tab-content" @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?sign:unsigned"><span
+      :class="{'colored':tabNum == 2}">担保协议</span></div>
   </div>
 </template>
 <script>
-import check1 from '@/assets/distributorSign/check1.png'
-import check2 from '@/assets/distributorSign/check2.png'
-import check3 from '@/assets/distributorSign/guaranteed.png'
-import uncheck1 from '@/assets/distributorSign/uncheck1.png'
-import uncheck2 from '@/assets/distributorSign/uncheck2.png'
-import uncheck3 from '@/assets/distributorSign/guarantee.png'
+import base from '@/assets/distributorSign/base.png'
+import sign from '@/assets/distributorSign/sign.png'
+import trial from '@/assets/distributorSign/trial.png'
+import unbase from '@/assets/distributorSign/unbase.png'
+import unsigned from '@/assets/distributorSign/unsigned.png'
+import untrial from '@/assets/distributorSign/untrial.png'
 export default {
   data () {
     return {
       tabNum: 0,
-      check1: check1,
-      check2: check2,
-      check3: check3,
-      uncheck1: uncheck1,
-      uncheck2: uncheck2,
-      uncheck3: uncheck3,
+      base: base,
+      unbase: unbase,
+      sign: sign,
+      unsigned: unsigned,
+      trial: trial,
+      untrial: untrial,
     }
   },
   methods: {
@@ -39,29 +42,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>