b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(top-bar): 给顶部状态栏标题区添加背景条以区分视觉层次

Browse Source 
- 顶部状态栏 `.top-bar__title` 增加品牌色淡底背景和左侧主色竖条
- 文字颜色调整为深色，保持搜索框可读性
- 调整主题相关样式，处理 light 主题和 dark 主题下背景条效果差异
- 优化多个主题下 Logo 背景和文字颜色，提升整体视觉一致性
- 修改欢迎页背景颜色及相关元素颜色，增强视觉层次感
- 调整部分组件和布局的内边距与边框颜色，提升界面细节表现
- 隐藏顶部主题切换项，调整 hover 背景颜色以适应新视觉风格
This commit is contained in:
赵忠林
2026-07-31 20:50:18 +08:00
parent 79f8fbad1d
commit 4383e9956e
10 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.workbuddy/memory/2026-07-31.md
View File

@@ -115,3 +115,10 @@
- **新增规则**：`.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` 后台运行验证全站编译。
## 顶部状态栏标题区加背景条
- **需求**：给顶部状态栏（`.top-bar__title` 中间区域）加一条背景条，与白色头部区分。
- **文件**：`src/styles/top.scss` 的 `.top-bar__title` 规则（原来背景是纯白 `#fff`，看不出边界）
- **改动**：`background: rgba(64,158,255,0.12)`（品牌色淡底）+ `border-left: 4px solid #409eff`（左侧主色竖条），沿用项目主色 `#409eff`；文字保持深色 `rgba(0,0,0,0.85)`、搜索框可读。
- **注意**：默认 light 主题（go/d2 等白底头部）效果好；dark 主题头部 `#2c3643` 下淡蓝条可能略冲突（原 `#fff` 背景在 dark 下本就冲突，属历史遗留），如需可给 dark 主题单独覆盖。

2
src/components/basic-container/main.vue
View File

@@ -35,7 +35,7 @@ export default {
<style lang="scss">
.basic-container {
padding: 10px 6px;
padding: 0 6px;
box-sizing: border-box;
&--block {

4
src/page/index/top/index.vue
View File

@@ -17,7 +17,7 @@
<div v-if="setting.color" class="top-bar__item">
<top-color></top-color>
</div>
<div v-if="setting.theme" class="top-bar__item">
<div v-if="setting.theme" class="top-bar__item" style="display: none;">
<top-theme></top-theme>
</div>
<div v-if="setting.lock" class="top-bar__item">
@@ -372,7 +372,7 @@ export default {
&:hover,
&:focus {
background-color: rgba(0, 0, 0, 0.04);
background-color: rgba(255, 255, 255, 0.15);
}
.top-bar__img {

2
src/styles/common.scss
View File

@@ -119,7 +119,7 @@ a {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
margin-bottom: 6px;
//margin-bottom: 6px;
padding: 12px;
}

2
src/styles/element-ui.scss
View File

@@ -274,7 +274,7 @@
justify-content: flex-end;
width: 100%;
box-sizing: border-box;
padding: 10px 0 !important;
padding: 16px 0 !important;
}
.avue-crud__pagination .el-pagination,

1
src/styles/theme/beautiful.scss
View File

@@ -26,7 +26,6 @@
}
.avue-logo {
background: #fff !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

2
src/styles/theme/d2.scss
View File

@@ -1,7 +1,6 @@
.theme-d2 {
.avue-logo {
color: rgba(0, 0, 0, 0.85);
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
.avue-logo_title {
@@ -11,7 +10,6 @@
}
.avue-top {
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

12
src/styles/theme/index.scss
View File

@@ -47,17 +47,17 @@
.theme-cool,
.theme-beautiful {
.avue-logo {
background: #fff !important;
background-color: #fff !important;
color: rgba(0, 0, 0, 0.85);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
background: #419eff !important;
background-color: #419eff !important;
color: #fff;
box-shadow: none;
.avue-logo_title,
.avue-logo_subtitle,
.logo-title {
color: rgba(0, 0, 0, 0.85);
color: #fff;
background-image: none;
-webkit-text-fill-color: rgba(0, 0, 0, 0.85);
-webkit-text-fill-color: #fff;
}
}
}

22
src/styles/top.scss
View File

@@ -20,10 +20,10 @@
.avue-breadcrumb {
height: 100%;
color: rgba(0, 0, 0, 0.65);
color: #fff;
i {
color: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 30px !important;
}
@@ -73,7 +73,7 @@
height: 30px;
border-radius: 100%;
box-sizing: border-box;
border: 1px solid #eee;
border: 1px solid rgba(255, 255, 255, 0.5);
vertical-align: middle;
}
@@ -96,7 +96,7 @@
right: 10px;
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.85);
color: #fff;
i,
.el-icon,
@@ -106,7 +106,7 @@
}
.el-color-picker__trigger {
border-color: rgba(0, 0, 0, 0.15);
border-color: rgba(255, 255, 255, 0.4);
}
.el-color-picker__icon {
@@ -132,24 +132,26 @@
height: 100%;
padding-left: 50px;
box-sizing: border-box;
background: #fff;
// 顶部状态栏背景条：品牌色淡底 + 左侧主色竖条，与白色头部区分
background: #419eff;
//border-left: 4px solid #409eff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: inherit;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
color: #fff;
}
.avue-logo {
height: variables.$top_height;
line-height: variables.$top_height;
background-color: #fff;
background-color: #419eff;
font-size: 20px;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.85);
box-shadow: none;
color: #fff;
&_title {
display: block;

23
src/views/wel/index.vue
View File

@@ -311,12 +311,12 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #409eff 0%, #1677ff 50%, #0958d9 100%);
background: #ffffff;
border-radius: 12px;
padding: 26px 30px;
color: #fff;
color: #303133;
margin-bottom: 16px;
box-shadow: 0 6px 24px rgba(64, 158, 255, 0.3);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
@@ -331,27 +331,27 @@ export default {
.wel-banner__circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
background: rgba(115, 209, 61, 0.07);
&--1 {
width: 200px;
height: 200px;
right: -40px;
top: -60px;
background: rgba(255, 255, 255, 0.1);
background: rgba(115, 209, 61, 0.1);
}
&--2 {
width: 140px;
height: 140px;
right: 120px;
bottom: -50px;
background: rgba(255, 255, 255, 0.06);
background: rgba(115, 209, 61, 0.06);
}
&--3 {
width: 80px;
height: 80px;
left: 25%;
top: -20px;
background: rgba(255, 255, 255, 0.05);
background: rgba(115, 209, 61, 0.05);
}
}
.wel-banner__dot-grid {
@@ -366,9 +366,9 @@ export default {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
&:nth-child(3n) { background: rgba(255, 255, 255, 0.35); }
&:nth-child(3n + 1) { background: rgba(255, 255, 255, 0.12); }
background: rgba(115, 209, 61, 0.2);
&:nth-child(3n) { background: rgba(115, 209, 61, 0.35); }
&:nth-child(3n + 1) { background: rgba(115, 209, 61, 0.12); }
}
}
.wel-banner__left {
@@ -382,7 +382,8 @@ export default {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
background: rgba(115, 209, 61, 0.15);
color: #389e0d;
display: flex;
align-items: center;
justify-content: center;