@@ -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 {