营销：装修编辑器样式优化

src/components/DiyEditor/components/mobile/NavigationBar/index.vue

@@ -40,7 +40,6 @@ defineProps<{ property: NavigationBarProperty }>()
   display: flex;
   justify-content: space-between;
   align-items: center;
-  cursor: pointer;
   /* 左边 */
   .left {
     margin-left: 8px;

src/components/DiyEditor/components/mobile/NoticeBar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center text-12px"
+    class="flex items-center p-y-4px text-12px"
     :style="{ backgroundColor: property.backgroundColor, color: property.textColor }"
   >
     <el-image :src="property.iconUrl" class="h-18px" />

src/components/DiyEditor/index.vue

@@ -45,6 +45,7 @@
               @click="handleNavigationBarSelected"
               :class="[
                 'component',
+                'cursor-pointer!',
                 { active: selectedComponent?.id === navigationBarComponent.id }
               ]"
             />
@@ -70,7 +71,7 @@
                 @change="handleComponentChange"
               >
                 <template #item="{ element, index }">
-                  <div class="component-box" @click="handleComponentSelected(element, index)">
+                  <div class="component-container" @click="handleComponentSelected(element, index)">
                     <!-- 左侧组件名 -->
                     <div
                       :class="['component-name', { active: selectedComponentIndex === index }]"
@@ -79,12 +80,13 @@
                       {{ element.name }}
                     </div>
                     <!-- 组件内容区 -->
-                    <component
+                    <div :class="['component', { active: selectedComponentIndex === index }]">
-                      :is="element.id"
+                      <component
-                      :property="element.property"
+                        :is="element.id"
-                      :class="['component', { active: selectedComponentIndex === index }]"
+                        :property="element.property"
-                      :data-type="element.id"
+                        :data-type="element.id"
-                    />
+                      />
+                    </div>
                     <!-- 左侧：组件操作工具栏 -->
                     <div
                       class="component-toolbar"
@@ -130,6 +132,7 @@
             :class="[
               'editor-design-bottom',
               'component',
+              'cursor-pointer!',
               { active: selectedComponent?.id === tabBarComponent.id }
             ]"
           >
