From 63ea240e1abc8e98e6c7641f291de515655a2a72 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 30 Jan 2026 15:44:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue     | 579 ++++++++++++++++------------------------
 src/views/index_old.vue | 419 +++++++++++++++++++++++++++++
 2 files changed, 652 insertions(+), 346 deletions(-)
 create mode 100644 src/views/index_old.vue

diff --git a/src/views/index.vue b/src/views/index.vue
index 53e19e5..c56ce7a 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,419 +1,306 @@
 <template>
     <div class="home">
-        <section class="home-hero">
-            <div class="home-hero-main">
-                <p class="home-tag">短信发送系统 · 首页</p>
+        <div class="home-container">
+            <!-- 背景网格 -->
+            <div class="grid-background"></div>
+
+            <!-- 主要内容 -->
+            <div class="home-content">
+                <div class="home-tag-wrapper">
+                    <el-icon class="tag-icon"><Message /></el-icon>
+                    <span class="home-tag">短信发送系统 · 首页</span>
+                </div>
+
                 <h1 class="home-title">
-                    欢迎进入<br />
-                    短信发送管理系统
+                    <span class="title-line">欢迎进入</span>
+                    <span class="title-line highlight">短信发送管理系统</span>
                 </h1>
-                <p class="home-subtitle">
-                    高效、便捷的短信发送管理平台，支持单次发送和循环发送，轻松管理短信任务和接收人员。
-                </p>
-            </div>
-            <div class="home-hero-panel">
-                <div class="panel-header">今日概览</div>
-                <div class="panel-body">
-                    <div class="panel-item">
-                        <span class="panel-label">今日发送</span>
-                        <span class="panel-value">{{ todayStats.sendCount || '—' }}</span>
-                    </div>
-                    <div class="panel-item">
-                        <span class="panel-label">成功发送</span>
-                        <span class="panel-value">{{ todayStats.successCount || '—' }}</span>
-                    </div>
-                    <div class="panel-item">
-                        <span class="panel-label">待发送任务</span>
-                        <span class="panel-value">{{ todayStats.pendingCount || '—' }}</span>
-                    </div>
-                </div>
-                <div class="panel-footer">数据接入后将在此区域展示核心指标。</div>
-            </div>
-        </section>
 
