prototype_design/src/views/HomeView.vue

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Header Navigation -->
    <header class="bg-white border-b">
      <div class="flex items-center justify-between px-4 py-2">
        <a href="#/" class="flex items-center space-x-2">
          <div class="text-blue-600">
            <div class="w-8 h-8">
              <div class="w-full h-full" />
            </div>
          </div>
          <span class="text-xl font-medium">ProductName</span>
        </a>

        <div class="flex items-center space-x-4">
          <a href="#/about" class="text-gray-600 hover:text-blue-600">关于我们</a>
          <a href="#/services" class="text-gray-600 hover:text-blue-600">服务</a>
          <a href="#/contact" class="text-gray-600 hover:text-blue-600">联系我们</a>
          <a href="#/login" class="text-gray-600 hover:text-blue-600">登录/注册</a>
        </div>
      </div>
    </header>

    <!-- Carousel -->
    <div class="relative">
      <div class="carousel w-full h-96 overflow-hidden">
        <div class="carousel-item relative w-full">
          <img src="@/assets/img/upload_view.png" class="w-full h-full object-cover" alt="Image 1" />
          <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white">
            <p class="text-2xl font-bold">欢迎来到我们的平台</p>
          </div>
        </div>
        <div class="carousel-item relative w-full">
          <img src="@/assets/img/prompt_view.png" class="w-full h-full object-cover" alt="Image 2" />
          <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white">
            <p class="text-2xl font-bold">高效的服务体验</p>
          </div>
        </div>
        <div class="carousel-item relative w-full">
          <img src="@/assets/img/KT_view.png" class="w-full h-full object-cover" alt="Image 3" />
          <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white">
            <p class="text-2xl font-bold">优质的产品支持</p>
          </div>
        </div>
      </div>
      <button class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2" @click="prevSlide">
        <ChevronLeft class="w-6 h-6" />
      </button>
      <button class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2" @click="nextSlide">
        <ChevronRight class="w-6 h-6" />
      </button>
    </div>

    <!-- Featured Services -->
    <section class="py-12 bg-white">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-8">特色服务</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="bg-gray-100 rounded-lg p-6 text-center cursor-pointer" @click="goToServiceDetail">
            <ServiceIcon class="mx-auto mb-4" />
            <h3 class="text-xl font-medium">服务1</h3>
            <p class="text-gray-500">简短介绍服务1</p>
          </div>
          <div class="bg-gray-100 rounded-lg p-6 text-center cursor-pointer" @click="goToServiceDetail">
            <ServiceIcon class="mx-auto mb-4" />
            <h3 class="text-xl font-medium">服务2</h3>
            <p class="text-gray-500">简短介绍服务2</p>
          </div>
          <div class="bg-gray-100 rounded-lg p-6 text-center cursor-pointer" @click="goToServiceDetail">
            <ServiceIcon class="mx-auto mb-4" />
            <h3 class="text-xl font-medium">服务3</h3>
            <p class="text-gray-500">简短介绍服务3</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Recommended Content -->
    <section class="py-12 bg-gray-100">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-8">推荐内容</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="bg-white rounded-lg p-6 shadow-sm cursor-pointer" @click="goToContentDetail">
            <img src="@/assets/img/applied_view.png" class="w-full h-48 object-cover mb-4" alt="Content 1" />
            <h3 class="text-xl font-medium">内容1</h3>
            <p class="text-gray-500">简短介绍内容1</p>
          </div>
          <div class="bg-white rounded-lg p-6 shadow-sm cursor-pointer" @click="goToContentDetail">
            <img src="@/assets/img/project_view.png" class="w-full h-48 object-cover mb-4" alt="Content 2" />
            <h3 class="text-xl font-medium">内容2</h3>
            <p class="text-gray-500">简短介绍内容2</p>
          </div>
          <div class="bg-white rounded-lg p-6 shadow-sm cursor-pointer" @click="goToContentDetail">
            <img src="@/assets/img/upload_view.png" class="w-full h-48 object-cover mb-4" alt="Content 3" />
            <h3 class="text-xl font-medium">内容3</h3>
            <p class="text-gray-500">简短介绍内容3</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-xl font-bold mb-4">关于我们</h3>
            <p>我们是一家致力于提供优质服务的公司。</p>
          </div>
          <div>
            <h3 class="text-xl font-bold mb-4">联系我们</h3>
            <p>邮箱: info@example.com</p>
            <p>电话: +123 456 7890</p>
          </div>
          <div>
            <h3 class="text-xl font-bold mb-4">社交媒体</h3>
            <a href="#" class="block mb-2">Facebook</a>
            <a href="#" class="block mb-2">Twitter</a>
            <a href="#" class="block">LinkedIn</a>
          </div>
        </div>
        <div class="mt-8 text-center">
          <p>版权所有 &copy; {{ new Date().getFullYear() }} ProductName. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {
  ChevronLeft, ChevronRight, ServiceIcon
} from 'lucide-vue-next'
import { useRouter } from 'vue-router'

const router = useRouter()

let currentSlide = 0
const slides = document.querySelectorAll('.carousel-item')

function nextSlide() {
  slides[currentSlide].classList.remove('active')
  currentSlide = (currentSlide + 1) % slides.length
  slides[currentSlide].classList.add('active')
}

function prevSlide() {
  slides[currentSlide].classList.remove('active')
  currentSlide = (currentSlide - 1 + slides.length) % slides.length
  slides[currentSlide].classList.add('active')
}

function goToServiceDetail() {
  router.push('/service-detail')
}

function goToContentDetail() {
  router.push('/content-detail')
}
</script>

<style scoped>
.carousel-item {
  display: none;
}

.carousel-item.active {
  display: block;
}
</style>