'修改intoTab'

src/pages/intoApproval/intoApproval/intoTab.vue

@@ -7,23 +7,26 @@
  -->
 <template>
   <div class="tab-style">
-    <span :class="tabNum == 0?'check':'uncheck'" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1">待审批</span>
-    <span :class="tabNum == 1?'check':'uncheck'" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" >已审批</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>
   </div>
 </template>
 <script>
-import check1 from '@/assets/intoApproval/checkF.png'
-import check2 from '@/assets/intoApproval/checkS.png'
-import uncheck1 from '@/assets/intoApproval/uncheckF.png'
-import uncheck2 from '@/assets/intoApproval/uncheckS.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: {
@@ -34,42 +37,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;
-        text-align: center;
-        line-height: 32px;
+    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:14px;
-        height: 14px;
+
+    .tab-content:nth-of-type(1) {
+      margin-left: 12px
     }
-    span:nth-of-type(2){
-        margin-left:7px;
+
+    img {
+      height: 16px;
+      // margin-right:5.7px;
     }
-    .check{
-        color:#00469C;
-        background-color:rgba(0,70,156,0.10);
+
+    .tab-content:nth-of-type(2) {
+      margin-left: 7px;
     }
-    .uncheck{
-        color:#383F45 ;
-        background: rgba(220,220,221,0.26);
-    }
-}
+  }
 </style>