From fd58c4c4e473534875d97288b94c479e711631b8 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Oct 2025 07:24:28 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=E3=80=91diy=20editor?=
 =?UTF-8?q?=20=E4=BF=AE=E5=A4=8D=E5=B7=A6=E4=BE=A7=E3=80=81=E4=B8=AD?=
 =?UTF-8?q?=E9=97=B4=E7=9A=84=E5=AE=BD=E5=BA=A6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/component-library.vue          |  1 +
 .../promotion/components/diy-editor/index.vue | 26 ++++++++-----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index 4220ad08b..10b3ab80f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -129,6 +129,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    width: 261px;
   }
 
   .component {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
index 823c55e21..cfa8fb9be 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
@@ -331,7 +331,7 @@ onMounted(() => {
       <!-- 中心区域 -->
       <ElContainer class="editor-container">
         <!-- 左侧：组件库（ComponentLibrary） -->
-        <ElAside width="200px" class="editor-left">
+        <ElAside width="261px" class="editor-left">
           <ComponentLibrary
             v-if="libs && libs.length > 0"
             ref="componentLibrary"
@@ -595,22 +595,18 @@ $phone-width: 375px;
       }
 
       /* 手机页面编辑区域 */
-      :deep(.editor-design-center) {
-        width: 100%;
+      .phone-container {
+        position: relative;
+        width: $phone-width;
+        height: 100%;
+        margin: 0 auto;
+        overflow-x: hidden;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
 
-        /* 主体内容 */
-        .phone-container {
-          position: relative;
-          width: $phone-width;
+        .drag-area {
+          width: 100%;
           height: 100%;
-          margin: 0 auto;
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-
-          .drag-area {
-            width: 100%;
-            height: 100%;
-          }
         }
       }