<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高级考试成绩排名分析报告</title>
<style>
:root {
--primary: #8b5cf6;
--secondary: #6d28d9;
--accent: #10b981;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--dark-bg: #0f0f13;
--card-bg: #1a1a23;
--card-hover: #23232e;
--text: #e2e8f0;
--text-secondary: #94a3b8;
--border: #2d2d3a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #0f0f13 0%, #1a1a23 100%);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: var(--dark-bg);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
border: 1px solid var(--border);
}
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 50px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23000000" fill-opacity="0.15" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,192C672,181,768,139,864,138.7C960,139,1056,181,1152,197.3C1248,213,1344,203,1392,197.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
background-size: cover;
background-position: bottom;
}
.header-content {
position: relative;
z-index: 1;
}
h1 {
font-size: 2.8rem;
margin-bottom: 15px;
letter-spacing: 1px;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
font-weight: 700;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
font-weight: 400;
}
.content {
padding: 40px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.stat-card {
background: var(--card-bg);
border-radius: 16px;
padding: 25px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
text-align: center;
border: 1px solid var(--border);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--accent));
}
.stat-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
background: var(--card-hover);
}
.stat-icon {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 15px;
}
.stat-value {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 10px 0;
}
.stat-label {
font-size: 1.1rem;
color: var(--text-secondary);
font-weight: 500;
}
.stat-desc {
font-size: 0.9rem;
color: var(--text-secondary);
margin-top: 8px;
}
.chart-container {
background: var(--card-bg);
border-radius: 16px;
padding: 30px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
margin-bottom: 40px;
position: relative;
border: 1px solid var(--border);
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
flex-wrap: wrap;
gap: 15px;
}
.chart-title {
font-size: 1.5rem;
color: var(--text);
font-weight: 600;
}
.chart-controls {
display: flex;
gap: 10px;
}
.chart-btn {
padding: 10px 20px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
color: var(--text);
}
.chart-btn.active {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border-color: transparent;
}
.chart-btn:hover:not(.active) {
background: var(--card-hover);
}
.data-table-container {
background: var(--card-bg);
border-radius: 16px;
padding: 30px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
margin-bottom: 40px;
overflow: hidden;
border: 1px solid var(--border);
}
.data-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.data-table th {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 16px;
text-align: left;
font-weight: 600;
}
.data-table td {
padding: 16px;
border-bottom: 1px solid var(--border);
}
.data-table tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.03);
}
.data-table tr:hover {
background-color: rgba(255, 255, 255, 0.08);
}
.trend-up {
color: var(--success);
font-weight: 600;
}
.trend-down {
color: var(--danger);
font-weight: 600;
}
.analysis-section {
background: var(--card-bg);
border-radius: 16px;
padding: 30px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
margin-bottom: 40px;
border: 1px solid var(--border);
}
.section-title {
font-size: 1.5rem;
color: var(--text);
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(--border);
font-weight: 600;
}
.analysis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.analysis-card {
background: var(--card-bg);
border-radius: 12px;
padding: 20px;
border-left: 4px solid var(--primary);
transition: all 0.3s ease;
border: 1px solid var(--border);
}
.analysis-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.analysis-card h3 {
color: var(--text);
margin-bottom: 15px;
font-size: 1.2rem;
}
.analysis-points {
margin-left: 15px;
}
.analysis-points li {
margin-bottom: 10px;
padding-left: 10px;
}
.highlight {
color: var(--primary);
font-weight: 600;
}
.positive {
color: var(--success);
font-weight: 600;
}
.negative {
color: var(--danger);
font-weight: 600;
}
.improvement-section {
background: var(--card-bg);
border-radius: 16px;
padding: 30px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
border: 1px solid var(--border);
}
.recommendation-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.recommendation-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
background: var(--card-bg);
border-radius: 12px;
transition: all 0.3s ease;
border: 1px solid var(--border);
}
.recommendation-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
background: var(--card-hover);
}
.recommendation-icon {
font-size: 1.8rem;
color: var(--primary);
flex-shrink: 0;
}
footer {
text-align: center;
padding: 30px;
color: var(--text-secondary);
font-size: 0.95rem;
border-top: 1px solid var(--border);
margin-top: 30px;
background: var(--card-bg);
}
@media (max-width: 768px) {
.content {
padding: 25px;
}
h1 {
font-size: 2.2rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.chart-header {
flex-direction: column;
align-items: flex-start;
}
.analysis-grid, .recommendation-list {
grid-template-columns: 1fr;
}
}
/* 自定义图标 */
.icon-trophy::before { content: "🏆"; }
.icon-graph-down::before { content: "📉"; }
.icon-calculator::before { content: "🧮"; }
.icon-arrow-up::before { content: "📈"; }
.icon-graph-up::before { content: "📊"; }
.icon-calendar::before { content: "📅"; }
.icon-speedometer::before { content: "⚡"; }
.icon-journal::before { content: "📚"; }
.icon-clipboard::before { content: "📋"; }
.icon-bullseye::before { content: "🎯"; }
.icon-lightbulb::before { content: "💡"; }
/* 图表容器 */
#chartCanvas {
width: 100%;
height: 400px;
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
</style>
</head>
<body>
<div class="container">
<header>
<div class="header-content">
<h1>考试成绩排名分析报告</h1>
<p class="subtitle">七年级至八年级上学期期中成绩排名变化趋势分析与学习策略建议</p>
</div>
</header>
<div class="content">
<div class="stats-grid">
<div class="stat-card fade-in">
<div class="stat-icon icon-trophy"></div>
<div class="stat-value">7</div>
<div class="stat-label">最佳排名</div>
<div class="stat-desc">七年级上学期期末</div>
</div>
<div class="stat-card fade-in delay-1">
<div class="stat-icon icon-graph-down"></div>
<div class="stat-value">31</div>
<div class="stat-label">最差排名</div>
<div class="stat-desc">入校时</div>
</div>
<div class="stat-card fade-in delay-2">
<div class="stat-icon icon-calculator"></div>
<div class="stat-value">15.3</div>
<div class="stat-label">平均排名</div>
<div class="stat-desc">七次考试平均</div>
</div>
<div class="stat-card fade-in delay-3">
<div class="stat-icon icon-arrow-up"></div>
<div class="stat-value">23</div>
<div class="stat-label">排名进步</div>
<div class="stat-desc">从入校到最佳排名</div>
</div>
</div>
<div class="chart-container fade-in delay-1">
<div class="chart-header">
<h2 class="chart-title">成绩排名变化趋势</h2>
<div class="chart-controls">
<button class="chart-btn active" id="lineChartBtn">折线图</button>
<button class="chart-btn" id="barChartBtn">柱状图</button>
</div>
</div>
<canvas id="chartCanvas"></canvas>
</div>
<div class="data-table-container fade-in delay-2">
<h2 class="section-title">详细数据</h2>
<table class="data-table">
<thead>
<tr>
<th>考试阶段</th>
<th>排名</th>
<th>变化趋势</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>入校</td>
<td>31</td>
<td>—</td>
<td>起点</td>
</tr>
<tr>
<td>七上期中</td>
<td>14</td>
<td class="trend-up">↑ 进步17名</td>
<td>显著进步</td>
</tr>
<tr>
<td>七上期末</td>
<td>7</td>
<td class="trend-up">↑ 进步7名</td>
<td>最佳排名</td>
</tr>
<tr>
<td>七下期中</td>
<td>8</td>
<td class="trend-down">↓ 退步1名</td>
<td>保持稳定</td>
</tr>
<tr>
<td>七下期末</td>
<td>29</td>
<td class="trend-down">↓ 退步21名</td>
<td>明显波动</td>
</tr>
<tr>
<td>八上期中</td>
<td>8</td>
<td class="trend-up">↑ 进步21名</td>
<td>恢复良好状态</td>
</tr>
</tbody>
</table>
</div>
<div class="analysis-section fade-in delay-3">
<h2 class="section-title">数据分析</h2>
<div class="analysis-grid">
<div class="analysis-card">
<h3><span class="icon-graph-up"></span> 总体趋势</h3>
<ul class="analysis-points">
<li>从入校排名<span class="negative">31名</span>到七年级上学期期末的<span class="positive">7名</span>，展现了显著的进步</li>
<li>适应能力和学习潜力较强，能够快速提升</li>
<li>七年级下学期期末出现较大波动，但能迅速调整恢复</li>
</ul>
</div>
<div class="analysis-card">
<h3><span class="icon-calendar"></span> 阶段表现</h3>
<ul class="analysis-points">
<li>七年级期间整体表现优异，排名稳定在前10名左右</li>
<li>七年级下学期期末出现异常波动，需分析原因</li>
<li>八年级上学期期中排名<span class="positive">8名</span>，表明已恢复良好状态</li>
</ul>
</div>
<div class="analysis-card">
<h3><span class="icon-speedometer"></span> 稳定性分析</h3>
<ul class="analysis-points">
<li>除七年级下学期期末外，排名波动相对较小</li>
<li>显示出较为稳定的学习能力和心理素质</li>
<li>应对挫折的能力较强，能够快速调整状态</li>
</ul>
</div>
</div>
</div>
<div class="improvement-section fade-in delay-4">
<h2 class="section-title">学习策略建议</h2>
<div class="recommendation-list">
<div class="recommendation-item">
<div class="recommendation-icon icon-journal"></div>
<div>
<h3>保持优势科目</h3>
<p>分析七年级上学期期末取得最佳排名时的学习方法，继续保持优势科目的学习策略。</p>
</div>
</div>
<div class="recommendation-item">
<div class="recommendation-icon icon-clipboard"></div>
<div>
<h3>应对波动</h3>
<p>深入分析七年级下学期期末排名下降的原因，制定应对类似情况的有效策略。</p>
</div>
</div>
<div class="recommendation-item">
<div class="recommendation-icon icon-bullseye"></div>
<div>
<h3>目标设定</h3>
<p>基于当前<span class="positive">8名</span>的排名，设定进入前5名的短期目标，并制定具体实施计划。</p>
</div>
</div>
<div class="recommendation-item">
<div class="recommendation-icon icon-lightbulb"></div>
<div>
<h3>学习方法优化</h3>
<p>尝试更高效的学习方法，如主动学习、分散练习和自测，提高学习效率。</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>当前时间：<span id="currentDate"></span> | 加油！</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 设置当前日期
const currentDate = new Date().toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
document.getElementById('currentDate').textContent = currentDate;
// 图表数据
const labels = ['入校', '七上期中', '七上期末', '七下期中', '七下期末', '八上期中'];
const data = [31, 14, 7, 8, 29, 8];
// 获取Canvas元素和上下文
const canvas = document.getElementById('chartCanvas');
const ctx = canvas.getContext('2d');
// 设置Canvas尺寸
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// 图表配置
const chartConfig = {
type: 'line', // 'line' 或 'bar'
padding: 40,
colors: {
primary: '#8b5cf6',
accent: '#10b981',
background: 'rgba(139, 92, 246, 0.1)',
grid: 'rgba(255, 255, 255, 0.05)',
text: '#e2e8f0'
}
};
// 绘制图表函数
function drawChart() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 计算图表区域
const padding = chartConfig.padding;
const chartWidth = canvas.width - padding * 2;
const chartHeight = canvas.height - padding * 2;
// 绘制背景
ctx.fillStyle = '#1a1a23';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制网格
ctx.strokeStyle = chartConfig.colors.grid;
ctx.lineWidth = 1;
// 水平网格线
const horizontalLines = 6;
for (let i = 0; i <= horizontalLines; i++) {
const y = padding + (chartHeight / horizontalLines) * i;
ctx.beginPath();
ctx.moveTo(padding, y);
ctx.lineTo(canvas.width - padding, y);
ctx.stroke();
// Y轴标签
ctx.fillStyle = chartConfig.colors.text;
ctx.font = '12px Arial';
ctx.textAlign = 'right';
ctx.fillText(35 - (i * 5), padding - 10, y + 4);
}
// 垂直网格线
const verticalLines = labels.length - 1;
for (let i = 0; i <= verticalLines; i++) {
const x = padding + (chartWidth / verticalLines) * i;
ctx.beginPath();
ctx.moveTo(x, padding);
ctx.lineTo(x, canvas.height - padding);
ctx.stroke();
// X轴标签
ctx.fillStyle = chartConfig.colors.text;
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.fillText(labels[i], x, canvas.height - padding + 20);
}
// Y轴标题
ctx.save();
ctx.translate(20, canvas.height / 2);
ctx.rotate(-Math.PI / 2);
ctx.fillStyle = chartConfig.colors.text;
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText('排名（数字越小越好）', 0, 0);
ctx.restore();
// 绘制数据点
if (chartConfig.type === 'line') {
drawLineChart();
} else {
drawBarChart();
}
}
// 绘制折线图
function drawLineChart() {
const padding = chartConfig.padding;
const chartWidth = canvas.width - padding * 2;
const chartHeight = canvas.height - padding * 2;
// 绘制连线
ctx.beginPath();
ctx.strokeStyle = chartConfig.colors.primary;
ctx.lineWidth = 3;
ctx.lineJoin = 'round';
for (let i = 0; i < data.length; i++) {
const x = padding + (chartWidth / (data.length - 1)) * i;
const y = padding + (chartHeight / 35) * data[i];
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.stroke();
// 绘制数据点
for (let i = 0; i < data.length; i++) {
const x = padding + (chartWidth / (data.length - 1)) * i;
const y = padding + (chartHeight / 35) * data[i];
// 点外圈
ctx.beginPath();
ctx.arc(x, y, 8, 0, Math.PI * 2);
ctx.fillStyle = '#1a1a23';
ctx.fill();
ctx.strokeStyle = chartConfig.colors.primary;
ctx.lineWidth = 2;
ctx.stroke();
// 点内圈
ctx.beginPath();
ctx.arc(x, y, 4, 0, Math.PI * 2);
ctx.fillStyle = chartConfig.colors.primary;
ctx.fill();
// 数据标签
ctx.fillStyle = chartConfig.colors.text;
ctx.font = 'bold 14px Arial';
ctx.textAlign = 'center';
ctx.fillText(data[i], x, y - 15);
}
// 填充区域
ctx.beginPath();
for (let i = 0; i < data.length; i++) {
const x = padding + (chartWidth / (data.length - 1)) * i;
const y = padding + (chartHeight / 35) * data[i];
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.lineTo(canvas.width - padding, canvas.height - padding);
ctx.lineTo(padding, canvas.height - padding);
ctx.closePath();
const gradient = ctx.createLinearGradient(0, padding, 0, canvas.height - padding);
gradient.addColorStop(0, 'rgba(139, 92, 246, 0.3)');
gradient.addColorStop(1, 'rgba(139, 92, 246, 0.05)');
ctx.fillStyle = gradient;
ctx.fill();
}
// 绘制柱状图
function drawBarChart() {
const padding = chartConfig.padding;
const chartWidth = canvas.width - padding * 2;
const chartHeight = canvas.height - padding * 2;
const barWidth = chartWidth / data.length * 0.6;
const barSpacing = chartWidth / data.length * 0.4;
for (let i = 0; i < data.length; i++) {
const x = padding + (chartWidth / data.length) * i + barSpacing / 2;
const barHeight = (chartHeight / 35) * data[i];
const y = canvas.height - padding - barHeight;
// 绘制柱子
const gradient = ctx.createLinearGradient(0, y, 0, canvas.height - padding);
gradient.addColorStop(0, chartConfig.colors.primary);
gradient.addColorStop(1, '#a78bfa');
ctx.fillStyle = gradient;
ctx.fillRect(x, y, barWidth, barHeight);
// 柱子边框
ctx.strokeStyle = '#7c3aed';
ctx.lineWidth = 1;
ctx.strokeRect(x, y, barWidth, barHeight);
// 数据标签
ctx.fillStyle = chartConfig.colors.text;
ctx.font = 'bold 14px Arial';
ctx.textAlign = 'center';
ctx.fillText(data[i], x + barWidth / 2, y - 10);
}
}
// 初始绘制
drawChart();
// 图表切换功能
const lineChartBtn = document.getElementById('lineChartBtn');
const barChartBtn = document.getElementById('barChartBtn');
lineChartBtn.addEventListener('click', function() {
if (chartConfig.type !== 'line') {
chartConfig.type = 'line';
drawChart();
lineChartBtn.classList.add('active');
barChartBtn.classList.remove('active');
}
});
barChartBtn.addEventListener('click', function() {
if (chartConfig.type !== 'bar') {
chartConfig.type = 'bar';
drawChart();
barChartBtn.classList.add('active');
lineChartBtn.classList.remove('active');
}
});
// 窗口调整大小时重绘图表
window.addEventListener('resize', function() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
drawChart();
});
// 添加滚动动画效果
const fadeElements = document.querySelectorAll('.fade-in');
const fadeInObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
fadeElements.forEach(element => {
element.style.opacity = 0;
element.style.transform = 'translateY(20px)';
element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
fadeInObserver.observe(element);
});
});
</script>
</body>
</html>
index.html
index.html