营销:装修编辑器样式优化
This commit is contained in:
parent
881c4f3a29
commit
9bd33355e2
@ -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;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<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" />
|
||||||
|
@ -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 @@
|
|||||||
@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 @@
|
|||||||
{{ 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 @@
|
|||||||
:class="[
|
:class="[
|
||||||
'editor-design-bottom',
|
'editor-design-bottom',
|
||||||
'component',
|
'component',
|
||||||
|
'cursor-pointer!',
|
||||||
{ active: selectedComponent?.id === tabBarComponent.id }
|
{ active: selectedComponent?.id === tabBarComponent.id }
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
@ -378,12 +381,15 @@ 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;
|
||||||
@ -392,14 +398,14 @@ 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;
|
||||||
@ -407,6 +413,7 @@ onMounted(() => setDefaultSelectedComponent())
|
|||||||
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())
|
|||||||
.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())
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 中心 */
|
/* 中心区域 */
|
||||||
.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())
|
|||||||
/* 组件 */
|
/* 组件 */
|
||||||
.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())
|
|||||||
.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())
|
|||||||
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;
|
||||||
@ -561,4 +591,5 @@ onMounted(() => setDefaultSelectedComponent())
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user