|
|
@@ -1,12 +1,211 @@
|
|
|
<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">
|
|
|
+ <img src="@/assets/img/SFG/logo.png" alt="Logo" class="w-8 h-8">
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <div class="flex">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <aside class="w-64 min-h-screen bg-white border-r">
|
|
|
+ <nav class="p-4">
|
|
|
+ <div class="mb-4 text-gray-500">菜单类别标题</div>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li>
|
|
|
+ <a href="#/home" class="flex items-center px-4 py-2 text-blue-600 bg-blue-50 rounded-lg">
|
|
|
+ <Home class="w-5 h-5 mr-3" />
|
|
|
+ 首页
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/products" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
|
|
|
+ <Box class="w-5 h-5 mr-3" />
|
|
|
+ 产品
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/about" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
|
|
|
+ <Info class="w-5 h-5 mr-3" />
|
|
|
+ 关于我们
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/contact" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
|
|
|
+ <Mail class="w-5 h-5 mr-3" />
|
|
|
+ 联系我们
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6">
|
|
|
+ <!-- Carousel -->
|
|
|
+ <div class="mb-6">
|
|
|
+ <div class="carousel w-full">
|
|
|
+ <div id="slide1" class="carousel-item relative w-full">
|
|
|
+ <img src="@/assets/img/SFG/banner1.jpg" 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 class="absolute bottom-5 left-5 right-5 text-white">
|
|
|
+ <h1 class="text-2xl font-bold">最新活动</h1>
|
|
|
+ <p>这里是最新活动的简短描述。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="slide2" class="carousel-item relative w-full">
|
|
|
+ <img src="@/assets/img/SFG/banner2.jpg" 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 class="absolute bottom-5 left-5 right-5 text-white">
|
|
|
+ <h1 class="text-2xl font-bold">重要信息</h1>
|
|
|
+ <p>这里是重要信息的简短描述。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="slide3" class="carousel-item relative w-full">
|
|
|
+ <img src="@/assets/img/SFG/banner3.jpg" 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 class="absolute bottom-5 left-5 right-5 text-white">
|
|
|
+ <h1 class="text-2xl font-bold">精彩内容</h1>
|
|
|
+ <p>这里是精彩内容的简短描述。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="slide4" class="carousel-item relative w-full">
|
|
|
+ <img src="@/assets/img/SFG/banner4.jpg" 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 class="absolute bottom-5 left-5 right-5 text-white">
|
|
|
+ <h1 class="text-2xl font-bold">精彩内容</h1>
|
|
|
+ <p>这里是精彩内容的简短描述。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Featured Services/Products -->
|
|
|
+ <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 flex items-center space-x-4 shadow-sm">
|
|
|
+ <img :src="service.image" alt="Service Image" class="w-12 h-12 rounded-lg" />
|
|
|
+ <div>
|
|
|
+ <div class="text-gray-900">{{ service.title }}</div>
|
|
|
+ <div class="text-gray-500 text-sm">{{ service.description }}</div>
|
|
|
+ <a :href="service.link" class="text-blue-600">了解更多</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Customer Reviews/Testimonials -->
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm mb-6">
|
|
|
+ <h2 class="text-lg font-medium mb-4">客户评价</h2>
|
|
|
+ <div class="overflow-x-auto">
|
|
|
+ <table class="w-full">
|
|
|
+ <thead>
|
|
|
+ <tr class="text-gray-500">
|
|
|
+ <th class="pb-4 text-left font-normal">客户头像</th>
|
|
|
+ <th class="pb-4 text-left font-normal">客户姓名</th>
|
|
|
+ <th class="pb-4 text-left font-normal">评价内容</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody class="text-sm">
|
|
|
+ <tr v-for="(review, index) in reviews" :key="index" class="border-t">
|
|
|
+ <td class="py-4">
|
|
|
+ <img :src="review.avatar" alt="Customer Avatar" class="w-8 h-8 rounded-full" />
|
|
|
+ </td>
|
|
|
+ <td class="py-4">{{ review.name }}</td>
|
|
|
+ <td class="py-4">{{ review.content }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- News/Articles -->
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm mb-6">
|
|
|
+ <h2 class="text-lg font-medium mb-4">新闻资讯</h2>
|
|
|
+ <div v-for="(news, index) in newsItems" :key="index" class="mb-4">
|
|
|
+ <h3 class="text-gray-900">{{ news.title }}</h3>
|
|
|
+ <p class="text-gray-500 text-sm">{{ news.date }}</p>
|
|
|
+ <p class="text-gray-700">{{ news.summary }}</p>
|
|
|
+ <a :href="news.link" class="text-blue-600">阅读更多</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Footer -->
|
|
|
+ <footer class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <div>
|
|
|
+ <p class="text-gray-500">版权所有 © {{ new Date().getFullYear() }} ProductName</p>
|
|
|
+ <div class="flex space-x-4 mt-2">
|
|
|
+ <a href="#/privacy" class="text-gray-500">隐私政策</a>
|
|
|
+ <a href="#/terms" class="text-gray-500">服务条款</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-4">
|
|
|
+ <a href="https://facebook.com" target="_blank" class="text-gray-500"><Facebook class="w-6 h-6" /></a>
|
|
|
+ <a href="https://twitter.com" target="_blank" class="text-gray-500"><Twitter class="w-6 h-6" /></a>
|
|
|
+ <a href="https://linkedin.com" target="_blank" class="text-gray-500"><Linkedin class="w-6 h-6" /></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ Search, MessageCircle, Bell, Settings,
|
|
|
+ Home, Box, Info, Mail,
|
|
|
+ Facebook, Twitter, Linkedin
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const services = [
|
|
|
+ { title: '服务1', description: '这是服务1的简短描述', image: '@/assets/img/SFG/service1.png', link: '#/service1' },
|
|
|
+ { title: '服务2', description: '这是服务2的简短描述', image: '@/assets/img/SFG/service2.png', link: '#/service2' },
|
|
|
+ { title: '服务3', description: '这是服务3的简短描述', image: '@/assets/img/SFG/service3.png', link: '#/service3' }
|
|
|
+]
|
|
|
+
|
|
|
+const reviews = [
|
|
|
+ { avatar: '@/assets/img/SFG/avatar1.png', name: '客户1', content: '这是客户1的正面评价' },
|
|
|
+ { avatar: '@/assets/img/SFG/avatar2.png', name: '客户2', content: '这是客户2的正面评价' },
|
|
|
+ { avatar: '@/assets/img/SFG/avatar3.png', name: '客户3', content: '这是客户3的正面评价' }
|
|
|
+]
|
|
|
|
|
|
-export default {}
|
|
|
+const newsItems = [
|
|
|
+ { title: '新闻1', date: '2023-01-01', summary: '这是新闻1的摘要', link: '#/news1' },
|
|
|
+ { title: '新闻2', date: '2023-02-01', summary: '这是新闻2的摘要', link: '#/news2' },
|
|
|
+ { title: '新闻3', date: '2023-03-01', summary: '这是新闻3的摘要', link: '#/news3' }
|
|
|
+]
|
|
|
</script>
|
|
|
-<style>
|
|
|
-</style>
|
genlitex