Commit 3fab72fa authored by liujiangnan's avatar liujiangnan

feat: 布局样式

parent 7b2109c6
......@@ -37,7 +37,7 @@ body {
.title{
object-fit: contain;
font-family: PingFangSC;
font-size: 48px;
font-size: 42px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
......@@ -58,18 +58,20 @@ body {
.video-container {
position: relative;
width: 96%;
height: 100%;
left: 2%;
width: 60%;
height: 50%;
left: 20%;
top: 14%;
overflow: hidden;
background: #f1e4c2;
padding: 10px;
}
.play-speed-content {
position: absolute;
width: 70px;
top: 20%;
right: -20%;
right: 8%;
padding-bottom: 15px;
background: #f7f2e4;
border-radius: 40px;
......@@ -95,16 +97,16 @@ body {
}
.progress-div{
position: relative;
position: absolute;
width: 80%;
height: 30%;
top: 10%;
left: 10%;
justify-content:center;
bottom: 28%;
left: 10%;
display: flex;
align-items: center;
}
.progress-label{
font-size: 10px;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
......@@ -127,6 +129,7 @@ body {
}
.my-progress{
margin-bottom: 0px !important;
float: left;
height: 10px;
width: 90%;
......@@ -150,16 +153,20 @@ body {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -70px;
transform: translateX(-70px);
}
.video-play-ani{
width: 140px;
height: 140px;
position: absolute;
left: 50%;
margin-left: -70px;
display: none;
animation: talking 3s infinite;
}
@keyframes talking {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.video-play-icon{
......@@ -203,6 +210,10 @@ body {
animation: press .1s forwards;
}
@keyframes press {
100% { box-shadow: 0px 0px 0px 0px #e7cc97; transform: scale(.99, .99); }
}
.recorder-play-icon{
width: 100px;
height: 100px;
......@@ -210,13 +221,14 @@ body {
background: #e7cc97;
border-radius: 100%;
position: absolute;
bottom: 8%;
left: 5%;
bottom: 20px;
left: 20px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 33px 33px -25px #ffa060;
}
.recorder-btn {
......
......@@ -17,23 +17,23 @@
<body>
<div class="content">
<div role="tea" id="tea">
<div style="margin-top: 25px;margin-left: 203px;"><span class="title">请同学们根据视频复述课文</span></div>
<div class="dialog-content">
<div class="video-container">
<video id="video" src=""></video>
</div>
<div id='playSpeed' 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 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 id='playSpeed' 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 id="cur-time" class="progress-label ">00:00</span>
<span id="cur-time" class="progress-label ">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">
<span id="total-time" class="progress-label">00:00</span>
&nbsp;&nbsp;<span id="total-time" class="progress-label">00:00</span>
</div>
</div>
<div class="video-play-bg">
......
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