93 lines
4.1 KiB
HTML
93 lines
4.1 KiB
HTML
<!-- app/templates/statistics/index.html -->
|
|
{% extends "base.html" %}
|
|
|
|
{% block title %}统计分析 - 图书管理系统{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/statistics.css') }}">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
|
<!-- Updated Google Fonts Link -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;600&family=Open+Sans:wght@300;400&family=Sacramento&family=EB+Garamond:ital@0;1&display=swap" rel="stylesheet">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="statistics-container animate__animated animate__fadeIn">
|
|
<h1 class="page-title">统计分析</h1>
|
|
|
|
<div class="quote-banner">
|
|
<p>"统计数字是文学世界的星辰，照亮知识的海洋"</p>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<a href="{{ url_for('statistics.book_ranking') }}" class="stats-card animate__animated animate__fadeInUp">
|
|
<div class="card-inner">
|
|
<div class="card-icon"><i class="fas fa-chart-line"></i></div>
|
|
<div class="card-title">热门图书排行</div>
|
|
<div class="card-description">查看最受欢迎的图书，按借阅次数排名</div>
|
|
<div class="card-decoration book-decoration"></div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{{ url_for('statistics.borrow_statistics') }}" class="stats-card animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
|
|
<div class="card-inner">
|
|
<div class="card-icon"><i class="fas fa-exchange-alt"></i></div>
|
|
<div class="card-title">借阅趋势分析</div>
|
|
<div class="card-description">查看借阅和归还的历史趋势和分布</div>
|
|
<div class="card-decoration trend-decoration"></div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{{ url_for('statistics.user_activity') }}" class="stats-card animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
|
|
<div class="card-inner">
|
|
<div class="card-icon"><i class="fas fa-users"></i></div>
|
|
<div class="card-title">用户活跃度分析</div>
|
|
<div class="card-description">查看最活跃的用户和用户行为分析</div>
|
|
<div class="card-decoration user-decoration"></div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{{ url_for('statistics.overdue_analysis') }}" class="stats-card animate__animated animate__fadeInUp" style="animation-delay: 0.3s;">
|
|
<div class="card-inner">
|
|
<div class="card-icon"><i class="fas fa-exclamation-circle"></i></div>
|
|
<div class="card-title">逾期分析</div>
|
|
<div class="card-description">分析图书逾期情况和趋势</div>
|
|
<div class="card-decoration overdue-decoration"></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="page-decoration left"></div>
|
|
<div class="page-decoration right"></div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/statistics.js') }}"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 添加卡片悬停动画效果
|
|
const cards = document.querySelectorAll('.stats-card');
|
|
|
|
cards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
const decoration = this.querySelector('.card-decoration');
|
|
if (decoration) { // Check if decoration exists
|
|
decoration.classList.add('active');
|
|
}
|
|
this.classList.add('hovered'); // Add class for general hover style
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
const decoration = this.querySelector('.card-decoration');
|
|
if (decoration) { // Check if decoration exists
|
|
decoration.classList.remove('active');
|
|
}
|
|
this.classList.remove('hovered'); // Remove class
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|