Commit 7f67d0ae authored by Chen Jiping's avatar Chen Jiping

feat:增加学生端样式

parent 3fab72fa
......@@ -96,6 +96,10 @@ body {
cursor: pointer;
}
.speed-active{
color: #2f9228;
}
.progress-div{
position: absolute;
width: 80%;
......@@ -264,4 +268,30 @@ body {
width: 40px;
height: 40px;
display: none;
}
.hello-container {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
display: none;
}
.jinmao-bottom {
position: absolute;
width: 100%;
height: 25%;
bottom: 0px;
background: url(../lib/images/bottom-white.png) no-repeat;
background-size: 100% 100%;
background-position-y: bottom;
}
.jinmao-logo {
position: absolute;
bottom: 14px;
right: 20px;
width: 20%;
}
\ No newline at end of file
......@@ -21,9 +21,9 @@
<span class="title">请同学们根据视频复述课文</span>
</div>
<div class="video-container">
<video id="video" src=""></video>
<video src=""></video>
</div>
<div id='playSpeed' class="play-speed-content">
<div class="play-speed-content">
<p class="speed" style="font-size: 20px; line-height: 40px;">倍数</p>
<p class="speed speed-choice" data-speed="0.75">0.75x</p>
<p class="speed speed-choice" data-speed="1">1x</p>
......@@ -33,7 +33,7 @@
</div>
<div class="progress-div">
<div class="progress-label-left">
<span id="cur-time" class="progress-label ">00:00</span>&nbsp;&nbsp;
<span class="progress-label cur-time">00:00</span>&nbsp;&nbsp;
</div>
<div class="progress my-progress">
<div class="progress-bar my-progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
......@@ -41,7 +41,7 @@
</div>
</div>
<div class=" progress-label-right">
&nbsp;&nbsp;<span id="total-time" class="progress-label">00:00</span>
&nbsp;&nbsp;<span class="progress-label total-time">00:00</span>
</div>
</div>
<div class="video-play-bg">
......@@ -55,6 +55,53 @@
</div>
</div>
<div role="stu" id="stu">
<div id="exercise" style="display: none;">
<div style="position: absolute; top: 25px; left: 10%; z-index: 99;">
<span class="title">请同学们根据视频复述课文</span>
</div>
<div class="video-container">
<video id="video" src=""></video>
</div>
<div class="play-speed-content">
<p class="speed" style="font-size: 20px; line-height: 40px;">倍数</p>
<p class="speed speed-choice" data-speed="0.75">0.75x</p>
<p class="speed speed-choice" data-speed="1">1x</p>
<p class="speed speed-choice" data-speed="1.25">1.25x</p>
<p class="speed speed-choice" data-speed="1.5">1.5x</p>
<p class="speed speed-choice" data-speed="2">2x</p>
</div>
<div class="progress-div">
<div class="progress-label-left">
<span class="progress-label cur-time">00:00</span>&nbsp;&nbsp;
</div>
<div class="progress my-progress">
<div class="progress-bar my-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
<div class=" progress-label-right">
&nbsp;&nbsp;<span class="progress-label total-time">00:00</span>
</div>
</div>
<div class="video-play-bg">
<img src="../lib/images/play-circle.png" id='ani' class="video-play-ani">
<div class="recorder-play-icon">
<div class="control recorder-play">
</div>
<img src="../lib/images/recorder-pasue.png" class="recorder-pause">
</div>
</div>
</div>
<div class="hello-container">
<img id="stuimage" src="" alt="" style="object-fit: cover; width: 100%; height: 100%;">
<div class="jinmao-bottom">
<img class="jinmao-logo" src="../lib/images/logo.png" alt="">
</div>
</div>
</div>
</div>
</body>
<script src="./index.js"></script>
......
......@@ -73,7 +73,19 @@ class PlayView {
$("[role='tea']").show(); // 老师特定的页面
}
else {
$("[role='stu']").show(); // 老师特定的页面
bindRecorderBtn();
bindSpeedBtn();
//$(".hello-container").show();
$("#exercise").show();
// 学生特定的页面
$("[role='stu']").show();
}
if (this.data.video) {
......@@ -84,17 +96,15 @@ class PlayView {
if(video.readyState > 0){
let totalTime = getTimeStr(video.duration);
$("#total-time").empty();
$("#total-time").append(totalTime);
$(".total-time").empty();
$(".total-time").append(totalTime);
}
}, 100);
}
bindRecorderBtn();
bindSpeedBtn();
}
......@@ -178,14 +188,18 @@ function getTimeStr(time) {
function bindSpeedBtn(){
$(".speed-choice").click(function () {
$(".speed-choice").removeClass('speed-active');
$(this).addClass('speed-active');
const video = $("#video")[0];
let speed = $(this).attr('data-speed');
console.log(speed);
if(video){
video.playbackRate = speed;
}
video.play();
});
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment