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

feat:增加学生端样式

parent 3fab72fa
...@@ -96,6 +96,10 @@ body { ...@@ -96,6 +96,10 @@ body {
cursor: pointer; cursor: pointer;
} }
.speed-active{
color: #2f9228;
}
.progress-div{ .progress-div{
position: absolute; position: absolute;
width: 80%; width: 80%;
...@@ -265,3 +269,29 @@ body { ...@@ -265,3 +269,29 @@ body {
height: 40px; height: 40px;
display: none; 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 @@ ...@@ -21,9 +21,9 @@
<span class="title">请同学们根据视频复述课文</span> <span class="title">请同学们根据视频复述课文</span>
</div> </div>
<div class="video-container"> <div class="video-container">
<video id="video" src=""></video> <video src=""></video>
</div> </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" 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="0.75">0.75x</p>
<p class="speed speed-choice" data-speed="1">1x</p> <p class="speed speed-choice" data-speed="1">1x</p>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
<div class="progress-div"> <div class="progress-div">
<div class="progress-label-left"> <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>
<div class="progress my-progress"> <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%;"> <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 @@ ...@@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<div class=" progress-label-right"> <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> </div>
<div class="video-play-bg"> <div class="video-play-bg">
...@@ -55,6 +55,53 @@ ...@@ -55,6 +55,53 @@
</div> </div>
</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> </div>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
......
...@@ -73,7 +73,19 @@ class PlayView { ...@@ -73,7 +73,19 @@ class PlayView {
$("[role='tea']").show(); // 老师特定的页面 $("[role='tea']").show(); // 老师特定的页面
} }
else { else {
$("[role='stu']").show(); // 老师特定的页面
bindRecorderBtn();
bindSpeedBtn();
//$(".hello-container").show();
$("#exercise").show();
// 学生特定的页面
$("[role='stu']").show();
} }
if (this.data.video) { if (this.data.video) {
...@@ -84,17 +96,15 @@ class PlayView { ...@@ -84,17 +96,15 @@ class PlayView {
if(video.readyState > 0){ if(video.readyState > 0){
let totalTime = getTimeStr(video.duration); let totalTime = getTimeStr(video.duration);
$("#total-time").empty(); $(".total-time").empty();
$("#total-time").append(totalTime); $(".total-time").append(totalTime);
} }
}, 100); }, 100);
} }
bindRecorderBtn();
bindSpeedBtn();
} }
...@@ -178,14 +188,18 @@ function getTimeStr(time) { ...@@ -178,14 +188,18 @@ function getTimeStr(time) {
function bindSpeedBtn(){ function bindSpeedBtn(){
$(".speed-choice").click(function () { $(".speed-choice").click(function () {
$(".speed-choice").removeClass('speed-active');
$(this).addClass('speed-active');
const video = $("#video")[0]; const video = $("#video")[0];
let speed = $(this).attr('data-speed'); let speed = $(this).attr('data-speed');
console.log(speed);
if(video){ if(video){
video.playbackRate = speed; 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