From 28029becbdedcf293ffa18d2208794e519a9378e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 3 Nov 2025 08:40:27 +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=20hot-zone-edit-dialog=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=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/hot-zone-edit-dialog/index.vue | 54 ++++---------------
 .../components/mobile/hot-zone/index.vue      | 21 ++------
 .../components/mobile/hot-zone/property.vue   | 23 --------
 3 files changed, 14 insertions(+), 84 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
index c232854eb..c797ef9aa 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -193,12 +193,15 @@ const handleAppLinkChange = (appLink: AppLink) => {
       <div
         v-for="(item, hotZoneIndex) in formData"
         :key="hotZoneIndex"
-        class="hot-zone"
+        class="hot-zone absolute z-10 flex cursor-move items-center justify-center border text-base opacity-80"
         :style="{
           width: `${item.width}px`,
           height: `${item.height}px`,
           top: `${item.top}px`,
           left: `${item.left}px`,
+          color: 'var(--el-color-primary)',
+          background: 'var(--el-color-primary-light-7)',
+          borderColor: 'var(--el-color-primary)',
         }"
         @mousedown="handleMove(item, $event)"
         @dblclick="handleShowAppLinkDialog(item)"
@@ -208,17 +211,18 @@ const handleAppLinkChange = (appLink: AppLink) => {
         </span>
         <IconifyIcon
           icon="ep:close"
-          class="delete"
+          class="delete absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white"
+          :style="{ backgroundColor: 'var(--el-color-primary)' }"
           :size="14"
           @click="handleRemove(item)"
         />
 
         <!-- 8 个控制点 -->
         <span
-          class="ctrl-dot"
+          class="ctrl-dot absolute z-[11] h-2 w-2 rounded-full bg-white"
           v-for="(dot, dotIndex) in CONTROL_DOT_LIST"
           :key="dotIndex"
-          :style="dot.style"
+          :style="{ ...dot.style, border: 'inherit' }"
           @mousedown="handleResize(item, dot, $event)"
         ></span>
       </div>
@@ -238,47 +242,9 @@ const handleAppLinkChange = (appLink: AppLink) => {
 </template>
 
 <style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: var(--el-color-primary);
-  cursor: move;
-  background: var(--el-color-primary-light-7);
-  border: 1px solid var(--el-color-primary);
-  opacity: 0.8;
-
-  /* 控制点 */
-  .ctrl-dot {
-    position: absolute;
-    z-index: 11;
-    width: 8px;
-    height: 8px;
-    background-color: #fff;
-    border: inherit;
-    border-radius: 50%;
-  }
-
+.hot-zone:hover {
   .delete {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: none;
-    padding: 2px 2px 6px 6px;
-    color: #fff;
-    text-align: right;
-    cursor: pointer;
-    background-color: var(--el-color-primary);
-    border-radius: 0 0 0 80%;
-  }
-
-  &:hover {
-    .delete {
-      display: block;
-    }
+    display: block;
   }
 }
 </style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
index 958d0749c..8a9e4f37b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
@@ -18,31 +18,18 @@ const props = defineProps<{ property: HotZoneProperty }>();
     <div
       v-for="(item, index) in props.property.list"
       :key="index"
-      class="hot-zone"
+      class="absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
       :style="{
         width: `${item.width}px`,
         height: `${item.height}px`,
         top: `${item.top}px`,
         left: `${item.left}px`,
+        color: 'var(--el-color-primary)',
+        background: 'var(--el-color-primary-light-7)',
+        borderColor: 'var(--el-color-primary)',
       }"
     >
       {{ item.name }}
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  color: var(--el-color-primary);
-  cursor: move;
-  background: var(--el-color-primary-light-7);
-  border: 1px solid var(--el-color-primary);
-  opacity: 0.8;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index 9702db917..47877b41e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -59,26 +59,3 @@ const handleOpenEditDialog = () => {
     :img-url="formData.imgUrl"
   />
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: #fff;
-  cursor: move;
-  background: #409effbf;
-  border: 1px solid var(--el-color-primary);
-
-  /* 控制点 */
-  .ctrl-dot {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    background-color: #fff;
-    border-radius: 50%;
-  }
-}
-</style>