2025-12-04 16:21:08 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2025-12-08 09:27:34 +08:00
|
|
|
<title></title>
|
2025-12-04 16:21:08 +08:00
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.8/chart.umd.min.js"></script>
|
2025-12-08 09:27:34 +08:00
|
|
|
|
2025-12-04 16:21:08 +08:00
|
|
|
<style type="text/tailwindcss">
|
|
|
|
|
@layer utilities {
|
|
|
|
|
.card-hover {
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
.card-hover:hover {
|
|
|
|
|
transform: translateY(-5px);
|
|
|
|
|
box-shadow: 0 10px 20px rgba(22, 93, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="bg-neutral text-gray-800 p-4 sm:p-6 lg:p-8">
|
|
|
|
|
<!-- 页面标题 -->
|
|
|
|
|
<div class="mb-8">
|
2025-12-08 09:27:34 +08:00
|
|
|
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">系统概览</h1>
|
2025-12-04 16:21:08 +08:00
|
|
|
<p class="text-gray-500 mt-1">欢迎回来，管理员！这里是您的系统概览</p>
|
|
|
|
|
</div>
|
2025-12-08 09:27:34 +08:00
|
|
|
|
2025-12-04 16:21:08 +08:00
|
|
|
<!-- 数据卡片 - 核心指标 -->
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
|
|
|
<!-- 总用户数 -->
|
2025-12-08 09:27:34 +08:00
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 card-hover" onclick="openSystem('1')">
|
2025-12-04 16:21:08 +08:00
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
<div>
|
2025-12-08 09:27:34 +08:00
|
|
|
<p class="text-gray-500 text-sm">实名制</p>
|
2025-12-04 16:21:08 +08:00
|
|
|
<h3 class="text-2xl font-bold mt-2">12,458</h3>
|
|
|
|
|
<p class="text-green-500 text-sm mt-2 flex items-center">
|
|
|
|
|
<i class="fa fa-arrow-up mr-1"></i> 12.5%
|
|
|
|
|
<span class="text-gray-500 ml-1">较上月</span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center text-primary">
|
|
|
|
|
<i class="fa fa-users text-xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-08 09:27:34 +08:00
|
|
|
|
2025-12-04 16:21:08 +08:00
|
|
|
<!-- 新增用户 -->
|
2025-12-08 09:27:34 +08:00
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 card-hover" onclick="openSystem('2')">
|
2025-12-04 16:21:08 +08:00
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
<div>
|
2025-12-08 09:27:34 +08:00
|
|
|
<p class="text-gray-500 text-sm">领导履职</p>
|
2025-12-04 16:21:08 +08:00
|
|
|
<h3 class="text-2xl font-bold mt-2">386</h3>
|
|
|
|
|
<p class="text-green-500 text-sm mt-2 flex items-center">
|
|
|
|
|
<i class="fa fa-arrow-up mr-1"></i> 8.2%
|
|
|
|
|
<span class="text-gray-500 ml-1">较上月</span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
|
|
|
|
|
<i class="fa fa-user-plus text-xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-08 09:27:34 +08:00
|
|
|
|
2025-12-04 16:21:08 +08:00
|
|
|
<!-- 活跃用户 -->
|
2025-12-08 09:27:34 +08:00
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 card-hover" onclick="openSystem('3')">
|
2025-12-04 16:21:08 +08:00
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
<div>
|
2025-12-08 09:27:34 +08:00
|
|
|
<p class="text-gray-500 text-sm">承载力</p>
|
2025-12-04 16:21:08 +08:00
|
|
|
<h3 class="text-2xl font-bold mt-2">2,521</h3>
|
|
|
|
|
<p class="text-green-500 text-sm mt-2 flex items-center">
|
|
|
|
|
<i class="fa fa-arrow-up mr-1"></i> 5.3%
|
|
|
|
|
<span class="text-gray-500 ml-1">较昨日</span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
|
|
|
|
|
<i class="fa fa-eye text-xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-08 09:27:34 +08:00
|
|
|
|
2025-12-04 16:21:08 +08:00
|
|
|
</div>
|
|
|
|
|
<script>
|
2025-12-08 09:27:34 +08:00
|
|
|
|
|
|
|
|
function openSystem(id) {
|
|
|
|
|
alert("当前打开的系统为："+ id);
|
|
|
|
|
}
|
2025-12-04 16:21:08 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
2025-12-08 09:27:34 +08:00
|
|
|
</html>
|
