feat(components): 添加表单平铺功能并优化组件样式
- 为 CuteFormDialog 和 CuteFormDrawer 组件添加 inline 属性支持平铺表单 - 调整 CuteFormDialog 宽度默认值从 40% 改为 30% - 调整 CuteFormDrawer 宽度默认值从 40% 改为 30% - 优化 CuteFormDialog 和 CuteFormDrawer 的滚动容器高度计算 - 为 CuteFormDialog、CuteFormDrawer 和 CutePreviewDrawer 组件添加 SCSS 样式支持 - 重构 CuteSectionTitle 组件,支持多级标题显示 - 为 CuteSectionTitle 组件添加 subTitle 和 thirdTitle 属性 - 调整 CuteHorizontalScrollBar 和 CuteVerticalScrollBar 组件属性必填性 - 在预览抽屉组件中添加内边距优化布局
This commit is contained in:
@@ -7,10 +7,14 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h4>
|
||||
<i class="el-icon-s-help" style="color: #409EFF;font-size: 18px" />
|
||||
<i style="color: #303133;">{{ title }}</i>
|
||||
</h4>
|
||||
<div class="title-container">
|
||||
<div class="main-title-line">
|
||||
<i class="el-icon-platform-eleme" style="color: #409EFF;font-size: 18px" />
|
||||
<i style="color: #303133;font-style: normal">{{ title }}</i>
|
||||
</div>
|
||||
<div v-if="subTitle" class="sub-title-with-icon-align">{{ subTitle }}</div>
|
||||
<div v-if="thirdTitle" class="third-title-with-text-align">{{ thirdTitle }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right;line-height: 64px;height: 64px;padding-right: 30px">
|
||||
<slot />
|
||||
@@ -27,7 +31,47 @@ export default {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '默认标题'
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
thirdTitle: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-title-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
color: #303133;
|
||||
|
||||
i:first-child {
|
||||
margin-right: 8px; // 图标与文字的间距
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title-with-icon-align {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.third-title-with-text-align {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-left: 26px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user