|
@@ -1,12 +1,199 @@
|
|
|
<template>
|
|
<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">
|
|
|
|
|
+ <div class="text-blue-600">
|
|
|
|
|
+ <img src="@/assets/img/logo.png" alt="Logo" class="w-8 h-8" />
|
|
|
|
|
+ </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="#/about" class="text-blue-500">关于我们</a>
|
|
|
|
|
+ <a href="#/services" class="text-blue-500">产品服务</a>
|
|
|
|
|
+ <a href="#/news" class="text-blue-500">新闻动态</a>
|
|
|
|
|
+ <a href="#/contact" class="text-blue-500">联系我们</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </header>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Carousel Area -->
|
|
|
|
|
+ <div class="relative">
|
|
|
|
|
+ <div class="carousel w-full">
|
|
|
|
|
+ <div id="slide1" class="carousel-item relative w-full">
|
|
|
|
|
+ <img src="@/assets/img/project_view.png" class="w-full" />
|
|
|
|
|
+ <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
|
|
|
|
|
+ <a href="#slide4" class="btn btn-circle">❮</a>
|
|
|
|
|
+ <a href="#slide2" class="btn btn-circle">❯</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="slide2" class="carousel-item relative w-full">
|
|
|
|
|
+ <img src="@/assets/img/upload_view.png" class="w-full" />
|
|
|
|
|
+ <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
|
|
|
|
|
+ <a href="#slide1" class="btn btn-circle">❮</a>
|
|
|
|
|
+ <a href="#slide3" class="btn btn-circle">❯</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="slide3" class="carousel-item relative w-full">
|
|
|
|
|
+ <img src="@/assets/img/prompt_view.png" class="w-full" />
|
|
|
|
|
+ <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
|
|
|
|
|
+ <a href="#slide2" class="btn btn-circle">❮</a>
|
|
|
|
|
+ <a href="#slide4" class="btn btn-circle">❯</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div id="slide4" class="carousel-item relative w-full">
|
|
|
|
|
+ <img src="@/assets/img/KT_view.png" class="w-full" />
|
|
|
|
|
+ <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
|
|
|
|
|
+ <a href="#slide3" class="btn btn-circle">❮</a>
|
|
|
|
|
+ <a href="#slide1" class="btn btn-circle">❯</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Feature Services/Product Introduction Area -->
|
|
|
|
|
+ <section class="py-12 bg-white">
|
|
|
|
|
+ <div class="container mx-auto">
|
|
|
|
|
+ <h2 class="text-3xl font-bold mb-8">我们的服务</h2>
|
|
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
|
|
+ <div class="p-6 bg-gray-100 rounded-lg shadow-md">
|
|
|
|
|
+ <img src="@/assets/img/project_view.png" alt="Service 1" class="w-full h-48 object-cover mb-4" />
|
|
|
|
|
+ <h3 class="text-xl font-medium mb-2">服务一</h3>
|
|
|
|
|
+ <p class="text-gray-700">服务一的详细介绍...</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="p-6 bg-gray-100 rounded-lg shadow-md">
|
|
|
|
|
+ <img src="@/assets/img/upload_view.png" alt="Service 2" class="w-full h-48 object-cover mb-4" />
|
|
|
|
|
+ <h3 class="text-xl font-medium mb-2">服务二</h3>
|
|
|
|
|
+ <p class="text-gray-700">服务二的详细介绍...</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="p-6 bg-gray-100 rounded-lg shadow-md">
|
|
|
|
|
+ <img src="@/assets/img/prompt_view.png" alt="Service 3" class="w-full h-48 object-cover mb-4" />
|
|
|
|
|
+ <h3 class="text-xl font-medium mb-2">服务三</h3>
|
|
|
|
|
+ <p class="text-gray-700">服务三的详细介绍...</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Team Introduction Area -->
|
|
|
|
|
+ <section class="py-12 bg-gray-50">
|
|
|
|
|
+ <div class="container mx-auto">
|
|
|
|
|
+ <h2 class="text-3xl font-bold mb-8">核心团队</h2>
|
|
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
|
|
+ <div class="p-6 bg-white rounded-lg shadow-md">
|
|
|
|
|
+ <img src="@/assets/img/KT_view.png" alt="Team Member 1" class="w-full h-48 object-cover mb-4 rounded-t-lg" />
|
|
|
|
|
+ <h3 class="text-xl font-medium mb-2">张三</h3>
|
|
|
|
|
+ <p class="text-gray-700">项目经理</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="p-6 bg-white rounded-lg shadow-md">
|
|
|
|
|
+ <img src="@/assets/img/applied_view.png" alt="Team Member 2" class="w-full h-48 object-cover mb-4 rounded-t-lg" />
|
|
|
|
|
+ <h3 class="text-xl font-medium mb-2">李四</h3>
|
|
|
|
|
+ <p class="text-gray-700">技术经理</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="p-6 bg-white rounded-lg shadow-md">
|
|
|
|
|
+ <img src="@/assets/img/prompt_view.png" alt="Team Member 3" class="w-full h-48 object-cover mb-4 rounded-t-lg" />
|
|
|
|
|
+ <h3 class="text-xl font-medium mb-2">王五</h3>
|
|
|
|
|
+ <p class="text-gray-700">市场经理</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Customer Reviews Area -->
|
|
|
|
|
+ <section class="py-12 bg-white">
|
|
|
|
|
+ <div class="container mx-auto">
|
|
|
|
|
+ <h2 class="text-3xl font-bold mb-8">客户评价</h2>
|
|
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
|
|
|
+ <div class="p-6 bg-gray-100 rounded-lg shadow-md">
|
|
|
|
|
+ <p class="text-gray-700">“非常满意，服务专业高效。”</p>
|
|
|
|
|
+ <div class="flex items-center mt-4">
|
|
|
|
|
+ <img src="@/assets/img/KT_view.png" alt="Customer 1" class="w-12 h-12 rounded-full mr-4" />
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <h3 class="text-xl font-medium">客户一</h3>
|
|
|
|
|
+ <p class="text-gray-500">公司名称</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ml-auto">
|
|
|
|
|
+ <a href="#" class="text-blue-500">分享</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="p-6 bg-gray-100 rounded-lg shadow-md">
|
|
|
|
|
+ <p class="text-gray-700">“服务超出预期，值得信赖。”</p>
|
|
|
|
|
+ <div class="flex items-center mt-4">
|
|
|
|
|
+ <img src="@/assets/img/applied_view.png" alt="Customer 2" class="w-12 h-12 rounded-full mr-4" />
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <h3 class="text-xl font-medium">客户二</h3>
|
|
|
|
|
+ <p class="text-gray-500">公司名称</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ml-auto">
|
|
|
|
|
+ <a href="#" class="text-blue-500">分享</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Footer Area -->
|
|
|
|
|
+ <footer class="bg-gray-800 text-white py-8">
|
|
|
|
|
+ <div class="container mx-auto">
|
|
|
|
|
+ <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>电话: 123-456-7890</p>
|
|
|
|
|
+ <p>邮箱: info@example.com</p>
|
|
|
|
|
+ <p>地址: 某某市某某区某某路某某号</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>
|
|
|
|
|
+ <p class="mt-8 text-center">© 2025 ProductName. All rights reserved.</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </footer>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
-<script>
|
|
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import {
|
|
|
|
|
+ Search
|
|
|
|
|
+} from 'lucide-vue-next'
|
|
|
|
|
+
|
|
|
|
|
+// Sample data for carousel, services, team, and reviews
|
|
|
|
|
+const services = [
|
|
|
|
|
+ { name: '服务一', image: '@/assets/img/project_view.png', description: '服务一的详细介绍...' },
|
|
|
|
|
+ { name: '服务二', image: '@/assets/img/upload_view.png', description: '服务二的详细介绍...' },
|
|
|
|
|
+ { name: '服务三', image: '@/assets/img/prompt_view.png', description: '服务三的详细介绍...' }
|
|
|
|
|
+]
|
|
|
|
|
+
|
|
|
|
|
+const teamMembers = [
|
|
|
|
|
+ { name: '张三', position: '项目经理', image: '@/assets/img/KT_view.png' },
|
|
|
|
|
+ { name: '李四', position: '技术经理', image: '@/assets/img/applied_view.png' },
|
|
|
|
|
+ { name: '王五', position: '市场经理', image: '@/assets/img/prompt_view.png' }
|
|
|
|
|
+]
|
|
|
|
|
|
|
|
-export default {}
|
|
|
|
|
|
|
+const reviews = [
|
|
|
|
|
+ { text: '非常满意，服务专业高效。', customer: '客户一', company: '公司名称', image: '@/assets/img/KT_view.png' },
|
|
|
|
|
+ { text: '服务超出预期，值得信赖。', customer: '客户二', company: '公司名称', image: '@/assets/img/applied_view.png' }
|
|
|
|
|
+]
|
|
|
</script>
|
|
</script>
|
|
|
-<style>
|
|
|
|
|
-</style>
|
|
|
genlitex
