|
|
@@ -1,12 +1,192 @@
|
|
|
<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">
|
|
|
+ <div class="w-8 h-8">
|
|
|
+ <img src="@/assets/img/applied_view.png" alt="Logo" class="w-full h-full object-contain" />
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- Carousel -->
|
|
|
+ <section class="relative w-full overflow-hidden">
|
|
|
+ <div class="carousel-inner relative w-full transition-transform duration-500 ease-in-out" style="transform: translateX(0);">
|
|
|
+ <div class="carousel-item w-full float-left h-auto">
|
|
|
+ <img src="@/assets/img/project_view.png" class="block w-full" alt="Slide 1" />
|
|
|
+ </div>
|
|
|
+ <div class="carousel-item w-full float-left h-auto">
|
|
|
+ <img src="@/assets/img/prompt_view.png" class="block w-full" alt="Slide 2" />
|
|
|
+ </div>
|
|
|
+ <div class="carousel-item w-full float-left h-auto">
|
|
|
+ <img src="@/assets/img/upload_view.png" class="block w-full" alt="Slide 3" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="carousel-control-prev absolute top-0 bottom-0 left-0 z-30 flex items-center justify-center h-full px-3 cursor-pointer" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
|
|
|
+ <span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
|
|
|
+ <span class="visually-hidden">Previous</span>
|
|
|
+ </button>
|
|
|
+ <button class="carousel-control-next absolute top-0 bottom-0 right-0 z-30 flex items-center justify-center h-full px-3 cursor-pointer" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
|
|
|
+ <span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
|
|
|
+ <span class="visually-hidden">Next</span>
|
|
|
+ </button>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Featured Content -->
|
|
|
+ <section class="container mx-auto px-4 py-8">
|
|
|
+ <h2 class="text-3xl font-bold mb-6">特色内容</h2>
|
|
|
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
|
+ <div v-for="(feature, index) in features" :key="index" class="bg-white rounded-lg p-6 shadow-md">
|
|
|
+ <img :src="feature.image" class="w-full h-48 object-cover mb-4" :alt="feature.title" />
|
|
|
+ <h3 class="text-xl font-semibold mb-2">{{ feature.title }}</h3>
|
|
|
+ <p class="text-gray-500 mb-4">{{ feature.description }}</p>
|
|
|
+ <a :href="feature.link" class="text-blue-500">了解更多</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Services Introduction -->
|
|
|
+ <section class="container mx-auto px-4 py-8 bg-gray-100">
|
|
|
+ <h2 class="text-3xl font-bold mb-6">服务介绍</h2>
|
|
|
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
|
+ <div v-for="(service, index) in services" :key="index" class="bg-white rounded-lg p-6 shadow-md">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
|
|
+ <component :is="service.icon" class="w-6 h-6 text-blue-500" />
|
|
|
+ </div>
|
|
|
+ <h3 class="text-xl font-semibold mb-2">{{ service.title }}</h3>
|
|
|
+ <p class="text-gray-500 mb-4">{{ service.description }}</p>
|
|
|
+ <a :href="service.link" class="text-blue-500">了解更多</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- User Reviews -->
|
|
|
+ <section class="container mx-auto px-4 py-8">
|
|
|
+ <h2 class="text-3xl font-bold mb-6">用户评价</h2>
|
|
|
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
|
+ <div v-for="(review, index) in reviews" :key="index" class="bg-white rounded-lg p-6 shadow-md">
|
|
|
+ <div class="flex items-center mb-4">
|
|
|
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-semibold">{{ review.name }}</h3>
|
|
|
+ <p class="text-gray-500">{{ review.date }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="text-gray-500 mb-4">{{ review.content }}</p>
|
|
|
+ <a href="#/reviews" class="text-blue-500">查看全部评价</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Footer -->
|
|
|
+ <footer class="bg-gray-800 text-white py-6">
|
|
|
+ <div class="container mx-auto px-4">
|
|
|
+ <div class="flex flex-col md:flex-row justify-between items-center">
|
|
|
+ <div class="mb-4 md:mb-0">
|
|
|
+ <p>© {{ currentYear }} ProductName. All rights reserved.</p>
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-4">
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white">联系我们</a>
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white">关于我们</a>
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white">隐私政策</a>
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white">服务条款</a>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a href="https://facebook.com" target="_blank" class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.882 3.46 8.939 8 10.332V14H6v-4h2v-2c0-2.209 1.791-4 4-4s4 1.791 4 4v2h-2v4h2v5.332C18.54 20.939 22 16.882 22 12z"/></svg></a>
|
|
|
+ <a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.29 20.25c7.208 0 11.25-5.999 11.25-11.25 0-.177 0-.354-.012-.53.77-1.81 1.204-3.834 1.204-5.958 0-2.78-2.269-5.05-5.05-5.05-.477 0-.94.094-1.383.275.626-.12 1.224-.354 1.787-.639-.795.156-1.61 1.043-1.75 1.918-.772-.042-1.492-.232-2.128-.483v.042c0 1.885-.626 3.639-1.641 4.827-.194-.007-.384-.016-.573-.025.201.63.321 1.29.321 1.997 0 1.439-.477 2.747-1.287 3.829-.81.573-1.77 1.066-2.828 1.378-.02.007-.04.013-.06.02-.391-.03-.77-.157-1.129-.344.708.814 1.628 1.305 2.669 1.349-.477.128-.97.2 1.465.2z"/></svg></a>
|
|
|
+ <a href="https://instagram.com" target="_blank" class="text-gray-400 hover:text-white"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.412 0H3.588C1.63 0 0 1.63 0 3.588v16.824C0 22.37 1.63 24 3.588 24h16.824C22.37 24 24 22.37 24 20.412V3.588C24 1.63 22.37 0 20.412 0zm-10 22.412C6.567 22.412 3.588 19.433 3.588 16.588S6.567 10.767 9.512 10.767 15.433 13.746 15.433 16.588 12.454 22.412 9.512 22.412zm0-4.219c2.503 0 4.533-2.03 4.533-4.533s-2.03-4.533-4.533-4.533-4.533 2.03-4.533 4.533 2.03 4.533 4.533 4.533zm-1.066-4.533c0 1.406-.955 2.56-2.289 2.56s-2.289-1.154-2.289-2.56c0-1.406.955-2.56 2.289-2.56s2.289 1.154 2.289 2.56zm7.823-5.091c-.593 0-1.071-.478-1.071-1.071s.478-1.071 1.071-1.071c.593 0 1.071.478 1.071 1.071s-.478 1.071-1.071 1.071zm-1.518 0c-.593 0-1.071-.478-1.071-1.071s.478-1.071 1.071-1.071c.593 0 1.071.478 1.071 1.071s-.478 1.071-1.071 1.071zm-3.565 0c-.593 0-1.071-.478-1.071-1.071s.478-1.071 1.071-1.071c.593 0 1.071.478 1.071 1.071s-.478 1.071-1.071 1.071zm-3.565 0c-.593 0-1.071-.478-1.071-1.071s.478-1.071 1.071-1.071c.593 0 1.071.478 1.071 1.071s-.478 1.071-1.071 1.071zm-3.565 0c-.593 0-1.071-.478-1.071-1.071s.478-1.071 1.071-1.071c.593 0 1.071.478 1.071 1.071s-.478 1.071-1.071 1.071zm-3.565 0c-.593 0-1.071-.478-1.071-1.071s.478-1.071 1.071-1.071c.593 0 1.071.478 1.071 1.071s-.478 1.071-1.071 1.071zm0 2.56c1.406 0 2.56-.955 2.56-2.289s-.955-2.289-2.289-2.289-2.289.955-2.289 2.289.955 2.289 2.289 2.289zm0-4.533c2.503 0 4.533-2.03 4.533-4.533s-2.03-4.533-4.533-4.533-4.533 2.03-4.533 4.533 2.03 4.533 4.533 4.533z"/></svg></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script setup>
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import {
|
|
|
+ Search,
|
|
|
+ Home,
|
|
|
+ FileText,
|
|
|
+ Box,
|
|
|
+ LayoutGrid,
|
|
|
+ MoreHorizontal
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const currentYear = computed(() => new Date().getFullYear())
|
|
|
|
|
|
-export default {}
|
|
|
+const features = [
|
|
|
+ { title: '特色服务1', description: '这是一个特色服务的简短描述。', image: '@/assets/img/applied_view.png', link: '#/service1' },
|
|
|
+ { title: '特色服务2', description: '这是一个特色服务的简短描述。', image: '@/assets/img/project_view.png', link: '#/service2' },
|
|
|
+ { title: '特色服务3', description: '这是一个特色服务的简短描述。', image: '@/assets/img/prompt_view.png', link: '#/service3' },
|
|
|
+ { title: '特色服务4', description: '这是一个特色服务的简短描述。', image: '@/assets/img/upload_view.png', link: '#/service4' }
|
|
|
+]
|
|
|
+
|
|
|
+const services = [
|
|
|
+ { title: '服务1', description: '这是一个服务的简短描述。', icon: Home, link: '#/service1' },
|
|
|
+ { title: '服务2', description: '这是一个服务的简短描述。', icon: FileText, link: '#/service2' },
|
|
|
+ { title: '服务3', description: '这是一个服务的简短描述。', icon: Box, link: '#/service3' },
|
|
|
+ { title: '服务4', description: '这是一个服务的简短描述。', icon: LayoutGrid, link: '#/service4' }
|
|
|
+]
|
|
|
+
|
|
|
+const reviews = [
|
|
|
+ { name: '用户1', date: '2023-01-01', content: '这是一个用户的评价内容。' },
|
|
|
+ { name: '用户2', date: '2023-02-01', content: '这是一个用户的评价内容。' },
|
|
|
+ { name: '用户3', date: '2023-03-01', content: '这是一个用户的评价内容。' },
|
|
|
+ { name: '用户4', date: '2023-04-01', content: '这是一个用户的评价内容。' }
|
|
|
+]
|
|
|
</script>
|
|
|
-<style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.carousel-inner {
|
|
|
+ display: flex;
|
|
|
+ transition: transform 0.5s ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-item {
|
|
|
+ min-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-control-prev,
|
|
|
+.carousel-control-next {
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-control-prev:hover,
|
|
|
+.carousel-control-next:hover {
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-control-prev-icon,
|
|
|
+.carousel-control-next-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3E%3C/svg%3E");
|
|
|
+}
|
|
|
+
|
|
|
+.carousel-control-next-icon {
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
</style>
|
genlitex
