This commit is contained in:
2025-08-28 07:43:19 +08:00
parent 12a7e08e22
commit 7fc85590e1

View File

@@ -97,7 +97,7 @@
background-color: white;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.video-header {
@@ -143,7 +143,9 @@
width: 100%;
height: 100%;
}
background-image: url('https://placehold.co/1280x720/003366/ffffff?text=宇宙动画视频');
.video-container {
background-image: url("https://placeholder.co/1280x720/003366/ffffff?text=字幕动画");
background-size: cover;
background-position: center;
display: flex;
@@ -156,7 +158,7 @@
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.7);
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
color: white;
}
@@ -274,7 +276,7 @@
.sidebar-card {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
@@ -365,222 +367,228 @@
</style>
</head>
<body>
<header>
<div class="header-container">
<div class="logo">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMTkuNS0xODguN2MtOS44IDAtMTguMiA0LjEtMjMuNiAxMC45TDIzMiAyNDkuM2wtNzMuOS00NS42Yy01LjQtNi44LTE0LjctMTAuOS0yNC41LTEwLjktMjAuMiAwLTM2LjggMTYuNi0zNi44IDM2Ljh2MzE1LjhjMCAyMC4yIDE2LjYgMzYuOCAzNi44IDM2LjhoMTkyLjFjMjAuMiAwIDM2LjgtMTYuNiAzNi44LTM2LjhWMTkwLjhjMC0yMC4yLTE2LjYtMzYuOC0zNi44LTM2Ljh6Ii8+PC9zdmc+" alt="Logo">
长春云校
<header>
<div class="header-container">
<div class="logo">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMTkuNS0xODguN2MtOS44IDAtMTguMiA0LjEtMjMuNiAxMC45TDIzMiAyNDkuM2wtNzMuOS00NS42Yy01LjQtNi44LTE0LjctMTAuOS0yNC41LTEwLjktMjAuMiAwLTM2LjggMTYuNi0zNi44IDM2Ljh2MzE1LjhjMCAyMC4yIDE2LjYgMzYuOCAzNi44IDM2LjhoMTkyLjFjMjAuMiAwIDM2LjgtMTYuNiAzNi44LTM2LjhWMTkwLjhjMC0yMC4yLTE2LjYtMzYuOC0zNi44LTM2Ljh6Ii8+PC9zdmc+"
alt="Logo">
长春云校
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">智慧学习</a></li>
<li><a href="#">智慧成长</a></li>
<li><a href="#">智慧测评</a></li>
<li><a href="#">智慧研修</a></li>
<li><a href="#">名校专区</a></li>
<li><a href="#">虚拟仿真工具</a></li>
<li>
<button class="login-btn">登录</button>
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="breadcrumb">
<a href="#">返回</a> > <a href="#">智慧学习</a> > <a href="#">课程详情</a>
</div>
<div class="main-content">
<div class="video-section">
<div class="video-header">
<div class="video-tabs">
<div class="video-tab active">周末直播(下学期)</div>
<div class="video-tab">名师课堂—高一优</div>
</div>
<div class="download-link">
<a href="#" style="font-size: 14px; color: #0066cc;">下载视频资源</a>
</div>
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">智慧学习</a></li>
<li><a href="#">智慧成长</a></li>
<li><a href="#">智慧测评</a></li>
<li><a href="#">智慧研修</a></li>
<li><a href="#">名校专区</a></li>
<li><a href="#">虚拟仿真工具</a></li>
<li><button class="login-btn">登录</button></li>
<div class="video-container">
<div class="video-player">
<video width="100%" height="100%" controls>
<source src="https://ccschool.edusoa.com/cloud_file/project/ccyx-0012/material/3f/4e/3f4eaf1d315a94a84e48c91580581001.mp4"
type="video/mp4">
您的浏览器不支持HTML5视频播放。
</video>
</div>
<div class="video-controls">
<div class="video-progress">
<div class="progress-bar"></div>
</div>
<div class="video-time">
<div class="video-buttons">
<button class="video-button"></button>
<span>00:00/02:24:18</span>
<button class="video-button">🔊</button>
<div class="volume-control">
<input type="range" class="volume-slider" min="0" max="100" value="70">
</div>
</div>
<div>
<button class="video-button">📝 随堂笔记</button>
</div>
</div>
</div>
</div>
<div class="video-actions">
<button class="action-button">⭐ 评分</button>
<button class="action-button">👍 点赞</button>
<button class="action-button">⭐ 收藏</button>
<button class="action-button">📝 记笔记</button>
</div>
<div class="course-info">
<div class="info-section">
<div class="info-title">学习目标</div>
<div class="info-content">
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
<span style="background-color: #e6f2ff; color: #0066cc; padding: 3px 10px; border-radius: 12px; font-size: 12px;">00:00-00:02</span>
<span style="background-color: #e6f2ff; color: #0066cc; padding: 3px 10px; border-radius: 12px; font-size: 12px;">知识脉络</span>
<span style="background-color: #e6f2ff; color: #0066cc; padding: 3px 10px; border-radius: 12px; font-size: 12px;">典例分析</span>
</div>
</div>
</div>
<div class="info-section">
<div class="info-title">课程信息</div>
<div class="info-content">
<div class="info-row">
<div class="info-label">适用年级:</div>
<div class="info-value">高中 · 物理 | 人教版(新)· 必修第二册;</div>
</div>
<div class="info-row">
<div class="info-label">教材章节:</div>
<div class="info-value">第七章 万有引力与宇宙航行2·万有引力定律</div>
</div>
<div class="info-row">
<div class="info-label">学科素养:</div>
<div class="info-value">暂无数据</div>
</div>
<div class="info-row">
<div class="info-label">知识点:</div>
<div class="info-value">经典力学的成就与局限性·万有引力定律;</div>
</div>
</div>
</div>
<div class="info-section">
<div class="info-title">课程介绍</div>
<div class="info-content">
<p>
1.万有引力定律作为高中最重要的规律,规律本身的推导以物理观念考查为基础,重点考查运动观以及正确使用物理思维方法。</p>
<p>
2.考查学生应用牛顿第三定律和开普勒第三定律相关知识解决问题的能力。3.万有引力定律的推导形式常常突出对学生的"理解能力"和"综合分析能力",同时还要让学生体会"物理学科对科技影响"的科学精神。</p>
</div>
</div>
<div class="info-section">
<div class="info-title">教师信息</div>
<div class="info-content">
<div class="info-row">
<div class="info-label">姓名:</div>
<div class="info-value">胡明浩</div>
</div>
<div class="info-row">
<div class="info-label">学校:</div>
<div class="info-value">长春市第二实验中学</div>
</div>
<div class="info-row">
<div class="info-label">简介:</div>
<div class="info-value">暂无简介</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar">
<div class="sidebar-card">
<div class="sidebar-header">
<span>课程资源</span>
<span></span>
</div>
<ul class="resource-list">
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon"></span>
视频课程
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📄</span>
《万有引力定律》
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📑</span>
课件
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📋</span>
教学设计
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon"></span>
任务单
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📝</span>
作业与习题
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📎</span>
其他
</div>
<div class="resource-arrow"></div>
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="breadcrumb">
<a href="#">返回</a> > <a href="#">智慧学习</a> > <a href="#">课程详情</a>
</div>
<div class="main-content">
<div class="video-section">
<div class="video-header">
<div class="video-tabs">
<div class="video-tab active">周末直播(下学期)</div>
<div class="video-tab">名师课堂—高一优</div>
</div>
<div class="download-link">
<a href="#" style="font-size: 14px; color: #0066cc;">下载视频资源</a>
</div>
</div>
<div class="video-container">
<div class="video-player">
<video width="100%" height="100%" controls>
<source src="https://ccschool.edusoa.com/cloud_file/project/ccyx-0012/material/3f/4e/3f4eaf1d315a94a84e48c91580581001.mp4" type="video/mp4">
您的浏览器不支持HTML5视频播放。
</video>
</div>
<div class="video-controls">
<div class="video-progress">
<div class="progress-bar"></div>
</div>
<div class="video-time">
<div class="video-buttons">
<button class="video-button"></button>
<span>00:00/02:24:18</span>
<button class="video-button">🔊</button>
<div class="volume-control">
<input type="range" class="volume-slider" min="0" max="100" value="70">
</div>
</div>
<div>
<button class="video-button">📝 随堂笔记</button>
</div>
</div>
</div>
</div>
<div class="video-actions">
<button class="action-button">⭐ 评分</button>
<button class="action-button">👍 点赞</button>
<button class="action-button">⭐ 收藏</button>
<button class="action-button">📝 记笔记</button>
</div>
<div class="course-info">
<div class="info-section">
<div class="info-title">学习目标</div>
<div class="info-content">
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
<span style="background-color: #e6f2ff; color: #0066cc; padding: 3px 10px; border-radius: 12px; font-size: 12px;">00:00-00:02</span>
<span style="background-color: #e6f2ff; color: #0066cc; padding: 3px 10px; border-radius: 12px; font-size: 12px;">知识脉络</span>
<span style="background-color: #e6f2ff; color: #0066cc; padding: 3px 10px; border-radius: 12px; font-size: 12px;">典例分析</span>
</div>
</div>
</div>
<div class="info-section">
<div class="info-title">课程信息</div>
<div class="info-content">
<div class="info-row">
<div class="info-label">适用年级:</div>
<div class="info-value">高中 · 物理 | 人教版(新)· 必修第二册;</div>
</div>
<div class="info-row">
<div class="info-label">教材章节:</div>
<div class="info-value">第七章 万有引力与宇宙航行2·万有引力定律</div>
</div>
<div class="info-row">
<div class="info-label">学科素养:</div>
<div class="info-value">暂无数据</div>
</div>
<div class="info-row">
<div class="info-label">知识点:</div>
<div class="info-value">经典力学的成就与局限性·万有引力定律;</div>
</div>
</div>
</div>
<div class="info-section">
<div class="info-title">课程介绍</div>
<div class="info-content">
<p>1.万有引力定律作为高中最重要的规律,规律本身的推导以物理观念考查为基础,重点考查运动观以及正确使用物理思维方法。</p>
<p>2.考查学生应用牛顿第三定律和开普勒第三定律相关知识解决问题的能力。3.万有引力定律的推导形式常常突出对学生的"理解能力"和"综合分析能力",同时还要让学生体会"物理学科对科技影响"的科学精神。</p>
</div>
</div>
<div class="info-section">
<div class="info-title">教师信息</div>
<div class="info-content">
<div class="info-row">
<div class="info-label">姓名:</div>
<div class="info-value">胡明浩</div>
</div>
<div class="info-row">
<div class="info-label">学校:</div>
<div class="info-value">长春市第二实验中学</div>
</div>
<div class="info-row">
<div class="info-label">简介:</div>
<div class="info-value">暂无简介</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar">
<div class="sidebar-card">
<div class="sidebar-header">
<span>课程资源</span>
<span></span>
</div>
<ul class="resource-list">
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon"></span>
视频课程
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📄</span>
《万有引力定律》
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📑</span>
课件
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📋</span>
教学设计
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon"></span>
任务单
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📝</span>
作业与习题
</div>
<div class="resource-arrow"></div>
</li>
<li class="resource-item">
<div class="resource-name">
<span class="resource-icon">📎</span>
其他
</div>
<div class="resource-arrow"></div>
</li>
</ul>
<div class="sidebar-card">
<div class="sidebar-header">
<span>相关推荐</span>
<span></span>
</div>
<div class="sidebar-card">
<div class="sidebar-header">
<span>相关推荐</span>
<span></span>
</div>
<div class="related-course">
<div class="related-image"></div>
<div class="related-info">
<div class="related-title">《万有引力理论的成就》</div>
<div class="related-meta">
<span>《万有引力理论的成就》</span>
<span>胡明浩</span>
<span>👍 0</span>
</div>
<div class="related-course">
<div class="related-image"></div>
<div class="related-info">
<div class="related-title">《万有引力理论的成就》</div>
<div class="related-meta">
<span>《万有引力理论的成就》</span>
<span>胡明浩</span>
<span>👍 0</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>© 长春云校 版权所有</div>
</footer>
<footer>
<div>© 长春云校 版权所有</div>
</footer>
</body>
</html>