code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-12 20:08:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(manager): 热区设置面板按模块卡片形式展示

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-10-12 16:14:40 +08:00
parent 27ca53068b
commit a568131b7c
1 changed files with 77 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
manager/src/views/page-decoration/wap/config-panel/PanelFlexOne.vue
View File

@@ -16,63 +16,71 @@
</div> </div>
<template v-if="activeTab === 'content'"> <template v-if="activeTab === 'content'">
<div class="section-title">内容设置</div> <div class="panel-card">
<div class="section-tip">选定布局区域，在下方添加图片，建议添加比例一致的图片</div> <div class="section-title">内容设置</div>
<div class="img-preview" v-if="item.img"> <div class="section-tip">选定布局区域，在下方添加图片，建议添加比例一致的图片</div>
<img :src="item.img" alt="" /> <div class="img-preview" v-if="item.img">
</div> <img :src="item.img" alt="" />
<div class="img-placeholder" v-else>尺寸不限</div> </div>
<div class="btn-row"> <div class="img-placeholder" v-else>尺寸不限</div>
<el-button plain type="primary" @click="pickImage">选择照片</el-button> <div class="btn-row">
<el-button plain type="primary" @click="openHotzone">绘制热区</el-button> <el-button plain type="primary" @click="pickImage">选择照片</el-button>
<el-button plain type="primary" @click="openHotzone">绘制热区</el-button>
</div>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="section-title">颜色设置</div> <div class="panel-card">
<color-field <div class="section-title">颜色设置</div>
v-model="res.options.bgColor" <color-field
label="背景颜色" v-model="res.options.bgColor"
:default-value="defaults.bgColor" label="背景颜色"
/> :default-value="defaults.bgColor"
<div class="section-title">边距设置</div> />
<slider-field </div>
v-model="res.options.paddingTop" <div class="panel-card">
label="上边距" <div class="section-title">边距设置</div>
:min="0" <slider-field
:max="100" v-model="res.options.paddingTop"
/> label="上边距"
<slider-field :min="0"
v-model="res.options.paddingBottom" :max="100"
label="下边距" />
:min="0" <slider-field
:max="100" v-model="res.options.paddingBottom"
/> label="下边距"
<slider-field :min="0"
v-model="res.options.paddingX" :max="100"
label="左右边距" />
:min="0" <slider-field
:max="30" v-model="res.options.paddingX"
/> label="左右边距"
<slider-field :min="0"
v-model="res.options.pageGap" :max="30"
label="页面间距" />
:min="0" <slider-field
:max="100" v-model="res.options.pageGap"
/> label="页面间距"
<div class="section-title">圆角设置</div> :min="0"
<slider-field :max="100"
v-model="res.options.borderRadius" />
label="背景圆角" </div>
:min="0" <div class="panel-card">
:max="50" <div class="section-title">圆角设置</div>
/> <slider-field
<slider-field v-model="res.options.borderRadius"
v-model="res.options.imgRadius" label="背景圆角"
label="内容圆角" :min="0"
:min="0" :max="50"
:max="50" />
/> <slider-field
v-model="res.options.imgRadius"
label="内容圆角"
:min="0"
:max="50"
/>
</div>
</template> </template>
<hotzone ref="hotzone" @changeZone="changeZone"></hotzone> <hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
@@ -168,18 +176,32 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.panel-flex-one {
background: #f5f7fa;
margin: 0 -20px -120px;
padding: 0 12px 120px;
min-height: calc(100vh - 70px);
box-sizing: border-box;
}
.panel-header { .panel-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 50px; height: 50px;
margin-bottom: 4px; margin-bottom: 8px;
.panel-name { .panel-name {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #303133; color: #303133;
} }
} }
.panel-card {
background: #ffffff;
border-radius: 8px;
padding: 14px;
margin-bottom: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.panel-tabs { .panel-tabs {
display: inline-flex; display: inline-flex;
background: #f4f4f5; background: #f4f4f5;
@@ -204,10 +226,7 @@ export default {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #303133; color: #303133;
margin: 14px 0 10px; margin: 0 0 12px;
&:first-of-type {
margin-top: 0;
}
} }
.section-tip { .section-tip {
font-size: 12px; font-size: 12px;