style(ui): 统一弹窗分组白卡样式并改造相关弹窗布局
- 新增全局弹窗灰底背景色,提升视觉一致性 - 新增通用分组白卡组件 section-card,标题融入卡头,支持额外插槽 - 统一 Avue 弹窗表单及分组为白卡样式 - 调整 common-route.vue 弹窗,使用 section-card 分组包裹查询条件与常用地址 - 改造 loading-manage.vue 弹窗所有分区,采用 section-card 统一风格 - 全局样式调整弹窗内容区表单项间距及两列表单布局工具类 - 在 main.js 全局注册 section-card 组件,便于项目统一复用
This commit is contained in:
28
src/components/section-card/main.vue
Normal file
28
src/components/section-card/main.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="section-card">
|
||||
<div v-if="title || $slots.title || $slots.extra" class="section-card__header">
|
||||
<span class="section-card__bar" />
|
||||
<span class="section-card__title">
|
||||
<slot name="title">{{ title }}</slot>
|
||||
</span>
|
||||
<span class="section-card__extra">
|
||||
<slot name="extra" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="section-card__body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SectionCard',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user