营销：装修编辑器样式优化
This commit is contained in:
owen
parent
881c4f3a29
commit
9bd33355e2
@ -40,7 +40,6 @@ defineProps<{ property: NavigationBarProperty }>()
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
/* 左边 */
|
||||
.left {
|
||||
margin-left: 8px;
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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>
|
||||
<!-- 组件内容区 -->
|
||||
<div :class="['component', { active: selectedComponentIndex === index }]">
|
||||
<component
|
||||
:is="element.id"
|
||||
:property="element.property"
|
||||
:class="['component', { active: selectedComponentIndex === index }]"
|
||||
: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,13 +381,16 @@ 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;
|
||||
@ -392,22 +398,23 @@ onMounted(() => setDefaultSelectedComponent())
|
||||
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 {
|
||||
}
|
||||
/* 中心操作区 */
|
||||
.editor-container {
|
||||
height: calc(
|
||||
100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
|
||||
);
|
||||
@ -415,11 +422,11 @@ onMounted(() => setDefaultSelectedComponent())
|
||||
.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) {
|
||||
@ -429,14 +436,14 @@ onMounted(() => setDefaultSelectedComponent())
|
||||
}
|
||||
}
|
||||
|
||||
/* 中心 */
|
||||
/* 中心区域 */
|
||||
.editor-center {
|
||||
flex: 1 1 0;
|
||||
padding: 16px 0;
|
||||
background-color: var(--app-content-bg-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* 中心设计区域 */
|
||||
.editor-design {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
@ -449,34 +456,32 @@ onMounted(() => setDefaultSelectedComponent())
|
||||
/* 组件 */
|
||||
.component {
|
||||
border: 1px solid #fff;
|
||||
width: 375px !important;
|
||||
|
||||
width: $phone-width;
|
||||
cursor: move;
|
||||
/* 鼠标放到组件上时 */
|
||||
&:hover {
|
||||
border: 1px dashed #155bd4;
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
/* 组件选中 */
|
||||
.component.active {
|
||||
border: 2px solid #155bd4 !important;
|
||||
border: 2px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
/* 手机顶部 */
|
||||
.editor-design-top {
|
||||
width: 379px;
|
||||
|
||||
width: $phone-width;
|
||||
/* 手机顶部状态栏 */
|
||||
.status-bar {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
width: $phone-width;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机底部导航 */
|
||||
.editor-design-bottom {
|
||||
width: 379px;
|
||||
width: $phone-width;
|
||||
}
|
||||
|
||||
/* 手机页面编辑区域 */
|
||||
.editor-design-center {
|
||||
width: 100%;
|
||||
flex: 1 1 0;
|
||||
@ -489,22 +494,20 @@ onMounted(() => setDefaultSelectedComponent())
|
||||
.phone-container {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
cursor: move;
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 379px;
|
||||
width: $phone-width;
|
||||
margin: 0 auto;
|
||||
|
||||
.drag-area {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 组件容器 */
|
||||
.component-box {
|
||||
/* 组件容器（左侧：组件名称，中间：组件，右侧：操作工具栏） */
|
||||
.component-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
/* 组件名称 */
|
||||
/* 左侧：组件名称 */
|
||||
.component-name {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
@ -513,23 +516,50 @@ onMounted(() => setDefaultSelectedComponent())
|
||||
height: 25px;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
left: -80px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
/* 组件选中按钮 */
|
||||
.component-name.active {
|
||||
background: #2d8cf0;
|
||||
background: var(--el-color-primary);
|
||||
color: #fff;
|
||||
&:after {
|
||||
border-left-color: var(--el-color-primary);
|
||||
}
|
||||
/* 组件操作按钮 */
|
||||
}
|
||||
/* 右侧：组件操作工具栏 */
|
||||
.component-toolbar {
|
||||
position: absolute;
|
||||
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 {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
@ -560,5 +590,6 @@ onMounted(() => setDefaultSelectedComponent())
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user