214 lines
10 KiB
HTML
214 lines
10 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>
|
||
<!-- 只引用index页面的专用样式 -->
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- 侧边导航栏 -->
|
||
<nav class="sidebar">
|
||
<div class="logo-container">
|
||
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" class="logo">
|
||
<h2>图书管理系统</h2>
|
||
</div>
|
||
<ul class="nav-links">
|
||
<li class="active"><a href="#"><i class="fas fa-home"></i> 首页</a></li>
|
||
<li><a href="#"><i class="fas fa-book"></i> 图书浏览</a></li>
|
||
<li><a href="#"><i class="fas fa-bookmark"></i> 我的借阅</a></li>
|
||
<li><a href="#"><i class="fas fa-bell"></i> 通知公告</a></li>
|
||
{% if current_user.role_id == 1 %}
|
||
<li class="nav-category">管理功能</li>
|
||
<li><a href="#"><i class="fas fa-users"></i> 用户管理</a></li>
|
||
<li><a href="#"><i class="fas fa-layer-group"></i> 图书管理</a></li>
|
||
<li><a href="#"><i class="fas fa-exchange-alt"></i> 借阅管理</a></li>
|
||
<li><a href="#"><i class="fas fa-warehouse"></i> 库存管理</a></li>
|
||
<li><a href="#"><i class="fas fa-chart-bar"></i> 统计分析</a></li>
|
||
<li><a href="#"><i class="fas fa-history"></i> 日志管理</a></li>
|
||
{% endif %}
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="main-content">
|
||
<!-- 顶部导航 -->
|
||
<header class="top-bar">
|
||
<div class="search-container">
|
||
<i class="fas fa-search search-icon"></i>
|
||
<input type="text" placeholder="搜索图书..." class="search-input">
|
||
</div>
|
||
<div class="user-menu">
|
||
<div class="notifications">
|
||
<i class="fas fa-bell"></i>
|
||
<span class="badge">3</span>
|
||
</div>
|
||
<div class="user-info">
|
||
<div class="user-avatar">
|
||
{{ current_user.username[0] }}
|
||
</div>
|
||
<div class="user-details">
|
||
<span class="user-name">{{ current_user.username }}</span>
|
||
<span class="user-role">{{ '管理员' if current_user.role_id == 1 else '普通用户' }}</span>
|
||
</div>
|
||
<div class="dropdown-menu">
|
||
<a href="#"><i class="fas fa-user-circle"></i> 个人中心</a>
|
||
<a href="#"><i class="fas fa-cog"></i> 设置</a>
|
||
<a href="{{ url_for('user.logout') }}"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 欢迎区域 -->
|
||
<div class="welcome-section">
|
||
<h1>欢迎回来，{{ current_user.username }}！</h1>
|
||
<p>今天是 <span id="current-date"></span>，祝您使用愉快。</p>
|
||
</div>
|
||
|
||
<!-- 快速统计 -->
|
||
<div class="stats-container">
|
||
<div class="stat-card">
|
||
<i class="fas fa-book stat-icon"></i>
|
||
<div class="stat-info">
|
||
<h3>馆藏总量</h3>
|
||
<p class="stat-number">8,567</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<i class="fas fa-users stat-icon"></i>
|
||
<div class="stat-info">
|
||
<h3>注册用户</h3>
|
||
<p class="stat-number">1,245</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<i class="fas fa-exchange-alt stat-icon"></i>
|
||
<div class="stat-info">
|
||
<h3>当前借阅</h3>
|
||
<p class="stat-number">352</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<i class="fas fa-clock stat-icon"></i>
|
||
<div class="stat-info">
|
||
<h3>待还图书</h3>
|
||
<p class="stat-number">{{ 5 }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容区 -->
|
||
<div class="main-sections">
|
||
<!-- 最新图书 -->
|
||
<div class="content-section book-section">
|
||
<div class="section-header">
|
||
<h2>最新图书</h2>
|
||
<a href="#" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
|
||
</div>
|
||
<div class="book-grid">
|
||
{% for i in range(4) %}
|
||
<div class="book-card">
|
||
<div class="book-cover">
|
||
<img src="{{ url_for('static', filename='images/book-placeholder.jpg') }}" alt="Book Cover" onerror="this.src='https://via.placeholder.com/150x210?text=No+Cover'">
|
||
</div>
|
||
<div class="book-info">
|
||
<h3 class="book-title">示例图书标题</h3>
|
||
<p class="book-author">作者名</p>
|
||
<div class="book-meta">
|
||
<span class="book-category">计算机</span>
|
||
<span class="book-status available">可借阅</span>
|
||
</div>
|
||
<button class="borrow-btn">借阅</button>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 通知公告 -->
|
||
<div class="content-section notice-section">
|
||
<div class="section-header">
|
||
<h2>通知公告</h2>
|
||
<a href="#" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
|
||
</div>
|
||
<div class="notice-list">
|
||
<div class="notice-item">
|
||
<div class="notice-icon"><i class="fas fa-bullhorn"></i></div>
|
||
<div class="notice-content">
|
||
<h3>关于五一假期图书馆开放时间调整的通知</h3>
|
||
<p>五一期间(5月1日-5日)，图书馆开放时间调整为上午9:00-下午5:00。</p>
|
||
<div class="notice-meta">
|
||
<span class="notice-time">2023-04-28</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="notice-item">
|
||
<div class="notice-icon"><i class="fas fa-bell"></i></div>
|
||
<div class="notice-content">
|
||
<h3>您有2本图书即将到期</h3>
|
||
<p>《Python编程》《算法导论》将于3天后到期，请及时归还或办理续借。</p>
|
||
<div class="notice-meta">
|
||
<span class="notice-time">2023-04-27</span>
|
||
<button class="renew-btn">一键续借</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 热门图书区域 -->
|
||
<div class="content-section popular-section">
|
||
<div class="section-header">
|
||
<h2>热门图书</h2>
|
||
<a href="#" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
|
||
</div>
|
||
<div class="popular-books">
|
||
{% for i in range(5) %}
|
||
<div class="popular-book-item">
|
||
<div class="rank-badge">{{ i+1 }}</div>
|
||
<div class="book-cover small">
|
||
<img src="https://via.placeholder.com/80x120?text=Book" alt="Book Cover">
|
||
</div>
|
||
<div class="book-details">
|
||
<h3 class="book-title">热门图书标题示例</h3>
|
||
<p class="book-author">知名作者</p>
|
||
<div class="book-stats">
|
||
<span><i class="fas fa-eye"></i> 1024 次浏览</span>
|
||
<span><i class="fas fa-bookmark"></i> 89 次借阅</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 设置当前日期
|
||
const now = new Date();
|
||
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
|
||
document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
|
||
|
||
// 用户菜单下拉
|
||
const userInfo = document.querySelector('.user-info');
|
||
userInfo.addEventListener('click', function(e) {
|
||
userInfo.classList.toggle('active');
|
||
});
|
||
|
||
// 点击其他区域关闭下拉菜单
|
||
document.addEventListener('click', function(e) {
|
||
if (!userInfo.contains(e.target)) {
|
||
userInfo.classList.remove('active');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |