673 lines
21 KiB
HTML
673 lines
21 KiB
HTML
<!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>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
|
||
/* 头部样式 */
|
||
header {
|
||
background-color: #0066cc;
|
||
color: white;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.header-container {
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.logo img {
|
||
height: 40px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
nav ul {
|
||
display: flex;
|
||
list-style: none;
|
||
}
|
||
|
||
nav ul li {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
nav ul li a {
|
||
color: white;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.login-btn {
|
||
background-color: #0099ff;
|
||
border: none;
|
||
color: white;
|
||
padding: 5px 15px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 主内容区样式 */
|
||
.container {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.breadcrumb {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.breadcrumb a {
|
||
color: #666;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.main-content {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
.video-section {
|
||
flex: 2;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.video-header {
|
||
background-color: #f5f5f5;
|
||
padding: 10px 15px;
|
||
border-bottom: 1px solid #eee;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.video-tabs {
|
||
display: flex;
|
||
}
|
||
|
||
.video-tab {
|
||
padding: 5px 15px;
|
||
background-color: white;
|
||
border: 1px solid #ddd;
|
||
margin-right: -1px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.video-tab.active {
|
||
border-top: 2px solid #0066cc;
|
||
border-bottom: none;
|
||
background-color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.video-container {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: 56.25%; /* 16:9 Aspect Ratio */
|
||
background-color: #000;
|
||
}
|
||
|
||
.video-player {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.video-container {
|
||
background-image: url("https://placeholder.co/1280x720/003366/ffffff?text=字幕动画");
|
||
background-size: cover;
|
||
background-position: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.video-controls {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
padding: 10px;
|
||
color: white;
|
||
}
|
||
|
||
.video-progress {
|
||
width: 100%;
|
||
height: 5px;
|
||
background-color: #555;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.progress-bar {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 15%;
|
||
background-color: #0066cc;
|
||
}
|
||
|
||
.video-time {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.video-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.video-button {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.volume-control {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.volume-slider {
|
||
width: 80px;
|
||
}
|
||
|
||
.video-actions {
|
||
display: flex;
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
gap: 15px;
|
||
}
|
||
|
||
.action-button {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
background: none;
|
||
border: none;
|
||
color: #666;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.course-info {
|
||
padding: 20px;
|
||
}
|
||
|
||
.info-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.info-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
padding-bottom: 5px;
|
||
border-bottom: 2px solid #f0f0f0;
|
||
}
|
||
|
||
.info-content {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #666;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.info-label {
|
||
flex: 1;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.info-value {
|
||
flex: 3;
|
||
}
|
||
|
||
/* 侧边栏样式 */
|
||
.sidebar {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.sidebar-card {
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-header {
|
||
background-color: #0066CC;
|
||
padding: 10px 15px;
|
||
border-bottom: 1px solid #eee;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.resource-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.resource-item {
|
||
padding: 10px 15px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.resource-item:hover {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.resource-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.resource-icon {
|
||
color: #0066cc;
|
||
}
|
||
|
||
.resource-arrow {
|
||
color: #ccc;
|
||
}
|
||
|
||
.related-course {
|
||
padding: 15px;
|
||
display: flex;
|
||
gap: 10px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.related-image {
|
||
width: 80px;
|
||
height: 50px;
|
||
background-color: #eee;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.related-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.related-title {
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
color: #333;
|
||
}
|
||
|
||
.related-meta {
|
||
font-size: 12px;
|
||
color: #999;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
/* 页脚样式 */
|
||
footer {
|
||
background-color: #0066cc;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
margin-top: 30px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 课程功能按钮样式 - 与页面风格一致 */
|
||
.button-container {
|
||
padding: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.course-button {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 12px 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
background-color: white;
|
||
color: #333;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
text-align: left;
|
||
width: 100%;
|
||
}
|
||
|
||
.course-button:hover {
|
||
background-color: #f5f5f5;
|
||
border-color: #0066cc;
|
||
box-shadow: 0 2px 4px rgba(0, 102, 204, 0.1);
|
||
}
|
||
|
||
.course-button:active {
|
||
background-color: #e6f2ff;
|
||
}
|
||
|
||
.button-icon {
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
color: #0066cc;
|
||
}
|
||
|
||
.button-text {
|
||
flex: 1;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 不同按钮的个性化样式 */
|
||
.summary-btn:hover .button-icon {
|
||
color: #667eea;
|
||
}
|
||
|
||
.question-btn:hover .button-icon {
|
||
color: #f5576c;
|
||
}
|
||
|
||
.test-btn:hover .button-icon {
|
||
color: #4facfe;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<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>
|
||
|
||
<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>
|
||
</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>
|
||
|
||
<div class="sidebar-card">
|
||
<div class="sidebar-header">
|
||
<span>AI智能学伴</span>
|
||
</div>
|
||
<div class="button-container">
|
||
<button class="course-button summary-btn">
|
||
<span class="button-icon">📋</span>
|
||
<span class="button-text">AI课程总结</span>
|
||
</button>
|
||
<button class="course-button question-btn">
|
||
<span class="button-icon">❓</span>
|
||
<span class="button-text">AI互动答疑</span>
|
||
</button>
|
||
<button class="course-button test-btn">
|
||
<span class="button-icon">📝</span>
|
||
<span class="button-text">AI智能测评</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<div>© 长春云校 版权所有</div>
|
||
</footer>
|
||
<script src="./jquery.min.js"></script>
|
||
<script>
|
||
$(function () {
|
||
$(".summary-btn").click(function () {
|
||
window.open("http://www.hzkjai.com:27002/static/sum/index.html", "_blank");
|
||
});
|
||
|
||
$(".question-btn").click(function () {
|
||
window.open("http://www.hzkjai.com:27002/yx/", "_blank");
|
||
});
|
||
|
||
$(".test-btn").click(function () {
|
||
window.open("./physics_quiz.html", "_blank");
|
||
});
|
||
})
|
||
</script>
|
||
</body>
|
||
</html> |