From 9e35642879e542ff09aa1e2c01cdb3959a434be8 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 3 Jan 2025 17:25:25 +0800
Subject: [PATCH] =?UTF-8?q?style(editor):=20=E4=BC=98=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=85=8D=E7=BD=AE=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/fields/StyleSetter/Index.vue     |  8 ++++----
 .../editor/src/fields/StyleSetter/components/Box.vue |  7 ++++++-
 .../src/fields/StyleSetter/components/Position.vue   |  7 ++++++-
 packages/editor/src/theme/style-setter/index.scss    | 12 ++++++++++++
 packages/editor/src/theme/style-setter/layout.scss   |  3 +--
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/fields/StyleSetter/Index.vue b/packages/editor/src/fields/StyleSetter/Index.vue
index 4ca0d852..6ccbf25f 100644
--- a/packages/editor/src/fields/StyleSetter/Index.vue
+++ b/packages/editor/src/fields/StyleSetter/Index.vue
@@ -40,16 +40,16 @@ const list = [
     component: Layout,
   },
   {
-    title: '文字',
-    component: Font,
+    title: '位置',
+    component: Position,
   },
   {
     title: '背景',
     component: Background,
   },
   {
-    title: '位置',
-    component: Position,
+    title: '文字',
+    component: Font,
   },
   {
     title: '边框与圆角',
diff --git a/packages/editor/src/fields/StyleSetter/components/Box.vue b/packages/editor/src/fields/StyleSetter/components/Box.vue
index 4e1be9e6..aa7a7958 100644
--- a/packages/editor/src/fields/StyleSetter/components/Box.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Box.vue
@@ -3,7 +3,12 @@
     <div v-for="(item, index) in list" :key="index" :class="item.class">
       <span class="help-txt" v-if="item.text">{{ item.text }}</span>
       <span class="next-input">
-        <input v-model="model[item.name]" @change="change($event, item.name)" placeholder="0" />
+        <input
+          v-model="model[item.name]"
+          :title="model[item.name]"
+          @change="change($event, item.name)"
+          placeholder="0"
+        />
       </span>
     </div>
   </div>
diff --git a/packages/editor/src/fields/StyleSetter/components/Position.vue b/packages/editor/src/fields/StyleSetter/components/Position.vue
index 7d3955de..09523e2d 100644
--- a/packages/editor/src/fields/StyleSetter/components/Position.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Position.vue
@@ -2,7 +2,12 @@
   <div class="layout-box-container">
     <div v-for="(item, index) in list" :key="index" :class="item.class">
       <span class="next-input">
-        <input v-model="model[item.name]" @change="change($event, item.name)" placeholder="0" />
+        <input
+          v-model="model[item.name]"
+          :title="model[item.name]"
+          @change="change($event, item.name)"
+          placeholder="0"
+        />
       </span>
     </div>
   </div>
diff --git a/packages/editor/src/theme/style-setter/index.scss b/packages/editor/src/theme/style-setter/index.scss
index 0645dd81..e09743cb 100644
--- a/packages/editor/src/theme/style-setter/index.scss
+++ b/packages/editor/src/theme/style-setter/index.scss
@@ -4,6 +4,18 @@
 
 .m-fields-style-setter {
   width: 100%;
+
+  .tmagic-design-collapse-item {
+    > .el-collapse-item__header {
+      background-color: #f2f3f7;
+      height: 36px;
+      padding: 10px;
+    }
+
+    .el-collapse-item__wrap {
+      padding: 0 10px;
+    }
+  }
 }
 
 .text-align-list {
diff --git a/packages/editor/src/theme/style-setter/layout.scss b/packages/editor/src/theme/style-setter/layout.scss
index 51c3cc2e..b4dee7fc 100644
--- a/packages/editor/src/theme/style-setter/layout.scss
+++ b/packages/editor/src/theme/style-setter/layout.scss
@@ -1,8 +1,7 @@
 // 盒子模型
 .layout-box-container {
   position: relative;
-  margin: 0 0 16px 16px;
-  width: 270px;
+  width: 100%;
   height: 150px;
 
   .help-txt {