优化首页组件，重构产品卡片样式，添加多人语音合成技术介绍区，增强页面布局的可读性和功能性；更新ParallaxBackground组件的样式以改善背景效果，限制滚动监听的高度。

src/views/home/components/ParallaxBackground.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" class="fixed inset-0 overflow-hidden">
+  <div ref="containerRef" class="fixed inset-0 overflow-hidden z-0">
     
     <Motion
       class="absolute inset-0 bg-cover bg-no-repeat"
@@ -7,7 +7,7 @@
     />
 
     <div
-      class="absolute inset-0 bg-gradient-to-b from-c via-transparent to-white z-0"
+      class="absolute inset-0 bg-gradient-to-b from-c via-transparent to-transparent z-0"
     />
   </div>
 </template>
@@ -23,9 +23,9 @@ defineOptions({
 // 内容容器
 const containerRef = ref<HTMLElement | null>(null);
 
-// 滚动监听，监控整个文档的滚动
+// 滚动监听，监控整个文档的滚动，但限制在前200vh高度
 const { scrollYProgress } = useScroll({
-  offset: ['start start', 'end start'],
+  offset: ['start start', '200vh start'],
 });
 
 // 视差效果 - 大幅增加位移距离，向上移动

src/views/home/index.vue

@@ -16,19 +16,49 @@
           <div
             v-for="(item, index) in products"
             :key="item.title"
-            class="group bg-white/95 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-blue-200 text-left product-card opacity-0 transform translate-y-10"
+            class="group gradient-border-wrapper opacity-0 transform translate-y-10"
             :class="{'animate-fade-in-up': isProductVisible}"
             :style="{animationDelay: `${index * 0.15}s`}"
           >
-            <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 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="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>
+              <h3 class="text-xl font-semibold mb-2 text-gray-800 group-hover:text-blue-600">{{ item.title }}</h3>
+              <p class="text-gray-600 group-hover:text-gray-700">{{ item.description }}</p>
             </div>
-            <h3 class="text-xl font-semibold mb-2 text-gray-800 group-hover:text-blue-600">{{ item.title }}</h3>
-            <p class="text-gray-600 group-hover:text-gray-700">{{ item.description }}</p>
           </div>
         </div>
       </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>
+        </div>
+    </section>
 
     <!-- 第一个section - 主视觉区域 -->
     <!--  <section class="min-h-screen flex items-center">
@@ -191,23 +221,27 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .home-page {
-  background-color: 000!important;
+ 
   /* 组件级别的滚动条隐藏 */
   &::-webkit-scrollbar {
     display: none;
   }
 
   #product {
-    background-color: 000!important;
+    
     .product-card {
-      background-color: 000!important;
-      &:hover {
-        transform: translateY(-10px) rotate(1deg) scale(1.02);
-      }
+     
+      
     }
   }
 }
 
+/* 过渡区域样式 */
+.transition-bg {
+  position: relative;
+  overflow: hidden;
+}
+
 /* 渐入动画 */
 @keyframes fadeInUp {
   from {
@@ -223,4 +257,57 @@ onMounted(() => {
 .animate-fade-in-up {
   animation: fadeInUp 0.8s ease forwards;
 }
+
+/* 旋转边框效果 */
+.gradient-border-wrapper {
+  position: relative;
+  border-radius: 12px;
+  padding: 2px;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.gradient-border-wrapper::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 200%;
+  padding-bottom: 200%;
+  transform: translate(-50%, -50%);
+  background: transparent;
+  z-index: 0;
+  transition: background 0.3s ease;
+}
+
+.gradient-border-wrapper:hover::before {
+  animation: rotate-gradient 8s linear infinite;
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    #9a8bff 0deg,
+    #ffac8b 45deg,
+    transparent 90deg,
+    transparent 180deg,
+    #9a8bff 180deg,
+    #ffac8b 225deg,
+    transparent 270deg
+  );
+}
+
+.gradient-border-content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+}
+
+@keyframes rotate-gradient {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
 </style>