diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue index 0234db7..d9fcf2b 100644 --- a/src/views/wel/index.vue +++ b/src/views/wel/index.vue @@ -2,6 +2,14 @@
+
+ + + + + + +
@@ -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 {