|
|
@@ -1,12 +1,174 @@
|
|
|
<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">
|
|
|
+ <!-- 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">
|
|
|
+ <a href="#/" class="text-blue-600">
|
|
|
+ <div class="w-8 h-8">
|
|
|
+ <svg class="w-full h-full" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <circle cx="16" cy="16" r="14" stroke="#2563EB" stroke-width="2" fill="white" />
|
|
|
+ <path d="M16 8L16 24" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
|
+ <path d="M8 16L24 16" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ <span class="text-xl font-medium">网站名称</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="#/about" class="text-gray-500 hover:text-blue-600">关于我们</a>
|
|
|
+ <a href="#/services" class="text-gray-500 hover:text-blue-600">产品服务</a>
|
|
|
+ <a href="#/news" class="text-gray-500 hover:text-blue-600">新闻动态</a>
|
|
|
+ <a href="#/contact" class="text-gray-500 hover:text-blue-600">联系我们</a>
|
|
|
+ <a href="#/login" class="px-3 py-1 text-white bg-blue-600 rounded-md">登录/注册</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- Carousel -->
|
|
|
+ <div class="relative w-full h-96 overflow-hidden">
|
|
|
+ <div class="absolute inset-0 flex items-center justify-center">
|
|
|
+ <h1 class="text-4xl font-bold text-white">欢迎来到我们的网站</h1>
|
|
|
+ </div>
|
|
|
+ <div class="carousel w-full h-full">
|
|
|
+ <div class="carousel-item w-full h-full bg-cover bg-center" style="background-image: url('https://via.placeholder.com/1200x900');"></div>
|
|
|
+ <div class="carousel-item w-full h-full bg-cover bg-center" style="background-image: url('https://via.placeholder.com/1200x900');"></div>
|
|
|
+ <div class="carousel-item w-full h-full bg-cover bg-center" style="background-image: url('https://via.placeholder.com/1200x900');"></div>
|
|
|
+ </div>
|
|
|
+ <button class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white px-4 py-2">‹</button>
|
|
|
+ <button class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white px-4 py-2">›</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <main class="flex-1 p-6">
|
|
|
+ <!-- Featured Content -->
|
|
|
+ <div class="grid grid-cols-3 gap-6 mb-6">
|
|
|
+ <div v-for="(item, index) in featuredItems" :key="index" class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-blue-50">
|
|
|
+ <FileText class="text-blue-500" size="24" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-lg font-medium">{{ item.title }}</div>
|
|
|
+ <div class="text-gray-500">{{ item.description }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Service Introduction -->
|
|
|
+ <div class="grid grid-cols-3 gap-6 mb-6">
|
|
|
+ <div v-for="(service, index) in services" :key="index" class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-blue-50">
|
|
|
+ <Box class="text-blue-500" size="24" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-lg font-medium">{{ service.title }}</div>
|
|
|
+ <div class="text-gray-500">{{ service.description }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Partners and Reviews -->
|
|
|
+ <div class="grid grid-cols-2 gap-6 mb-6">
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <h2 class="text-lg font-medium">合作伙伴</h2>
|
|
|
+ <div class="flex items-center space-x-4 mt-4">
|
|
|
+ <div v-for="(partner, index) in partners" :key="index" class="w-12 h-12 rounded-lg bg-gray-200">
|
|
|
+ <a :href="partner.url" target="_blank">
|
|
|
+ <img :src="partner.logo" alt="Partner Logo" class="w-full h-full" />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <h2 class="text-lg font-medium">客户评价</h2>
|
|
|
+ <div class="mt-4">
|
|
|
+ <div v-for="(review, index) in reviews" :key="index" class="flex items-center space-x-4 mb-4">
|
|
|
+ <div class="w-12 h-12 rounded-lg bg-gray-200">
|
|
|
+ <img :src="review.avatar" alt="Customer Avatar" class="w-full h-full" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-gray-900">{{ review.name }}</div>
|
|
|
+ <div class="text-gray-500">{{ review.comment }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <!-- Footer -->
|
|
|
+ <footer class="bg-white border-t">
|
|
|
+ <div class="flex items-center justify-between px-4 py-2">
|
|
|
+ <div>
|
|
|
+ <p class="text-gray-500">© 2025 网站名称. All rights reserved.</p>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <a href="mailto:support@website.com" class="text-gray-500 hover:text-blue-600">联系我们</a>
|
|
|
+ <a href="#/privacy" class="text-gray-500 hover:text-blue-600">隐私政策</a>
|
|
|
+ <a href="#/terms" class="text-gray-500 hover:text-blue-600">服务条款</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ Search, FileText, Box
|
|
|
+} from 'lucide-vue-next'
|
|
|
|
|
|
-export default {}
|
|
|
+const featuredItems = [
|
|
|
+ { title: '热门产品', description: '我们最热门的产品推荐' },
|
|
|
+ { title: '最新活动', description: '最新的促销活动和优惠信息' },
|
|
|
+ { title: '客户评价', description: '来自客户的正面评价' }
|
|
|
+]
|
|
|
+
|
|
|
+const services = [
|
|
|
+ { title: '服务项目1', description: '服务项目1的详细介绍' },
|
|
|
+ { title: '服务项目2', description: '服务项目2的详细介绍' },
|
|
|
+ { title: '服务项目3', description: '服务项目3的详细介绍' }
|
|
|
+]
|
|
|
+
|
|
|
+const partners = [
|
|
|
+ { url: 'https://partner1.com', logo: 'https://via.placeholder.com/48x48' },
|
|
|
+ { url: 'https://partner2.com', logo: 'https://via.placeholder.com/48x48' },
|
|
|
+ { url: 'https://partner3.com', logo: 'https://via.placeholder.com/48x48' }
|
|
|
+]
|
|
|
+
|
|
|
+const reviews = [
|
|
|
+ { avatar: 'https://via.placeholder.com/48x48', name: '客户1', comment: '非常好的服务！' },
|
|
|
+ { avatar: 'https://via.placeholder.com/48x48', name: '客户2', comment: '质量很高！' }
|
|
|
+]
|
|
|
</script>
|
|
|
-<style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.carousel {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-item {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transition: opacity 0.5s ease-in-out;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-item.active {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
</style>
|
genlitex