|
|
@@ -1,12 +1,184 @@
|
|
|
<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">
|
|
|
+ <div 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="#/about" class="text-blue-600 hover:underline">关于我们</a>
|
|
|
+ <a href="#/services" class="text-blue-600 hover:underline">服务</a>
|
|
|
+ <a href="#/cases" class="text-blue-600 hover:underline">客户案例</a>
|
|
|
+ <a href="#/contact" class="text-blue-600 hover:underline">联系我们</a>
|
|
|
+ <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">登录</button>
|
|
|
+ <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300">注册</button>
|
|
|
+ </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="#/" 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 v-for="i in 8" :key="i">
|
|
|
+ <a href="#" 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" />
|
|
|
+ 系统模块{{ i }}
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6">
|
|
|
+ <!-- Featured Section -->
|
|
|
+ <section class="mb-6">
|
|
|
+ <h2 class="text-2xl font-bold mb-4">特色区域</h2>
|
|
|
+ <div class="grid grid-cols-2 gap-6">
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm flex items-center space-x-4">
|
|
|
+ <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>
|
|
|
+ <h3 class="text-lg font-medium">核心产品1</h3>
|
|
|
+ <p class="text-gray-500">简短描述</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm flex items-center space-x-4">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-yellow-50">
|
|
|
+ <FileText class="text-yellow-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium">核心产品2</h3>
|
|
|
+ <p class="text-gray-500">简短描述</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Products/Services Section -->
|
|
|
+ <section class="mb-6">
|
|
|
+ <h2 class="text-2xl font-bold mb-4">产品/服务展示区</h2>
|
|
|
+ <div class="grid grid-cols-2 gap-6">
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm flex items-center space-x-4">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-green-50">
|
|
|
+ <FileText class="text-green-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium">服务1</h3>
|
|
|
+ <p class="text-gray-500">简短描述</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm flex items-center space-x-4">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-red-50">
|
|
|
+ <FileText class="text-red-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium">服务2</h3>
|
|
|
+ <p class="text-gray-500">简短描述</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Customer Reviews Section -->
|
|
|
+ <section class="mb-6">
|
|
|
+ <h2 class="text-2xl font-bold mb-4">客户评价区</h2>
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="space-y-4">
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
|
|
|
+ <div>
|
|
|
+ <div class="text-gray-900">客户名1</div>
|
|
|
+ <p class="text-gray-500">正面评价</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
|
|
|
+ <div>
|
|
|
+ <div class="text-gray-900">客户名2</div>
|
|
|
+ <p class="text-gray-500">正面评价</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Latest News/Blog Section -->
|
|
|
+ <section class="mb-6">
|
|
|
+ <h2 class="text-2xl font-bold mb-4">最新动态区</h2>
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="space-y-4">
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
|
|
|
+ <div>
|
|
|
+ <div class="text-gray-900">新闻标题1</div>
|
|
|
+ <p class="text-gray-500">简短描述</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4"></div>
|
|
|
+ <div>
|
|
|
+ <div class="text-gray-900">新闻标题2</div>
|
|
|
+ <p class="text-gray-500">简短描述</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Footer -->
|
|
|
+ <footer class="bg-white border-t">
|
|
|
+ <div class="flex items-center justify-between px-4 py-4">
|
|
|
+ <div class="text-gray-500">
|
|
|
+ <p>公司地址: 123 街道, 城市, 国家</p>
|
|
|
+ <p>联系电话: +123456789</p>
|
|
|
+ <p>Email: contact@example.com</p>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <a href="https://facebook.com" class="text-gray-500 hover:underline">Facebook</a>
|
|
|
+ <a href="https://twitter.com" class="text-gray-500 hover:underline">Twitter</a>
|
|
|
+ <a href="https://instagram.com" class="text-gray-500 hover:underline">Instagram</a>
|
|
|
+ </div>
|
|
|
+ <div class="text-gray-500">
|
|
|
+ © 2025 ProductName. All rights reserved.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-
|
|
|
-export default {}
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ Search, Home, FileText, Box, MoreHorizontal
|
|
|
+} from 'lucide-vue-next'
|
|
|
</script>
|
|
|
-<style>
|
|
|
-</style>
|
genlitex