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
ad536469
Commit
ad536469
authored
Aug 04, 2021
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix:修改样式
parent
e4057a36
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
93 additions
and
69 deletions
+93
-69
index.css
play/index.css
+42
-33
index.html
play/index.html
+21
-22
index.js
play/index.js
+30
-14
No files found.
play/index.css
View file @
ad536469
...
...
@@ -55,7 +55,7 @@ body {
.title
{
object-fit
:
contain
;
font-family
:
Aileron-Black
;
font-size
:
42px
;
font-size
:
1rem
;
font-weight
:
600
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -170,6 +170,14 @@ body {
transition
:
width
0s
ease
;
}
.back
{
width
:
300px
;
height
:
140px
;
position
:
absolute
;
bottom
:
7%
;
left
:
8%
}
.video
{
width
:
100%
;
height
:
100%
;
...
...
@@ -398,7 +406,7 @@ body {
.back-tips
{
position
:
absolute
;
width
:
25
%
;
width
:
130
%
;
height
:
100px
;
background
:
#3e9e33
;
border-radius
:
15px
;
...
...
@@ -406,8 +414,8 @@ body {
color
:
#fff
;
line-height
:
100px
;
font-size
:
25px
;
bottom
:
16
%
;
left
:
4
%
;
bottom
:
68
%
;
left
:
-10
%
;
}
...
...
@@ -431,15 +439,16 @@ body {
}
.clip
{
position
:
absolute
;
left
:
17%
;
margin-top
:
-51px
;
position
:
relative
;
width
:
70%
;
left
:
15%
;
margin-top
:
-1rem
;
}
.submit
{
position
:
absolute
;
font-family
:
Aileron-Black
;
font-size
:
52px
;
font-size
:
1.2rem
;
font-weight
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -447,13 +456,13 @@ body {
letter-spacing
:
normal
;
text-align
:
center
;
color
:
#ffffff
;
margin-left
:
4
3
%
;
margin-left
:
4
0
%
;
z-index
:
1
;
}
.warning
{
font-family
:
Aileron-Bold
;
font-size
:
48px
;
font-size
:
1.2rem
;
font-weight
:
600
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -461,26 +470,26 @@ body {
letter-spacing
:
normal
;
color
:
#ffffff
;
text-align
:
center
;
margin-top
:
40px
;
margin-top
:
0.2rem
;
}
.my-btn2
{
border-radius
:
20px
;
border-radius
:
0.7rem
;
background-color
:
#f1e4c2
;
width
:
300px
;
height
:
80px
;
width
:
7.0rem
;
height
:
1.6rem
;
font-family
:
Aileron-Black
;
font-size
:
40px
;
font-size
:
0.8rem
;
font-weight
:
600
;
font-stretch
:
normal
;
font-style
:
normal
;
line-height
:
80px
;
line-height
:
1.65rem
;
letter-spacing
:
normal
;
text-align
:
center
;
color
:
#3e9e33
;
cursor
:
pointer
;
box-shadow
:
0px
5px
12px
5px
#0a6500
;
margin-left
:
25
%
;
margin-left
:
19
%
;
}
.submit-press
{
...
...
@@ -536,15 +545,15 @@ body {
.score
.medal
{
position
:
absolute
;
top
:
6%
;
margin-left
:
-90px
;
height
:
200px
;
top
:
6%
;
margin-left
:
-1.85rem
;
height
:
45%
;
}
.score
.val
{
object-fit
:
contain
;
font-family
:
Aileron-Bold
;
font-size
:
60px
;
font-size
:
1.5rem
;
font-weight
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -553,8 +562,8 @@ body {
text-align
:
center
;
color
:
#ffffff
;
position
:
absolute
;
margin-left
:
-
32px
;
margin-top
:
105px
;
margin-left
:
-
0.95rem
;
margin-top
:
2.1rem
;
}
.score
.tips
{
...
...
@@ -579,10 +588,10 @@ body {
margin-top
:
8px
;
}
.sub-score
thead
{
.sub-score
.
thead
{
object-fit
:
contain
;
font-family
:
Aileron-Bold
;
font-size
:
20px
;
font-size
:
0.5rem
;
font-weight
:
600
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -592,10 +601,10 @@ body {
color
:
#cedebc
;
}
.sub-score
tbody
{
.sub-score
.
tbody
{
object-fit
:
contain
;
font-family
:
Aileron-Bold
;
font-size
:
26px
;
font-size
:
0.5rem
;
font-weight
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -619,12 +628,12 @@ body {
height
:
40%
;
overflow-x
:
inherit
;
overflow-y
:
auto
;
margin-top
:
60px
;
margin-top
:
1.0rem
;
text-align
:
left
;
padding
:
10px
90px
;
object-fit
:
contain
;
font-family
:
Arial
;
font-size
:
30px
;
font-size
:
0.7rem
;
font-weight
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -651,13 +660,13 @@ body {
height
:
32%
;
overflow-x
:
inherit
;
overflow-y
:
auto
;
margin-top
:
44px
;
margin-top
:
1rem
;
text-align
:
left
;
padding
:
20px
50px
;
padding
:
0.2rem
0.8rem
;
margin-left
:
5%
;
object-fit
:
contain
;
font-family
:
DroidSansFallback
;
font-size
:
36px
;
font-size
:
0.6rem
;
font-weight
:
600
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -665,5 +674,5 @@ body {
letter-spacing
:
normal
;
color
:
#ffffff
;
background-color
:
#2c8a1e
;
border-radius
:
40px
;
border-radius
:
1.0rem
;
}
\ No newline at end of file
play/index.html
View file @
ad536469
...
...
@@ -90,14 +90,17 @@
<span
class=
"progress-label total-time"
id=
"totalTime"
>
00:00
</span>
</div>
</div>
<div
class=
"back-tips"
style=
"display: none;"
>
点击删除最新录制的一段录音
<div
class=
"triangle-down"
style=
"left: 30%;"
></div>
</div>
<div
class=
"my-btn back-btn"
id=
"backBtn"
>
<img
style=
"width: 40%; height: auto;"
src=
"../lib/images/back.png"
>
<div
class=
"back"
>
<div
class=
"back-tips"
style=
"display: none;"
>
点击删除最新录制的一段录音
<div
class=
"triangle-down"
style=
"left: 30%;"
></div>
</div>
<div
class=
"my-btn back-btn"
id=
"backBtn"
>
<img
style=
"width: 40%; height: auto;"
src=
"../lib/images/back.png"
>
</div>
</div>
<div
class=
"video-play-bg"
>
<img
src=
"../lib/images/play-circle.png"
id=
'ani'
class=
"video-play-ani"
>
<div
class=
"recorder-tips"
>
...
...
@@ -126,23 +129,19 @@
<div
class=
"score"
>
<img
src=
"../lib/images/excellent.png"
class=
"medal"
>
<span
id=
"score"
class=
"val"
>
90
</span>
<h1
style=
"margin-top:
210px
;"
><span
class=
"tips"
>
Great!
</span></h1>
<h1
style=
"margin-top:
4.4rem;margin-bottom: 0.05rem
;"
><span
class=
"tips"
>
Great!
</span></h1>
<div
class=
'sub-score'
>
<table
style=
"width: 100%; height: 84%; position: relative; top: 16%;"
>
<thead>
<tr>
<td
style=
"width: 33%;"
>
完整度
</td>
<td
style=
"width: 33%;"
>
流利度
</td>
<td
style=
"width: 33%;"
>
语法
</td>
<table
style=
"width: 100%; height: 100%; position: relative;"
>
<tr
class=
"thead"
>
<td
style=
"width: 33%;"
>
完整度
</td>
<td
style=
"width: 33%;"
>
流利度
</td>
<td
style=
"width: 33%;"
>
语法
</td>
</tr>
</thead>
<tbody>
<tr>
<td
id=
'complete'
>
80
</td>
<td
id=
'fluent'
>
80
</td>
<td
id=
'grammar'
>
60
</td>
</tr>
</tbody>
<tr
class=
"tbody"
>
<td
id=
'complete'
>
80
</td>
<td
id=
'fluent'
>
80
</td>
<td
id=
'grammar'
>
60
</td>
</tr>
</table>
</div>
</div>
...
...
@@ -168,7 +167,7 @@
<div
class=
"dialog-submit"
>
<span
class=
"submit"
>
Submit
</span>
<img
src=
"../lib/images/clip.png"
class=
"clip"
>
<table
style=
"width: 100%; height:
84%; position: relative; top: 16
%;"
>
<table
style=
"width: 100%; height:
60%; position: relative; top: 12
%;"
>
<tr>
<td
colspan=
"2"
>
<h1
class=
"warning"
>
本题只能提交一次,确定交卷吗?
</h1>
...
...
play/index.js
View file @
ad536469
/*
window.courseware.getData(callback,key); //用于获取数据
// 兼容缩放自适应
(
function
(
doc
,
win
)
{
window
.
base
=
document
.
documentElement
.
clientWidth
/
1920
;
var
docEl
=
doc
.
documentElement
,
resizeEvt
=
'
orientationchange
'
in
window
?
'
orientationchange
'
:
'
resize
'
,
recalc
=
function
()
{
window
.
clientWidth
=
docEl
.
clientWidth
;
window
.
clientHeight
=
docEl
.
clientHeight
;
var
aspectRatio
=
window
.
clientWidth
/
window
.
clientHeight
;
if
(
aspectRatio
>
1920
/
1080
){
docEl
.
style
.
fontSize
=
100
*
(
window
.
clientHeight
/
1080
)
+
'
px
'
;
window
.
base
=
100
*
(
window
.
clientHeight
/
1080
);
}
else
{
docEl
.
style
.
fontSize
=
100
*
(
window
.
clientWidth
/
1920
)
+
'
px
'
;
window
.
base
=
100
*
(
window
.
clientWidth
/
1920
);
// 判断是否为移动设备,提示旋转屏幕
}
};
recalc
();
win
.
addEventListener
(
resizeEvt
,
recalc
,
false
);
doc
.
addEventListener
(
'
DOMContentLoaded
'
,
recalc
,
false
);
})(
document
,
window
);
window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调用此方法,用于隐藏遮罩层
*/
var
cw
=
window
.
courseware
;
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
...
...
@@ -407,7 +423,7 @@ function bindVideoPlayBtn() {
// 监听视频播放结束
$
(
"
.video-play-icon .control
"
).
removeClass
(
"
pause
"
).
addClass
(
"
play
"
);
});
$
(
"
.video-play-icon
"
).
click
(
function
()
{
$
(
"
.video-play-icon
"
).
on
(
'
click touchend
'
,
function
()
{
const
video
=
$
(
"
#video
"
)[
0
];
const
control
=
$
(
"
.video-play-icon .control
"
);
const
status_
=
control
.
hasClass
(
"
play
"
);
...
...
@@ -437,7 +453,7 @@ function bindRecorderBtn() {
}
});
$
(
"
.recorder-play-icon
"
).
click
(
function
()
{
$
(
"
.recorder-play-icon
"
).
on
(
'
click touchend
'
,
function
()
{
playAudio
(
'
click
'
,
true
);
...
...
@@ -578,7 +594,7 @@ function bindSpeedBtn() {
setSpeed
(
stuUserAspect
.
speed
);
$
(
"
.speed-choice
"
).
click
(
function
()
{
$
(
"
.speed-choice
"
).
on
(
'
click touchend
'
,
function
()
{
$
(
"
.speed-choice
"
).
removeClass
(
'
speed-active
'
);
...
...
@@ -621,7 +637,7 @@ function bindSentBtn() {
bindPressAnimation
(
$
(
"
.sent-btn
"
));
$
(
"
.sent-btn
"
).
click
(
function
()
{
$
(
"
.sent-btn
"
).
on
(
'
click touchend
'
,
function
()
{
playAudio
(
'
click
'
,
true
);
...
...
@@ -657,7 +673,7 @@ function bindBackBtn() {
bindPressAnimation
(
backBtn
);
backBtn
.
click
(
function
()
{
backBtn
.
on
(
'
click touchend
'
,
function
()
{
playAudio
(
'
click
'
,
true
);
if
(
stuUserAspect
.
firstClickCancel
)
{
$
(
"
.back-tips
"
).
hide
();
...
...
@@ -695,7 +711,7 @@ function bindSubmitBtn() {
bindPressAnimation
(
submitBtn
);
submitBtn
.
click
(
function
()
{
submitBtn
.
on
(
'
click touchend
'
,
function
()
{
playAudio
(
'
submit
'
,
true
);
$
(
"
#submitDialog
"
).
modal
(
'
show
'
);
});
...
...
@@ -756,7 +772,7 @@ function bindContinueBtnBtn() {
const
continueBtn
=
$
(
"
#continueBtn
"
);
bindPressAnimation
(
continueBtn
,
'
submit-press
'
);
continueBtn
.
click
(
function
()
{
continueBtn
.
on
(
'
click touchend
'
,
function
()
{
playAudio
(
'
click
'
,
true
);
$
(
"
#submitDialog
"
).
modal
(
'
hide
'
);
})
...
...
@@ -769,7 +785,7 @@ function bindContinueBtnBtn() {
function
bindConfirmBtn
()
{
const
confirmBtn
=
$
(
"
#confirmBtn
"
);
bindPressAnimation
(
confirmBtn
,
'
submit-press
'
);
confirmBtn
.
on
(
'
click
'
,
function
()
{
confirmBtn
.
on
(
'
click
touchend
'
,
function
()
{
playAudio
(
'
click
'
,
true
);
...
...
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