From 4f753cd8dcc85d2ec301b4ba1a9cb289c48e8125 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 24 Oct 2025 11:11:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A6=96=E9=A1=B5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home-index/index.vue | 186 +++++++++++++++++++++++++++++++++
 1 file changed, 186 insertions(+)

diff --git a/src/views/home-index/index.vue b/src/views/home-index/index.vue
index 6f4e6e6..18e1ece 100644
--- a/src/views/home-index/index.vue
+++ b/src/views/home-index/index.vue
@@ -60,3 +60,189 @@ export default {
     },
 }
 </script>
+
+<style lang="scss" scoped>
+// 科技感卡片通用样式
+
+// 为首页的所有 el-card 添加科技感样式
+::v-deep .el-card {
+    background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.95) 0%,
+        rgba(248, 250, 252, 0.95) 100%
+    );
+    border: 1px solid rgba(59, 130, 246, 0.1);
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+    // 添加科技感边框光效
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 16px;
+        padding: 1px;
+        background: linear-gradient(
+            135deg,
+            rgba(59, 130, 246, 0.3) 0%,
+            rgba(147, 51, 234, 0.3) 25%,
+            rgba(236, 72, 153, 0.3) 50%,
+            rgba(59, 130, 246, 0.3) 75%,
+            rgba(147, 51, 234, 0.3) 100%
+        );
+        background-size: 200% 200%;
+        animation: gradientShift 3s ease infinite;
+        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+        mask-composite: xor;
+        -webkit-mask: linear-gradient(#fff 0 0) content-box,
+            linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
+    // 添加内部光效
+    &::after {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: radial-gradient(
+            circle,
+            rgba(59, 130, 246, 0.1) 0%,
+            transparent 70%
+        );
+        opacity: 0;
+        transition: opacity 0.4s ease;
+        pointer-events: none;
+    }
+
+    // 鼠标悬停效果
+    &:hover {
+        transform: translateY(-4px) scale(1.01);
+        box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15),
+            0 8px 16px rgba(0, 0, 0, 0.1),
+            inset 0 1px 0 rgba(255, 255, 255, 0.8);
+        border-color: rgba(59, 130, 246, 0.3);
+
+        &::before {
+            opacity: 1;
+        }
+
+        &::after {
+            opacity: 1;
+        }
+    }
+
+    // 卡片头部样式优化
+    .el-card__header {
+        background: linear-gradient(
+            135deg,
+            rgba(59, 130, 246, 0.05) 0%,
+            rgba(147, 51, 234, 0.05) 100%
+        );
+        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
+        border-radius: 16px 16px 0 0;
+        padding: 20px 24px;
+
+        h3 {
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+            letter-spacing: 0.5px;
+            position: relative;
+
+            &::after {
+                content: '';
+                position: absolute;
+                bottom: -4px;
+                left: 0;
+                width: 30px;
+                height: 2px;
+                background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+                border-radius: 1px;
+            }
+        }
+    }
+
+    // 卡片内容区域样式
+    .el-card__body {
+        padding: 24px;
+        position: relative;
+    }
+}
+
+// 渐变动画
+@keyframes gradientShift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .app-container {
+        :deep(.el-card) {
+            border-radius: 12px;
+
+            &::before {
+                border-radius: 12px;
+            }
+
+            &:hover {
+                transform: translateY(-4px) scale(1.01);
+            }
+
+            .el-card__header {
+                border-radius: 12px 12px 0 0;
+                padding: 16px 20px;
+            }
+
+            .el-card__body {
+                padding: 20px;
+            }
+        }
+    }
+}
+
+// 暗色主题适配
+@media (prefers-color-scheme: dark) {
+    .app-container {
+        :deep(.el-card) {
+            background: linear-gradient(
+                135deg,
+                rgba(30, 41, 59, 0.95) 0%,
+                rgba(51, 65, 85, 0.95) 100%
+            );
+            border-color: rgba(59, 130, 246, 0.2);
+
+            .el-card__header {
+                background: linear-gradient(
+                    135deg,
+                    rgba(59, 130, 246, 0.1) 0%,
+                    rgba(147, 51, 234, 0.1) 100%
+                );
+                border-bottom-color: rgba(59, 130, 246, 0.2);
+            }
+        }
+    }
+}
+</style>