feta

src/views/home/index.vue

@@ -17,17 +17,14 @@
 
     <!-- Banner 区域 -->
     <section id="home" class="banner">
+      <img src="@/assets/images/home1.jpg" alt="Banner" class="banner-image" />
+      <div class="banner-overlay"></div>
       <div class="banner-content">
         <h1 class="banner-title">智能运维管理系统</h1>
         <p class="banner-subtitle">
           提供全方位的 IT 运维管理解决方案，让系统运行更稳定、更高效
         </p>
       </div>
-      <div class="banner-decoration">
-        <div class="circle circle-1"></div>
-        <div class="circle circle-2"></div>
-        <div class="circle circle-3"></div>
-      </div>
     </section>
 
     <!-- 功能特性区域 -->
@@ -206,77 +203,55 @@ const scrollToSection = (id: string) => {
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    
+
+    .banner-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      z-index: 0;
+    }
+
+    .banner-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
+      z-index: 1;
+    }
+
     .banner-content {
       text-align: center;
-      z-index: 1;
-      
+      z-index: 2;
+
       .banner-title {
         font-size: 48px;
         font-weight: 700;
-        color: var(--color-text-1);
+        color: #fff;
         margin-bottom: 16px;
-        background: linear-gradient(135deg, rgb(var(--primary-6)), rgb(var(--primary-4)));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
       }
-      
+
       .banner-subtitle {
         font-size: 20px;
-        color: var(--color-text-2);
+        color: rgba(255, 255, 255, 0.9);
         margin-bottom: 40px;
         max-width: 600px;
         margin-left: auto;
         margin-right: auto;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
       }
-      
+
       .banner-actions {
         display: flex;
         gap: 16px;
         justify-content: center;
       }
     }
-    
-    .banner-decoration {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      
-      .circle {
-        position: absolute;
-        border-radius: 50%;
-        opacity: 0.1;
-        
-        &.circle-1 {
-          width: 400px;
-          height: 400px;
-          background: rgb(var(--primary-6));
-          top: -200px;
-          right: -100px;
-        }
-        
-        &.circle-2 {
-          width: 300px;
-          height: 300px;
-          background: rgb(var(--success-6));
-          bottom: -150px;
-          left: -100px;
-        }
-        
-        &.circle-3 {
-          width: 200px;
-          height: 200px;
-          background: rgb(var(--warning-6));
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-        }
-      }
-    }
   }
   
   // 功能特性区域