-        <section class="home-grid">
-            <el-card shadow="hover" class="home-card" @click="navigateTo('/sms/onceSend')">
-                <div class="card-icon">
-                    <el-icon :size="32" color="#1677ff">
-                        <Message />
-                    </el-icon>
-                </div>
-                <h3>单次发送</h3>
-                <p>
-                    快速发送单条短信，支持选择接收人员和自定义短信内容，适用于临时通知和紧急消息。
-                </p>
-            </el-card>
-            <el-card shadow="hover" class="home-card" @click="navigateTo('/sms/loopSend')">
-                <div class="card-icon">
-                    <el-icon :size="32" color="#52c41a">
-                        <Refresh />
-                    </el-icon>
-                </div>
-                <h3>循环发送</h3>
-                <p>
-                    基于 Cron 表达式的定时发送任务，支持按计划自动发送短信，适用于定期通知和提醒。
-                </p>
-            </el-card>
-            <el-card
-                shadow="hover"
-                class="home-card"
-                @click="navigateTo('/basicManage/personManage')"
-            >
-                <div class="card-icon">
-                    <el-icon :size="32" color="#fa8c16">
-                        <User />
-                    </el-icon>
-                </div>
-                <h3>人员管理</h3>
-                <p>
-                    管理系统中的接收人员信息，包括姓名、电话、所属部门等基础数据，为短信发送提供数据源。
-                </p>
-            </el-card>
-            <el-card
-                shadow="hover"
-                class="home-card"
-                @click="navigateTo('/basicManage/groupManage')"
-            >
-                <div class="card-icon">
-                    <el-icon :size="32" color="#eb2f96">
-                        <UserFilled />
-                    </el-icon>
-                </div>
-                <h3>分组管理</h3>
-                <p>创建和管理人员分组，快速选择批量接收人员，提高短信发送效率。</p>
-            </el-card>
-        </section>
-
-        <section class="home-features">
-            <h2 class="features-title">核心功能</h2>
-            <div class="features-grid">
-                <div class="feature-item">
-                    <el-icon :size="24" color="#1677ff">
-                        <Clock />
-                    </el-icon>
-                    <div class="feature-content">
-                        <h4>定时发送</h4>
-                        <p>支持 Cron 表达式配置，灵活设置发送时间</p>
-                    </div>
-                </div>
-                <div class="feature-item">
-                    <el-icon :size="24" color="#52c41a">
-                        <User />
-                    </el-icon>
-                    <div class="feature-content">
-                        <h4>批量选择</h4>
-                        <p>支持按人员或分组批量选择接收人</p>
-                    </div>
-                </div>
-                <div class="feature-item">
-                    <el-icon :size="24" color="#fa8c16">
-                        <Document />
-                    </el-icon>
-                    <div class="feature-content">
-                        <h4>任务管理</h4>
-                        <p>统一管理所有发送任务，支持启用/停用</p>
-                    </div>
-                </div>
-                <div class="feature-item">
-                    <el-icon :size="24" color="#eb2f96">
-                        <View />
-                    </el-icon>
-                    <div class="feature-content">
-                        <h4>发送记录</h4>
-                        <p>查看详细的发送记录和状态信息</p>
+                <!-- 装饰性图标 -->
+                <div class="decorative-icons">
+                    <div
+                        class="icon-item"
+                        v-for="(icon, index) in icons"
+                        :key="index"
+                        :style="{ animationDelay: `${index * 0.2}s` }"
+                    >
+                        <el-icon :size="24"><component :is="icon" /></el-icon>
                     </div>
                 </div>
             </div>
-        </section>
+        </div>
     </div>
 </template>
 
 <script setup name="Index">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { Message, Refresh, User, UserFilled, Clock, Document, View } from '@element-plus/icons-vue'
+import { Message, Bell, Document, Setting, DataAnalysis, Connection } from '@element-plus/icons-vue'
 
 const router = useRouter()
 
-// 今日统计数据（后续可从接口获取）
-const todayStats = ref({
-    sendCount: null,
-    successCount: null,
-    pendingCount: null,
-})
-
-// 导航到指定路由
-const navigateTo = (path) => {
-    router.push(path)
-}
+// 装饰性图标列表
+const icons = ref([Message, Bell, Document, Setting, DataAnalysis, Connection])
 </script>
 
 <style lang="scss" scoped>
 .home {
-    gap: 40px;
+    // height: 100vh;
+    height: 100%;
+    position: relative;
     display: flex;
-    min-height: 100%;
-    flex-direction: column;
-    padding: 40px 48px 48px;
-    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #e6f4ff 100%);
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 50%, #d6e4ff 100%);
+    overflow: hidden;
 }
 
-.home-hero {
-    gap: 32px;
-    display: grid;
-    align-items: stretch;
-    grid-template-columns: minmax(0, 2fr) minmax(320px, 1.4fr);
+// 网格背景
+.grid-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: linear-gradient(rgba(22, 119, 255, 0.08) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(22, 119, 255, 0.08) 1px, transparent 1px);
+    background-size: 50px 50px;
+    animation: gridMove 20s linear infinite;
+    opacity: 0.4;
 }
 
