style(theme): 更新各主题logo及顶部栏样式,统一白底阴影效果
- 所有主题的 avue-logo 背景改为白色,并添加 0 2px 8px rgba(0,0,0,0.06) 阴影效果 - 各主题顶部栏背景及文字颜色调整,提升整体对比度与视觉统一性 - 统一调整下拉菜单、面包屑、图标等元素颜色为 rgba(0,0,0,0.85) 或 0.65,增强易读性 - 修正部分输入框和色彩选择器的边框及背景颜色,增强一致性 - index.html 添加 favicon.ico 作为页面图标 - 新增图标悬停显示浅灰圆形背景效果示例页面 icon-hover-demo.html - icon-hover-demo.html 包含核心 CSS 代码和 Element Plus 的示例用法,方便复用和参考
This commit is contained in:
@@ -106,3 +106,12 @@
|
||||
3. scoped 样式新增 `.top-user__trigger`(inline-flex / padding 4px 8px / hover 浅灰背景 rgba(0,0,0,0.04)),并把 `.top-bar__img` 自身 `margin` 改为 `0 5px 0 0` 配合新容器。
|
||||
- **效果**: 鼠标悬停在头像或姓名任一处都会展开下拉;保留 `:hide-on-click="false"`(菜单内点击不收起,el-tooltip 等仍可交互)。
|
||||
- **注意**: 若用户后续希望「hover 触发」仅作用于头像、不影响姓名点击行为,需把姓名部分移出 el-dropdown 触发区;当前实现是统一行为。
|
||||
|
||||
## 全站 avue-crud 弹窗内部滚动高度统一
|
||||
|
||||
- **需求**:/business/process-config 与 /base/cargo-type 表单弹窗滚动高度不一致(process-config 用 dialogWidth:'96%'+dialogTop:'10px' 且内容很长被撑爆;cargo-type 用 dialogWidth:760 窄窗),要求全站统一。
|
||||
- **关键结论**:@smallwei/avue 3.9.2 的 avue-crud **没有 `dialogHeight` 属性**(源码 avue.js 中无此字符串;dialogTop 默认值为 "0")。逐个 option 设 dialogHeight 不可行,故延续本项目「全局 CSS 统一」范式(见上「全站操作栏按钮」等先例)。
|
||||
- **改动文件**:`src/styles/element-ui.scss`(全局生效,被 common.scss 通过 `@use './element-ui.scss'` 引入)
|
||||
- **新增规则**:`.avue-crud__dialog .el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; }`
|
||||
- **效果**:全站所有 Avue CRUD 弹窗(含 process-config、cargo-type)的 body 在 `calc(100vh - 200px)` 内滚动,内容超长时在窗内滚动而非撑爆整窗;矮弹窗不受影响(max-height 仅为上限)。
|
||||
- **验证**:已 `pnpm build` 后台运行验证全站编译。
|
||||
|
||||
Reference in New Issue
Block a user