style(wel-banner): 优化欢迎横幅样式并添加装饰元素
- 调整背景渐变角度和颜色过渡,提高视觉层次感 - 修改边框圆角和内边距,优化整体布局 - 增加横幅装饰元素,包括多个半透明圆和点阵图案 - 使用绝对定位和透明度设置装饰元素,增强视觉细节 - 调整横幅内容区层级,确保装饰元素不影响交互 - 优化阴影效果,使横幅更具立体感
This commit is contained in:
@@ -2,6 +2,14 @@
|
||||
<div class="wel-dashboard">
|
||||
<!-- 欢迎横幅 -->
|
||||
<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__avatar">
|
||||
<el-icon><Avatar /></el-icon>
|
||||
@@ -303,17 +311,72 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(120deg, #409eff 0%, #1677ff 100%);
|
||||
border-radius: 10px;
|
||||
padding: 22px 26px;
|
||||
background: linear-gradient(135deg, #409eff 0%, #1677ff 50%, #0958d9 100%);
|
||||
border-radius: 12px;
|
||||
padding: 26px 30px;
|
||||
color: #fff;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.wel-banner__avatar {
|
||||
width: 56px;
|
||||
@@ -338,6 +401,10 @@ export default {
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.wel-banner__right {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 指标卡 */
|
||||
.wel-metrics {
|
||||
|
||||
Reference in New Issue
Block a user