774 lines
20 KiB
HTML
774 lines
20 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>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--primary: #3498db;
|
|
--secondary: #2c3e50;
|
|
--success: #2ecc71;
|
|
--warning: #f39c12;
|
|
--danger: #e74c3c;
|
|
--light: #f8f9fa;
|
|
--dark: #343a40;
|
|
--gray: #6c757d;
|
|
--border: #e9ecef;
|
|
}
|
|
|
|
body {
|
|
background-color: #f5f7fa;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 顶部导航 */
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
background-color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.logo i {
|
|
margin-right: 10px;
|
|
color: var(--primary);
|
|
font-size: 24px;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.notification {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notification i {
|
|
font-size: 20px;
|
|
color: var(--gray);
|
|
}
|
|
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -5px;
|
|
background-color: var(--danger);
|
|
color: white;
|
|
font-size: 12px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.user-profile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: var(--primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.username {
|
|
font-weight: 500;
|
|
color: var(--dark);
|
|
}
|
|
|
|
/* 侧边导航 */
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 60px;
|
|
left: 0;
|
|
width: 240px;
|
|
height: calc(100vh - 60px);
|
|
background-color: var(--secondary);
|
|
color: white;
|
|
padding: 24px 0;
|
|
overflow-y: auto;
|
|
z-index: 999;
|
|
}
|
|
|
|
.nav-title {
|
|
padding: 0 24px 10px;
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.nav-item {
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.nav-item:hover,
|
|
.nav-item.active {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
}
|
|
|
|
.nav-item i {
|
|
font-size: 18px;
|
|
width: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 主要内容区域 */
|
|
.main-content {
|
|
margin-left: 240px;
|
|
margin-top: 60px;
|
|
padding: 24px;
|
|
min-height: calc(100vh - 60px);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 24px;
|
|
color: var(--secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.welcome-text {
|
|
font-size: 16px;
|
|
color: var(--gray);
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* 轮播图 */
|
|
.swiper-container {
|
|
width: 100%;
|
|
height: 280px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.swiper-slide {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 30px;
|
|
color: white;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.slide-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
max-width: 70%;
|
|
}
|
|
|
|
.slide-title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.slide-desc {
|
|
font-size: 16px;
|
|
opacity: 0.9;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.swiper-slide::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 60%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.swiper-pagination-bullet {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
opacity: 1;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
background: white;
|
|
}
|
|
|
|
/* 功能模块 */
|
|
.section-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 32px 0 20px;
|
|
color: var(--secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-title i {
|
|
margin-right: 10px;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.feature-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
transition:
|
|
transform 0.3s,
|
|
box-shadow 0.3s;
|
|
cursor: pointer;
|
|
border-left: 4px solid var(--primary);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
font-size: 28px;
|
|
color: white;
|
|
background: linear-gradient(135deg, var(--primary), #2c80c4);
|
|
}
|
|
|
|
.feature-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.feature-desc {
|
|
font-size: 14px;
|
|
color: var(--gray);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 数据统计 */
|
|
.stats-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.stat-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-title {
|
|
font-size: 14px;
|
|
color: var(--gray);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.positive {
|
|
color: var(--success);
|
|
}
|
|
|
|
.negative {
|
|
color: var(--danger);
|
|
}
|
|
|
|
/* 快捷操作 */
|
|
.quick-actions {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.actions-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.action-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
background-color: #f8f9fa;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.action-item:hover {
|
|
background-color: #e9ecef;
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.action-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
color: white;
|
|
margin-bottom: 12px;
|
|
background: linear-gradient(135deg, var(--primary), #2c80c4);
|
|
}
|
|
|
|
.action-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--dark);
|
|
text-align: center;
|
|
}
|
|
|
|
/* 底部 */
|
|
.footer {
|
|
padding: 24px;
|
|
text-align: center;
|
|
color: var(--gray);
|
|
font-size: 14px;
|
|
border-top: 1px solid var(--border);
|
|
background: white;
|
|
margin-left: 240px;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 992px) {
|
|
.sidebar {
|
|
width: 70px;
|
|
}
|
|
|
|
.nav-title,
|
|
.nav-text {
|
|
display: none;
|
|
}
|
|
|
|
.nav-item {
|
|
justify-content: center;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 70px;
|
|
}
|
|
|
|
.footer {
|
|
margin-left: 70px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.swiper-container {
|
|
height: 200px;
|
|
}
|
|
|
|
.slide-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.slide-desc {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 顶部导航 -->
|
|
<header class="header">
|
|
<div class="logo">
|
|
<i class="fas fa-cogs"></i>
|
|
<span>管理系统</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="notification">
|
|
<i class="fas fa-bell"></i>
|
|
<span class="notification-badge">3</span>
|
|
</div>
|
|
<div class="user-profile">
|
|
<div class="avatar">A</div>
|
|
<div class="username">管理员</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 侧边导航 -->
|
|
<div class="sidebar">
|
|
<div class="nav-title">主菜单</div>
|
|
<div class="nav-item active">
|
|
<i class="fas fa-home"></i>
|
|
<span class="nav-text">控制台</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-users"></i>
|
|
<span class="nav-text">用户管理</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-lock"></i>
|
|
<span class="nav-text">权限管理</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-database"></i>
|
|
<span class="nav-text">数据管理</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-chart-line"></i>
|
|
<span class="nav-text">统计分析</span>
|
|
</div>
|
|
|
|
<div class="nav-title">系统设置</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-cog"></i>
|
|
<span class="nav-text">系统设置</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-tools"></i>
|
|
<span class="nav-text">维护工具</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-file-alt"></i>
|
|
<span class="nav-text">日志管理</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主要内容 -->
|
|
<div class="main-content">
|
|
<div class="page-title">
|
|
<div>控制台 <span class="welcome-text">欢迎回来，管理员</span></div>
|
|
<div>
|
|
<button
|
|
style="
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
"
|
|
>
|
|
<i class="fas fa-sync-alt"></i> 刷新数据
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 轮播图 -->
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div
|
|
class="swiper-slide"
|
|
style="
|
|
background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
|
|
"
|
|
>
|
|
<div class="slide-content">
|
|
<div class="slide-title">系统维护通知</div>
|
|
<div class="slide-desc">本周六凌晨2:00-4:00将进行系统维护，请提前做好准备</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="swiper-slide"
|
|
style="
|
|
background-image: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
|
|
"
|
|
>
|
|
<div class="slide-content">
|
|
<div class="slide-title">新版本发布</div>
|
|
<div class="slide-desc">V2.5.0版本已上线，包含多项功能优化和安全更新</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="swiper-slide"
|
|
style="
|
|
background-image: url('https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
|
|
"
|
|
>
|
|
<div class="slide-content">
|
|
<div class="slide-title">安全提示</div>
|
|
<div class="slide-desc">请定期修改密码并启用双重验证，确保账户安全</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
|
|
<!-- 数据统计 -->
|
|
<div class="stats-container">
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background: linear-gradient(135deg, #3498db, #2c80c4)">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-title">用户总数</div>
|
|
<div class="stat-value">8,742</div>
|
|
<div class="stat-change positive"><i class="fas fa-arrow-up"></i> 12.5% 较上月</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background: linear-gradient(135deg, #2ecc71, #27ae60)">
|
|
<i class="fas fa-chart-line"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-title">活跃用户</div>
|
|
<div class="stat-value">2,356</div>
|
|
<div class="stat-change positive"><i class="fas fa-arrow-up"></i> 5.3% 较上周</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background: linear-gradient(135deg, #f39c12, #e67e22)">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-title">待处理问题</div>
|
|
<div class="stat-value">24</div>
|
|
<div class="stat-change negative"><i class="fas fa-arrow-down"></i> 3.2% 较上周</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background: linear-gradient(135deg, #9b59b6, #8e44ad)">
|
|
<i class="fas fa-tasks"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-title">完成率</div>
|
|
<div class="stat-value">94.8%</div>
|
|
<div class="stat-change positive"><i class="fas fa-arrow-up"></i> 2.1% 较上月</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 功能模块 -->
|
|
<div class="section-title"><i class="fas fa-th-large"></i> 功能模块</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div class="feature-name">用户管理</div>
|
|
<div class="feature-desc">管理系统用户信息，分配角色和权限</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-lock"></i>
|
|
</div>
|
|
<div class="feature-name">权限控制</div>
|
|
<div class="feature-desc">设置角色权限，管理访问控制列表</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<div class="feature-name">数据管理</div>
|
|
<div class="feature-desc">管理数据库，执行数据备份与恢复</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-chart-bar"></i>
|
|
</div>
|
|
<div class="feature-name">统计分析</div>
|
|
<div class="feature-desc">查看系统使用数据，生成统计报表</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-cog"></i>
|
|
</div>
|
|
<div class="feature-name">系统设置</div>
|
|
<div class="feature-desc">配置系统参数，管理全局设置</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-file-alt"></i>
|
|
</div>
|
|
<div class="feature-name">日志审计</div>
|
|
<div class="feature-desc">查看操作日志，审计系统活动</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快捷操作 -->
|
|
<div class="section-title"><i class="fas fa-bolt"></i> 快捷操作</div>
|
|
<div class="quick-actions">
|
|
<div class="actions-grid">
|
|
<div class="action-item">
|
|
<div class="action-icon">
|
|
<i class="fas fa-user-plus"></i>
|
|
</div>
|
|
<div class="action-name">添加用户</div>
|
|
</div>
|
|
<div class="action-item">
|
|
<div class="action-icon">
|
|
<i class="fas fa-key"></i>
|
|
</div>
|
|
<div class="action-name">重置密码</div>
|
|
</div>
|
|
<div class="action-item">
|
|
<div class="action-icon">
|
|
<i class="fas fa-download"></i>
|
|
</div>
|
|
<div class="action-name">数据导出</div>
|
|
</div>
|
|
<div class="action-item">
|
|
<div class="action-icon">
|
|
<i class="fas fa-sync"></i>
|
|
</div>
|
|
<div class="action-name">刷新缓存</div>
|
|
</div>
|
|
<div class="action-item">
|
|
<div class="action-icon">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<div class="action-name">安全检查</div>
|
|
</div>
|
|
<div class="action-item">
|
|
<div class="action-icon">
|
|
<i class="fas fa-file-export"></i>
|
|
</div>
|
|
<div class="action-name">生成报表</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<footer class="footer">
|
|
<p>© 2023 后台管理系统 | 版本 2.5.0 | 技术支持: tech@admin.com</p>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
<script>
|
|
// 初始化轮播图
|
|
const swiper = new Swiper('.swiper-container', {
|
|
direction: 'horizontal',
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
})
|
|
|
|
// 模拟功能模块点击
|
|
document.querySelectorAll('.feature-card').forEach((card) => {
|
|
card.addEventListener('click', function () {
|
|
const featureName = this.querySelector('.feature-name').textContent
|
|
alert(`即将进入: ${featureName} 模块`)
|
|
})
|
|
})
|
|
|
|
// 模拟快捷操作点击
|
|
document.querySelectorAll('.action-item').forEach((item) => {
|
|
item.addEventListener('click', function () {
|
|
const actionName = this.querySelector('.action-name').textContent
|
|
alert(`执行操作: ${actionName}`)
|
|
})
|
|
})
|
|
|
|
// 模拟通知点击
|
|
document.querySelector('.notification').addEventListener('click', function () {
|
|
alert('您有3条未读通知')
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|