Book_system/app/templates/index.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">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="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 %}
        </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>
{% 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 %}