style(ui): 统一弹窗分组白卡样式并改造相关弹窗布局

- 新增全局弹窗灰底背景色,提升视觉一致性
- 新增通用分组白卡组件 section-card,标题融入卡头,支持额外插槽
- 统一 Avue 弹窗表单及分组为白卡样式
- 调整 common-route.vue 弹窗,使用 section-card 分组包裹查询条件与常用地址
- 改造 loading-manage.vue 弹窗所有分区,采用 section-card 统一风格
- 全局样式调整弹窗内容区表单项间距及两列表单布局工具类
- 在 main.js 全局注册 section-card 组件,便于项目统一复用
This commit is contained in:
2026-08-06 09:27:49 +08:00
parent 819a59e6fc
commit 8a262d9d41
6 changed files with 267 additions and 116 deletions

View 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>