From a33907d4ae29adce09ec63c0d0738b29e72a879d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 3 Nov 2025 08:42:47 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90mall?=
 =?UTF-8?q?=E3=80=91diy-editor=20=E7=9A=84=20tab-bar=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20tailwindcss=20=E7=AE=80=E5=8C=96=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/tab-bar/index.vue       | 38 +++++--------------
 1 file changed, 9 insertions(+), 29 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
index aa7484d63..937c4648d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@@ -11,9 +11,9 @@ defineOptions({ name: 'TabBar' });
 defineProps<{ property: TabBarProperty }>();
 </script>
 <template>
-  <div class="tab-bar">
+  <div class="z-[2] w-full">
     <div
-      class="tab-bar-bg"
+      class="flex flex-row items-center justify-around py-2"
       :style="{
         background:
           property.style.bgType === 'color'
@@ -26,7 +26,7 @@ defineProps<{ property: TabBarProperty }>();
       <div
         v-for="(item, index) in property.items"
         :key="index"
-        class="tab-bar-item"
+        class="tab-bar-item flex w-full flex-col items-center justify-center text-xs"
       >
         <ElImage :src="index === 0 ? item.activeIconUrl : item.iconUrl">
           <template #error>
@@ -48,32 +48,12 @@ defineProps<{ property: TabBarProperty }>();
   </div>
 </template>
 <style lang="scss" scoped>
-.tab-bar {
-  z-index: 2;
-  width: 100%;
-
-  .tab-bar-bg {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    padding: 8px 0;
-
-    .tab-bar-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      font-size: 12px;
-
-      :deep(img),
-      .el-icon {
-        width: 26px;
-        height: 26px;
-        border-radius: 4px;
-      }
-    }
+.tab-bar-item {
+  :deep(img),
+  .el-icon {
+    width: 26px;
+    height: 26px;
+    border-radius: 4px;
   }
 }
 </style>