'修改经销商tab'

src/pages/distributorSign/contract-list.vue

@@ -166,8 +166,8 @@ export default {
         height: 86px;
         display: flex;
         flex-direction: column;
-        justify-content: space-evenly;
-
+        justify-content: space-around;
+        padding: 4px 0;
         .option {
             width: 100%;
             height: 18px;

src/pages/distributorSign/details-tab.vue

@@ -40,12 +40,21 @@ export default {
 </script>
 <style lang="less" scoped>
 .tab-style{
-    display:flex;
+   /* display:flex;
     justify-content: center;
     padding-top:12px;
     padding-bottom: 8px;
     align-items: center;
-    box-shadow:0 2px 3px 0  rgba(220,220,221,0.50);
+    box-shadow:0 2px 3px 0  rgba(220,220,221,0.50);*/
+  position: relative;
+  z-index: 50;
+  background-color: #fff;
+  display:flex;
+  justify-content: center;
+  padding-top:12px;
+  padding-bottom: 8px;
+  align-items: center;
+  box-shadow:0 2px 3px 0  rgba(220,220,221,0.50);
     span{
         display: block;
         width:112px;

src/pages/distributorSign/tab.vue

@@ -7,24 +7,27 @@
  -->
 <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?signed:sign"><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?finished:finish"><span
+      :class="{'colored':tabNum == 1}">已签约</span></div>
+      <!-- <span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span> -->
   </div>
 </template>
 <script>
-import check1 from '@/assets/distributorSign/unsign.png'
-import check2 from '@/assets/intoApproval/check2.png'
-import uncheck1 from '@/assets/intoApproval/uncheck1.png'
-import uncheck2 from '@/assets/distributorSign/signed.png'
+import signed from '@/assets/distributorSign/icon-signed.png'
+import finished from '@/assets/distributorSign/icon-finished.png'
+import sign from '@/assets/distributorSign/icon-sign.png'
+import finish from '@/assets/distributorSign/icon-finish.png'
+
 export default {
   data () {
     return {
       tabNum: 0,
-      check1: check1,
-      check2: check2,
-      uncheck1: uncheck1,
-      uncheck2: uncheck2,
+      signed: signed,
+      finished: finished,
+      sign: sign,
+      finish: finish,
     }
   },
   methods: {
@@ -35,33 +38,54 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.tab-style{
+  .tab-style {
     position: relative;
     z-index: 50;
     background-color: #fff;
-    display:flex;
-    // justify-content: center;
-    padding-top:12px;
+    display: flex;
+    justify-content: center;
+    padding-top: 12px;
     padding-bottom: 8px;
     align-items: center;
-    background: #fff;
-    box-shadow:0 2px 3px 0  rgba(220,220,221,0.50);
-    span{
-        display: block;
-        width:45.9%;
-        height: 32px;
-        border-radius:16px;
+    box-shadow: 0 2px 3px 0 rgba(220, 220, 221, 0.50);
+
+    .tab-content {
+      display: block;
+      width: 45.9%;
+      height: 32px;
+      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;
+      }
+
+      .colored {
+        color: #00469C
+      }
     }
-    span:nth-of-type(1){
-        margin-left: 12px
+    .tab-content-bg{
+      background: rgba(0,70,156,0.10);
     }
-    img{
-        width:100%;
-        height: 32px;
-        // margin-right:5.7px;
+
+    .tab-content:nth-of-type(1) {
+      margin-left: 12px
     }
-    span:nth-of-type(2){
-        margin-left:7px;
+
+    img {
+      height: 16px;
+      // margin-right:5.7px;
     }
-}
+
+    .tab-content:nth-of-type(2) {
+      margin-left: 7px;
+    }
+  }
 </style>