浏览代码

统一区域Tab样式与禁用角标定位,确保多页面与工作台视觉一致。

修复区域Tab文字偏移问题,统一为水平居中布局并同步禁用角标偏移规则。

Made-with: Cursor
zlwu 6 月之前
父节点
当前提交
5312650447

+ 6 - 5
web-admin/src/views/dashboard/console/index.vue

@@ -1110,7 +1110,7 @@
   .region-tab-btn {
     position: relative;
     min-width: 108px;
-    padding-right: 28px;
+    padding: 0 12px;
   }
 
   /**
@@ -1120,8 +1120,9 @@
    */
   .region-tab-btn.el-button > :deep(span) {
     position: static !important;
-    /* 让内部包裹不再占据盒子,避免影响角标定位/居中计算 */
-    display: contents;
+    display: inline-flex;
+    width: 100%;
+    justify-content: center;
   }
 
   .region-tab-btn .region-tab-inner {
@@ -1133,8 +1134,8 @@
 
   .region-tab-btn .region-tab-badge {
     position: absolute;
-    top: 2px;
-    right: 2px;
+    top: -8px;
+    right: -8px;
     padding: 0 4px;
     border-radius: 999px;
     font-size: 10px;

+ 6 - 4
web-admin/src/views/system/client-settlement/index.vue

@@ -1486,12 +1486,14 @@
   .region-tab-btn {
     position: relative;
     min-width: 108px;
-    padding-right: 28px;
+    padding: 0 12px;
   }
 
   .region-tab-btn.el-button > :deep(span) {
     position: static !important;
-    display: contents;
+    display: inline-flex;
+    width: 100%;
+    justify-content: center;
   }
 
   .region-tab-inner {
@@ -1503,8 +1505,8 @@
 
   .region-tab-badge {
     position: absolute;
-    top: 2px;
-    right: 2px;
+    top: -8px;
+    right: -8px;
     padding: 0 4px;
     border-radius: 999px;
     font-size: 10px;

+ 6 - 4
web-admin/src/views/system/delivery-warning/index.vue

@@ -954,12 +954,14 @@
 .region-tab-btn {
   position: relative;
   min-width: 108px;
-  padding-right: 28px;
+  padding: 0 12px;
 }
 
 .region-tab-btn.el-button > :deep(span) {
   position: static !important;
-  display: contents;
+  display: inline-flex;
+  width: 100%;
+  justify-content: center;
 }
 
 .region-tab-inner {
@@ -971,8 +973,8 @@
 
 .region-tab-badge {
   position: absolute;
-  top: 2px;
-  right: 2px;
+  top: -8px;
+  right: -8px;
   padding: 0 4px;
   border-radius: 999px;
   font-size: 10px;

+ 6 - 4
web-admin/src/views/system/delivery/index.vue

@@ -952,12 +952,14 @@
 .region-tab-btn {
   position: relative;
   min-width: 108px;
-  padding-right: 28px;
+  padding: 0 12px;
 }
 
 .region-tab-btn.el-button > :deep(span) {
   position: static !important;
-  display: contents;
+  display: inline-flex;
+  width: 100%;
+  justify-content: center;
 }
 
 .region-tab-inner {
@@ -969,8 +971,8 @@
 
 .region-tab-badge {
   position: absolute;
-  top: 2px;
-  right: 2px;
+  top: -8px;
+  right: -8px;
   padding: 0 4px;
   border-radius: 999px;
   font-size: 10px;

+ 6 - 4
web-admin/src/views/system/inquiry-quotation/index.vue

@@ -3245,11 +3245,13 @@
   .region-tab-btn {
     position: relative;
     min-width: 108px;
-    padding-right: 28px;
+    padding: 0 12px;
   }
   .region-tab-btn.el-button > :deep(span) {
     position: static !important;
-    display: contents;
+    display: inline-flex;
+    width: 100%;
+    justify-content: center;
   }
   .region-tab-inner {
     display: inline-flex;
@@ -3259,8 +3261,8 @@
   }
   .region-tab-badge {
     position: absolute;
-    top: 2px;
-    right: 2px;
+    top: -8px;
+    right: -8px;
     padding: 0 4px;
     border-radius: 999px;
     font-size: 10px;

+ 6 - 4
web-admin/src/views/system/inquiry/index.vue

@@ -555,12 +555,14 @@
 .region-tab-btn {
   position: relative;
   min-width: 108px;
-  padding-right: 28px;
+  padding: 0 12px;
 }
 
 .region-tab-btn.el-button > :deep(span) {
   position: static !important;
-  display: contents;
+  display: inline-flex;
+  width: 100%;
+  justify-content: center;
 }
 
 .region-tab-inner {
@@ -572,8 +574,8 @@
 
 .region-tab-badge {
   position: absolute;
-  top: 4px;
-  right: 6px;
+  top: -8px;
+  right: -8px;
   padding: 0 4px;
   border-radius: 999px;
   font-size: 10px;

+ 6 - 4
web-admin/src/views/system/order/index.vue

@@ -2676,12 +2676,14 @@
   .region-tab-btn {
     position: relative;
     min-width: 108px;
-    padding-right: 28px;
+    padding: 0 12px;
   }
 
   .region-tab-btn.el-button > :deep(span) {
     position: static !important;
-    display: contents;
+    display: inline-flex;
+    width: 100%;
+    justify-content: center;
   }
 
   .region-tab-inner {
@@ -2693,8 +2695,8 @@
 
   .region-tab-badge {
     position: absolute;
-    top: 2px;
-    right: 2px;
+    top: -8px;
+    right: -8px;
     padding: 0 4px;
     border-radius: 999px;
     font-size: 10px;

+ 6 - 4
web-admin/src/views/system/supplier-settlement/index.vue

@@ -1538,12 +1538,14 @@
   .region-tab-btn {
     position: relative;
     min-width: 108px;
-    padding-right: 28px;
+    padding: 0 12px;
   }
 
   .region-tab-btn.el-button > :deep(span) {
     position: static !important;
-    display: contents;
+    display: inline-flex;
+    width: 100%;
+    justify-content: center;
   }
 
   .region-tab-inner {
@@ -1555,8 +1557,8 @@
 
   .region-tab-badge {
     position: absolute;
-    top: 2px;
-    right: 2px;
+    top: -8px;
+    right: -8px;
     padding: 0 4px;
     border-radius: 999px;
     font-size: 10px;

+ 6 - 4
web-admin/src/views/system/user/index.vue

@@ -1061,12 +1061,14 @@
   .region-tab-btn {
     position: relative;
     min-width: 108px;
-    padding-right: 28px;
+    padding: 0 12px;
   }
 
   .region-tab-btn.el-button > :deep(span) {
     position: static !important;
-    display: contents;
+    display: inline-flex;
+    width: 100%;
+    justify-content: center;
   }
 
   .region-tab-inner {
@@ -1078,8 +1080,8 @@
 
   .region-tab-badge {
     position: absolute;
-    top: 2px;
-    right: 2px;
+    top: -8px;
+    right: -8px;
     padding: 0 4px;
     border-radius: 999px;
     font-size: 10px;