sound_ai/src/views/home/index.vue

<template>
  <div class="relative w-full home-page">
    <!-- 导航栏 -->
    <HomeNav />
    <!-- 视差背景 -->
    <ParallaxBackground />

    <!-- 第一屏动画-->
    <TopAnime />

    <!--功能介绍区-->
    <section class="h-[100vh] flex items-center w-full relative" id="product" ref="productSection">
      <div class="py-20 container mx-auto px-6">
        <h2 class="text-4xl font-bold text-white mb-10">我们的特色</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <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="{'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>
            <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 - 主视觉区域 -->
    <!--  <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, ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';

// 产品区域的引用
const productSection = ref(null);
// 控制产品区域动画的变量
const isProductVisible = ref(false);

// 使用VueUse的useIntersectionObserver监听元素可见性
useIntersectionObserver(
  productSection,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      isProductVisible.value = true;
    }
  },
  { threshold: 0.3 } // 当元素30%进入视口时触发
);

const products = [
  {
    title: '智能语音合成',
    description: '提供自然流畅的语音合成服务，支持多种语言和音色选择。',
    icon: 'ai',
  },
  {
    title: '语音克隆',
    description:
      '只需少量语音样本，即可克隆出与原始声音高度相似的个性化语音模型。',
    icon: 'mark',
  },
  {
    title: '语音编辑',
    description:
      '强大的语音编辑工具，可调整语速、音调、情感等参数，满足专业需求。',
    icon: 'reader',
  },
  {
    title: '批量处理',
    description: '支持大规模文本批量转换为语音，提高工作效率，节省时间成本。',
    icon: 'fast',
  },
];

// 页面进入时隐藏滚动条
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 {
  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);
      }
    }
  }
}

/* 渐入动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}
</style>