zbytest003-2025-02-28 03:52:53

src/router/index.js

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

src/views/HomeView.vue

@@ -1,12 +1,148 @@
 <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 -->
+    <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">
+              <LucideLogo 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="px-3 py-1 text-blue-600 bg-blue-50 rounded-md">登录</a>
+          <a href="#/register" class="px-3 py-1 text-blue-600 bg-blue-50 rounded-md">注册</a>
+        </div>
+      </div>
+    </header>
+
+    <main class="p-6">
+      <!-- Carousel -->
+      <div class="bg-white rounded-lg p-6 mb-6 shadow-sm">
+        <h2 class="text-lg font-medium">最新产品/活动</h2>
+        <div class="carousel-container">
+          <div class="carousel-item">
+            <div class="carousel-content">
+              <h3>产品/活动名称</h3>
+              <p>产品/活动描述</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Featured Recommendations -->
+      <div class="bg-white rounded-lg p-6 mb-6 shadow-sm">
+        <h2 class="text-lg font-medium">特色推荐</h2>
+        <div class="grid grid-cols-3 gap-6">
+          <div v-for="(item, index) in featuredItems" :key="index" class="bg-gray-50 rounded-lg p-4 flex flex-col items-center">
+            <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-blue-50">
+              <LucideStar class="w-6 h-6 text-blue-500" />
+            </div>
+            <div class="mt-2 text-center">
+              <h3 class="text-gray-900">{{ item.title }}</h3>
+              <p class="text-gray-500">{{ item.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Service Introduction -->
+      <div class="bg-white rounded-lg p-6 mb-6 shadow-sm">
+        <h2 class="text-lg font-medium">我们的服务</h2>
+        <p>我们提供多种服务，包括但不限于：服务1，服务2，服务3等。</p>
+      </div>
+
+      <!-- Customer Reviews -->
+      <div class="bg-white rounded-lg p-6 mb-6 shadow-sm">
+        <h2 class="text-lg font-medium">客户评价</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 flex flex-col items-center">
+            <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-green-50">
+              <LucideQuote class="w-6 h-6 text-green-500" />
+            </div>
+            <div class="mt-2 text-center">
+              <p class="text-gray-900">{{ review.text }}</p>
+              <span class="text-gray-500">- {{ review.author }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <footer class="bg-white border-t">
+        <div class="flex flex-col items-center justify-between px-4 py-6">
+          <div class="mb-4">
+            <a href="#" class="mx-2 text-gray-500 hover:text-blue-600">关于我们</a>
+            <a href="#" class="mx-2 text-gray-500 hover:text-blue-600">联系我们</a>
+            <a href="#" class="mx-2 text-gray-500 hover:text-blue-600">隐私政策</a>
+            <a href="#" class="mx-2 text-gray-500 hover:text-blue-600">服务条款</a>
+          </div>
+          <div class="flex items-center space-x-4">
+            <a href="#" class="text-gray-500">
+              <LucideTwitter class="w-6 h-6" />
+            </a>
+            <a href="#" class="text-gray-500">
+              <LucideFacebook class="w-6 h-6" />
+            </a>
+            <a href="#" class="text-gray-500">
+              <LucideInstagram class="w-6 h-6" />
+            </a>
+          </div>
+          <p class="mt-4 text-gray-500">© 2025 ProductName. All rights reserved.</p>
+        </div>
+      </footer>
+    </main>
   </div>
 </template>
 
-<script>
+<script setup>
+import {
+  LucideLogo, Search, LucideStar, LucideQuote, LucideTwitter, LucideFacebook, LucideInstagram
+} from 'lucide-vue-next'
+
+const featuredItems = [
+  { title: '产品1', description: '产品1的描述' },
+  { title: '产品2', description: '产品2的描述' },
+  { title: '产品3', description: '产品3的描述' }
+]
 
-export default {}
+const reviews = [
+  { text: '非常满意！', author: '客户A' },
+  { text: '很好的服务！', author: '客户B' }
+]
 </script>
-<style>
+
+<style scoped>
+.carousel-container {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 200px;
+}
+
+.carousel-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-content {
+  text-align: center;
+}
 </style>