zbytest003-2025-02-26 08:12:07

src/views/HomeView.vue

@@ -1,12 +1,170 @@
 <template>
-  <div class="h-screen w-screen flex justify-center items-center">
-    <h2>欢迎使用Prototype Design, 请您根据您的需要设计您的Prototype</h2>
+  <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>
+<script setup>
+import {
+  ChevronLeft, ChevronRight, ServiceIcon
+} from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
-export default {}
+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>
+
+<style scoped>
+.carousel-item {
+  display: none;
+}
+
+.carousel-item.active {
+  display: block;
+}
 </style>