r41/upload.html · 约 3152 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<title>上传视频资料</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="wrap">
11<div class="header">
12 <div class="top"><span class="role">讲师端</span><span style="margin-left:auto;font-size:12px;opacity:.85">驰旭教育</span></div>
13 <h1>上传视频资料</h1>
14 <div class="sub">李老师 · 前端工程师全栈实战训练营</div>
15</div>
16<div class="card" style="margin-top:12px;padding:18px 16px;text-align:center">
17 <div style="width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#2563eb,#1e3a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto">⬆️</div>
18 <div style="font-size:15px;font-weight:600;margin-top:12px">拖拽视频到此处，或点击上传</div>
19 <div style="font-size:12px;color:var(--muted);margin-top:6px">支持 MP4 / MOV，单个 ≤ 2GB，建议 1080P</div>
20 <button class="btn" style="margin-top:14px;padding:10px 28px">选择文件</button>
21</div>
22<div class="section-title"><span>上传中</span><span class="more">1 个任务</span></div>
23<div class="card" style="padding:14px 16px">
24 <div class="row" style="border:none;padding:0"><div class="avatar" style="background:linear-gradient(135deg,#06b6d4,#0e7490)">🎬</div><div class="info"><div class="t">9-1 组件通信与状态管理.mp4</div><div class="s">856MB · 上传中 68% · 剩余约 2 分钟</div></div><span class="tag wait">68%</span></div>
25 <div class="player" style="aspect-ratio:auto;height:6px;background:var(--line);border-radius:3px;margin-top:10px;display:block"><i style="display:block;height:100%;width:68%;background:linear-gradient(135deg,#2563eb,#1e3a8a);border-radius:3px"></i></div>
26</div>
27<div class="section-title"><span>课程资料</span><span class="more">已上传 5 个</span></div>
28<div class="list">
29 <div class="row"><div class="avatar" style="background:linear-gradient(135deg,#10b981,#047857)">🎬</div><div class="info"><div class="t">8-3 缺失值处理与数据填充.mp4</div><div class="s">1.2GB · 时长 32:50 · 已发布</div></div><span class="tag ok">已发布</span></div>
30 <div class="row"><div class="avatar" style="background:linear-gradient(135deg,#7c3aed,#5b21b6)">📎</div><div class="info"><div class="t">第 8 章配套源码与数据集.zip</div><div class="s">18MB · 附件资料</div></div><span class="tag blue">附件</span></div>
31 <div class="row"><div class="avatar" style="background:linear-gradient(135deg,#f59e0b,#b45309)">📄</div><div class="info"><div class="t">前端训练营课程大纲.pdf</div><div class="s">2.4MB · 讲义</div></div><span class="tag gray">讲义</span></div>
32</div>
33<div class="bottom-nav"><a class="nav-item active" href="upload.html"><span class="icon">⬆️</span>上传资料</a><a class="nav-item" href="chapters.html"><span class="icon">🗂️</span>章节管理</a></div><div class="safe-bottom"></div>
34</div>
35
36</body>
37</html>