237 lines
8.6 KiB
HTML
237 lines
8.6 KiB
HTML
|
<!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.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>
|
||
|
|
|
||
|
|
<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">
|
||
|
|
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">仪表盘</h1>
|
||
|
|
<p class="text-gray-500 mt-1">欢迎回来，管理员！这里是您的系统概览</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 数据卡片 - 核心指标 -->
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||
|
|
<!-- 总用户数 -->
|
||
|
|
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-gray-500 text-sm">总用户数</p>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- 新增用户 -->
|
||
|
|
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-gray-500 text-sm">本月新增用户</p>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- 活跃用户 -->
|
||
|
|
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-gray-500 text-sm">今日活跃用户</p>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- 付费用户 -->
|
||
|
|
<div class="bg-white rounded-xl shadow-sm p-6 card-hover">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-gray-500 text-sm">付费用户数</p>
|
||
|
|
<h3 class="text-2xl font-bold mt-2">256</h3>
|
||
|
|
<p class="text-red-500 text-sm mt-2 flex items-center">
|
||
|
|
<i class="fa fa-arrow-down mr-1"></i> 2.1%
|
||
|
|
<span class="text-gray-500 ml-1">较昨日</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="h-12 w-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
|
||
|
|
<i class="fa fa-credit-card text-xl"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 用户增长趋势图表 -->
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||
|
|
<!-- 图表区域 -->
|
||
|
|
<div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
|
||
|
|
<div class="flex items-center justify-between mb-6">
|
||
|
|
<h3 class="font-semibold text-lg">用户增长趋势</h3>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-md hover:bg-primary/20 transition">本周</button>
|
||
|
|
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-md transition">本月</button>
|
||
|
|
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-md transition">全年</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="h-80">
|
||
|
|
<canvas id="userGrowthChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 用户分布 -->
|
||
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
||
|
|
<h3 class="font-semibold text-lg mb-6">用户分布</h3>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between mb-1">
|
||
|
|
<span class="text-sm font-medium">普通用户</span>
|
||
|
|
<span class="text-sm">85%</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
||
|
|
<div class="bg-primary h-2 rounded-full" style="width: 85%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between mb-1">
|
||
|
|
<span class="text-sm font-medium">VIP用户</span>
|
||
|
|
<span class="text-sm">12%</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
||
|
|
<div class="bg-purple-500 h-2 rounded-full" style="width: 12%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between mb-1">
|
||
|
|
<span class="text-sm font-medium">管理员</span>
|
||
|
|
<span class="text-sm">2%</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
||
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 2%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between mb-1">
|
||
|
|
<span class="text-sm font-medium">测试账号</span>
|
||
|
|
<span class="text-sm">1%</span>
|
||
|
|
</div>
|
||
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
||
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 1%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-8 pt-6 border-t">
|
||
|
|
<h4 class="font-medium mb-4">用户活跃度</h4>
|
||
|
|
<div class="grid grid-cols-2 gap-4">
|
||
|
|
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
||
|
|
<p class="text-xs text-gray-500">日活跃率</p>
|
||
|
|
<p class="text-xl font-bold text-primary">28.5%</p>
|
||
|
|
</div>
|
||
|
|
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
||
|
|
<p class="text-xs text-gray-500">周活跃率</p>
|
||
|
|
<p class="text-xl font-bold text-primary">65.3%</p>
|
||
|
|
</div>
|
||
|
|
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
||
|
|
<p class="text-xs text-gray-500">月活跃率</p>
|
||
|
|
<p class="text-xl font-bold text-primary">82.1%</p>
|
||
|
|
</div>
|
||
|
|
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
||
|
|
<p class="text-xs text-gray-500">留存率</p>
|
||
|
|
<p class="text-xl font-bold text-primary">78.9%</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 初始化用户增长图表
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const ctx = document.getElementById('userGrowthChart').getContext('2d');
|
||
|
|
|
||
|
|
const userGrowthChart = new Chart(ctx, {
|
||
|
|
type: 'line',
|
||
|
|
data: {
|
||
|
|
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: '新增用户',
|
||
|
|
data: [120, 190, 150, 250, 220, 300, 320],
|
||
|
|
borderColor: '#165DFF',
|
||
|
|
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
||
|
|
fill: true,
|
||
|
|
tension: 0.4
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '活跃用户',
|
||
|
|
data: [850, 920, 880, 950, 980, 1100, 1050],
|
||
|
|
borderColor: '#36CFC9',
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
borderDash: [5, 5],
|
||
|
|
tension: 0.4
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
position: 'top',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
y: {
|
||
|
|
beginAtZero: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
animation: {
|
||
|
|
duration: 2000,
|
||
|
|
easing: 'easeOutQuart'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|