221 lines
9.5 KiB
HTML
221 lines
9.5 KiB
HTML
{% extends 'base.html' %}
|
||
|
||
{% block title %}首页 - 图书管理系统{% endblock %}
|
||
|
||
{% block head %}
|
||
<!-- 只引用index页面的专用样式 -->
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- 欢迎区域 -->
|
||
<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">{{ stats.total_books }}</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">{{ stats.total_users }}</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">{{ stats.active_borrows }}</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">{{ stats.user_borrows if current_user.is_authenticated else 0 }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容区 -->
|
||
<div class="main-sections">
|
||
<!-- 最新图书 -->
|
||
<div class="content-section book-section">
|
||
<div class="section-header">
|
||
<h2>最新图书</h2>
|
||
<a href="{{ url_for('book.browse_books', sort='newest') }}" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
|
||
</div>
|
||
<div class="book-grid">
|
||
{% if latest_books %}
|
||
{% for book in latest_books %}
|
||
<div class="book-card">
|
||
<div class="book-cover">
|
||
{% if book.cover_url %}
|
||
<img src="{{ book.cover_url }}" alt="{{ book.title }} 封面">
|
||
{% else %}
|
||
<img src="{{ url_for('static', filename='images/book-placeholder.jpg') }}" alt="无封面">
|
||
{% endif %}
|
||
</div>
|
||
<div class="book-info">
|
||
<h3 class="book-title">{{ book.title }}</h3>
|
||
<p class="book-author">{{ book.author }}</p>
|
||
<div class="book-meta">
|
||
<span class="book-category">{{ book.category.name if book.category else '未分类' }}</span>
|
||
<span class="book-status {{ 'available' if book.stock > 0 else 'unavailable' }}">
|
||
{{ '可借阅' if book.stock > 0 else '已借完' }}
|
||
</span>
|
||
</div>
|
||
<a href="{{ url_for('book.book_detail', book_id=book.id) }}" class="borrow-btn">
|
||
{{ '借阅' if book.stock > 0 else '详情' }}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% else %}
|
||
{% for i in range(4) %}
|
||
<div class="book-card">
|
||
<div class="book-cover">
|
||
<img src="https://via.placeholder.com/150x210?text=No+Cover" alt="Book 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 %}
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 通知公告 -->
|
||
<div class="content-section notice-section">
|
||
<div class="section-header">
|
||
<h2>通知公告</h2>
|
||
<a href="{{ url_for('announcement.announcement_list') }}" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
|
||
</div>
|
||
<div class="notice-list">
|
||
{% if announcements %}
|
||
{% for announcement in announcements %}
|
||
<div class="notice-item {% if announcement.is_top %}pinned{% endif %}">
|
||
<div class="notice-icon"><i class="fas fa-bullhorn"></i></div>
|
||
<div class="notice-content">
|
||
<h3><a href="{{ url_for('announcement.announcement_detail', announcement_id=announcement.id) }}">{{ announcement.title }}</a></h3>
|
||
<p>{{ announcement.content|striptags|truncate(100) }}</p>
|
||
<div class="notice-meta">
|
||
<span class="notice-time">{{ announcement.created_at.strftime('%Y-%m-%d') }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% else %}
|
||
<div class="notice-item">
|
||
<div class="notice-icon"><i class="fas fa-bullhorn"></i></div>
|
||
<div class="notice-content">
|
||
<h3>暂无公告</h3>
|
||
<p>目前没有任何通知公告</p>
|
||
<div class="notice-meta">
|
||
<span class="notice-time">{{ now.strftime('%Y-%m-%d') }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if current_user.is_authenticated and user_notifications %}
|
||
<div class="notice-item">
|
||
<div class="notice-icon"><i class="fas fa-bell"></i></div>
|
||
<div class="notice-content">
|
||
<h3>您有{{ user_notifications|length }}条未读通知</h3>
|
||
<p>
|
||
{% for notification in user_notifications %}
|
||
{% if loop.index <= 2 %}
|
||
{{ notification.title }}{% if not loop.last and loop.index < 2 %}、{% endif %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
{% if user_notifications|length > 2 %}等{% endif %}
|
||
</p>
|
||
<div class="notice-meta">
|
||
<span class="notice-time">{{ now.strftime('%Y-%m-%d') }}</span>
|
||
<a href="{{ url_for('announcement.user_notifications') }}" class="renew-btn">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 热门图书区域 -->
|
||
<div class="content-section popular-section">
|
||
<div class="section-header">
|
||
<h2>热门图书</h2>
|
||
<a href="{{ url_for('book.browse_books', sort='popular') }}" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
|
||
</div>
|
||
<div class="popular-books">
|
||
{% if popular_books %}
|
||
{% for book in popular_books %}
|
||
<div class="popular-book-item">
|
||
<div class="rank-badge">{{ loop.index }}</div>
|
||
<div class="book-cover small">
|
||
{% if book.cover_url %}
|
||
<img src="{{ book.cover_url }}" alt="{{ book.title }} 封面">
|
||
{% else %}
|
||
<img src="{{ url_for('static', filename='images/book-placeholder.jpg') }}" alt="无封面">
|
||
{% endif %}
|
||
</div>
|
||
<div class="book-details">
|
||
<h3 class="book-title">{{ book.title }}</h3>
|
||
<p class="book-author">{{ book.author }}</p>
|
||
<div class="book-stats">
|
||
<span><i class="fas fa-eye"></i> {{ book.view_count if book.view_count else 0 }} 次浏览</span>
|
||
<span><i class="fas fa-bookmark"></i> {{ book.borrow_count if book.borrow_count else 0 }} 次借阅</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% else %}
|
||
{% 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 %}
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<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);
|
||
});
|
||
</script>
|
||
{% endblock %}
|