JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-19 21:06:06 +08:00
Code Issues Projects Releases Wiki Activity

style(editor): 优化样式配置面板

Browse Source
This commit is contained in:
roymondchen 2025-01-03 17:25:25 +08:00
parent e8bbdf613b
commit 9e35642879
5 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/editor/src/fields/StyleSetter/Index.vue
View File

@ -40,16 +40,16 @@ const list = [
component: Layout, component: Layout,
}, },
{ {
title: '文字', title: '位置',
component: Font, component: Position,
}, },
{ {
title: '背景', title: '背景',
component: Background, component: Background,
}, },
{ {
title: '位置', title: '文字',
component: Position, component: Font,
}, },
{ {
title: '边框与圆角', title: '边框与圆角',

7
packages/editor/src/fields/StyleSetter/components/Box.vue
View File

@ -3,7 +3,12 @@
<div v-for="(item, index) in list" :key="index" :class="item.class"> <div v-for="(item, index) in list" :key="index" :class="item.class">
<span class="help-txt" v-if="item.text">{{ item.text }}</span> <span class="help-txt" v-if="item.text">{{ item.text }}</span>
<span class="next-input"> <span class="next-input">
<input v-model="model[item.name]" @change="change($event, item.name)" placeholder="0" /> <input
v-model="model[item.name]"
:title="model[item.name]"
@change="change($event, item.name)"
placeholder="0"
/>
</span> </span>
</div> </div>
</div> </div>

7
packages/editor/src/fields/StyleSetter/components/Position.vue
View File

@ -2,7 +2,12 @@
<div class="layout-box-container"> <div class="layout-box-container">
<div v-for="(item, index) in list" :key="index" :class="item.class"> <div v-for="(item, index) in list" :key="index" :class="item.class">
<span class="next-input"> <span class="next-input">
<input v-model="model[item.name]" @change="change($event, item.name)" placeholder="0" /> <input
v-model="model[item.name]"
:title="model[item.name]"
@change="change($event, item.name)"
placeholder="0"
/>
</span> </span>
</div> </div>
</div> </div>

12
packages/editor/src/theme/style-setter/index.scss
View File

@ -4,6 +4,18 @@
.m-fields-style-setter { .m-fields-style-setter {
width: 100%; width: 100%;
.tmagic-design-collapse-item {
> .el-collapse-item__header {
background-color: #f2f3f7;
height: 36px;
padding: 10px;
}
.el-collapse-item__wrap {
padding: 0 10px;
}
}
} }
.text-align-list { .text-align-list {

3
packages/editor/src/theme/style-setter/layout.scss
View File

@ -1,8 +1,7 @@
// 盒子模型 // 盒子模型
.layout-box-container { .layout-box-container {
position: relative; position: relative;
margin: 0 0 16px 16px; width: 100%;
width: 270px;
height: 150px; height: 150px;
.help-txt { .help-txt {