style(wel-banner): 优化欢迎横幅样式并添加装饰元素

- 调整背景渐变角度和颜色过渡,提高视觉层次感
- 修改边框圆角和内边距,优化整体布局
- 增加横幅装饰元素,包括多个半透明圆和点阵图案
- 使用绝对定位和透明度设置装饰元素,增强视觉细节
- 调整横幅内容区层级,确保装饰元素不影响交互
- 优化阴影效果,使横幅更具立体感
This commit is contained in:
2026-07-31 20:13:45 +08:00
parent 70779fcf63
commit 79f8fbad1d

View File

@@ -2,6 +2,14 @@
<div class="wel-dashboard"> <div class="wel-dashboard">
<!-- 欢迎横幅 --> <!-- 欢迎横幅 -->
<div class="wel-banner"> <div class="wel-banner">
<div class="wel-banner__deco">
<span class="wel-banner__circle wel-banner__circle--1"></span>
<span class="wel-banner__circle wel-banner__circle--2"></span>
<span class="wel-banner__circle wel-banner__circle--3"></span>
<span class="wel-banner__dot-grid">
<i v-for="n in 6" :key="'d'+n"></i>
</span>
</div>
<div class="wel-banner__left"> <div class="wel-banner__left">
<div class="wel-banner__avatar"> <div class="wel-banner__avatar">
<el-icon><Avatar /></el-icon> <el-icon><Avatar /></el-icon>
@@ -303,17 +311,72 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: linear-gradient(120deg, #409eff 0%, #1677ff 100%); background: linear-gradient(135deg, #409eff 0%, #1677ff 50%, #0958d9 100%);
border-radius: 10px; border-radius: 12px;
padding: 22px 26px; padding: 26px 30px;
color: #fff; color: #fff;
margin-bottom: 16px; margin-bottom: 16px;
box-shadow: 0 6px 18px rgba(64, 158, 255, 0.25); box-shadow: 0 6px 24px rgba(64, 158, 255, 0.3);
position: relative;
overflow: hidden;
}
/* 横幅装饰元素 */
.wel-banner__deco {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.wel-banner__circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
&--1 {
width: 200px;
height: 200px;
right: -40px;
top: -60px;
background: rgba(255, 255, 255, 0.1);
}
&--2 {
width: 140px;
height: 140px;
right: 120px;
bottom: -50px;
background: rgba(255, 255, 255, 0.06);
}
&--3 {
width: 80px;
height: 80px;
left: 25%;
top: -20px;
background: rgba(255, 255, 255, 0.05);
}
}
.wel-banner__dot-grid {
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
display: grid;
grid-template-columns: repeat(3, 5px);
gap: 8px;
i {
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); }
}
} }
.wel-banner__left { .wel-banner__left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
position: relative;
z-index: 1;
} }
.wel-banner__avatar { .wel-banner__avatar {
width: 56px; width: 56px;
@@ -338,6 +401,10 @@ export default {
font-size: 13px; font-size: 13px;
opacity: 0.9; opacity: 0.9;
} }
.wel-banner__right {
position: relative;
z-index: 1;
}
/* 指标卡 */ /* 指标卡 */
.wel-metrics { .wel-metrics {