@@ -378,181 +381,209 @@ watch(
 onMounted(() => setDefaultSelectedComponent())
 </script>
 <style lang="scss" scoped>
+/* 手机宽度 */
+$phone-width: 375px;
+/* 根节点样式 */
 .editor {
   height: 100%;
   margin: calc(0px - var(--app-content-padding));
   display: flex;
   flex-direction: column;
-}
+  /* 顶部：工具栏 */
-.editor-header {
+  .editor-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: auto;
-  padding: 0;
-  border-bottom: solid 1px var(--el-border-color);
-  background-color: var(--el-bg-color);
-
-  .header-right {
-    height: 100%;
-    .el-button {
-      height: 100%;
-    }
-  }
-
-  :deep(.el-radio-button__inner),
-  :deep(.el-button) {
-    border-top: none !important;
-    border-bottom: none !important;
-    border-radius: 0 !important;
-  }
-}
-.editor-container {
-  height: calc(
-    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
-  );
-  /* 右侧属性面板 */
-  .editor-right {
-    flex-shrink: 0;
-    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
-
-    :deep(.el-card__header) {
-      padding: 8px 16px;
-    }
-
-    .property-group {
-      /* 属性分组 */
-      :deep(.el-card__header) {
-        border: none;
-        background: var(--el-bg-color-page);
-      }
-    }
-  }
-
-  /* 中心 */
-  .editor-center {
-    flex: 1 1 0;
-    padding: 16px 0;
-    background-color: var(--app-content-bg-color);
     display: flex;
-    justify-content: center;
+    align-items: center;
-
+    justify-content: space-between;
-    .editor-design {
+    height: auto;
-      position: relative;
+    padding: 0;
+    border-bottom: solid 1px var(--el-border-color);
+    background-color: var(--el-bg-color);
+    /* 工具栏：右侧按钮 */
+    .header-right {
       height: 100%;
-      width: 100%;
+      .el-button {
+        height: 100%;
+      }
+    }
+    /* 隐藏工具栏按钮的边框 */
+    :deep(.el-radio-button__inner),
+    :deep(.el-button) {
+      border-top: none !important;
+      border-bottom: none !important;
+      border-radius: 0 !important;
+    }
+  }
+  /* 中心操作区 */
+  .editor-container {
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
+    );
+    /* 右侧属性面板 */
+    .editor-right {
+      flex-shrink: 0;
+      box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
+      /* 属性面板顶部：减少内边距 */
+      :deep(.el-card__header) {
+        padding: 8px 16px;
+      }
+      /* 属性面板分组 */
+      .property-group {
+        /* 属性分组 */
+        :deep(.el-card__header) {
+          border: none;
+          background: var(--el-bg-color-page);
+        }
+      }
+    }
+
+    /* 中心区域 */
+    .editor-center {
+      flex: 1 1 0;
+      padding: 16px 0;
+      background-color: var(--app-content-bg-color);
       display: flex;
-      flex-direction: column;
+      justify-content: center;
-      align-items: center;
+      /* 中心设计区域 */
-      overflow: hidden;
+      .editor-design {
-
+        position: relative;
-      /* 组件 */
+        height: 100%;
-      .component {
-        border: 1px solid #fff;
-        width: 375px !important;
-
-        &:hover {
-          border: 1px dashed #155bd4;
-        }
-      }
-      .component.active {
-        border: 2px solid #155bd4 !important;
-      }
-
-      .editor-design-top {
-        width: 379px;
-
-        .status-bar {
-          height: 20px;
-          width: 100%;
-          background-color: #fff;
-        }
-
-        .navigation-bar {
-          width: 100%;
-        }
-      }
-
-      .editor-design-bottom {
-        width: 379px;
-      }
-
-      .editor-design-center {
         width: 100%;
-        flex: 1 1 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
 
-        :deep(.el-scrollbar__view) {
+        /* 组件 */
-          height: 100%;
+        .component {
-        }
+          border: 1px solid #fff;
-
+          width: $phone-width;
-        /* 主体内容 */
-        .phone-container {
-          height: 100%;
-          box-sizing: border-box;
           cursor: move;
-          position: relative;
+          /* 鼠标放到组件上时 */
-          background-repeat: no-repeat;
+          &:hover {
-          background-size: 100% 100%;
+            border: 1px dashed var(--el-color-primary);
-          width: 379px;
+          }
-          margin: 0 auto;
+        }
+        /* 组件选中 */
+        .component.active {
+          border: 2px solid var(--el-color-primary);
+        }
+        /* 手机顶部 */
+        .editor-design-top {
+          width: $phone-width;
+          /* 手机顶部状态栏 */
+          .status-bar {
+            height: 20px;
+            width: $phone-width;
+            background-color: #fff;
+          }
+        }
+        /* 手机底部导航 */
+        .editor-design-bottom {
+          width: $phone-width;
+        }
+        /* 手机页面编辑区域 */
+        .editor-design-center {
+          width: 100%;
+          flex: 1 1 0;
 
-          .drag-area {
+          :deep(.el-scrollbar__view) {
             height: 100%;
           }
 
-          /* 组件容器 */
+          /* 主体内容 */
-          .component-box {
+          .phone-container {
-            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
             position: relative;
-            /* 组件名称 */
+            background-repeat: no-repeat;
-            .component-name {
+            background-size: 100% 100%;
-              position: absolute;
+            width: $phone-width;
-              width: 80px;
+            margin: 0 auto;
-              text-align: center;
+            .drag-area {
-              line-height: 25px;
+              height: 100%;
-              height: 25px;
-              background: #fff;
-              font-size: 12px;
-              left: -80px;
-              top: 0;
-              box-shadow:
-                0 0 4px #00000014,
-                0 2px 6px #0000000f,
-                0 4px 8px 2px #0000000a;
             }
-            .component-name.active {
-              background: #2d8cf0;
-              color: #fff;
-            }
-            /* 组件操作按钮 */
-            .component-toolbar {
-              position: absolute;
-              top: 0;
-              right: -50px;
 
-              .el-button-group {
+            /* 组件容器（左侧：组件名称，中间：组件，右侧：操作工具栏） */
-                display: inline-flex;
+            .component-container {
-                flex-direction: column;
+              width: 100%;
+              position: relative;
+              /* 左侧：组件名称 */
+              .component-name {
+                position: absolute;
+                width: 80px;
+                text-align: center;
+                line-height: 25px;
+                height: 25px;
+                background: #fff;
+                font-size: 12px;
+                left: -85px;
+                top: 0;
+                box-shadow:
+                  0 0 4px #00000014,
+                  0 2px 6px #0000000f,
+                  0 4px 8px 2px #0000000a;
+                /* 右侧小三角 */
+                &:after {
+                  position: absolute;
+                  top: 7.5px;
+                  right: -10px;
+                  content: ' ';
+                  height: 0;
+                  width: 0;
+                  border: 5px solid transparent;
+                  border-left-color: #fff;
+                }
               }
-              .el-button-group > .el-button:first-child {
+              /* 组件选中按钮 */
-                border-bottom-left-radius: 0;
+              .component-name.active {
-                border-bottom-right-radius: 0;
+                background: var(--el-color-primary);
-                border-top-right-radius: var(--el-border-radius-base);
+                color: #fff;
-                border-bottom-color: var(--el-button-divide-border-color);
+                &:after {
+                  border-left-color: var(--el-color-primary);
+                }
               }
-              .el-button-group > .el-button:last-child {
+              /* 右侧：组件操作工具栏 */
-                border-top-left-radius: 0;
+              .component-toolbar {
-                border-top-right-radius: 0;
+                position: absolute;
-                border-bottom-left-radius: var(--el-border-radius-base);
+                top: 0;
-                border-top-color: var(--el-button-divide-border-color);
+                right: -57px;
-              }
+                /* 左侧小三角 */
-              .el-button-group .el-button--primary:not(:first-child):not(:last-child) {
+                &:before {
-                border-top-color: var(--el-button-divide-border-color);
+                  position: absolute;
-                border-bottom-color: var(--el-button-divide-border-color);
+                  top: 10px;
-              }
+                  left: -10px;
-              .el-button-group > .el-button:not(:last-child) {
+                  content: ' ';
-                margin-bottom: -1px;
+                  height: 0;
-                margin-right: 0;
+                  width: 0;
+                  border: 5px solid transparent;
+                  border-right-color: #2d8cf0;
+                }
+
+                /* 重写 Element 按钮组的样式（官方只支持水平显示，增加垂直显示的样式） */
+                .el-button-group {
+                  display: inline-flex;
+                  flex-direction: column;
+                }
+                .el-button-group > .el-button:first-child {
+                  border-bottom-left-radius: 0;
+                  border-bottom-right-radius: 0;
+                  border-top-right-radius: var(--el-border-radius-base);
+                  border-bottom-color: var(--el-button-divide-border-color);
+                }
+                .el-button-group > .el-button:last-child {
+                  border-top-left-radius: 0;
+                  border-top-right-radius: 0;
+                  border-bottom-left-radius: var(--el-border-radius-base);
+                  border-top-color: var(--el-button-divide-border-color);
+                }
+                .el-button-group .el-button--primary:not(:first-child):not(:last-child) {
+                  border-top-color: var(--el-button-divide-border-color);
+                  border-bottom-color: var(--el-button-divide-border-color);
+                }
+                .el-button-group > .el-button:not(:last-child) {
+                  margin-bottom: -1px;
+                  margin-right: 0;
+                }
               }
             }
           }