style(top-bar): 给顶部状态栏标题区添加背景条以区分视觉层次
- 顶部状态栏 `.top-bar__title` 增加品牌色淡底背景和左侧主色竖条 - 文字颜色调整为深色,保持搜索框可读性 - 调整主题相关样式,处理 light 主题和 dark 主题下背景条效果差异 - 优化多个主题下 Logo 背景和文字颜色,提升整体视觉一致性 - 修改欢迎页背景颜色及相关元素颜色,增强视觉层次感 - 调整部分组件和布局的内边距与边框颜色,提升界面细节表现 - 隐藏顶部主题切换项,调整 hover 背景颜色以适应新视觉风格
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user