feat

src/views/home/index.vue

@@ -4,7 +4,7 @@
     <header class="navbar">
       <div class="navbar-content">
         <div class="logo">
-          <img src="@/assets/logo.svg" alt="Logo" />
+          <img src="@/assets/logo.png" alt="Logo" />
           <span class="logo-text">智能运维管理系统</span>
         </div>
         <nav class="nav-links">
@@ -38,7 +38,7 @@
         
         <div class="feature-grid">
           <div class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon icon-blue">
               <icon-dashboard />
             </div>
             <h3>实时监控仪表盘</h3>
@@ -46,15 +46,15 @@
           </div>
 
           <div class="feature-card">
-            <div class="feature-icon">
-              <icon-alert />
+            <div class="feature-icon icon-orange">
+              <icon-exclamation-circle />
             </div>
             <h3>智能告警管理</h3>
             <p>灵活的告警策略配置，多渠道通知，确保问题及时发现和处理</p>
           </div>
 
           <div class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon icon-green">
               <icon-chart-line />
             </div>
             <h3>数据大屏中心</h3>
@@ -62,7 +62,7 @@
           </div>
 
           <div class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon icon-purple">
               <icon-settings />
             </div>
             <h3>数据采集</h3>
@@ -70,7 +70,7 @@
           </div>
 
           <div class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon icon-cyan">
               <icon-shield />
             </div>
             <h3>数据中心</h3>
@@ -78,8 +78,8 @@
           </div>
 
           <div class="feature-card">
-            <div class="feature-icon">
-              <icon-feedback />
+            <div class="feature-icon icon-pink">
+              <icon-message-circle />
             </div>
             <h3>工单管理</h3>
             <p>完善的问题反馈机制，全流程跟踪，快速响应解决工单</p>
@@ -112,6 +112,14 @@
 
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
+import {
+  IconDashboard,
+  IconExclamationCircle,
+  IconChartLine,
+  IconSettings,
+  IconShield,
+  IconMessageCircle,
+} from '@tabler/icons-vue'
 
 const router = useRouter()
 
@@ -318,11 +326,40 @@ const scrollToSection = (id: string) => {
             display: flex;
             align-items: center;
             justify-content: center;
-            background: rgb(var(--primary-6));
             border-radius: 12px;
             margin-bottom: 24px;
             color: #fff;
             font-size: 32px;
+            transition: transform 0.3s, box-shadow 0.3s;
+
+            &:hover {
+              transform: scale(1.1);
+              box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+            }
+
+            &.icon-blue {
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            }
+
+            &.icon-orange {
+              background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            }
+
+            &.icon-green {
+              background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            }
+
+            &.icon-purple {
+              background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
+            }
+
+            &.icon-cyan {
+              background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+            }
+
+            &.icon-pink {
+              background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+            }
           }
           
           h3 {