diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
index 953748c7..345b6681 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
+++ b/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;
diff --git a/src/components/DiyEditor/components/mobile/NoticeBar/index.vue b/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
index dc360688..fce1afbb 100644
--- a/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
+++ b/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" />
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index f0fed316..d0d49812 100644
--- a/src/components/DiyEditor/index.vue
+++ b/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
- :is="element.id"
- :property="element.property"
- :class="['component', { active: selectedComponentIndex === index }]"
- :data-type="element.id"
- />
+ <div :class="['component', { active: selectedComponentIndex === index }]">
+ <component
+ :is="element.id"
+ :property="element.property"
+ :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 {
- 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);
+ /* 顶部：工具栏 */
+ .editor-header {
display: flex;
- justify-content: center;
-
- .editor-design {
- position: relative;
+ 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%;
- 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;
- align-items: center;
- overflow: hidden;
-
- /* 组件 */
- .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 {
+ justify-content: center;
+ /* 中心设计区域 */
+ .editor-design {
+ position: relative;
+ height: 100%;
width: 100%;
- flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow: hidden;
- :deep(.el-scrollbar__view) {
- height: 100%;
- }
-
- /* 主体内容 */
- .phone-container {
- height: 100%;
- box-sizing: border-box;
+ /* 组件 */
+ .component {
+ border: 1px solid #fff;
+ width: $phone-width;
cursor: move;
- position: relative;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- width: 379px;
- margin: 0 auto;
+ /* 鼠标放到组件上时 */
+ &:hover {
+ border: 1px dashed var(--el-color-primary);
+ }
+ }
+ /* 组件选中 */
+ .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 {
- width: 100%;
+ /* 主体内容 */
+ .phone-container {
+ height: 100%;
+ box-sizing: border-box;
position: relative;
- /* 组件名称 */
- .component-name {
- position: absolute;
- width: 80px;
- text-align: center;
- line-height: 25px;
- 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;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: $phone-width;
+ margin: 0 auto;
+ .drag-area {
+ height: 100%;
}
- .component-name.active {
- background: #2d8cf0;
- color: #fff;
- }
- /* 组件操作按钮 */
- .component-toolbar {
- position: absolute;
- top: 0;
- right: -50px;
- .el-button-group {
- display: inline-flex;
- flex-direction: column;
+ /* 组件容器（左侧：组件名称，中间：组件，右侧：操作工具栏） */
+ .component-container {
+ 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;
- border-bottom-right-radius: 0;
- border-top-right-radius: var(--el-border-radius-base);
- border-bottom-color: var(--el-button-divide-border-color);
+ /* 组件选中按钮 */
+ .component-name.active {
+ background: var(--el-color-primary);
+ color: #fff;
+ &:after {
+ border-left-color: var(--el-color-primary);
+ }
}
- .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;
+ /* 右侧：组件操作工具栏 */
+ .component-toolbar {
+ position: absolute;
+ top: 0;
+ right: -57px;
+ /* 左侧小三角 */
+ &:before {
+ position: absolute;
+ top: 10px;
+ left: -10px;
+ content: ' ';
+ height: 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;
+ }
}
}
}