u
This commit is contained in:
1 parent
ca82773f6b
commit
95609c92d4
1 file changed
+177
-771
@@ -1,773 +1,179 @@
|
||||
<!doctype 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>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>后台管理首页</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "PingFang SC","Microsoft YaHei",Arial,sans-serif;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 轮播 */
|
||||
.carousel {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.carousel img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* 功能模块 */
|
||||
.modules {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: #fff;
|
||||
margin: 0 8px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.module {
|
||||
width: 25%;
|
||||
padding: 14px 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.module img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.module span {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.module:active {
|
||||
background: #e6f0ff;
|
||||
}
|
||||
|
||||
/* 数据统计卡片 */
|
||||
.cards {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding: 12px 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
min-width: 120px;
|
||||
background: #fff;
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: 6px 0 0;
|
||||
font-size: 18px;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 2px 0 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cards::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<div class="carousel" id="carousel">
|
||||
<img src="https://via.placeholder.com/400x160?text=公告1" alt="公告1">
|
||||
<img src="https://via.placeholder.com/400x160?text=公告2" alt="公告2" style="display:none;">
|
||||
<img src="https://via.placeholder.com/400x160?text=公告3" alt="公告3" style="display:none;">
|
||||
</div>
|
||||
|
||||
<!-- 功能模块 -->
|
||||
<div class="modules">
|
||||
<div class="module">
|
||||
<img src="https://via.placeholder.com/36" alt="用户管理">
|
||||
<span>用户管理</span>
|
||||
</div>
|
||||
<div class="module">
|
||||
<img src="https://via.placeholder.com/36" alt="订单管理">
|
||||
<span>订单管理</span>
|
||||
</div>
|
||||
<div class="module">
|
||||
<img src="https://via.placeholder.com/36" alt="报表统计">
|
||||
<span>报表统计</span>
|
||||
</div>
|
||||
<div class="module">
|
||||
<img src="https://via.placeholder.com/36" alt="系统设置">
|
||||
<span>系统设置</span>
|
||||
</div>
|
||||
<div class="module">
|
||||
<img src="https://via.placeholder.com/36" alt="权限管理">
|
||||
<span>权限管理</span>
|
||||
</div>
|
||||
<div class="module">
|
||||
<img src="https://via.placeholder.com/36" alt="日志管理">
|
||||
<span>日志管理</span>
|
||||
</div>
|
||||
<div class="module">
|
||||
<img src="https://via.placeholder.com/36" alt="消息通知">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div class="module">
|
||||
<img src="https://via.placeholder.com/36" alt="数据导入">
|
||||
<span>数据导入</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据统计卡片 -->
|
||||
<div class="cards">
|
||||
<div class="card">
|
||||
<h3>102</h3>
|
||||
<p>今日新增用户</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>56</h3>
|
||||
<p>待处理订单</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>78</h3>
|
||||
<p>本周报表</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>12</h3>
|
||||
<p>系统警告</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 简单轮播
|
||||
const carousel = document.getElementById('carousel');
|
||||
const imgs = carousel.getElementsByTagName('img');
|
||||
let current = 0;
|
||||
setInterval(() => {
|
||||
imgs[current].style.display = 'none';
|
||||
current = (current + 1) % imgs.length;
|
||||
imgs[current].style.display = 'block';
|
||||
}, 3000);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user