zbytest003-2025-02-26 09:02:23

src/router/index.js

@@ -1,11 +1,17 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import HomePage from '../views/HomePage.vue'
 
 const routes = [
   {
     path: '/',
     name: 'home',
     component: HomeView
+  },
+  {
+    path: '/homepage',
+    name: 'homepage',
+    component: HomePage
   }
 ]
 

src/views/HomePage.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="min-h-screen bg-gray-50">
+    <!-- Top Navigation -->
+    <header class="bg-white border-b">
+      <div class="flex items-center justify-between px-4 py-2">
+        <div 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>
+        </div>
+
+        <div class="flex-1 max-w-xl mx-4">
+          <div class="relative">
+            <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size="20" />
+            <input
+                type="text"
+                placeholder="输入内容查询"
+                class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        <div class="flex items-center space-x-4">
+          <a href="#/login" class="text-blue-500">登录</a>
+          <a href="#/register" class="text-blue-500">注册</a>
+          <MessageCircle class="w-6 h-6 text-blue-500" />
+          <Bell class="w-6 h-6 text-blue-500" />
+          <Settings class="w-6 h-6 text-gray-400" />
+          <div class="w-8 h-8 rounded-full bg-gray-200"></div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Carousel -->
+    <div class="relative w-full overflow-hidden">
+      <div class="carousel-inner relative w-full transition-transform duration-500 ease-in-out" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
+        <div class="carousel-item w-full float-left">
+          <img src="@/assets/img/promotion1.jpg" alt="Promotion 1" class="block w-full">
+        </div>
+        <div class="carousel-item w-full float-left">
+          <img src="@/assets/img/promotion2.jpg" alt="Promotion 2" class="block w-full">
+        </div>
+        <div class="carousel-item w-full float-left">
+          <img src="@/assets/img/promotion3.jpg" alt="Promotion 3" class="block w-full">
+        </div>
+      </div>
+      <button class="absolute top-0 left-0 h-full w-16 bg-black opacity-50 hover:opacity-75" @click="prevSlide">
+        <ChevronLeft class="w-6 h-6 text-white mx-auto my-auto" />
+      </button>
+      <button class="absolute top-0 right-0 h-full w-16 bg-black opacity-50 hover:opacity-75" @click="nextSlide">
+        <ChevronRight class="w-6 h-6 text-white mx-auto my-auto" />
+      </button>
+    </div>
+
+    <!-- Featured Services/Products -->
+    <div class="grid grid-cols-3 gap-6 p-6">
+      <div v-for="(service, index) in services" :key="index" class="bg-white rounded-lg p-6 shadow-sm">
+        <img :src="service.image" alt="Service Image" class="w-full h-48 object-cover rounded-t-lg">
+        <h3 class="text-xl font-medium mt-4">{{ service.title }}</h3>
+        <p class="text-gray-500 mt-2">{{ service.description }}</p>
+        <a href="#/product-details" class="mt-4 text-blue-600">了解更多</a>
+      </div>
+    </div>
+
+    <!-- Latest News -->
+    <div class="bg-white rounded-lg p-6 shadow-sm mb-6">
+      <h2 class="text-lg font-medium mb-4">最新动态</h2>
+      <div class="flex space-x-4 overflow-x-scroll">
+        <div v-for="(news, index) in newsItems" :key="index" class="min-w-max p-4 bg-gray-50 rounded-lg shadow-sm">
+          <h3 class="text-gray-900">{{ news.title }}</h3>
+          <p class="text-gray-500 text-sm">{{ news.summary }}</p>
+          <a href="#/news-details" class="text-blue-600">阅读更多</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- User Reviews -->
+    <div class="bg-white rounded-lg p-6 shadow-sm mb-6">
+      <h2 class="text-lg font-medium mb-4">用户评价</h2>
+      <div class="grid grid-cols-2 gap-6">
+        <div v-for="(review, index) in reviews" :key="index" class="bg-gray-50 rounded-lg p-4 shadow-sm">
+          <p class="text-gray-700">{{ review.text }}</p>
+          <div v-if="review.video" class="mt-4">
+            <video :src="review.video" controls class="w-full"></video>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-6">
+      <div class="container mx-auto px-4">
+        <div class="flex flex-wrap justify-between">
+          <div class="w-full md:w-1/3 mb-6 md:mb-0">
+            <h3 class="text-lg font-medium mb-4">关于我们</h3>
+            <p class="text-gray-400">我们是一家专注于提供优质服务的公司。</p>
+          </div>
+          <div class="w-full md:w-1/3 mb-6 md:mb-0">
+            <h3 class="text-lg font-medium mb-4">快速导航</h3>
+            <ul>
+              <li><a href="#/" class="text-gray-400 hover:text-white">首页</a></li>
+              <li><a href="#/products" class="text-gray-400 hover:text-white">产品</a></li>
+              <li><a href="#/about-us" class="text-gray-400 hover:text-white">关于我们</a></li>
+              <li><a href="#/contact-us" class="text-gray-400 hover:text-white">联系我们</a></li>
+            </ul>
+          </div>
+          <div class="w-full md:w-1/3 mb-6 md:mb-0">
+            <h3 class="text-lg font-medium mb-4">社交媒体</h3>
+            <div class="flex space-x-4">
+              <a href="#" class="text-gray-400 hover:text-white"><Twitter class="w-6 h-6" /></a>
+              <a href="#" class="text-gray-400 hover:text-white"><Facebook class="w-6 h-6" /></a>
+              <a href="#" class="text-gray-400 hover:text-white"><Instagram class="w-6 h-6" /></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import {
+  Search, MessageCircle, Bell, Settings, Twitter, Facebook, Instagram,
+  ChevronLeft, ChevronRight, FileText, Box,
+  LayoutGrid, MoreHorizontal
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const currentIndex = ref(0)
+
+const services = [
+  { title: '服务1', description: '这是服务1的描述', image: '@/assets/img/service1.jpg' },
+  { title: '服务2', description: '这是服务2的描述', image: '@/assets/img/service2.jpg' },
+  { title: '服务3', description: '这是服务3的描述', image: '@/assets/img/service3.jpg' }
+]
+
+const newsItems = [
+  { title: '新闻1', summary: '这是新闻1的摘要' },
+  { title: '新闻2', summary: '这是新闻2的摘要' },
+  { title: '新闻3', summary: '这是新闻3的摘要' }
+]
+
+const reviews = [
+  { text: '非常满意！', video: '@/assets/video/review1.mp4' },
+  { text: '产品质量很好！', video: null },
+  { text: '服务态度一流！', video: '@/assets/video/review3.mp4' }
+]
+
+const nextSlide = () => {
+  currentIndex.value = (currentIndex.value + 1) % services.length
+}
+
+const prevSlide = () => {
+  currentIndex.value = (currentIndex.value - 1 + services.length) % services.length
+}
+</script>
+
+<style scoped>
+.carousel-inner {
+  display: flex;
+}
+
+.carousel-item {
+  min-width: 100%;
+}
+</style>