304 行
17 KiB
HTML
可执行文件
304 行
17 KiB
HTML
可执行文件
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>现代化后台管理系统演示</title>
|
|
<link rel="stylesheet" type="text/css" href="css/modern-admin.css"/>
|
|
</head>
|
|
<body>
|
|
<div class="admin-layout">
|
|
<!-- 左侧边栏 -->
|
|
<aside class="admin-sidebar">
|
|
<!-- Logo区域 -->
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-logo">
|
|
<img src="images/logo.png" alt="Logo">
|
|
<div>
|
|
<div class="sidebar-logo-text">商户系统</div>
|
|
<div class="sidebar-logo-subtitle">管理平台</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航菜单 -->
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">主要功能</div>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link active">
|
|
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 7 4-4 4 4"></path>
|
|
</svg>
|
|
<span class="nav-text">首页概览</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">
|
|
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
|
</svg>
|
|
<span class="nav-text">商品管理</span>
|
|
<span class="nav-badge">12</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">
|
|
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
|
</svg>
|
|
<span class="nav-text">订单管理</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">
|
|
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
</svg>
|
|
<span class="nav-text">客户管理</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">营销工具</div>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">
|
|
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
|
</svg>
|
|
<span class="nav-text">优惠券</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">
|
|
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>
|
|
<span class="nav-text">秒杀活动</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">系统设置</div>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link">
|
|
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
<span class="nav-text">系统设置</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 侧边栏底部用户信息 -->
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-user">
|
|
<div class="sidebar-user-avatar">管</div>
|
|
<div class="sidebar-user-info">
|
|
<div class="sidebar-user-name">管理员</div>
|
|
<div class="sidebar-user-role">系统管理员</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 主内容区域 -->
|
|
<main class="admin-main">
|
|
<!-- 顶部栏 -->
|
|
<header class="admin-header">
|
|
<div class="header-left">
|
|
<nav class="header-breadcrumb">
|
|
<div class="breadcrumb-item">
|
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 7 4-4 4 4"></path>
|
|
</svg>
|
|
<span>首页</span>
|
|
</div>
|
|
<span class="breadcrumb-separator">/</span>
|
|
<div class="breadcrumb-item">
|
|
<span>概览</span>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<div class="header-action">
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM11 19H6a2 2 0 01-2-2V7a2 2 0 012-2h5m5 0v5"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="header-user">
|
|
<div class="header-user-avatar">管</div>
|
|
<div class="header-user-info">
|
|
<div class="header-user-name">管理员</div>
|
|
<div class="header-user-role">系统管理员</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-action">
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 内容区域 -->
|
|
<div class="admin-content">
|
|
<!-- 统计卡片 -->
|
|
<div class="d-flex" style="gap: 24px; margin-bottom: 24px;">
|
|
<div class="card" style="flex: 1;">
|
|
<div class="card-body text-center">
|
|
<div style="font-size: 32px; font-weight: 700; color: var(--primary); margin-bottom: 8px;">1,234</div>
|
|
<div style="color: var(--text-secondary);">今日订单</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="flex: 1;">
|
|
<div class="card-body text-center">
|
|
<div style="font-size: 32px; font-weight: 700; color: var(--success); margin-bottom: 8px;">¥12,345</div>
|
|
<div style="color: var(--text-secondary);">今日销售额</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="flex: 1;">
|
|
<div class="card-body text-center">
|
|
<div style="font-size: 32px; font-weight: 700; color: var(--warning); margin-bottom: 8px;">567</div>
|
|
<div style="color: var(--text-secondary);">新增客户</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="flex: 1;">
|
|
<div class="card-body text-center">
|
|
<div style="font-size: 32px; font-weight: 700; color: var(--info); margin-bottom: 8px;">89</div>
|
|
<div style="color: var(--text-secondary);">商品种类</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 按钮示例 -->
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<div class="card-header">
|
|
<h3 class="card-title">按钮样式示例</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div style="display: flex; gap: 12px; margin-bottom: 16px;">
|
|
<button class="btn btn-primary">主要按钮</button>
|
|
<button class="btn btn-secondary">次要按钮</button>
|
|
<button class="btn btn-success">成功按钮</button>
|
|
<button class="btn btn-warning">警告按钮</button>
|
|
<button class="btn btn-danger">危险按钮</button>
|
|
<button class="btn btn-info">信息按钮</button>
|
|
</div>
|
|
<div style="display: flex; gap: 12px; margin-bottom: 16px;">
|
|
<button class="btn btn-outline-primary">主要轮廓</button>
|
|
<button class="btn btn-outline-secondary">次要轮廓</button>
|
|
<button class="btn btn-ghost">幽灵按钮</button>
|
|
<button class="btn btn-link">链接按钮</button>
|
|
</div>
|
|
<div style="display: flex; gap: 12px;">
|
|
<button class="btn btn-primary btn-xs">超小按钮</button>
|
|
<button class="btn btn-primary btn-sm">小按钮</button>
|
|
<button class="btn btn-primary">默认按钮</button>
|
|
<button class="btn btn-primary btn-lg">大按钮</button>
|
|
<button class="btn btn-primary btn-xl">超大按钮</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表格示例 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">最近订单</h3>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>订单号</th>
|
|
<th>客户</th>
|
|
<th>金额</th>
|
|
<th>状态</th>
|
|
<th>时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>#20240101001</td>
|
|
<td>张三</td>
|
|
<td>¥299.00</td>
|
|
<td><span class="text-success">已完成</span></td>
|
|
<td>2024-01-01 10:30</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-primary">查看</button>
|
|
<button class="btn btn-sm btn-outline-secondary">编辑</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>#20240101002</td>
|
|
<td>李四</td>
|
|
<td>¥599.00</td>
|
|
<td><span class="text-warning">处理中</span></td>
|
|
<td>2024-01-01 11:15</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-primary">查看</button>
|
|
<button class="btn btn-sm btn-outline-secondary">编辑</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>#20240101003</td>
|
|
<td>王五</td>
|
|
<td>¥199.00</td>
|
|
<td><span class="text-danger">已取消</span></td>
|
|
<td>2024-01-01 12:00</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-primary">查看</button>
|
|
<button class="btn btn-sm btn-outline-secondary">编辑</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// 菜单交互
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 移除所有active类
|
|
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
|
|
|
// 添加active类到当前链接
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 按钮加载状态示例
|
|
document.querySelectorAll('.btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
if (this.textContent.includes('主要按钮')) {
|
|
this.classList.add('loading');
|
|
setTimeout(() => {
|
|
this.classList.remove('loading');
|
|
}, 2000);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |