Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
JM-07
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
JM-07
Commits
3fab72fa
Commit
3fab72fa
authored
Jul 26, 2021
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 布局样式
parent
7b2109c6
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
44 additions
and
32 deletions
+44
-32
index.css
play/index.css
+29
-17
index.html
play/index.html
+15
-15
No files found.
play/index.css
View file @
3fab72fa
...
...
@@ -37,7 +37,7 @@ body {
.title
{
object-fit
:
contain
;
font-family
:
PingFangSC
;
font-size
:
4
8
px
;
font-size
:
4
2
px
;
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
:
relativ
e
;
position
:
absolut
e
;
width
:
80%
;
height
:
30
%
;
top
:
10%
;
left
:
10%
;
justify-content
:
center
;
bottom
:
28
%
;
left
:
10%
;
display
:
flex
;
align-items
:
center
;
}
.progress-label
{
font-size
:
1
0
px
;
font-size
:
1
6
px
;
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
{
...
...
play/index.html
View file @
3fab72fa
...
...
@@ -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"
>
1
x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1.25"
>
1.25
x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1.5"
>
1.
5x
</p>
<p
class=
"speed speed-choice"
data-speed=
"2"
>
2
x
</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.75
x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1"
>
1
x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1.25"
>
1.2
5x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1.5"
>
1.5
x
</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>
</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>
<span
id=
"total-time"
class=
"progress-label"
>
00:00
</span>
</div>
</div>
<div
class=
"video-play-bg"
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment