feat(ui): 新增“天天系统”ERP管理平台主页布局与控制台页面优化
- 为控制台首页添加页面标题动态设置 - 为应用中心页面添加页面标题动态设置 - 修改控制台布局，实现动态浏览器标签页标题更新 - 新增“天天系统”ERP管理平台主页，包含侧边栏导航、顶部栏及数据概览模块 - 实现主页搜索框、通知、语言和用户信息区域交互 - 添加欢迎区、快捷入口、最近使用应用列表及应用详情抽屉功能 - 支持小程序扫码弹窗展示和应用类型图标及颜色区分 - 优化页面样式，支持响应式布局及交互效果 - 更新Nuxt国际化重定向路径片段标识符以兼容新版本
This commit is contained in:
536
应用主页工作台.html
Normal file
536
应用主页工作台.html
Normal file
@@ -0,0 +1,536 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>天天系统 - 应用主页工作台</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.app-card {
|
||||
aspect-ratio: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.app-card:hover .app-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.stat-card.blue::before { background: linear-gradient(90deg, #667eea, #764ba2); }
|
||||
.stat-card.green::before { background: linear-gradient(90deg, #11998e, #38ef7d); }
|
||||
.stat-card.orange::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
|
||||
.stat-card.purple::before { background: linear-gradient(90deg, #a8edea, #fed6e3); }
|
||||
|
||||
.quick-btn {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.quick-btn:hover {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.todo-item:hover {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-item:hover, .sidebar-item.active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="scrollbar-hide">
|
||||
<div class="flex min-h-screen">
|
||||
<!-- 左侧导航 -->
|
||||
<aside class="sidebar w-64 fixed h-full text-white flex flex-col">
|
||||
<!-- Logo -->
|
||||
<div class="p-6 border-b border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-cube text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-lg">天天系统</h1>
|
||||
<p class="text-xs text-white/70">ERP 管理平台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<nav class="flex-1 py-6 px-3">
|
||||
<div class="space-y-1">
|
||||
<a href="#" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||
<i class="fas fa-home w-5"></i>
|
||||
<span>工作台</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||
<i class="fas fa-cogs w-5"></i>
|
||||
<span>设备管理</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||
<i class="fas fa-shopping-cart w-5"></i>
|
||||
<span>采购管理</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||
<i class="fas fa-warehouse w-5"></i>
|
||||
<span>仓储物流</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||
<i class="fas fa-wallet w-5"></i>
|
||||
<span>财务管理</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||
<i class="fas fa-users w-5"></i>
|
||||
<span>人力资源</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||
<i class="fas fa-tasks w-5"></i>
|
||||
<span>协同办公</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-6 border-t border-white/10">
|
||||
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||
<i class="fas fa-user w-5"></i>
|
||||
<span>个人信息</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||
<i class="fas fa-cog w-5"></i>
|
||||
<span>系统设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<div class="p-4 border-t border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-user"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium">管理员</p>
|
||||
<p class="text-xs text-white/70">超级管理员</p>
|
||||
</div>
|
||||
<button class="text-white/70 hover:text-white">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="flex-1 ml-64">
|
||||
<!-- 顶部栏 -->
|
||||
<header class="glass sticky top-0 z-50 px-8 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- 搜索 -->
|
||||
<div class="relative w-96">
|
||||
<input type="text" placeholder="🔍 搜索设备、订单、员工、文档..."
|
||||
class="w-full px-5 py-3 bg-gray-100 rounded-xl border-0 focus:ring-2 focus:ring-purple-500 focus:bg-white transition-all">
|
||||
</div>
|
||||
|
||||
<!-- 右侧 -->
|
||||
<div class="flex items-center gap-6">
|
||||
<!-- 全屏 -->
|
||||
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-expand text-lg"></i>
|
||||
</button>
|
||||
|
||||
<!-- 消息 -->
|
||||
<button class="relative text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-bell text-lg"></i>
|
||||
<span class="notification-badge absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
|
||||
</button>
|
||||
|
||||
<!-- 语言 -->
|
||||
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||
<i class="fas fa-globe text-lg"></i>
|
||||
</button>
|
||||
|
||||
<!-- 用户 -->
|
||||
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold">
|
||||
A
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-gray-800">Admin</p>
|
||||
<p class="text-xs text-gray-500">超级管理员</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="p-8">
|
||||
<!-- 欢迎区 -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-2">
|
||||
👋 早上好，管理员！
|
||||
</h2>
|
||||
<p class="text-gray-500">今天是 2026年4月8日 星期三，本周还有 <span class="text-purple-600 font-semibold">3</span> 天工作日</p>
|
||||
</div>
|
||||
|
||||
<!-- 数据概览 -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="stat-card blue glass rounded-2xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-cogs text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 12%</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">128</h3>
|
||||
<p class="text-gray-500 text-sm">设备总数</p>
|
||||
</div>
|
||||
|
||||
<div class="stat-card green glass rounded-2xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-boxes text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 8%</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">5,230</h3>
|
||||
<p class="text-gray-500 text-sm">库存物料</p>
|
||||
</div>
|
||||
|
||||
<div class="stat-card orange glass rounded-2xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-clock text-orange-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 5</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">12</h3>
|
||||
<p class="text-gray-500 text-sm">待审批</p>
|
||||
</div>
|
||||
|
||||
<div class="stat-card purple glass rounded-2xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-chart-line text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 15%</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold text-gray-800 mb-1">¥89.5<span class="text-lg">万</span></h3>
|
||||
<p class="text-gray-500 text-sm">本月支出</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间区域 -->
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
<!-- 快捷入口 -->
|
||||
<div class="glass rounded-2xl p-6 card-hover">
|
||||
<h3 class="font-bold text-lg text-gray-800 mb-4 flex items-center gap-2">
|
||||
<i class="fas fa-bolt text-yellow-500"></i>
|
||||
快捷入口
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||
<i class="fas fa-search text-purple-500"></i>
|
||||
设备巡检
|
||||
</button>
|
||||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||
<i class="fas fa-shopping-bag text-blue-500"></i>
|
||||
采购申请
|
||||
</button>
|
||||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||
<i class="fas fa-dolly text-green-500"></i>
|
||||
入库登记
|
||||
</button>
|
||||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||
<i class="fas fa-calendar-alt text-orange-500"></i>
|
||||
请假申请
|
||||
</button>
|
||||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||
<i class="fas fa-file-invoice-dollar text-red-500"></i>
|
||||
费用报销
|
||||
</button>
|
||||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||
<i class="fas fa-box text-indigo-500"></i>
|
||||
库存查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待办事项 -->
|
||||
<div class="glass rounded-2xl p-6 card-hover col-span-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<i class="fas fa-list-check text-red-500"></i>
|
||||
待办事项
|
||||
<span class="bg-red-100 text-red-600 px-2 py-0.5 rounded-full text-xs font-medium">5</span>
|
||||
</h3>
|
||||
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-clipboard-check text-red-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">审批 - 张三的报销单</p>
|
||||
<p class="text-xs text-gray-500">差旅费 ¥2,580.00</p>
|
||||
</div>
|
||||
<span class="text-xs text-red-500 font-medium">2小时前</span>
|
||||
</div>
|
||||
<div class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer">
|
||||
<div class="w-10 h-10 bg-yellow-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-search text-yellow-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">巡检 - 3号车间设备待检</p>
|
||||
<p class="text-xs text-gray-500">包含12台设备</p>
|
||||
</div>
|
||||
<span class="text-xs text-yellow-600 font-medium">4小时前</span>
|
||||
</div>
|
||||
<div class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-shopping-cart text-blue-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">采购 - 办公用品采购单</p>
|
||||
<p class="text-xs text-gray-500">待审批</p>
|
||||
</div>
|
||||
<span class="text-xs text-blue-600 font-medium">1天前</span>
|
||||
</div>
|
||||
<div class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-wrench text-green-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">保养 - 空压机定期保养</p>
|
||||
<p class="text-xs text-gray-500">例行保养</p>
|
||||
</div>
|
||||
<span class="text-xs text-green-600 font-medium">2天前</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 应用模块 -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-xl text-gray-800">
|
||||
<i class="fas fa-th-large text-purple-500 mr-2"></i>
|
||||
应用模块
|
||||
</h3>
|
||||
<button class="text-purple-600 text-sm font-medium hover:underline">自定义模块</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-4">
|
||||
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||
<div class="app-icon w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||
<i class="fas fa-cogs text-white text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-semibold text-gray-800 mb-1">设备管理</h4>
|
||||
<p class="text-xs text-gray-500">128 设备</p>
|
||||
</div>
|
||||
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||
<div class="app-icon w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||
<i class="fas fa-shopping-cart text-white text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-semibold text-gray-800 mb-1">采购管理</h4>
|
||||
<p class="text-xs text-gray-500">23 订单</p>
|
||||
</div>
|
||||
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||
<div class="app-icon w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||
<i class="fas fa-warehouse text-white text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-semibold text-gray-800 mb-1">仓储物流</h4>
|
||||
<p class="text-xs text-gray-500">5,230 物料</p>
|
||||
</div>
|
||||
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||
<div class="app-icon w-16 h-16 bg-gradient-to-br from-pink-500 to-rose-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||
<i class="fas fa-wallet text-white text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-semibold text-gray-800 mb-1">财务管理</h4>
|
||||
<p class="text-xs text-gray-500">¥89.5万</p>
|
||||
</div>
|
||||
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||
<div class="app-icon w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||
<i class="fas fa-users text-white text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-semibold text-gray-800 mb-1">人力资源</h4>
|
||||
<p class="text-xs text-gray-500">56 员工</p>
|
||||
</div>
|
||||
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||
<div class="app-icon w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||
<i class="fas fa-tasks text-white text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="font-semibold text-gray-800 mb-1">协同办公</h4>
|
||||
<p class="text-xs text-gray-500">8 流程</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部区域 -->
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<!-- 经营概览图表 -->
|
||||
<div class="glass rounded-2xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<i class="fas fa-chart-bar text-blue-500"></i>
|
||||
经营概览
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1 text-xs bg-purple-100 text-purple-600 rounded-lg font-medium">本周</button>
|
||||
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg font-medium">本月</button>
|
||||
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg font-medium">本季</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-48 flex items-end gap-4">
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 60%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周一</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 75%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周二</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 45%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周三</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 90%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周四</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 85%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周五</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80 opacity-50" style="height: 40%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周六</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80 opacity-50" style="height: 30%"></div>
|
||||
<span class="text-xs text-gray-500 mt-2">周日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最新公告 -->
|
||||
<div class="glass rounded-2xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||
<i class="fas fa-bullhorn text-red-500"></i>
|
||||
最新公告
|
||||
</h3>
|
||||
<button class="text-purple-600 text-sm font-medium hover:underline">全部公告</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-red-50 rounded-xl border-l-4 border-red-500 cursor-pointer hover:bg-red-100 transition-colors">
|
||||
<h4 class="font-medium text-gray-800 mb-1">关于清明节放假安排的通知</h4>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span><i class="fas fa-user mr-1"></i>人事行政部</span>
|
||||
<span><i class="fas fa-clock mr-1"></i>2026-04-01</span>
|
||||
<span><i class="fas fa-eye mr-1"></i>1,258 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-blue-50 rounded-xl border-l-4 border-blue-500 cursor-pointer hover:bg-blue-100 transition-colors">
|
||||
<h4 class="font-medium text-gray-800 mb-1">2026年第一季度财报公告</h4>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span><i class="fas fa-user mr-1"></i>财务部</span>
|
||||
<span><i class="fas fa-clock mr-1"></i>2026-03-28</span>
|
||||
<span><i class="fas fa-eye mr-1"></i>986 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-green-50 rounded-xl border-l-4 border-green-500 cursor-pointer hover:bg-green-100 transition-colors">
|
||||
<h4 class="font-medium text-gray-800 mb-1">新版本系统功能更新说明</h4>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span><i class="fas fa-user mr-1"></i>技术部</span>
|
||||
<span><i class="fas fa-clock mr-1"></i>2026-03-25</span>
|
||||
<span><i class="fas fa-eye mr-1"></i>756 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user