-.home-hero-main {
+@keyframes gridMove {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(50px, 50px);
+    }
+}
+
+.home-container {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    max-width: 1200px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.home-content {
+    text-align: center;
+    animation: fadeInUp 0.8s ease-out;
+    width: 100%;
+    max-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    max-width: 680px;
+    align-items: center;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.home-tag-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 20px;
+    border-radius: 30px;
+    font-size: 13px;
+    letter-spacing: 0.5px;
+    color: #1677ff;
+    background: rgba(22, 119, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(22, 119, 255, 0.2);
+    margin-bottom: 30px;
+    animation: pulse 2s ease-in-out infinite;
+    box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
+    }
+    50% {
+        box-shadow: 0 4px 12px rgba(22, 119, 255, 0.25);
+    }
+}
+
+.tag-icon {
+    font-size: 16px;
+    animation: rotate 3s linear infinite;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .home-tag {
-    display: inline-flex;
-    align-items: center;
-    padding: 6px 14px;
-    border-radius: 999px;
-    font-size: 13px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: #1677ff;
-    background: rgba(22, 119, 255, 0.1);
-    margin-bottom: 20px;
-    width: fit-content;
     font-weight: 500;
 }
 
 .home-title {
-    font-size: 42px;
-    line-height: 1.3;
+    font-size: 48px;
+    line-height: 1.4;
     font-weight: 700;
-    color: #1f2937;
-    margin: 0 0 20px;
-    background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+    margin: 0;
+    margin-bottom: 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.title-line {
+    display: block;
+    color: #303133;
+    animation: slideInLeft 0.8s ease-out;
+
+    &:nth-child(2) {
+        animation-delay: 0.2s;
+        animation-fill-mode: both;
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.highlight {
+    background: linear-gradient(135deg, #1677ff 0%, #4096ff 50%, #69b1ff 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    position: relative;
+    animation: shimmer 3s ease-in-out infinite;
 }
 
-.home-subtitle {
-    margin: 0;
-    font-size: 16px;
-    line-height: 1.8;
-    color: #4b5563;
-}
-
-.home-hero-panel {
-    border-radius: 20px;
-    background: linear-gradient(145deg, #1677ff 0%, #4096ff 45%, #69b1ff 100%);
-    box-shadow: 0 20px 50px rgba(22, 119, 255, 0.3);
-    color: #ffffff;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-
-    &:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 24px 60px rgba(22, 119, 255, 0.4);
+@keyframes shimmer {
+    0%,
+    100% {
+        filter: brightness(1);
+    }
+    50% {
+        filter: brightness(1.3);
     }
 }
 
-.panel-header {
-    padding: 20px 24px 12px;
-    font-size: 16px;
-    font-weight: 600;
-    opacity: 0.95;
-}
-
-.panel-body {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    padding: 16px 24px 12px;
-    gap: 12px;
-}
-
-.panel-item {
-    padding: 16px 14px;
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(8px);
+// 装饰性图标
+.decorative-icons {
     display: flex;
-    flex-direction: column;
-    gap: 8px;
-    min-width: 0;
-    transition: background 0.3s ease;
-
-    &:hover {
-        background: rgba(255, 255, 255, 0.2);
-    }
-}
-
-.panel-label {
-    font-size: 13px;
-    opacity: 0.9;
-    font-weight: 500;
-}
-
-.panel-value {
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 1.2;
-}
-
-.panel-footer {
-    padding: 16px 24px 20px;
-    font-size: 13px;
-    opacity: 0.85;
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-    margin-top: auto;
-}
-
-.home-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    justify-content: center;
     gap: 24px;
+    flex-wrap: wrap;
+    margin-top: 40px;
 }
 
-.home-card {
-    border-radius: 18px;
-    overflow: hidden;
+.icon-item {
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(22, 119, 255, 0.15);
+    color: #1677ff;
     cursor: pointer;
     transition: all 0.3s ease;
-    border: 1px solid transparent;
+    animation: float 3s ease-in-out infinite;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1);
 
     &:hover {
-        transform: translateY(-6px);
-        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
-        border-color: #e6f4ff;
+        background: rgba(22, 119, 255, 0.1);
+        border-color: rgba(22, 119, 255, 0.3);
+        transform: translateY(-5px) scale(1.1);
+        box-shadow: 0 6px 16px rgba(22, 119, 255, 0.2);
+        color: #0958d9;
     }
 }
 
-.home-card :deep(.el-card__body) {
-    padding: 24px;
-}
-
-.card-icon {
-    margin-bottom: 16px;
-    display: inline-flex;
-    padding: 12px;
-    border-radius: 12px;
-    background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
-}
-
-.home-card h3 {
-    margin: 0 0 12px;
-    font-size: 20px;
-    font-weight: 600;
-    color: #111827;
-}
-
-.home-card p {
-    margin: 0;
-    font-size: 14px;
-    line-height: 1.7;
-    color: #4b5563;
-}
-
-.home-features {
-    margin-top: 8px;
-}
-
-.features-title {
-    font-size: 24px;
-    font-weight: 600;
-    color: #1f2937;
-    margin: 0 0 24px;
-}
-
-.features-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 20px;
-}
-
-.feature-item {
-    display: flex;
-    align-items: flex-start;
-    gap: 16px;
-    padding: 20px;
-    border-radius: 12px;
-    background: #ffffff;
-    border: 1px solid #e5e7eb;
-    transition: all 0.3s ease;
-
-    &:hover {
-        border-color: #1677ff;
-        box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
-        transform: translateY(-2px);
-    }
-}
-
-.feature-content {
-    flex: 1;
-}
-
-.feature-content h4 {
-    margin: 0 0 6px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #1f2937;
-}
-
-.feature-content p {
-    margin: 0;
-    font-size: 13px;
-    line-height: 1.6;
-    color: #6b7280;
-}
-
-@media (max-width: 1024px) {
-    .home {
-        padding: 32px 32px 40px;
-    }
-
-    .home-hero {
-        grid-template-columns: 1fr;
-    }
-
-    .home-hero-panel {
-        order: -1;
-    }
-
-    .home-title {
-        font-size: 36px;
+@keyframes float {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
     }
 }
 
+// 响应式设计
 @media (max-width: 768px) {
-    .home {
-        padding: 24px 20px 32px;
-        gap: 32px;
-    }
-
-    .home-hero {
-        gap: 24px;
+    .home-container {
+        padding: 15px;
     }
 
     .home-title {
-        font-size: 28px;
+        font-size: 32px;
+        margin-bottom: 30px;
+        gap: 12px;
     }
 
-    .home-grid {
-        grid-template-columns: 1fr;
-        gap: 20px;
+    .home-tag-wrapper {
+        font-size: 12px;
+        padding: 6px 16px;
+        margin-bottom: 24px;
     }
 
-    .features-grid {
-        grid-template-columns: 1fr;
+    .decorative-icons {
         gap: 16px;
+        margin-top: 30px;
     }
 
-    .panel-body {
-        grid-template-columns: 1fr;
+    .icon-item {
+        width: 48px;
+        height: 48px;
+    }
+}
+
+@media (max-width: 480px) {
+    .home-title {
+        font-size: 24px;
+        margin-bottom: 24px;
+        gap: 10px;
+    }
+
+    .home-tag-wrapper {
+        margin-bottom: 20px;
+    }
+
+    .decorative-icons {
+        gap: 12px;
+        margin-top: 24px;
+    }
+
+    .icon-item {
+        width: 44px;
+        height: 44px;
     }
 }
 </style>
diff --git a/src/views/index_old.vue b/src/views/index_old.vue
new file mode 100644
index 0000000..26dea3d
--- /dev/null
+++ b/src/views/index_old.vue
@@ -0,0 +1,419 @@
+<template>
+    <div class="home">
+        <section class="home-hero">
+            <div class="home-hero-main">
+                <p class="home-tag">短信发送系统 · 首页</p>
+                <h1 class="home-title">
+                    欢迎进入<br />
+                    短信发送管理系统
+                </h1>
+                <!-- <p class="home-subtitle">
+                    高效、便捷的短信发送管理平台，支持单次发送和循环发送，轻松管理短信任务和接收人员。
+                </p> -->
+            </div>
+            <!-- <div class="home-hero-panel">
+                <div class="panel-header">今日概览</div>
+                <div class="panel-body">
+                    <div class="panel-item">
+                        <span class="panel-label">今日发送</span>
+                        <span class="panel-value">{{ todayStats.sendCount || '—' }}</span>
+                    </div>
+                    <div class="panel-item">
+                        <span class="panel-label">成功发送</span>
+                        <span class="panel-value">{{ todayStats.successCount || '—' }}</span>
+                    </div>
+                    <div class="panel-item">
+                        <span class="panel-label">待发送任务</span>
+                        <span class="panel-value">{{ todayStats.pendingCount || '—' }}</span>
+                    </div>
+                </div>
+                <div class="panel-footer">数据接入后将在此区域展示核心指标。</div>
+            </div> -->
+        </section>
+
+        <!-- <section class="home-grid">
+            <el-card shadow="hover" class="home-card" @click="navigateTo('/sms/onceSend')">
+                <div class="card-icon">
+                    <el-icon :size="32" color="#1677ff">
+                        <Message />
+                    </el-icon>
+                </div>
+                <h3>单次发送</h3>
+                <p>
+                    快速发送单条短信，支持选择接收人员和自定义短信内容，适用于临时通知和紧急消息。
+                </p>
+            </el-card>
+            <el-card shadow="hover" class="home-card" @click="navigateTo('/sms/loopSend')">
+                <div class="card-icon">
+                    <el-icon :size="32" color="#52c41a">
+                        <Refresh />
+                    </el-icon>
+                </div>
+                <h3>循环发送</h3>
+                <p>
+                    基于 Cron 表达式的定时发送任务，支持按计划自动发送短信，适用于定期通知和提醒。
+                </p>
+            </el-card>
+            <el-card
+                shadow="hover"
+                class="home-card"
+                @click="navigateTo('/basicManage/personManage')"
+            >
+                <div class="card-icon">
+                    <el-icon :size="32" color="#fa8c16">
+                        <User />
+                    </el-icon>
+                </div>
+                <h3>人员管理</h3>
+                <p>
+                    管理系统中的接收人员信息，包括姓名、电话、所属部门等基础数据，为短信发送提供数据源。
+                </p>
+            </el-card>
+            <el-card
+                shadow="hover"
+                class="home-card"
+                @click="navigateTo('/basicManage/groupManage')"
+            >
+                <div class="card-icon">
+                    <el-icon :size="32" color="#eb2f96">
+                        <UserFilled />
+                    </el-icon>
+                </div>
+                <h3>分组管理</h3>
+                <p>创建和管理人员分组，快速选择批量接收人员，提高短信发送效率。</p>
+            </el-card>
+        </section>
+
+        <section class="home-features">
+            <h2 class="features-title">核心功能</h2>
+            <div class="features-grid">
+                <div class="feature-item">
+                    <el-icon :size="24" color="#1677ff">
+                        <Clock />
+                    </el-icon>
+                    <div class="feature-content">
+                        <h4>定时发送</h4>
+                        <p>支持 Cron 表达式配置，灵活设置发送时间</p>
+                    </div>
+                </div>
+                <div class="feature-item">
+                    <el-icon :size="24" color="#52c41a">
+                        <User />
+                    </el-icon>
+                    <div class="feature-content">
+                        <h4>批量选择</h4>
+                        <p>支持按人员或分组批量选择接收人</p>
+                    </div>
+                </div>
+                <div class="feature-item">
+                    <el-icon :size="24" color="#fa8c16">
+                        <Document />
+                    </el-icon>
+                    <div class="feature-content">
+                        <h4>任务管理</h4>
+                        <p>统一管理所有发送任务，支持启用/停用</p>
+                    </div>
+                </div>
+                <div class="feature-item">
+                    <el-icon :size="24" color="#eb2f96">
+                        <View />
+                    </el-icon>
+                    <div class="feature-content">
+                        <h4>发送记录</h4>
+                        <p>查看详细的发送记录和状态信息</p>
+                    </div>
+                </div>
+            </div>
+        </section> -->
+    </div>
+</template>
+
+<script setup name="Index">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Message, Refresh, User, UserFilled, Clock, Document, View } from '@element-plus/icons-vue'
+
+const router = useRouter()
+
+// 今日统计数据（后续可从接口获取）
+const todayStats = ref({
+    sendCount: null,
+    successCount: null,
+    pendingCount: null,
+})
+
+// 导航到指定路由
+const navigateTo = (path) => {
+    router.push(path)
+}
+</script>
+
+<style lang="scss" scoped>
+.home {
+    gap: 40px;
+    display: flex;
+    min-height: 100%;
+    flex-direction: column;
+    padding: 40px 48px 48px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #e6f4ff 100%);
+}
+
+.home-hero {
+    gap: 32px;
+    display: grid;
+    align-items: stretch;
+    grid-template-columns: minmax(0, 2fr) minmax(320px, 1.4fr);
+}
+
+.home-hero-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 680px;
+}
+
+.home-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 14px;
+    border-radius: 999px;
+    font-size: 13px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #1677ff;
+    background: rgba(22, 119, 255, 0.1);
+    margin-bottom: 20px;
+    width: fit-content;
+    font-weight: 500;
+}
+
+.home-title {
+    font-size: 42px;
+    line-height: 1.3;
+    font-weight: 700;
+    color: #1f2937;
+    margin: 0 0 20px;
+    background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.home-subtitle {
+    margin: 0;
+    font-size: 16px;
+    line-height: 1.8;
+    color: #4b5563;
+}
+
+.home-hero-panel {
+    border-radius: 20px;
+    background: linear-gradient(145deg, #1677ff 0%, #4096ff 45%, #69b1ff 100%);
+    box-shadow: 0 20px 50px rgba(22, 119, 255, 0.3);
+    color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 24px 60px rgba(22, 119, 255, 0.4);
+    }
+}
+
+.panel-header {
+    padding: 20px 24px 12px;
+    font-size: 16px;
+    font-weight: 600;
+    opacity: 0.95;
+}
+
+.panel-body {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    padding: 16px 24px 12px;
+    gap: 12px;
+}
+
+.panel-item {
+    padding: 16px 14px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(8px);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+    transition: background 0.3s ease;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+}
+
+.panel-label {
+    font-size: 13px;
+    opacity: 0.9;
+    font-weight: 500;
+}
+
+.panel-value {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+.panel-footer {
+    padding: 16px 24px 20px;
+    font-size: 13px;
+    opacity: 0.85;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    margin-top: auto;
+}
+
+.home-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 24px;
+}
+
+.home-card {
+    border-radius: 18px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+
+    &:hover {
+        transform: translateY(-6px);
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        border-color: #e6f4ff;
+    }
+}
+
+.home-card :deep(.el-card__body) {
+    padding: 24px;
+}
+
+.card-icon {
+    margin-bottom: 16px;
+    display: inline-flex;
+    padding: 12px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
+}
+
+.home-card h3 {
+    margin: 0 0 12px;
+    font-size: 20px;
+    font-weight: 600;
+    color: #111827;
+}
+
+.home-card p {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.7;
+    color: #4b5563;
+}
+
+.home-features {
+    margin-top: 8px;
+}
+
+.features-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0 0 24px;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 20px;
+}
+
+.feature-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 20px;
+    border-radius: 12px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    transition: all 0.3s ease;
+
+    &:hover {
+        border-color: #1677ff;
+        box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
+        transform: translateY(-2px);
+    }
+}
+
+.feature-content {
+    flex: 1;
+}
+
+.feature-content h4 {
+    margin: 0 0 6px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2937;
+}
+
+.feature-content p {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #6b7280;
+}
+
+@media (max-width: 1024px) {
+    .home {
+        padding: 32px 32px 40px;
+    }
+
+    .home-hero {
+        grid-template-columns: 1fr;
+    }
+
+    .home-hero-panel {
+        order: -1;
+    }
+
+    .home-title {
+        font-size: 36px;
+    }
+}
+
+@media (max-width: 768px) {
+    .home {
+        padding: 24px 20px 32px;
+        gap: 32px;
+    }
+
+    .home-hero {
+        gap: 24px;
+    }
+
+    .home-title {
+        font-size: 28px;
+    }
+
+    .home-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
+    .panel-body {
+        grid-template-columns: 1fr;
+    }
+}
+</style>