662 lines
30 KiB
HTML
662 lines
30 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>
|
||
<!-- 引入Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<!-- Font Awesome 备选方案 -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" onerror="this.onerror=null;this.disabled=true;">
|
||
|
||
<!-- Chart.js 备选方案 -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.8/chart.umd.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.8/chart.umd.min.js" onerror="this.onerror=null;this.remove();"></script>
|
||
|
||
<!-- 配置Tailwind自定义主题 -->
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#165DFF',
|
||
secondary: '#0E2E8A',
|
||
accent: '#36CFC9',
|
||
neutral: '#F5F7FA',
|
||
'neutral-dark': '#1D2129',
|
||
},
|
||
fontFamily: {
|
||
inter: ['Inter', 'system-ui', 'sans-serif'],
|
||
},
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- 自定义工具类 -->
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
.sidebar-shadow {
|
||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
|
||
}
|
||
.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>
|
||
|
||
<!-- 图标备选方案 - 如果Font Awesome加载失败 -->
|
||
<style>
|
||
.icon {
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
stroke-width: 0;
|
||
stroke: currentColor;
|
||
fill: currentColor;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 基础图标样式 */
|
||
.icon-menu::before { content: "≡"; }
|
||
.icon-cogs::before { content: "⚙"; }
|
||
.icon-bell::before { content: "🔔"; }
|
||
.icon-angle-down::before { content: "▼"; }
|
||
.icon-angle-up::before { content: "▲"; }
|
||
.icon-dashboard::before { content: "📊"; }
|
||
.icon-th-large::before { content: "📋"; }
|
||
.icon-users::before { content: "👥"; }
|
||
.icon-shopping-cart::before { content: "🛒"; }
|
||
.icon-cog::before { content: "🔧"; }
|
||
.icon-bar-chart::before { content: "📈"; }
|
||
.icon-question-circle::before { content: "❓"; }
|
||
.icon-eye::before { content: "👁"; }
|
||
.icon-arrow-up::before { content: "↑"; }
|
||
.icon-arrow-down::before { content: "↓"; }
|
||
.icon-credit-card::before { content: "💳"; }
|
||
.icon-user-plus::before { content: "👤+"; }
|
||
</style>
|
||
</head>
|
||
<body class="font-inter bg-neutral text-neutral-dark min-h-screen flex flex-col">
|
||
<!-- 顶部导航栏 -->
|
||
<header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-20 transition-all duration-300" id="header">
|
||
<div class="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
|
||
<!-- 左侧Logo和菜单切换 -->
|
||
<div class="flex items-center">
|
||
<button id="menu-toggle" class="lg:hidden mr-3 text-gray-500 hover:text-primary focus:outline-none">
|
||
<i class="fa fa-bars text-xl icon-menu"></i>
|
||
</button>
|
||
<div class="flex items-center">
|
||
<div class="h-8 w-8 rounded-md bg-primary flex items-center justify-center text-white">
|
||
<i class="fa fa-cogs icon-cogs"></i>
|
||
</div>
|
||
<span class="ml-2 text-lg font-semibold hidden sm:block">AdminPro</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧用户信息 -->
|
||
<div class="flex items-center space-x-4">
|
||
<button class="text-gray-500 hover:text-primary relative">
|
||
<i class="fa fa-bell-o text-xl icon-bell"></i>
|
||
<span class="absolute top-0 right-0 h-4 w-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span>
|
||
</button>
|
||
<div class="flex items-center cursor-pointer hover:text-primary">
|
||
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary/20">
|
||
<span class="ml-2 hidden md:block">管理员</span>
|
||
<i class="fa fa-angle-down ml-1 text-xs icon-angle-down"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 侧边栏 -->
|
||
<aside id="sidebar" class="fixed left-0 top-16 bottom-0 w-64 bg-white sidebar-shadow transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-10 overflow-y-auto">
|
||
<nav class="py-4">
|
||
<div class="px-4 mb-4">
|
||
<div class="text-xs text-gray-400 uppercase font-semibold">主导航</div>
|
||
</div>
|
||
|
||
<!-- 菜单项目 -->
|
||
<a href="#" class="flex items-center px-4 py-3 text-primary bg-primary/5 border-l-4 border-primary">
|
||
<i class="fa fa-dashboard w-6 icon-dashboard"></i>
|
||
<span class="ml-2">仪表盘</span>
|
||
</a>
|
||
|
||
<div class="menu-group">
|
||
<div class="menu-header flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50">
|
||
<div class="flex items-center">
|
||
<i class="fa fa-th-large w-6 text-gray-500 icon-th-large"></i>
|
||
<span class="ml-2">内容管理</span>
|
||
</div>
|
||
<i class="fa fa-angle-down text-xs text-gray-500 icon-angle-down"></i>
|
||
</div>
|
||
<div class="menu-items pl-10">
|
||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">文章管理</a>
|
||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">分类管理</a>
|
||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">评论管理</a>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
||
<i class="fa fa-users w-6 text-gray-500 icon-users"></i>
|
||
<span class="ml-2">用户管理</span>
|
||
</a>
|
||
|
||
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
||
<i class="fa fa-shopping-cart w-6 text-gray-500 icon-shopping-cart"></i>
|
||
<span class="ml-2">订单管理</span>
|
||
<span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">新</span>
|
||
</a>
|
||
|
||
<div class="menu-group">
|
||
<div class="menu-header flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50">
|
||
<div class="flex items-center">
|
||
<i class="fa fa-cog w-6 text-gray-500 icon-cog"></i>
|
||
<span class="ml-2">系统设置</span>
|
||
</div>
|
||
<i class="fa fa-angle-down text-xs text-gray-500 icon-angle-down"></i>
|
||
</div>
|
||
<div class="menu-items pl-10">
|
||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">基本设置</a>
|
||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">安全设置</a>
|
||
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-primary">权限管理</a>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
||
<i class="fa fa-bar-chart w-6 text-gray-500 icon-bar-chart"></i>
|
||
<span class="ml-2">数据统计</span>
|
||
</a>
|
||
|
||
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary">
|
||
<i class="fa fa-question-circle w-6 text-gray-500 icon-question-circle"></i>
|
||
<span class="ml-2">帮助中心</span>
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- 主内容区域 -->
|
||
<main class="flex-1 pt-16 lg:pl-64 transition-all duration-300">
|
||
<div class="p-4 sm:p-6 lg:p-8">
|
||
<!-- 页面标题 -->
|
||
<div class="mb-8">
|
||
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-dark">仪表盘</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">
|
||
<!-- 卡片1 -->
|
||
<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 icon-arrow-up"></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-eye text-xl icon-eye"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片2 -->
|
||
<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 icon-arrow-up"></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-shopping-cart text-xl icon-shopping-cart"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片3 -->
|
||
<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">¥48,521</h3>
|
||
<p class="text-green-500 text-sm mt-2 flex items-center">
|
||
<i class="fa fa-arrow-up mr-1 icon-arrow-up"></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-credit-card text-xl icon-credit-card"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片4 -->
|
||
<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 icon-arrow-down"></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-user-plus text-xl icon-user-plus"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图表和数据表格 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<!-- 图表区域 -->
|
||
<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" id="chart-container">
|
||
<!-- 图表容器 - 如果Chart.js加载失败会显示替代内容 -->
|
||
<canvas id="salesChart"></canvas>
|
||
<div id="chart-fallback" class="hidden h-full flex items-center justify-center text-gray-500">
|
||
<div class="text-center">
|
||
<div class="text-4xl mb-2">📈</div>
|
||
<p>销售趋势图表</p>
|
||
<div class="mt-4 bg-gray-100 rounded-lg p-4 text-sm">
|
||
<div class="flex justify-between mb-1">
|
||
<span>周一</span>
|
||
<span>¥12,000</span>
|
||
</div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>周二</span>
|
||
<span>¥19,000</span>
|
||
</div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>周三</span>
|
||
<span>¥15,000</span>
|
||
</div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>周四</span>
|
||
<span>¥25,000</span>
|
||
</div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>周五</span>
|
||
<span>¥22,000</span>
|
||
</div>
|
||
<div class="flex justify-between mb-1">
|
||
<span>周六</span>
|
||
<span>¥30,000</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span>周日</span>
|
||
<span>¥32,000</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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 class="flex items-center">
|
||
<img src="https://picsum.photos/id/26/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||
<div class="ml-3 flex-1">
|
||
<h4 class="font-medium">智能手表 Pro</h4>
|
||
<p class="text-sm text-gray-500">¥1,299</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="font-semibold">1,245</p>
|
||
<p class="text-xs text-green-500">+12.5%</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<img src="https://picsum.photos/id/96/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||
<div class="ml-3 flex-1">
|
||
<h4 class="font-medium">无线耳机 Max</h4>
|
||
<p class="text-sm text-gray-500">¥899</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="font-semibold">987</p>
|
||
<p class="text-xs text-green-500">+8.3%</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<img src="https://picsum.photos/id/119/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||
<div class="ml-3 flex-1">
|
||
<h4 class="font-medium">智能音箱 Mini</h4>
|
||
<p class="text-sm text-gray-500">¥399</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="font-semibold">756</p>
|
||
<p class="text-xs text-red-500">-2.1%</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<img src="https://picsum.photos/id/180/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||
<div class="ml-3 flex-1">
|
||
<h4 class="font-medium">运动手环</h4>
|
||
<p class="text-sm text-gray-500">¥199</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="font-semibold">623</p>
|
||
<p class="text-xs text-green-500">+5.7%</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<img src="https://picsum.photos/id/201/60/60" alt="商品图片" class="h-12 w-12 rounded-md object-cover">
|
||
<div class="ml-3 flex-1">
|
||
<h4 class="font-medium">智能门锁</h4>
|
||
<p class="text-sm text-gray-500">¥1,599</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="font-semibold">432</p>
|
||
<p class="text-xs text-green-500">+15.2%</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最近订单 -->
|
||
<div class="mt-6 bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div class="p-6 border-b">
|
||
<h3 class="font-semibold text-lg">最近订单</h3>
|
||
</div>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单编号</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
|
||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr class="hover:bg-gray-50 transition">
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7821</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div class="flex items-center">
|
||
<img src="https://picsum.photos/id/1027/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||
<div class="ml-3">
|
||
<div class="text-sm font-medium">张三</div>
|
||
<div class="text-xs text-gray-500">zhangsan@example.com</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥2,399.00</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition">
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7820</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div class="flex items-center">
|
||
<img src="https://picsum.photos/id/1066/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||
<div class="ml-3">
|
||
<div class="text-sm font-medium">李四</div>
|
||
<div class="text-xs text-gray-500">lisi@example.com</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥1,299.00</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">处理中</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition">
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7819</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div class="flex items-center">
|
||
<img src="https://picsum.photos/id/1074/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||
<div class="ml-3">
|
||
<div class="text-sm font-medium">王五</div>
|
||
<div class="text-xs text-gray-500">wangwu@example.com</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥899.00</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">待发货</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition">
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7818</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div class="flex items-center">
|
||
<img src="https://picsum.photos/id/1062/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||
<div class="ml-3">
|
||
<div class="text-sm font-medium">赵六</div>
|
||
<div class="text-xs text-gray-500">zhaoliu@example.com</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥399.00</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">已取消</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition">
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">#ORD-7817</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div class="flex items-center">
|
||
<img src="https://picsum.photos/id/1083/40/40" alt="用户头像" class="h-8 w-8 rounded-full">
|
||
<div class="ml-3">
|
||
<div class="text-sm font-medium">孙七</div>
|
||
<div class="text-xs text-gray-500">sunqi@example.com</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm">¥1,599.00</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-13</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
|
||
<button class="text-primary hover:text-primary/80 mr-3">查看</button>
|
||
<button class="text-gray-500 hover:text-gray-700">编辑</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="px-6 py-4 border-t flex items-center justify-between">
|
||
<p class="text-sm text-gray-500">显示 1 至 5 条，共 24 条</p>
|
||
<div class="flex space-x-1">
|
||
<button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>上一页</button>
|
||
<button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
|
||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">2</button>
|
||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">3</button>
|
||
<button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">下一页</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 遮罩层 -->
|
||
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-10 hidden lg:hidden"></div>
|
||
|
||
<!-- JavaScript -->
|
||
<script>
|
||
// 菜单切换
|
||
const menuToggle = document.getElementById('menu-toggle');
|
||
const sidebar = document.getElementById('sidebar');
|
||
const overlay = document.getElementById('overlay');
|
||
|
||
menuToggle.addEventListener('click', () => {
|
||
sidebar.classList.toggle('-translate-x-full');
|
||
overlay.classList.toggle('hidden');
|
||
document.body.classList.toggle('overflow-hidden');
|
||
});
|
||
|
||
overlay.addEventListener('click', () => {
|
||
sidebar.classList.add('-translate-x-full');
|
||
overlay.classList.add('hidden');
|
||
document.body.classList.remove('overflow-hidden');
|
||
});
|
||
|
||
// 子菜单展开/折叠
|
||
const menuHeaders = document.querySelectorAll('.menu-header');
|
||
|
||
menuHeaders.forEach(header => {
|
||
header.addEventListener('click', () => {
|
||
const icon = header.querySelector('.fa-angle-down, .icon-angle-down');
|
||
const menuItems = header.nextElementSibling;
|
||
|
||
icon.classList.toggle('rotate-180');
|
||
icon.classList.toggle('icon-angle-up');
|
||
icon.classList.toggle('icon-angle-down');
|
||
menuItems.classList.toggle('hidden');
|
||
});
|
||
});
|
||
|
||
// 初始化图表 - 添加错误处理
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
try {
|
||
// 检查Chart是否加载成功
|
||
if (typeof Chart !== 'undefined') {
|
||
const ctx = document.getElementById('salesChart').getContext('2d');
|
||
|
||
const salesChart = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
datasets: [
|
||
{
|
||
label: '销售额',
|
||
data: [12000, 19000, 15000, 25000, 22000, 30000, 32000],
|
||
borderColor: '#165DFF',
|
||
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
||
fill: true,
|
||
tension: 0.4
|
||
},
|
||
{
|
||
label: '订单量',
|
||
data: [120, 190, 150, 250, 220, 300, 320],
|
||
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'
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
// 如果Chart未加载，显示备用内容
|
||
document.getElementById('chart-fallback').classList.remove('hidden');
|
||
}
|
||
} catch (error) {
|
||
// 发生错误时显示备用内容
|
||
document.getElementById('chart-fallback').classList.remove('hidden');
|
||
console.log('Chart.js加载失败，显示备用内容');
|
||
}
|
||
});
|
||
|
||
// 滚动时改变header样式
|
||
window.addEventListener('scroll', () => {
|
||
const header = document.getElementById('header');
|
||
if (window.scrollY > 10) {
|
||
header.classList.add('shadow');
|
||
} else {
|
||
header.classList.remove('shadow');
|
||
}
|
||
});
|
||
|
||
// 检查Font Awesome是否加载成功
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
setTimeout(function() {
|
||
const testIcon = document.createElement('i');
|
||
testIcon.className = 'fa fa-test';
|
||
document.body.appendChild(testIcon);
|
||
|
||
// 检查图标是否正常显示
|
||
const computedStyle = window.getComputedStyle(testIcon);
|
||
if (computedStyle.getPropertyValue('font-family') !== 'FontAwesome' &&
|
||
!document.querySelector('.fa-bars').classList.contains('fa-bars')) {
|
||
// Font Awesome加载失败，使用备用图标类
|
||
document.querySelectorAll('.fa').forEach(el => {
|
||
const classes = Array.from(el.classList);
|
||
const iconClass = classes.find(c => c.startsWith('fa-') && c !== 'fa');
|
||
if (iconClass) {
|
||
const iconName = iconClass.replace('fa-', 'icon-');
|
||
el.classList.add(iconName);
|
||
}
|
||
});
|
||
}
|
||
|
||
document.body.removeChild(testIcon);
|
||
}, 1000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |