|
|
@@ -1,10 +1,136 @@
|
|
|
<template>
|
|
|
- <div class="min-h-screen flex flex-col relative w-full" style="height: 300vh;">
|
|
|
+ <div class="relative w-full home-page">
|
|
|
+ <!-- 导航栏 -->
|
|
|
<HomeNav />
|
|
|
+ <!-- 视差背景 -->
|
|
|
<ParallaxBackground />
|
|
|
- </div>
|
|
|
+
|
|
|
+ <!-- 第一屏动画-->
|
|
|
+ <TopAnime />
|
|
|
+
|
|
|
+ <!-- 第一个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"
|
|
|
+ >
|
|
|
+ 了解更多
|
|
|
+ </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> -->
|
|
|
+
|
|
|
+ <!-- 第三个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> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import HomeNav from './components/nav.vue';
|
|
|
import ParallaxBackground from './components/ParallaxBackground.vue';
|
|
|
+import TopAnime from './components/topAnime.vue';
|
|
|
+import { onMounted, onUnmounted } from 'vue';
|
|
|
+
|
|
|
+// 页面进入时隐藏滚动条
|
|
|
+onMounted(() => {
|
|
|
+ // 保存原始滚动条样式
|
|
|
+ const originalStyle = document.body.style.overflow;
|
|
|
+
|
|
|
+ // 隐藏滚动条
|
|
|
+ document.documentElement.style.setProperty('scrollbar-width', 'none'); // Firefox
|
|
|
+
|
|
|
+ document.body.style.overflow = 'auto'; // 保持可以滚动
|
|
|
+
|
|
|
+ // 在组件销毁时恢复滚动条
|
|
|
+ onUnmounted(() => {
|
|
|
+ // 恢复原始滚动条样式
|
|
|
+ document.body.style.overflow = originalStyle;
|
|
|
+ document.documentElement.style.removeProperty('scrollbar-width');
|
|
|
+ });
|
|
|
+});
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.home-page {
|
|
|
+ /* 组件级别的滚动条隐藏 */
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
