代客录单修改

src/views/Task/DaikeLetter.vue

@@ -66,16 +66,31 @@
     <div class="quotation-page">
       <el-tabs v-model="activeName"  tab-position="left" @tab-click="handleClick">
         <el-tab-pane label="报价" name="999" >
+          <span slot="label" title="报价">
+            <img class="active" v-if="activeName == '999'" src="@/assets/image/task/active_quotation.png" alt="">
+            <img class="img" v-else src="@/assets/image/task/quotation.png" alt="">
+            <img class="hover" src="@/assets/image/task/hover_quotation.png" alt="">
+          </span>
           <div class="quotation-content">
             <Ktletter ref="Ktletter" :isdisabled="isdisabled" isLetter="2"></Ktletter>
           </div>
         </el-tab-pane>
         <el-tab-pane label="全部订单" name="888" :disabled="isdisabled">
+          <span slot="label" title="全部订单">
+            <img class="active" v-if="activeName == '888'" src="@/assets/image/task/active_all.png" alt="">
+            <img class="img" v-else src="@/assets/image/task/all.png" alt="">
+            <img class="hover" src="@/assets/image/task/hover_all.png" alt="">
+          </span>
           <div class="quotation-content">
             <KtOrder ref="KtOrder" @orderEdit="orderEdit"  :isLetterOrder="false"></KtOrder>
           </div>
         </el-tab-pane>
         <el-tab-pane v-for="(val) in orderOption"  :key='val.value' :label="val.lable" :name="val.value" :disabled="isdisabled">
+          <span slot="label" :title="val.lable">
+            <img class="active" v-if="activeName == val.value" :src="val.active" alt="">
+            <img class="img" v-else :src="val.url" alt="">
+            <img class="hover" :src="val.hover" alt="">
+          </span>
           <div class="quotation-content">
             <KtOrder :ref="'refName' + val.value"  @orderEdit="orderEdit" :isLetterOrder="false"></KtOrder>
           </div>
@@ -150,18 +165,33 @@ export default {
         {
           lable:'报价中',
           value:'0',
+          url: require('@/assets/image/task/Inthequotation.png'),
+          active:  require('@/assets/image/task/active_Inthequotation.png'),
+          hover:  require('@/assets/image/task/hover_Inthequotation.png')
         },{
           lable:'待核保',
           value:'1',
+          url: require('@/assets/image/task/Pendingunderwriting.png'),
+          active:  require('@/assets/image/task/active_Pendingunderwriting.png'),
+          hover:  require('@/assets/image/task/hover_Pendingunderwriting.png')
         },{
           lable:'已核保待缴费',
           value:'2',
+          url: require('@/assets/image/task/Pendingpayment.png'),
+          active:  require('@/assets/image/task/active_Pendingpayment.png'),
+          hover:  require('@/assets/image/task/hover_Pendingpayment.png')
         },{
           lable:'已承保',
           value:'3',
+          url: require('@/assets/image/task/Underwrited.png'),
+          active:  require('@/assets/image/task/active_Underwrited.png'),
+          hover:  require('@/assets/image/task/hover_Underwrited.png')
         },{
           lable:'核保退回',
           value:'4',
+          url: require('@/assets/image/task/Underwritingreturn.png'),
+          active:  require('@/assets/image/task/active_Underwritingreturn.png'),
+          hover:  require('@/assets/image/task/hover_Underwritingreturn.png')
         },
       ],
       message:'',
@@ -240,4 +270,91 @@ export default {
   overflow-y: auto;
   height: 80vh;
 }
+/deep/.el-tabs{
+  position: relative;
+  .el-tabs__header {
+    position: absolute;
+    z-index: 99;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+    height: 60px;
+    margin: 0;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    background: #F4F4F4;
+    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.25);
+    border-radius: 8px 8px 8px 8px;
+    text-align: center;
+    .el-tabs__nav-wrap{
+      height: auto;
+      &::after{
+        display: none;
+      }
+      .el-tabs__nav-scroll{
+        height: auto;
+        .el-tabs__nav{
+          display: flex;
+          .el-tabs__item{
+            padding: 0;
+            display: flex;
+            align-items: center;
+            span{
+              display: inline-block;
+              width: 30px;
+              height: 30px;
+              line-height: 30px;
+              &:hover{
+                .img{
+                  display: none;
+                }
+                // .active{
+                //   display: none;
+                // }
+                .hover{
+                  display: block;
+                }
+              }
+              img{
+              width: 30px;
+              height: 30px;
+            }
+            }
+            
+            .hover{
+              display: none;
+            }
+            
+          }
+          .el-tabs__item:not(:first-child)::after{
+            content: '|';
+            color: #9F9F9F;
+            padding: 0 24px;
+          }
+          .el-tabs__item:last-child::after{
+            content: '';
+            color: #9F9F9F;
+            padding: 0;
+          }
+          .el-tabs__item.is-active{
+            span{
+              background: #ee4230;
+              padding: 3px;
+              border-radius: 8px;
+            }
+          }
+          .el-tabs__active-bar{
+            display: none;
+            &::before{
+              content: '|';
+              color: #9F9F9F;
+            }
+          }
+        }
+        
+      }
+    }
+  }
+}
 </style>