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
05373ff7
Commit
05373ff7
authored
Aug 05, 2021
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: css布局
parent
a337d733
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
74 additions
and
77 deletions
+74
-77
index.css
play/index.css
+67
-71
index.html
play/index.html
+5
-5
index.js
play/index.js
+2
-1
No files found.
play/index.css
View file @
05373ff7
...
@@ -28,7 +28,7 @@ body {
...
@@ -28,7 +28,7 @@ body {
right
:
0px
;
right
:
0px
;
bottom
:
0px
;
bottom
:
0px
;
background
:
#f1e4c2
;
background
:
#f1e4c2
;
min-width
:
960px
;
/* min-width: 960px; */
}
}
#tea
{
#tea
{
...
@@ -82,30 +82,30 @@ body {
...
@@ -82,30 +82,30 @@ body {
top
:
14%
;
top
:
14%
;
overflow
:
hidden
;
overflow
:
hidden
;
background
:
#f1e4c2
;
background
:
#f1e4c2
;
padding
:
10px
;
padding
:
0.1rem
;
}
}
.play-speed-content
{
.play-speed-content
{
position
:
absolute
;
position
:
absolute
;
width
:
70px
;
width
:
1.5rem
;
top
:
20%
;
top
:
20%
;
right
:
8
%
;
right
:
6
%
;
padding-bottom
:
15px
;
padding-bottom
:
0.3rem
;
background
:
#f7f2e4
;
background
:
#f7f2e4
;
border-radius
:
40px
;
border-radius
:
0.80rem
;
}
}
.speed
{
.speed
{
object-fit
:
contain
;
object-fit
:
contain
;
font-family
:
Arial
;
font-family
:
Arial
;
font-size
:
15px
;
font-size
:
0.3rem
;
font-weight
:
normal
;
font-weight
:
normal
;
font-stretch
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
font-style
:
normal
;
line-height
:
normal
;
line-height
:
normal
;
letter-spacing
:
normal
;
letter-spacing
:
normal
;
text-align
:
center
;
text-align
:
center
;
margin-top
:
15px
;
margin-top
:
0.3rem
;
color
:
#b17d5a
;
color
:
#b17d5a
;
}
}
...
@@ -120,15 +120,15 @@ body {
...
@@ -120,15 +120,15 @@ body {
.progress-div
{
.progress-div
{
position
:
absolute
;
position
:
absolute
;
width
:
8
0%
;
width
:
9
0%
;
bottom
:
28%
;
bottom
:
28%
;
left
:
10
%
;
left
:
5
%
;
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
}
}
.progress-label
{
.progress-label
{
font-size
:
16px
;
font-size
:
0.16rem
;
font-weight
:
normal
;
font-weight
:
normal
;
font-stretch
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
font-style
:
normal
;
...
@@ -153,11 +153,11 @@ body {
...
@@ -153,11 +153,11 @@ body {
.my-progress
{
.my-progress
{
margin-bottom
:
0px
!important
;
margin-bottom
:
0px
!important
;
float
:
left
;
float
:
left
;
height
:
10px
;
height
:
0.15rem
;
width
:
9
0%
;
width
:
10
0%
;
overflow
:
hidden
;
overflow
:
hidden
;
background-color
:
#ebe0c0
;
background-color
:
#ebe0c0
;
border-radius
:
4px
;
border-radius
:
0.15rem
;
}
}
.my-progress-bar
{
.my-progress-bar
{
...
@@ -171,11 +171,11 @@ body {
...
@@ -171,11 +171,11 @@ body {
}
}
.back
{
.back
{
width
:
300px
;
width
:
2.4rem
;
height
:
1
40px
;
height
:
1
.4rem
;
position
:
absolute
;
position
:
absolute
;
bottom
:
7%
;
bottom
:
1.1rem
;
left
:
8%
left
:
5%
;
}
}
.video
{
.video
{
...
@@ -184,17 +184,17 @@ body {
...
@@ -184,17 +184,17 @@ body {
}
}
.video-play-bg
{
.video-play-bg
{
width
:
140px
;
width
:
2.8rem
;
height
:
140px
;
height
:
2.8rem
;
position
:
absolute
;
position
:
absolute
;
bottom
:
10px
;
bottom
:
0.4rem
;
left
:
50%
;
left
:
50%
;
transform
:
translateX
(
-
70px
);
transform
:
translateX
(
-
1.4rem
);
}
}
.video-play-ani
{
.video-play-ani
{
width
:
140px
;
width
:
2.8rem
;
height
:
140px
;
height
:
2.8rem
;
display
:
none
;
display
:
none
;
animation
:
talking
3s
infinite
;
animation
:
talking
3s
infinite
;
}
}
...
@@ -252,45 +252,46 @@ body {
...
@@ -252,45 +252,46 @@ body {
.recorder-tips
{
.recorder-tips
{
position
:
absolute
;
position
:
absolute
;
width
:
310%
;
width
:
7rem
;
height
:
1
00px
;
height
:
1
.5rem
;
background
:
#3e9e33
;
background
:
#3e9e33
;
border-radius
:
15px
;
border-radius
:
0.15rem
;
text-align
:
center
;
text-align
:
center
;
color
:
#fff
;
color
:
#fff
;
line-height
:
100px
;
line-height
:
1.5rem
;
font-size
:
25px
;
font-size
:
0.4rem
;
top
:
-100px
;
top
:
-1.45rem
;
left
:
-105%
;
left
:
-50%
;
transform
:
translate
(
-0.7rem
);
}
}
.triangle-down
{
.triangle-down
{
width
:
0
;
width
:
0
;
height
:
0
;
height
:
0
;
border-left
:
20px
solid
transparent
;
border-left
:
0.2rem
solid
transparent
;
border-right
:
20px
solid
transparent
;
border-right
:
0.2rem
solid
transparent
;
border-top
:
40px
solid
#3e9e33
;
border-top
:
0.4rem
solid
#3e9e33
;
position
:
absolute
;
position
:
absolute
;
left
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
);
transform
:
translate
(
-50%
);
bottom
:
-
18px
;
bottom
:
-
0.35rem
;
}
}
.recorder-play-icon
{
.recorder-play-icon
{
width
:
100px
;
width
:
2rem
;
height
:
100px
;
height
:
2rem
;
border
:
solid
8px
#b17d5a
;
border
:
solid
0.16rem
#b17d5a
;
background
:
#e7cc97
;
background
:
#e7cc97
;
border-radius
:
100%
;
border-radius
:
100%
;
position
:
absolute
;
position
:
absolute
;
bottom
:
20px
;
bottom
:
0.4rem
;
left
:
20px
;
left
:
0.4rem
;
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
:
0
px
33px
33px
-25px
#ffa060
;
box-shadow
:
0
rem
0.33rem
0.33rem
-0.25rem
#ffa060
;
}
}
.recorder-btn
{
.recorder-btn
{
...
@@ -313,18 +314,15 @@ body {
...
@@ -313,18 +314,15 @@ body {
}
}
.recorder-play
{
.recorder-play
{
width
:
40px
;
width
:
0.80rem
;
height
:
40px
;
height
:
0.80rem
;
border
:
solid
8px
#fff
;
border-radius
:
100%
;
border-radius
:
100%
;
background
:
#fff
;
background
:
#fff
;
margin-top
:
30px
solid
transparent
;
margin-bottom
:
30px
solid
transparent
;
}
}
.recorder-pause
{
.recorder-pause
{
width
:
40px
;
width
:
0.8rem
;
height
:
40px
;
height
:
0.8rem
;
display
:
none
;
display
:
none
;
}
}
...
@@ -356,9 +354,9 @@ body {
...
@@ -356,9 +354,9 @@ body {
}
}
.my-btn
{
.my-btn
{
border
:
solid
6px
#b17d5a
;
border
:
solid
0.12rem
#b17d5a
;
background
:
#e7cc97
;
background
:
#e7cc97
;
border-radius
:
21px
;
border-radius
:
0.4rem
;
color
:
#fff
;
color
:
#fff
;
cursor
:
pointer
;
cursor
:
pointer
;
}
}
...
@@ -378,44 +376,42 @@ body {
...
@@ -378,44 +376,42 @@ body {
.back-btn
{
.back-btn
{
text-align
:
center
;
text-align
:
center
;
height
:
65px
;
height
:
1.3rem
;
line-height
:
55px
;
width
:
2.4rem
;
width
:
120px
;
font-size
:
0.6rem
;
font-size
:
30px
;
font-weight
:
bold
;
font-weight
:
bold
;
position
:
absolute
;
position
:
absolute
;
left
:
9%
;
box-shadow
:
0rem
0.34rem
0.17rem
-0.25rem
#e7cc97
;
bottom
:
7%
;
box-shadow
:
0px
34px
17px
-25px
#e7cc97
;
display
:
none
;
display
:
none
;
}
}
.submit-btn
{
.submit-btn
{
text-align
:
center
;
text-align
:
center
;
height
:
65px
;
height
:
1.3rem
;
line-height
:
55px
;
line-height
:
1.1rem
;
width
:
240px
;
width
:
4.8rem
;
font-size
:
30px
;
font-size
:
0.6rem
;
font-weight
:
bold
;
font-weight
:
bold
;
position
:
absolute
;
position
:
absolute
;
right
:
10
%
;
right
:
5
%
;
bottom
:
7%
;
bottom
:
1.1rem
;
box-shadow
:
0
px
34px
17px
-25px
#e7cc97
;
box-shadow
:
0
rem
0.34rem
0.17rem
-0.25rem
#e7cc97
;
display
:
none
;
display
:
none
;
}
}
.back-tips
{
.back-tips
{
position
:
absolute
;
position
:
absolute
;
width
:
130%
;
width
:
7rem
;
height
:
1
00px
;
height
:
1
.5rem
;
background
:
#3e9e33
;
background
:
#3e9e33
;
border-radius
:
15px
;
border-radius
:
0.15rem
;
text-align
:
center
;
text-align
:
center
;
color
:
#fff
;
color
:
#fff
;
line-height
:
100px
;
line-height
:
1.5rem
;
font-size
:
25px
;
font-size
:
0.4rem
;
bottom
:
68%
;
top
:
-1.85rem
;
left
:
-10%
;
left
:
-50%
;
transform
:
translate
(
0.4rem
);
}
}
...
...
play/index.html
View file @
05373ff7
...
@@ -21,7 +21,7 @@
...
@@ -21,7 +21,7 @@
<body>
<body>
<div
class=
"content"
>
<div
class=
"content"
>
<input
type=
"hidden"
id=
'keyWord'
>
<input
type=
"hidden"
id=
'keyWord'
>
<div
style=
"position: absolute; top:
25px
; left: 10%; z-index: 99;"
>
<div
style=
"position: absolute; top:
0.25rem
; left: 10%; z-index: 99;"
>
<span
class=
"title"
>
请同学们根据视频复述课文
</span>
<span
class=
"title"
>
请同学们根据视频复述课文
</span>
</div>
</div>
<div
role=
"tea"
id=
"tea"
>
<div
role=
"tea"
id=
"tea"
>
...
@@ -30,7 +30,7 @@
...
@@ -30,7 +30,7 @@
<video
class=
"video"
src=
""
></video>
<video
class=
"video"
src=
""
></video>
</div>
</div>
<div
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:
0.4rem; line-height: 0.7rem
;"
>
倍数
</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>
<p
class=
"speed speed-choice"
data-speed=
"1.25"
>
1.25x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1.25"
>
1.25x
</p>
...
@@ -51,7 +51,7 @@
...
@@ -51,7 +51,7 @@
</div>
</div>
</div>
</div>
<div
class=
"video-play-bg"
>
<div
class=
"video-play-bg"
>
<img
src=
"../lib/images/play-circle.png"
id=
'ani'
class=
"video-play-ani"
>
<img
src=
"../lib/images/play-circle.png"
class=
"video-play-ani"
>
<div
class=
"recorder-play-icon"
>
<div
class=
"recorder-play-icon"
>
<div
class=
"control recorder-play"
>
<div
class=
"control recorder-play"
>
...
@@ -71,7 +71,7 @@
...
@@ -71,7 +71,7 @@
<video
id=
"video"
class=
"video"
src=
""
muted
></video>
<video
id=
"video"
class=
"video"
src=
""
muted
></video>
</div>
</div>
<div
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:
0.4rem; line-height: 0.7rem
;"
>
倍数
</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>
<p
class=
"speed speed-choice"
data-speed=
"1.25"
>
1.25x
</p>
<p
class=
"speed speed-choice"
data-speed=
"1.25"
>
1.25x
</p>
...
...
play/index.js
View file @
05373ff7
...
@@ -476,8 +476,8 @@ function bindRecorderBtn() {
...
@@ -476,8 +476,8 @@ function bindRecorderBtn() {
//隐藏按钮
//隐藏按钮
$
(
"
#backBtn
"
).
hide
();
$
(
"
#backBtn
"
).
hide
();
$
(
"
.back-tips
"
).
hide
();
$
(
"
.back-tips
"
).
hide
();
$
(
"
#ani
"
).
show
();
//获取临时进度条的进度
//获取临时进度条的进度
let
tempProgressValue
=
$
(
"
#tempProgressbar
"
).
attr
(
"
data-value
"
);
let
tempProgressValue
=
$
(
"
#tempProgressbar
"
).
attr
(
"
data-value
"
);
...
@@ -514,6 +514,7 @@ function bindRecorderBtn() {
...
@@ -514,6 +514,7 @@ function bindRecorderBtn() {
cw
.
startRecord
(
keyWord
);
cw
.
startRecord
(
keyWord
);
}
else
{
}
else
{
$
(
"
#ani
"
).
hide
();
$
(
"
.recorder-play-icon .recorder-pause
"
).
hide
();
$
(
"
.recorder-play-icon .recorder-pause
"
).
hide
();
control
.
addClass
(
"
recorder-play
"
);
control
.
addClass
(
"
recorder-play
"
);
...
...
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