Commit ad536469 authored by Chen Jiping's avatar Chen Jiping

fix:修改样式

parent e4057a36
......@@ -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: 43%;
margin-left: 40%;
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 {
......@@ -537,14 +546,14 @@ body {
.score .medal{
position: absolute;
top: 6%;
margin-left: -90px;
height: 200px;
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
......@@ -90,6 +90,7 @@
&nbsp;&nbsp;<span class="progress-label total-time" id="totalTime">00:00</span>
</div>
</div>
<div class="back">
<div class="back-tips" style="display: none;">
点击删除最新录制的一段录音
<div class="triangle-down" style="left: 30%;"></div>
......@@ -97,6 +98,8 @@
<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">
......@@ -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>
<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>
<tr class="tbody">
<td id='complete'>80</td>
<td id='fluent'>80</td>
<td id='grammar'>60</td>
</tr>
</tbody>
</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>
......
/*
window.courseware.getData(callback,key); //用于获取数据
window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调用此方法,用于隐藏遮罩层
// 兼容缩放自适应
(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);
*/
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);
......
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