优化首页组件，注释掉不再使用的样式文件，更新样式以提升页面布局的可读性，添加闪电特效，调整背景图和按钮样式，更新测试页面的样式导入方式。

src/main.ts

@@ -1,5 +1,5 @@
 import './styles/index.css';
-import './styles/index.scss';
+/* import './styles/index.scss'; */
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';

src/styles/index.scss

@@ -1,7 +1,7 @@
 /* 导入变量和重置样式 */
 
 /* 全局样式 */
-:root {
+/* :root {
   font-family: $font-family;
   font-size: $font-size-base;
   line-height: $line-height-base;
@@ -60,7 +60,7 @@ button {
   &:focus-visible {
     outline: 4px auto -webkit-focus-ring-color;
   }
-}
+} */
 
 .card {
   padding: 2em;

src/views/home/index.vue

@@ -20,7 +20,7 @@
             :class="{'animate-fade-in-up': isProductVisible}"
             :style="{animationDelay: `${index * 0.15}s`}"
           >
-            <div class="gradient-border-content bg-white/95 rounded-xl p-6 shadow-lg transition-all duration-300 text-left product-card relative z-10">
+            <div class="gradient-border-content bg-white rounded-xl p-6 shadow-lg transition-all duration-300 text-left product-card relative z-10">
               <div class="text-3xl mb-4 transition-all duration-300 group-hover:text-blue-600 group-hover:scale-110">
                 <SvgIcon :name="item.icon" type="svg" size="2em" color="currentColor" />
               </div>
@@ -32,125 +32,27 @@
       </div>
     </section>
     <section class="h-[100vh] flex items-center w-full relative bg-white" >
-      <div class="container mx-auto px-6">
-          <div class="max-w-4xl">
-            <div class="text-3xl font-bold  mb-6">
-              多人语音合成技术
-            </div>
-            <div class="text-lg  mb-10">
-              我们的多人语音合成技术采用先进的AI算法，能够精准模拟多种声音特征和语气，为您的项目提供自然、流畅的语音合成服务。无论是需要多角色对话、情感丰富的表达，还是特定场景的语音应用，我们都能满足您的需求。
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <div class="bg-white/20 backdrop-blur p-6 rounded-lg">
-                <div class="text-xl font-bold mb-3">高质量合成</div>
-                <div>
-                  采用最新深度学习技术，声音自然真实
-                </div>
-              </div>
-              <div class="bg-white/20 backdrop-blur p-6 rounded-lg">
-                <div class="text-xl font-bold  mb-3">多语言支持</div>
-                <div >支持中英文等多种语言的语音合成</div>
-              </div>
-              <div class="bg-white/20 backdrop-blur p-6 rounded-lg">
-                <div class="text-xl font-bold  mb-3">个性化定制</div>
-                <div>可根据需求定制专属声音</div>
-              </div>
-            </div>
+      <div class="container mx-auto px-6 text-center">
+        <div class="flex flex-col items-center justify-center">
+          <div class="text-6xl mb-8 text-blue-600">
+            <SvgIcon name="ai-banner" type="svg" size="4em" color="currentColor" />
           </div>
-        </div>
-    </section>
-
-    <!-- 第一个section - 主视觉区域 -->
-    <!--  <section class="min-h-screen flex items-center">
-        <div class="container mx-auto px-6">
-          <div class="text-4xl font-bold text-white mb-4">声音AI平台</div>
-          <div class="text-xl text-white/80 max-w-2xl mb-8">
-            专业的声音处理与分析工具，为您提供高质量的音频解决方案
-          </div>
-          <button
-            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition"
-          >
-            了解更多
+          <h2 class="text-4xl font-bold mb-6">让文字自然发声</h2>
+          <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-10">用科技让沟通更自然，让信息传递更高效</p>
+          <button class="lightning-button bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-medium transition text-xl relative overflow-hidden">
+            <span class="relative z-10">立即免费试用</span>
+            <span class="lightning"></span>
           </button>
         </div>
-      </section> -->
-
-    <!-- 第二个section - 半透明过渡区 -->
-    <!--  <section
-        class="min-h-screen flex items-center bg-white/10 backdrop-blur-sm"
-      >
-        <div class="container mx-auto px-6">
-          <div class="max-w-4xl">
-            <div class="text-3xl font-bold text-white mb-6">
-              多人语音合成技术
-            </div>
-            <div class="text-lg text-white/80 mb-10">
-              我们的多人语音合成技术采用先进的AI算法，能够精准模拟多种声音特征和语气，为您的项目提供自然、流畅的语音合成服务。无论是需要多角色对话、情感丰富的表达，还是特定场景的语音应用，我们都能满足您的需求。
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <div class="bg-white/20 backdrop-blur p-6 rounded-lg">
-                <div class="text-xl font-bold text-white mb-3">高质量合成</div>
-                <div class="text-white/70">
-                  采用最新深度学习技术，声音自然真实
-                </div>
-              </div>
-              <div class="bg-white/20 backdrop-blur p-6 rounded-lg">
-                <div class="text-xl font-bold text-white mb-3">多语言支持</div>
-                <div class="text-white/70">支持中英文等多种语言的语音合成</div>
-              </div>
-              <div class="bg-white/20 backdrop-blur p-6 rounded-lg">
-                <div class="text-xl font-bold text-white mb-3">个性化定制</div>
-                <div class="text-white/70">可根据需求定制专属声音</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section> -->
+      </div>
+    </section>
 
-    <!-- 第三个section - 白底部分 -->
-    <!--  <section class="min-h-screen bg-white relative z-20 pt-24">
-        <div class="container mx-auto px-6">
-          <div class="max-w-4xl">
-            <div class="text-3xl font-bold text-gray-800 mb-6">
-              先进的技术框架
-            </div>
-            <div class="text-lg text-gray-600 mb-8">
-              我们的平台采用最先进的技术栈构建，确保高效、稳定的性能表现。从前端到后端，每一个环节都经过精心优化，为用户提供极致的体验。
-            </div>
-            <div class="grid grid-cols-2 gap-4 mb-10">
-              <div
-                class="flex items-center space-x-3 bg-gray-100 p-4 rounded-lg"
-              >
-                <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
-                <div class="text-gray-800">先进的神经网络模型</div>
-              </div>
-              <div
-                class="flex items-center space-x-3 bg-gray-100 p-4 rounded-lg"
-              >
-                <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
-                <div class="text-gray-800">高效的声音处理算法</div>
-              </div>
-              <div
-                class="flex items-center space-x-3 bg-gray-100 p-4 rounded-lg"
-              >
-                <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
-                <div class="text-gray-800">低延迟实时合成</div>
-              </div>
-              <div
-                class="flex items-center space-x-3 bg-gray-100 p-4 rounded-lg"
-              >
-                <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
-                <div class="text-gray-800">云端API服务</div>
-              </div>
-            </div>
-            <button
-              class="border border-blue-500 text-blue-500 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition"
-            >
-              技术详情
-            </button>
-          </div>
-        </div>
-      </section> -->
+    <!-- 页脚版权信息 -->
+    <footer class="bg-white-900 text-black py-6">
+      <div class="container mx-auto px-6 text-center">
+        <p class="text-sm text-black-400">© 2024 声音AI平台 版权所有</p>
+      </div>
+    </footer>
   </div>
 </template>
 <script setup lang="ts">
@@ -236,6 +138,35 @@ onMounted(() => {
   }
 }
 
+/* 闪电特效 */
+.lightning-button {
+  position: relative;
+  overflow: hidden;
+}
+
+.lightning {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  z-index: 1;
+  animation: lightning-animation 3s infinite;
+}
+
+@keyframes lightning-animation {
+  0% {
+    left: -100%;
+  }
+  20% {
+    left: 100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
 /* 过渡区域样式 */
 .transition-bg {
   position: relative;
@@ -262,7 +193,7 @@ onMounted(() => {
 .gradient-border-wrapper {
   position: relative;
   border-radius: 12px;
-  padding: 2px;
+  padding: 3px;
   overflow: hidden;
   isolation: isolate;
 }

src/views/test/index.vue

@@ -29,7 +29,7 @@ onMounted(() => {
 
 <style scoped lang="scss">
 // 引入变量
-@import '@/styles/variables.scss';
+@use '@/styles/variables.scss' as *;
 
 .test-container {
   padding: 20px;