待客录单窗口缩小悬浮的el-tabs只显示一个

src/views/Task/DaikeLetter.vue

@@ -8,8 +8,8 @@
         size="small"
         style="margin-top: 15px"
       >
-        <el-row type="flex" justify="space-between">
-          <el-col :span="5">
+        <el-row style="flex-wrap: wrap; display: flex">
+          <el-col :span="5" :xs="10" :sm="10" :md="5">
             <el-form-item label="工号">
               <el-input
                 placeholder="请输入工号"
@@ -28,7 +28,7 @@
               </el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="5">
+          <el-col :span="5" :xs="5" :sm="10" :md="5" :offset="1">
             <el-form-item label="业务员" prop="name">
               <el-input
                 placeholder="请输入业务员"
@@ -47,7 +47,7 @@
             </el-form-item>
           </el-col>
 
-          <el-col :span="5">
+          <el-col :span="5" :offset="1" :xs="5" :sm="10" :md="5">
             <el-form-item label="工号类型">
               <el-select v-model="salespersonForm.noType" disabled>
                 <el-option label="业务员" value="A"></el-option>
@@ -55,7 +55,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="5">
+          <el-col :span="5" :offset="1" :xs="5" :sm="10" :md="5">
             <el-form-item label="归属" >
               <el-input v-model="salespersonForm.deptName" disabled></el-input>
             </el-form-item>
@@ -65,7 +65,7 @@
     </div>
     <div class="quotation-page">
       <el-tabs v-model="activeName"  tab-position="left" @tab-click="handleClick">
-        <el-tab-pane label="报价" name="999" >
+        <el-tab-pane label="报价" name="999" class="first">
           <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="">
@@ -277,6 +277,7 @@ export default {
   overflow-y: auto;
   height: 80vh;
 }
+
 /deep/.el-tabs{
   position: relative;
   .el-tabs__header {
@@ -364,4 +365,52 @@ export default {
     }
   }
 }
+@media (max-width: 1000px) {
+  /deep/.el-tabs {
+    .el-tabs__header {
+      position: absolute;
+      z-index: 99;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 50px;
+      height: 60px !important;
+      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__item:not(:first-child)::after{
+        content: '' !important;
+        color: #9F9F9F;
+        padding: 0 !important;
+      }
+      .el-tabs__item {
+        display: none !important;
+      }
+      #tab-999 {
+        display: block !important;
+      }
+      &:hover {
+        .el-tabs__item {
+          display: block !important;
+        }
+        .el-tabs__item:not(:first-child)::after{
+          content: '|' !important;
+          color: #9F9F9F;
+          padding: 0 24px !important;
+          vertical-align: text-bottom;
+        }
+        .el-tabs__item:last-child::after{
+          content: '' !important;
+          color: #9F9F9F;
+          padding: 0 !important;
+        }
+      }
+    }
+    
+  }
+}
 </style>