Skip to content

phsl / admin

Go to a project
Commit 9bd33355 by owen
Options

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

parent 881c4f3a
Showing with 69 additions and 39 deletions
src/components/DiyEditor/components/mobile/NavigationBar/index.vue
...@@ -40,7 +40,6 @@ defineProps<{ property: NavigationBarProperty }>() ...@@ -40,7 +40,6 @@ defineProps<{ property: NavigationBarProperty }>()
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
cursor: pointer;
/* 左边 */ /* 左边 */
.left { .left {
margin-left: 8px; margin-left: 8px;
......
src/components/DiyEditor/components/mobile/NoticeBar/index.vue
<template> <template>
<div <div
class="flex items-center text-12px" class="flex items-center p-y-4px text-12px"
:style="{ backgroundColor: property.backgroundColor, color: property.textColor }" :style="{ backgroundColor: property.backgroundColor, color: property.textColor }"
> >
<el-image :src="property.iconUrl" class="h-18px" /> <el-image :src="property.iconUrl" class="h-18px" />
......
src/components/DiyEditor/index.vue
...@@ -45,6 +45,7 @@ ...@@ -45,6 +45,7 @@
@click="handleNavigationBarSelected" @click="handleNavigationBarSelected"
:class="[ :class="[
'component', 'component',
'cursor-pointer!',
{ active: selectedComponent?.id === navigationBarComponent.id } { active: selectedComponent?.id === navigationBarComponent.id }
]" ]"
/> />
...@@ -70,7 +71,7 @@ ...@@ -70,7 +71,7 @@
@change="handleComponentChange" @change="handleComponentChange"
> >
<template #item="{ element, index }"> <template #item="{ element, index }">
<div class="component-box" @click="handleComponentSelected(element, index)"> <div class="component-container" @click="handleComponentSelected(element, index)">
<!-- 左侧组件名 --> <!-- 左侧组件名 -->
<div <div
:class="['component-name', { active: selectedComponentIndex === index }]" :class="['component-name', { active: selectedComponentIndex === index }]"
...@@ -79,12 +80,13 @@ ...@@ -79,12 +80,13 @@
{{ element.name }} {{ element.name }}
</div> </div>
<!-- 组件内容区 --> <!-- 组件内容区 -->
<div :class="['component', { active: selectedComponentIndex === index }]">
<component <component
:is="element.id" :is="element.id"
:property="element.property" :property="element.property"
:class="['component', { active: selectedComponentIndex === index }]"
:data-type="element.id" :data-type="element.id"
/> />
</div>
<!-- 左侧：组件操作工具栏 --> <!-- 左侧：组件操作工具栏 -->
<div <div
class="component-toolbar" class="component-toolbar"
...@@ -130,6 +132,7 @@ ...@@ -130,6 +132,7 @@
:class="[ :class="[
'editor-design-bottom', 'editor-design-bottom',
'component', 'component',
'cursor-pointer!',
{ active: selectedComponent?.id === tabBarComponent.id } { active: selectedComponent?.id === tabBarComponent.id }
]" ]"
> >
...@@ -378,13 +381,16 @@ watch( ...@@ -378,13 +381,16 @@ watch(
onMounted(() => setDefaultSelectedComponent()) onMounted(() => setDefaultSelectedComponent())
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 手机宽度 */
$phone-width: 375px;
/* 根节点样式 */
.editor { .editor {
height: 100%; height: 100%;
margin: calc(0px - var(--app-content-padding)); margin: calc(0px - var(--app-content-padding));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} /* 顶部：工具栏 */
.editor-header { .editor-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
...@@ -392,22 +398,23 @@ onMounted(() => setDefaultSelectedComponent()) ...@@ -392,22 +398,23 @@ onMounted(() => setDefaultSelectedComponent())
padding: 0; padding: 0;
border-bottom: solid 1px var(--el-border-color); border-bottom: solid 1px var(--el-border-color);
background-color: var(--el-bg-color); background-color: var(--el-bg-color);
/* 工具栏：右侧按钮 */
.header-right { .header-right {
height: 100%; height: 100%;
.el-button { .el-button {
height: 100%; height: 100%;
} }
} }
/* 隐藏工具栏按钮的边框 */
:deep(.el-radio-button__inner), :deep(.el-radio-button__inner),
:deep(.el-button) { :deep(.el-button) {
border-top: none !important; border-top: none !important;
border-bottom: none !important; border-bottom: none !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
} }
.editor-container { /* 中心操作区 */
.editor-container {
height: calc( height: calc(
100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px 100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
); );
...@@ -415,11 +422,11 @@ onMounted(() => setDefaultSelectedComponent()) ...@@ -415,11 +422,11 @@ onMounted(() => setDefaultSelectedComponent())
.editor-right { .editor-right {
flex-shrink: 0; flex-shrink: 0;
box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
/* 属性面板顶部：减少内边距 */
:deep(.el-card__header) { :deep(.el-card__header) {
padding: 8px 16px; padding: 8px 16px;
} }
/* 属性面板分组 */
.property-group { .property-group {
/* 属性分组 */ /* 属性分组 */
:deep(.el-card__header) { :deep(.el-card__header) {
...@@ -429,14 +436,14 @@ onMounted(() => setDefaultSelectedComponent()) ...@@ -429,14 +436,14 @@ onMounted(() => setDefaultSelectedComponent())
} }
} }
/* 中心 */ /* 中心区域 */
.editor-center { .editor-center {
flex: 1 1 0; flex: 1 1 0;
padding: 16px 0; padding: 16px 0;
background-color: var(--app-content-bg-color); background-color: var(--app-content-bg-color);
display: flex; display: flex;
justify-content: center; justify-content: center;
/* 中心设计区域 */
.editor-design { .editor-design {
position: relative; position: relative;
height: 100%; height: 100%;
...@@ -449,34 +456,32 @@ onMounted(() => setDefaultSelectedComponent()) ...@@ -449,34 +456,32 @@ onMounted(() => setDefaultSelectedComponent())
/* 组件 */ /* 组件 */
.component { .component {
border: 1px solid #fff; border: 1px solid #fff;
width: 375px !important; width: $phone-width;
cursor: move;
/* 鼠标放到组件上时 */
&:hover { &:hover {
border: 1px dashed #155bd4; border: 1px dashed var(--el-color-primary);
} }
} }
/* 组件选中 */
.component.active { .component.active {
border: 2px solid #155bd4 !important; border: 2px solid var(--el-color-primary);
} }
/* 手机顶部 */
.editor-design-top { .editor-design-top {
width: 379px; width: $phone-width;
/* 手机顶部状态栏 */
.status-bar { .status-bar {
height: 20px; height: 20px;
width: 100%; width: $phone-width;
background-color: #fff; background-color: #fff;
} }
.navigation-bar {
width: 100%;
} }
} /* 手机底部导航 */
.editor-design-bottom { .editor-design-bottom {
width: 379px; width: $phone-width;
} }
/* 手机页面编辑区域 */
.editor-design-center { .editor-design-center {
width: 100%; width: 100%;
flex: 1 1 0; flex: 1 1 0;
...@@ -489,22 +494,20 @@ onMounted(() => setDefaultSelectedComponent()) ...@@ -489,22 +494,20 @@ onMounted(() => setDefaultSelectedComponent())
.phone-container { .phone-container {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
cursor: move;
position: relative; position: relative;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 379px; width: $phone-width;
margin: 0 auto; margin: 0 auto;
.drag-area { .drag-area {
height: 100%; height: 100%;
} }
/* 组件容器 */ /* 组件容器（左侧：组件名称，中间：组件，右侧：操作工具栏） */
.component-box { .component-container {
width: 100%; width: 100%;
position: relative; position: relative;
/* 组件名称 */ /* 左侧：组件名称 */
.component-name { .component-name {
position: absolute; position: absolute;
width: 80px; width: 80px;
...@@ -513,23 +516,50 @@ onMounted(() => setDefaultSelectedComponent()) ...@@ -513,23 +516,50 @@ onMounted(() => setDefaultSelectedComponent())
height: 25px; height: 25px;
background: #fff; background: #fff;
font-size: 12px; font-size: 12px;
left: -80px; left: -85px;
top: 0; top: 0;
box-shadow: box-shadow:
0 0 4px #00000014, 0 0 4px #00000014,
0 2px 6px #0000000f, 0 2px 6px #0000000f,
0 4px 8px 2px #0000000a; 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;
}
} }
/* 组件选中按钮 */
.component-name.active { .component-name.active {
background: #2d8cf0; background: var(--el-color-primary);
color: #fff; color: #fff;
&:after {
border-left-color: var(--el-color-primary);
}
} }
/* 组件操作按钮 */ /* 右侧：组件操作工具栏 */
.component-toolbar { .component-toolbar {
position: absolute; position: absolute;
top: 0; top: 0;
right: -50px; 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 { .el-button-group {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
...@@ -560,5 +590,6 @@ onMounted(() => setDefaultSelectedComponent()) ...@@ -560,5 +590,6 @@ onMounted(() => setDefaultSelectedComponent())
} }
} }
} }
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment