From 79f8fbad1da0a711eceae46e46cefdf2b265a8a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 31 Jul 2026 20:13:45 +0800
Subject: [PATCH] =?UTF-8?q?style(wel-banner):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=AC=A2=E8=BF=8E=E6=A8=AA=E5=B9=85=E6=A0=B7=E5=BC=8F=E5=B9=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A3=85=E9=A5=B0=E5=85=83=E7=B4=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整背景渐变角度和颜色过渡，提高视觉层次感
- 修改边框圆角和内边距，优化整体布局
- 增加横幅装饰元素，包括多个半透明圆和点阵图案
- 使用绝对定位和透明度设置装饰元素，增强视觉细节
- 调整横幅内容区层级，确保装饰元素不影响交互
- 优化阴影效果，使横幅更具立体感
---
 src/views/wel/index.vue | 75 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 71 insertions(+), 4 deletions(-)

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