|
|
@@ -1,12 +1,183 @@
|
|
|
<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">
|
|
|
+ <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">
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6">
|
|
|
+ <!-- Hero Section -->
|
|
|
+ <section class="bg-cover bg-center h-96 mb-6" style="background-image: url('@/assets/img/project_view.png');">
|
|
|
+ <div class="flex items-center justify-center h-full text-white text-center">
|
|
|
+ <div>
|
|
|
+ <h1 class="text-4xl font-bold mb-4">欢迎来到 ProductName</h1>
|
|
|
+ <p class="text-xl">我们致力于为您提供优质的服务</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Featured Services -->
|
|
|
+ <section class="mb-6">
|
|
|
+ <h2 class="text-2xl font-medium mb-4">特色服务</h2>
|
|
|
+ <div class="grid grid-cols-3 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>
|
|
|
+ <div class="text-xl font-semibold">服务1</div>
|
|
|
+ <div class="text-gray-500">服务1的简短介绍</div>
|
|
|
+ </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>
|
|
|
+ <div class="text-xl font-semibold">服务2</div>
|
|
|
+ <div class="text-gray-500">服务2的简短介绍</div>
|
|
|
+ </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-green-50">
|
|
|
+ <FileText class="text-green-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-xl font-semibold">服务3</div>
|
|
|
+ <div class="text-gray-500">服务3的简短介绍</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Content Recommendations -->
|
|
|
+ <section class="mb-6">
|
|
|
+ <h2 class="text-2xl font-medium mb-4">内容推荐</h2>
|
|
|
+ <div class="grid grid-cols-3 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-red-50">
|
|
|
+ <FileText class="text-red-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-xl font-semibold">推荐内容1</div>
|
|
|
+ <div class="text-gray-500">推荐内容1的简短介绍</div>
|
|
|
+ </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-blue-50">
|
|
|
+ <FileText class="text-blue-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-xl font-semibold">推荐内容2</div>
|
|
|
+ <div class="text-gray-500">推荐内容2的简短介绍</div>
|
|
|
+ </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>
|
|
|
+ <div class="text-xl font-semibold">推荐内容3</div>
|
|
|
+ <div class="text-gray-500">推荐内容3的简短介绍</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Footer -->
|
|
|
+ <footer class="bg-gray-900 text-white py-6">
|
|
|
+ <div class="container mx-auto px-4">
|
|
|
+ <div class="grid grid-cols-3 gap-6">
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium mb-2">关于我们</h3>
|
|
|
+ <p>关于我们的一些介绍</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium mb-2">联系我们</h3>
|
|
|
+ <p>Email: contact@productname.com</p>
|
|
|
+ <p>Phone: 123-456-7890</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="text-lg font-medium mb-2">社交媒体</h3>
|
|
|
+ <div class="flex space-x-4">
|
|
|
+ <a href="#" class="text-gray-300 hover:text-gray-100">Facebook</a>
|
|
|
+ <a href="#" class="text-gray-300 hover:text-gray-100">Twitter</a>
|
|
|
+ <a href="#" class="text-gray-300 hover:text-gray-100">Instagram</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-6 text-center text-gray-300">
|
|
|
+ © {{ new Date().getFullYear() }} ProductName. All rights reserved.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ Search, MessageCircle, Bell, Settings,
|
|
|
+ FileText
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const metrics = [
|
|
|
+ { label: '合同审核', value: 21, total: 35, bgColor: 'bg-blue-50', iconColor: 'text-blue-500' },
|
|
|
+ { label: '合同签署', value: 28, total: 40, bgColor: 'bg-yellow-50', iconColor: 'text-yellow-500' },
|
|
|
+ { label: '合同登记', value: 40, total: 65, bgColor: 'bg-green-50', iconColor: 'text-green-500' },
|
|
|
+ { label: '合同履约', value: 12, total: 15, bgColor: 'bg-red-50', iconColor: 'text-red-500' }
|
|
|
+]
|
|
|
+
|
|
|
+const tasks = [
|
|
|
+ { title: '联系xxxx客户，商讨具体合同事宜', project: 'xxxx公司公积金管理', completed: true },
|
|
|
+ { title: '完成合同模版创建并上传系统', project: 'xxxxx公司人员xxxx合同管理', completed: true },
|
|
|
+ { title: '审核xxxxxxx合同', project: 'xxxx公司人员xxx合同签订', completed: false },
|
|
|
+ { title: '签署xxxx合同，邮件发送xxxxx客户', project: 'xxxxxxxxx公司人员资源管理', completed: true }
|
|
|
+]
|
|
|
+
|
|
|
+const projects = [
|
|
|
+ { name: 'xxxx公司公积金管理', owner: '任小东', deadline: '2023/07/25', status: '已延期', statusColor: 'bg-red-50 text-red-600' },
|
|
|
+ { name: 'xxxxx公司人员xxxx合同管理', owner: '胡晓东', deadline: '2024/01/09', status: '进行中', statusColor: 'bg-blue-50 text-blue-600' },
|
|
|
+ { name: 'xxxx公司人员xxx合同签订', owner: '李兵', deadline: '2025/01/08', status: '进行中', statusColor: 'bg-blue-50 text-blue-600' },
|
|
|
+ { name: 'xxxxxxxxx公司人员资源管理', owner: '王天一', deadline: '2023/09/03', status: '已完成', statusColor: 'bg-green-50 text-green-600' }
|
|
|
+]
|
|
|
|
|
|
-export default {}
|
|
|
+const quickFunctions = [
|
|
|
+ '人力资源主合同（标准版）',
|
|
|
+ '人事代理服务协议（标准版）',
|
|
|
+ '人事代理服务协议',
|
|
|
+ '人事代理服务协议',
|
|
|
+ '人事代理服务协议（企业版）',
|
|
|
+ '人事代理服务协议（定制版）'
|
|
|
+]
|
|
|
</script>
|
|
|
-<style>
|
|
|
-</style>
|
genlitex