✨多标签页适配手机端

src/layout/vab-tabs/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="vab-tabs">
-    <a-row type="flex">
-      <a-col flex="auto">
+    <div class="vab-tabs-left-panel">
       <a-tabs
         @tab-click="handleTabClick"
         @edit="handleTabRemove"
@@ -16,8 +15,8 @@
           :tab="item.meta.title"
         ></a-tab-pane>
       </a-tabs>
-      </a-col>
-      <a-col flex="88px">
+    </div>
+    <div class="vab-tabs-right-panel">
       <a-dropdown>
         <template v-slot:overlay>
           <a-menu @click="handleClick">
@@ -40,8 +39,7 @@
           <DownOutlined />
         </a-button>
       </a-dropdown>
-      </a-col>
-    </a-row>
+    </div>
   </div>
 </template>
 
@@ -180,6 +178,14 @@
   .vab-tabs {
     padding: 0 @vab-margin;
     background: #ffffff;
+    &-left-panel {
+      float: left;
+      width: calc(100% - 52px - @vab-margin - @vab-margin);
+    }
+    &-right-panel {
+      float: left;
+      width: 52px;
+    }
     .ant-tabs {
       &-bar {
         margin: 0 !important;
@@ -191,6 +197,11 @@
         background: #ffffff !important;
         border: 1px solid #dedede !important;
       }
+      &-tab-prev,
+      &-tab-next {
+        height: 32px !important;
+        line-height: 32px !important;
+      }
       &-tab-active {
         border: 1px solid #1890ff !important;
         .ant-tabs-close-x {