642 lines
21 KiB
HTML
642 lines
21 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://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary-color: #667eea;
|
|
--primary-light: #764ba2;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: rgba(255, 255, 255, 0.7);
|
|
--glass-bg: rgba(255, 255, 255, 0.1);
|
|
--glass-border: rgba(255, 255, 255, 0.2);
|
|
--glass-shadow: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
|
min-height: 100vh;
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 毛玻璃效果基础样式 */
|
|
.glass {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid var(--glass-border);
|
|
box-shadow: 0 8px 32px var(--glass-shadow);
|
|
}
|
|
|
|
/* 侧边栏 */
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 240px;
|
|
padding: 20px 0;
|
|
transition: transform 0.3s ease;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 0 20px 30px;
|
|
border-bottom: 1px solid var(--glass-border);
|
|
}
|
|
|
|
.logo {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.nav-menu {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 20px;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-item:hover,
|
|
.nav-item.active {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--text-primary);
|
|
border-right: 3px solid var(--text-primary);
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 12px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.nav-item:hover .nav-icon,
|
|
.nav-item.active .nav-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 主内容区 */
|
|
.main-content {
|
|
margin-left: 240px;
|
|
padding: 20px 30px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 顶部导航栏 */
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
margin-bottom: 30px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 25px;
|
|
padding: 10px 20px;
|
|
width: 300px;
|
|
}
|
|
|
|
.search-box input {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--text-primary);
|
|
width: 100%;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.search-box input::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.notification-btn,
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.notification-btn:hover,
|
|
.user-avatar:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* 统计卡片 */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 25px;
|
|
border-radius: 16px;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.stat-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.stat-title {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: 12px;
|
|
color: #4ade80;
|
|
}
|
|
|
|
.stat-change.negative {
|
|
color: #f87171;
|
|
}
|
|
|
|
/* 数据表格 */
|
|
.data-section {
|
|
border-radius: 16px;
|
|
padding: 25px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 10px 20px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 8px;
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.data-table th,
|
|
.data-table td {
|
|
padding: 15px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--glass-border);
|
|
}
|
|
|
|
.data-table th {
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.data-table td {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.data-table tbody tr {
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.data-table tbody tr:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-active {
|
|
background: rgba(74, 222, 128, 0.2);
|
|
color: #4ade80;
|
|
}
|
|
|
|
.status-pending {
|
|
background: rgba(251, 191, 36, 0.2);
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.status-inactive {
|
|
background: rgba(248, 113, 113, 0.2);
|
|
color: #f87171;
|
|
}
|
|
|
|
/* 图表区域 */
|
|
.charts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.chart-card {
|
|
padding: 25px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.chart-placeholder {
|
|
height: 250px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.sidebar.active {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.charts-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* 动画 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.stat-card,
|
|
.data-section,
|
|
.chart-card {
|
|
animation: fadeIn 0.6s ease forwards;
|
|
}
|
|
|
|
.stat-card:nth-child(1) { animation-delay: 0.1s; }
|
|
.stat-card:nth-child(2) { animation-delay: 0.2s; }
|
|
.stat-card:nth-child(3) { animation-delay: 0.3s; }
|
|
.stat-card:nth-child(4) { animation-delay: 0.4s; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 侧边栏 -->
|
|
<aside class="sidebar glass">
|
|
<div class="sidebar-header">
|
|
<div class="logo">管理系统</div>
|
|
</div>
|
|
<nav class="nav-menu">
|
|
<a class="nav-item active" data-page="dashboard">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
|
</svg>
|
|
<span>仪表盘</span>
|
|
</a>
|
|
<a class="nav-item" data-page="users">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
<span>用户管理</span>
|
|
</a>
|
|
<a class="nav-item" data-page="products">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<path d="M16 10a4 4 0 0 1-8 0"></path>
|
|
</svg>
|
|
<span>产品管理</span>
|
|
</a>
|
|
<a class="nav-item" data-page="orders">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10 9 9 9 8 9"></polyline>
|
|
</svg>
|
|
<span>订单管理</span>
|
|
</a>
|
|
<a class="nav-item" data-page="analytics">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="20" x2="18" y2="10"></line>
|
|
<line x1="12" y1="20" x2="12" y2="4"></line>
|
|
<line x1="6" y1="20" x2="6" y2="14"></line>
|
|
</svg>
|
|
<span>数据分析</span>
|
|
</a>
|
|
<a class="nav-item" data-page="settings">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
|
</svg>
|
|
<span>系统设置</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="main-content">
|
|
<!-- 顶部导航栏 -->
|
|
<div class="topbar glass">
|
|
<div class="search-box">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 10px; opacity: 0.5;">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.35-4.35"></path>
|
|
</svg>
|
|
<input type="text" placeholder="搜索...">
|
|
</div>
|
|
<div class="user-menu">
|
|
<div class="notification-btn glass">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="user-avatar glass" style="font-weight: 600;">管</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card glass">
|
|
<div class="stat-header">
|
|
<span class="stat-title">总用户数</span>
|
|
<div class="stat-icon">👥</div>
|
|
</div>
|
|
<div class="stat-value">12,345</div>
|
|
<div class="stat-change">↑ 12.5% 较上月</div>
|
|
</div>
|
|
<div class="stat-card glass">
|
|
<div class="stat-header">
|
|
<span class="stat-title">活跃用户</span>
|
|
<div class="stat-icon">⚡</div>
|
|
</div>
|
|
<div class="stat-value">8,234</div>
|
|
<div class="stat-change">↑ 8.2% 较上月</div>
|
|
</div>
|
|
<div class="stat-card glass">
|
|
<div class="stat-header">
|
|
<span class="stat-title">总收入</span>
|
|
<div class="stat-icon">💰</div>
|
|
</div>
|
|
<div class="stat-value">¥98.5K</div>
|
|
<div class="stat-change">↑ 15.3% 较上月</div>
|
|
</div>
|
|
<div class="stat-card glass">
|
|
<div class="stat-header">
|
|
<span class="stat-title">订单数量</span>
|
|
<div class="stat-icon">📦</div>
|
|
</div>
|
|
<div class="stat-value">1,234</div>
|
|
<div class="stat-change negative">↓ 2.1% 较上月</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<div class="data-section glass">
|
|
<div class="section-header">
|
|
<h2 class="section-title">最近订单</h2>
|
|
<button class="action-btn">查看全部</button>
|
|
</div>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>订单编号</th>
|
|
<th>客户</th>
|
|
<th>金额</th>
|
|
<th>状态</th>
|
|
<th>日期</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>#ORD-2024001</td>
|
|
<td>张三</td>
|
|
<td>¥1,234.00</td>
|
|
<td><span class="status-badge status-active">已完成</span></td>
|
|
<td>2026-03-26</td>
|
|
</tr>
|
|
<tr>
|
|
<td>#ORD-2024002</td>
|
|
<td>李四</td>
|
|
<td>¥5,678.00</td>
|
|
<td><span class="status-badge status-pending">处理中</span></td>
|
|
<td>2026-03-25</td>
|
|
</tr>
|
|
<tr>
|
|
<td>#ORD-2024003</td>
|
|
<td>王五</td>
|
|
<td>¥890.00</td>
|
|
<td><span class="status-badge status-active">已完成</span></td>
|
|
<td>2026-03-24</td>
|
|
</tr>
|
|
<tr>
|
|
<td>#ORD-2024004</td>
|
|
<td>赵六</td>
|
|
<td>¥3,456.00</td>
|
|
<td><span class="status-badge status-inactive">已取消</span></td>
|
|
<td>2026-03-23</td>
|
|
</tr>
|
|
<tr>
|
|
<td>#ORD-2024005</td>
|
|
<td>孙七</td>
|
|
<td>¥2,789.00</td>
|
|
<td><span class="status-badge status-active">已完成</span></td>
|
|
<td>2026-03-22</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 图表区域 -->
|
|
<div class="charts-grid">
|
|
<div class="chart-card glass">
|
|
<h3 class="chart-title">用户增长趋势</h3>
|
|
<div class="chart-placeholder" id="userChart">
|
|
图表区域
|
|
</div>
|
|
</div>
|
|
<div class="chart-card glass">
|
|
<h3 class="chart-title">收入分析</h3>
|
|
<div class="chart-placeholder" id="revenueChart">
|
|
图表区域
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// 导航菜单点击事件
|
|
$('.nav-item').on('click', function() {
|
|
$('.nav-item').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
const page = $(this).data('page');
|
|
console.log('切换到页面:', page);
|
|
});
|
|
|
|
// 搜索框交互
|
|
$('.search-box input').on('focus', function() {
|
|
$(this).parent().css({
|
|
'background': 'rgba(255, 255, 255, 0.1)',
|
|
'border-color': 'rgba(255, 255, 255, 0.3)'
|
|
});
|
|
});
|
|
|
|
$('.search-box input').on('blur', function() {
|
|
$(this).parent().css({
|
|
'background': 'rgba(255, 255, 255, 0.05)',
|
|
'border-color': 'rgba(255, 255, 255, 0.2)'
|
|
});
|
|
});
|
|
|
|
// 表格行悬停效果
|
|
$('.data-table tbody tr').hover(
|
|
function() {
|
|
$(this).css('cursor', 'pointer');
|
|
},
|
|
function() {
|
|
$(this).css('cursor', 'default');
|
|
}
|
|
);
|
|
|
|
// 模拟数据刷新
|
|
function refreshStats() {
|
|
const stats = [12345, 8234, 98500, 1234];
|
|
$('.stat-value').each(function(index) {
|
|
const value = stats[index];
|
|
if (index === 2) {
|
|
$(this).text('¥' + (value / 1000).toFixed(1) + 'K');
|
|
} else {
|
|
$(this).text(value.toLocaleString());
|
|
}
|
|
});
|
|
}
|
|
|
|
// 初始加载
|
|
refreshStats();
|
|
|
|
// 通知按钮点击
|
|
$('.notification-btn').on('click', function() {
|
|
alert('您有 3 条新通知');
|
|
});
|
|
|
|
// 用户头像点击
|
|
$('.user-avatar').on('click', function() {
|
|
alert('用户中心');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |