498 lines
25 KiB
HTML
498 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>体质提升作业平台</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.tailwindcss.com" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#2563EB', // 专业蓝
|
||
secondary: '#10B981', // 健康绿
|
||
accent: '#F59E0B', // 活力橙
|
||
warning: '#EF4444',
|
||
light: '#F3F4F6',
|
||
dark: '#1F2937'
|
||
},
|
||
fontFamily: {
|
||
sans: ['PingFang SC', 'Microsoft YaHei', 'sans-serif'],
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
.card {
|
||
@apply bg-white rounded-xl shadow-sm p-4 transition-all duration-300 hover:shadow-md;
|
||
}
|
||
.btn {
|
||
@apply px-4 py-2.5 rounded-lg font-medium transition-all duration-200;
|
||
}
|
||
.btn-primary {
|
||
@apply bg-primary text-white hover:bg-primary/90;
|
||
}
|
||
.badge {
|
||
@apply px-2 py-0.5 rounded-full text-xs font-medium;
|
||
}
|
||
.progress-bar {
|
||
@apply h-2 rounded-full bg-gray-200 overflow-hidden;
|
||
}
|
||
.progress-value {
|
||
@apply h-full rounded-full transition-all duration-700;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-light text-dark font-sans min-h-screen flex flex-col">
|
||
<!-- 顶部导航栏 -->
|
||
<header class="bg-primary text-white py-4 px-5 sticky top-0 z-10 shadow-md">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<i class="fa fa-line-chart text-xl"></i>
|
||
<h1 class="text-lg font-bold">体质提升作业平台</h1>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<button class="relative">
|
||
<i class="fa fa-bell text-xl"></i>
|
||
<span class="absolute -top-1 -right-1 w-4 h-4 bg-accent rounded-full text-white text-xs flex items-center justify-center">4</span>
|
||
</button>
|
||
<img src="https://picsum.photos/id/1005/200/200" alt="体育老师头像" class="w-9 h-9 rounded-full border-2 border-white">
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="flex-1 overflow-y-auto">
|
||
<!-- 体质测试进度概览 -->
|
||
<div class="px-5 py-4 bg-white">
|
||
<div class="flex justify-between items-center mb-4">
|
||
<div>
|
||
<h2 class="text-base font-bold">体质测试提升计划</h2>
|
||
<p class="text-xs text-gray-500 mt-1">当前学期：2023-2024学年第一学期</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-gray-500">距离体质测试还有</p>
|
||
<p class="text-base font-bold text-primary">32天</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-light rounded-xl p-3">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<span class="text-sm font-medium">整体提升进度</span>
|
||
<span class="text-sm font-medium">62%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-value bg-primary" style="width: 62%"></div>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-2 mt-3 text-center text-xs">
|
||
<div>
|
||
<p class="text-gray-500">优秀率</p>
|
||
<p class="font-bold text-secondary">28%</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-gray-500">良好率</p>
|
||
<p class="font-bold text-secondary">45%</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-gray-500">待提升</p>
|
||
<p class="font-bold text-warning">27%</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快捷操作 -->
|
||
<div class="px-5 py-3">
|
||
<div class="grid grid-cols-3 gap-3">
|
||
<button class="card flex flex-col items-center justify-center p-3">
|
||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
|
||
<i class="fa fa-plus text-primary"></i>
|
||
</div>
|
||
<span class="text-sm font-medium">布置作业</span>
|
||
</button>
|
||
|
||
<button class="card flex flex-col items-center justify-center p-3">
|
||
<div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
|
||
<i class="fa fa-bar-chart text-secondary"></i>
|
||
</div>
|
||
<span class="text-sm font-medium">查看数据</span>
|
||
</button>
|
||
|
||
<button class="card flex flex-col items-center justify-center p-3">
|
||
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mb-2">
|
||
<i class="fa fa-file-text-o text-accent"></i>
|
||
</div>
|
||
<span class="text-sm font-medium">测试报告</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 家庭打卡任务列表 -->
|
||
<div class="px-5 py-2">
|
||
<div class="flex justify-between items-center mb-3">
|
||
<h3 class="font-bold">家庭打卡任务</h3>
|
||
<button class="text-primary text-sm">查看全部</button>
|
||
</div>
|
||
|
||
<div class="space-y-3 mb-6">
|
||
<!-- 进行中的任务 -->
|
||
<div class="card border-l-4 border-primary">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h4 class="font-medium">每日跳绳练习</h4>
|
||
<p class="text-xs text-gray-500 mt-1">针对：1-6年级 | 提升：协调性、耐力</p>
|
||
</div>
|
||
<span class="badge bg-primary/10 text-primary">进行中</span>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<span class="text-xs text-gray-500">打卡完成率</span>
|
||
<span class="text-xs font-medium">82%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-value bg-primary" style="width: 82%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 flex flex-wrap gap-2">
|
||
<div class="flex items-center gap-1 bg-light px-2 py-1 rounded text-xs">
|
||
<i class="fa fa-calendar-o text-gray-500"></i>
|
||
<span>9.20-10.5</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 bg-light px-2 py-1 rounded text-xs">
|
||
<i class="fa fa-clock-o text-gray-500"></i>
|
||
<span>每天10分钟</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 bg-light px-2 py-1 rounded text-xs">
|
||
<i class="fa fa-users text-gray-500"></i>
|
||
<span>187人参与</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 flex justify-between items-center">
|
||
<button class="text-xs text-gray-500 flex items-center">
|
||
<i class="fa fa-comment-o mr-1"></i> 查看反馈(12)
|
||
</button>
|
||
<button class="text-xs text-primary flex items-center">
|
||
<i class="fa fa-bar-chart mr-1"></i> 查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新发布的任务 -->
|
||
<div class="card border-l-4 border-accent">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h4 class="font-medium">家庭仰卧起坐训练</h4>
|
||
<p class="text-xs text-gray-500 mt-1">针对：4-6年级 | 提升：核心力量</p>
|
||
</div>
|
||
<span class="badge bg-accent/10 text-accent">新发布</span>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<div class="flex justify-between items-center mb-1">
|
||
<span class="text-xs text-gray-500">打卡完成率</span>
|
||
<span class="text-xs font-medium">36%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-value bg-accent" style="width: 36%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 flex flex-wrap gap-2">
|
||
<div class="flex items-center gap-1 bg-light px-2 py-1 rounded text-xs">
|
||
<i class="fa fa-calendar-o text-gray-500"></i>
|
||
<span>9.25-10.10</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 bg-light px-2 py-1 rounded text-xs">
|
||
<i class="fa fa-clock-o text-gray-500"></i>
|
||
<span>每天8分钟</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 bg-light px-2 py-1 rounded text-xs">
|
||
<i class="fa fa-users text-gray-500"></i>
|
||
<span>124人参与</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 flex justify-between items-center">
|
||
<button class="text-xs text-gray-500 flex items-center">
|
||
<i class="fa fa-comment-o mr-1"></i> 查看反馈(5)
|
||
</button>
|
||
<button class="text-xs text-primary flex items-center">
|
||
<i class="fa fa-bar-chart mr-1"></i> 查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 即将开始的任务 -->
|
||
<div class="card border-l-4 border-secondary">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h4 class="font-medium">柔韧性提升训练</h4>
|
||
<p class="text-xs text-gray-500 mt-1">针对：1-6年级 | 提升：坐位体前屈成绩</p>
|
||
</div>
|
||
<span class="badge bg-secondary/10 text-secondary">即将开始</span>
|
||
</div>
|
||
|
||
<div class="mt-3 flex flex-wrap gap-2">
|
||
<div class="flex items-center gap-1 bg-light px-2 py-1 rounded text-xs">
|
||
<i class="fa fa-calendar-o text-gray-500"></i>
|
||
<span>10.6-10.20</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 bg-light px-2 py-1 rounded text-xs">
|
||
<i class="fa fa-clock-o text-gray-500"></i>
|
||
<span>每天5分钟</span>
|
||
</div>
|
||
<div class="flex items-center gap-1 bg-light px-2 py-1 rounded text-xs">
|
||
<i class="fa fa-users text-gray-500"></i>
|
||
<span>187人参与</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 flex justify-end">
|
||
<button class="text-xs text-primary flex items-center">
|
||
<i class="fa fa-pencil mr-1"></i> 编辑任务
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 班级打卡情况 -->
|
||
<div class="px-5 py-2 mb-20">
|
||
<div class="flex justify-between items-center mb-3">
|
||
<h3 class="font-bold">班级打卡情况</h3>
|
||
<button class="text-primary text-sm">全部班级</button>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<div class="card">
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 bg-primary/10 rounded-lg flex items-center justify-center text-primary font-bold">3</div>
|
||
<div>
|
||
<h4 class="font-medium">三年级(1)班</h4>
|
||
<p class="text-xs text-gray-500">32名学生</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-medium">91%</p>
|
||
<p class="text-xs text-secondary">优秀</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 bg-primary/10 rounded-lg flex items-center justify-center text-primary font-bold">4</div>
|
||
<div>
|
||
<h4 class="font-medium">四年级(2)班</h4>
|
||
<p class="text-xs text-gray-500">30名学生</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-medium">85%</p>
|
||
<p class="text-xs text-secondary">良好</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 bg-primary/10 rounded-lg flex items-center justify-center text-primary font-bold">5</div>
|
||
<div>
|
||
<h4 class="font-medium">五年级(3)班</h4>
|
||
<p class="text-xs text-gray-500">29名学生</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-medium">76%</p>
|
||
<p class="text-xs text-accent">一般</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 bg-primary/10 rounded-lg flex items-center justify-center text-primary font-bold">6</div>
|
||
<div>
|
||
<h4 class="font-medium">六年级(1)班</h4>
|
||
<p class="text-xs text-gray-500">31名学生</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm font-medium">68%</p>
|
||
<p class="text-xs text-warning">需关注</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 底部导航 -->
|
||
<footer class="bg-white border-t border-gray-200 py-2 px-4 fixed bottom-0 left-0 right-0 z-10">
|
||
<div class="flex justify-between">
|
||
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-primary">
|
||
<i class="fa fa-home text-lg"></i>
|
||
<span class="text-xs mt-1">首页</span>
|
||
</a>
|
||
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-gray-500">
|
||
<i class="fa fa-tasks text-lg"></i>
|
||
<span class="text-xs mt-1">任务管理</span>
|
||
</a>
|
||
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-gray-500">
|
||
<i class="fa fa-bar-chart text-lg"></i>
|
||
<span class="text-xs mt-1">数据统计</span>
|
||
</a>
|
||
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-gray-500">
|
||
<i class="fa fa-users text-lg"></i>
|
||
<span class="text-xs mt-1">班级管理</span>
|
||
</a>
|
||
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-gray-500">
|
||
<i class="fa fa-cog text-lg"></i>
|
||
<span class="text-xs mt-1">设置</span>
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 布置作业弹窗 (默认隐藏) -->
|
||
<div id="assign-task-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-5 hidden">
|
||
<div class="bg-white rounded-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||
<div class="p-5 border-b border-gray-100 flex justify-between items-center">
|
||
<h3 class="text-lg font-bold">布置家庭打卡任务</h3>
|
||
<button id="close-modal" class="text-gray-400 hover:text-gray-600">
|
||
<i class="fa fa-times text-xl"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="p-5 space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">选择训练项目</label>
|
||
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
|
||
<option>一分钟跳绳 - 提升协调性与耐力</option>
|
||
<option>仰卧起坐 - 提升核心力量</option>
|
||
<option>坐位体前屈 - 提升柔韧性</option>
|
||
<option>家庭趣味跑步 - 提升心肺功能</option>
|
||
<option>平衡练习 - 提升身体协调性</option>
|
||
<option>开合跳 - 提升爆发力</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">适用班级</label>
|
||
<div class="grid grid-cols-3 gap-2">
|
||
<button class="border border-primary bg-primary/5 text-primary py-2 rounded-lg text-sm">1年级</button>
|
||
<button class="border border-gray-200 hover:border-primary py-2 rounded-lg text-sm">2年级</button>
|
||
<button class="border border-gray-200 hover:border-primary py-2 rounded-lg text-sm">3年级</button>
|
||
<button class="border border-gray-200 hover:border-primary py-2 rounded-lg text-sm">4年级</button>
|
||
<button class="border border-gray-200 hover:border-primary py-2 rounded-lg text-sm">5年级</button>
|
||
<button class="border border-gray-200 hover:border-primary py-2 rounded-lg text-sm">6年级</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
|
||
<input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
|
||
<input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">每日训练时长</label>
|
||
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
|
||
<option>5分钟</option>
|
||
<option>10分钟</option>
|
||
<option>15分钟</option>
|
||
<option>20分钟</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">训练要求与指导</label>
|
||
<textarea rows="3" placeholder="请输入具体的训练指导和要求..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"></textarea>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">体质提升目标</label>
|
||
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
|
||
<option>提升10%以上</option>
|
||
<option>提升5-10%</option>
|
||
<option>巩固现有水平</option>
|
||
<option>针对薄弱项提升</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="p-5 border-t border-gray-100 flex gap-3">
|
||
<button id="cancel-task" class="flex-1 py-2.5 border border-gray-300 rounded-lg font-medium text-gray-700">取消</button>
|
||
<button class="flex-1 btn btn-primary">发布打卡任务</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 页面交互逻辑
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 获取元素
|
||
const assignTaskBtn = document.querySelector('.grid .card:first-child');
|
||
const taskModal = document.getElementById('assign-task-modal');
|
||
const closeModal = document.getElementById('close-modal');
|
||
const cancelTask = document.getElementById('cancel-task');
|
||
|
||
// 打开弹窗
|
||
assignTaskBtn.addEventListener('click', function() {
|
||
taskModal.classList.remove('hidden');
|
||
document.body.style.overflow = 'hidden'; // 阻止背景滚动
|
||
});
|
||
|
||
// 关闭弹窗
|
||
function hideModal() {
|
||
taskModal.classList.add('hidden');
|
||
document.body.style.overflow = 'auto'; // 恢复背景滚动
|
||
}
|
||
|
||
closeModal.addEventListener('click', hideModal);
|
||
cancelTask.addEventListener('click', hideModal);
|
||
|
||
// 点击弹窗外部关闭
|
||
taskModal.addEventListener('click', function(e) {
|
||
if (e.target === taskModal) {
|
||
hideModal();
|
||
}
|
||
});
|
||
|
||
// 底部导航切换效果
|
||
const navItems = document.querySelectorAll('footer a');
|
||
navItems.forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
navItems.forEach(nav => nav.classList.remove('text-primary'));
|
||
navItems.forEach(nav => nav.classList.add('text-gray-500'));
|
||
this.classList.remove('text-gray-500');
|
||
this.classList.add('text-primary');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|