107 lines
4.4 KiB
HTML
107 lines
4.4 KiB
HTML
<!-- app/templates/statistics/book_ranking.html -->
|
|
{% extends "base.html" %}
|
|
|
|
{% block title %}热门图书排行 - 统计分析{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/statistics.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/book_ranking.css') }}">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="statistics-container">
|
|
<div class="breadcrumb">
|
|
<a href="{{ url_for('statistics.index') }}">统计分析</a> / <span class="current-page">热门图书排行</span>
|
|
</div>
|
|
|
|
<h1 class="page-title animate__animated animate__fadeIn">✨ 热门图书排行 ✨</h1>
|
|
|
|
<div class="filter-section">
|
|
<div class="filter-label">时间范围：</div>
|
|
<select id="time-range" class="filter-select">
|
|
<option value="week">最近7天</option>
|
|
<option value="month" selected>最近30天</option>
|
|
<option value="year">最近一年</option>
|
|
<option value="all">全部时间</option>
|
|
</select>
|
|
|
|
<div class="filter-label ml-20">显示数量：</div>
|
|
<select id="limit-count" class="filter-select">
|
|
<option value="5">5本</option>
|
|
<option value="10" selected>10本</option>
|
|
<option value="20">20本</option>
|
|
<option value="50">50本</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="chart-container animate__animated animate__fadeInUp">
|
|
<div class="chart-decoration left"></div>
|
|
<div class="chart-decoration right"></div>
|
|
<canvas id="ranking-chart"></canvas>
|
|
</div>
|
|
|
|
<div class="table-container animate__animated animate__fadeInUp">
|
|
<h3 class="book-list-title"><span class="book-icon">📚</span> 热门图书榜单 <span class="book-icon">📖</span></h3>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th><span class="column-icon">🏆</span> 排名</th>
|
|
<th><span class="column-icon">🖼️</span> 封面</th>
|
|
<th><span class="column-icon">📕</span> 书名</th>
|
|
<th><span class="column-icon">✒️</span> 作者</th>
|
|
<th><span class="column-icon">📊</span> 借阅次数</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ranking-table-body">
|
|
<!-- 数据将通过JS动态填充 -->
|
|
<tr class="loading-row">
|
|
<td colspan="5"><div class="loading-animation"><span>正在打开书页</span><span class="dot-animation">...</span></div></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="quote-container animate__animated animate__fadeIn">
|
|
<p>"一本好书就像一艘船，带领我们从狭隘的地方，驶向生活的无限广阔的海洋。"</p>
|
|
<span class="quote-author">—— 海伦·凯勒</span>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="{{ url_for('static', filename='js/book_ranking.js') }}"></script>
|
|
<script>
|
|
// 原有的 Chart.js 初始化代码可能会在 book_ranking.js 中
|
|
// 这里我们添加额外的动画效果
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 添加表格行的动画效果
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
let delay = 0;
|
|
entry.target.querySelectorAll('tr').forEach(row => {
|
|
setTimeout(() => {
|
|
row.classList.add('fade-in');
|
|
}, delay);
|
|
delay += 100;
|
|
});
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
});
|
|
|
|
const tableBody = document.getElementById('ranking-table-body');
|
|
if (tableBody) observer.observe(tableBody);
|
|
|
|
// 装饰元素动画
|
|
const decorations = document.querySelectorAll('.chart-decoration');
|
|
decorations.forEach(decor => {
|
|
decor.classList.add('floating');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|