Commit 3fab72fa authored by liujiangnan's avatar liujiangnan

feat: 布局样式

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