fix: 修复培训考试h5页面样式问题
This commit is contained in:
parent
f36e9261c4
commit
7ed38f2daf
@ -66,18 +66,76 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='less' scoped>
|
<style lang='less' scoped>
|
||||||
|
.onlineTest_bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.fullHeight {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.centerBox {
|
||||||
|
position: absolute;
|
||||||
|
left: 5%;
|
||||||
|
bottom: 50px;
|
||||||
|
// transform: translate(-50%, -50%);
|
||||||
|
text-align: center;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
// .aqjyImg {
|
||||||
|
// width: 50rem;
|
||||||
|
// height: 40rem;
|
||||||
|
// margin-bottom: 15rem;
|
||||||
|
// }
|
||||||
|
.inputContent {
|
||||||
|
/* position: fixed;
|
||||||
|
bottom: 10%;
|
||||||
|
left: 0; */
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.inputBox {
|
||||||
|
// margin-top: 30rem;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
// margin-right: 2rem;
|
||||||
|
border: 1px solid rgba(63, 83, 110, 0.5);
|
||||||
|
/* margin-left: 2rem; */
|
||||||
|
}
|
||||||
|
.submitBtn {
|
||||||
|
// margin: -55rem -13rem;
|
||||||
|
// position: fixed;
|
||||||
|
// bottom: 10rem;
|
||||||
|
/* left: 20px; */
|
||||||
|
width: 100%;
|
||||||
|
background: #4181fe;
|
||||||
|
height: 44px;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 10px;
|
||||||
|
line-height: 44px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
// .onlineTest_bg {
|
// .onlineTest_bg {
|
||||||
// width: 100vw;
|
// width: 100%;
|
||||||
// height: 100vh;
|
// height: 180rem;
|
||||||
|
// margin-top: -83rem;
|
||||||
// }
|
// }
|
||||||
// .fullHeight {
|
// .fullHeight {
|
||||||
// width: 100vw;
|
// width: 100%;
|
||||||
// height: 100vh;
|
// height: 100%;
|
||||||
// }
|
// }
|
||||||
// .centerBox {
|
// .centerBox {
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// left: 50%;
|
// left: 50%;
|
||||||
// top: 0%;
|
// top: 90%;
|
||||||
// transform: translate(-50%, -50%);
|
// transform: translate(-50%, -50%);
|
||||||
// text-align: center;
|
// text-align: center;
|
||||||
// }
|
// }
|
||||||
@ -100,8 +158,8 @@ export default {
|
|||||||
// background-color: white;
|
// background-color: white;
|
||||||
// border-radius: 2rem;
|
// border-radius: 2rem;
|
||||||
// padding: 3rem 0rem;
|
// padding: 3rem 0rem;
|
||||||
// width: 40rem;
|
// width: 80rem;
|
||||||
// font-size: 14px;
|
// font-size: 6.5rem;
|
||||||
// display: inline-block;
|
// display: inline-block;
|
||||||
// margin-right: 2rem;
|
// margin-right: 2rem;
|
||||||
// border: 0.5rem solid rgba(63, 83, 110, 0.5);
|
// border: 0.5rem solid rgba(63, 83, 110, 0.5);
|
||||||
@ -121,60 +179,4 @@ export default {
|
|||||||
// border-radius: 10rem;
|
// border-radius: 10rem;
|
||||||
// line-height: 15rem;
|
// line-height: 15rem;
|
||||||
// }
|
// }
|
||||||
.onlineTest_bg {
|
|
||||||
width: 100%;
|
|
||||||
height: 180rem;
|
|
||||||
margin-top: -83rem;
|
|
||||||
}
|
|
||||||
.fullHeight {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.centerBox {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 90%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.aqjyImg {
|
|
||||||
width: 50rem;
|
|
||||||
height: 40rem;
|
|
||||||
margin-bottom: 15rem;
|
|
||||||
}
|
|
||||||
.inputContent {
|
|
||||||
/* position: fixed;
|
|
||||||
bottom: 10%;
|
|
||||||
left: 0; */
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.inputBox {
|
|
||||||
margin-top: 30rem;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 2rem;
|
|
||||||
padding: 3rem 0rem;
|
|
||||||
width: 80rem;
|
|
||||||
font-size: 6.5rem;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 2rem;
|
|
||||||
border: 0.5rem solid rgba(63, 83, 110, 0.5);
|
|
||||||
/* margin-left: 2rem; */
|
|
||||||
}
|
|
||||||
.submitBtn {
|
|
||||||
margin: -55rem -13rem;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 10rem;
|
|
||||||
/* left: 20px; */
|
|
||||||
width: calc(130% - 0rem);
|
|
||||||
background: #4181fe;
|
|
||||||
height: 15rem;
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 7.5rem;
|
|
||||||
border-radius: 10rem;
|
|
||||||
line-height: 15rem;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -226,30 +226,33 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.fullHeight{
|
||||||
|
font-size: 16px
|
||||||
|
}
|
||||||
.tips {
|
.tips {
|
||||||
font-size: 7rem;
|
// font-size: 7rem;
|
||||||
color: red;
|
color: red;
|
||||||
margin: 5rem 5rem;
|
margin: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blockBox {
|
.blockBox {
|
||||||
box-shadow: 0 2rem 12rem 0px rgba(212, 220, 236, 0.69);
|
box-shadow: 0 4px 12px 0px rgba(212, 220, 236, 0.69);
|
||||||
border-radius: 4rem;
|
border-radius: 10px;
|
||||||
margin: 7.5rem;
|
margin: 16px;
|
||||||
padding: 5rem;
|
padding: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.optionItem {
|
.optionItem {
|
||||||
/* padding-left: 20px; */
|
/* padding-left: 20px; */
|
||||||
margin-top: 5rem;
|
margin-top: 10px;
|
||||||
font-size: 7rem;
|
// font-size: 7rem;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
margin-left: 2.5rem;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox {
|
.checkbox {
|
||||||
@ -257,17 +260,17 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.submitBtn {
|
.submitBtn {
|
||||||
margin: -70rem 5rem;
|
// margin: -70rem 5rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 10rem;
|
bottom: 10px;
|
||||||
/* left: 20px; */
|
left: 5%;
|
||||||
width: calc(100% - 10rem);
|
width: 90%;
|
||||||
background: #4181fe;
|
background: #4181fe;
|
||||||
height: 15rem;
|
height: 44px;
|
||||||
border: none;
|
border: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 7.5rem;
|
/* font-size: 7.5rem; */
|
||||||
border-radius: 10rem;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.testResultBox {
|
.testResultBox {
|
||||||
@ -281,73 +284,74 @@ export default {
|
|||||||
|
|
||||||
.resultImg {
|
.resultImg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 307%;
|
height: 100%;
|
||||||
margin: -70rem 0rem;
|
// margin: -70rem 0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.score {
|
.score {
|
||||||
position: relative;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: -32%;
|
top: 50%;
|
||||||
width: 80rem;
|
width: 200px;
|
||||||
height: 80rem;
|
height: 200px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 4rem solid #fdcb05;
|
border: 4px solid #fdcb05;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 100rem;
|
line-height: 200px;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
span {
|
span {
|
||||||
width: 55rem;
|
// width: 90%;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
// display: inline-block;
|
// display: inline-block;
|
||||||
color: #fdcb05;
|
color: #fdcb05;
|
||||||
font-size: 30rem;
|
font-size: 30px
|
||||||
margin-top: -12rem;
|
// margin-top: -12rem;
|
||||||
margin-left: -28rem;
|
// margin-left: -28rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.headers {
|
.headers {
|
||||||
/* border-bottom: 0.5rem solid #f3f3f3; */
|
/* border-bottom: 0.5rem solid #f3f3f3; */
|
||||||
height: 8rem;
|
height: 44px;
|
||||||
color: #3d4490;
|
color: #3d4490;
|
||||||
font-size: 7.5rem;
|
/* font-size: 7.5rem; */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 6rem;
|
line-height: 44px;
|
||||||
margin-top: -55%;
|
/* margin-top: -55%; */
|
||||||
/* background-color: pink; */
|
/* background-color: pink; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.testTilte {
|
.testTilte {
|
||||||
font-size: 6rem;
|
// font-size: 6rem;
|
||||||
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-checkbox__label {
|
// ::v-deep .el-checkbox__label {
|
||||||
font-size: 4rem;
|
// font-size: 4rem;
|
||||||
line-height: 10rem;
|
// line-height: 10rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::v-deep .el-checkbox__inner {
|
// ::v-deep .el-checkbox__inner {
|
||||||
margin-top: -2rem;
|
// margin-top: -2rem;
|
||||||
|
|
||||||
width: 4rem;
|
// width: 4rem;
|
||||||
height: 4rem;
|
// height: 4rem;
|
||||||
line-height: 10rem;
|
// line-height: 10rem;
|
||||||
|
|
||||||
/* border: 0.5rem solid #fff; */
|
// /* border: 0.5rem solid #fff; */
|
||||||
}
|
// }
|
||||||
|
|
||||||
::v-deep .el-radio__inner {
|
// ::v-deep .el-radio__inner {
|
||||||
margin-top: -2rem;
|
// margin-top: -2rem;
|
||||||
|
|
||||||
width: 4rem;
|
// width: 4rem;
|
||||||
height: 4rem;
|
// height: 4rem;
|
||||||
line-height: 10rem;
|
// line-height: 10rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::v-deep .el-radio__label {
|
// ::v-deep .el-radio__label {
|
||||||
font-size: 4rem;
|
// font-size: 4rem;
|
||||||
line-height: 10rem;
|
// line-height: 10rem;
|
||||||
}
|
// }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -97,44 +97,45 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.fullHeight {
|
.fullHeight {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 120%;
|
height: 100%;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.videoBox {
|
.videoBox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100rem;
|
height: 300px;
|
||||||
margin: 0rem 0;
|
/* margin: 0rem 0; */
|
||||||
}
|
}
|
||||||
.courseTitle {
|
.courseTitle {
|
||||||
font-size: 7.5rem;
|
/* font-size: 7.5rem; */
|
||||||
|
|
||||||
padding: 2rem 7.5rem;
|
padding: 10px 16px;
|
||||||
}
|
}
|
||||||
.desc {
|
.desc {
|
||||||
font-size: 6rem;
|
/* font-size: 6rem; */
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
padding: 2.5rem 0 0 7.5rem;
|
padding: 10px 16px;
|
||||||
}
|
}
|
||||||
.submitBtn {
|
.submitBtn {
|
||||||
margin: -70rem 5rem;
|
/* margin: -70rem 5rem; */
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 10rem;
|
bottom: 10px;
|
||||||
/* left: 20px; */
|
left: 5%;
|
||||||
width: calc(100% - 10rem);
|
width: 90%;
|
||||||
background: #4181fe;
|
background: #4181fe;
|
||||||
height: 15rem;
|
height: 44px;
|
||||||
border: none;
|
border: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 7.5rem;
|
/* font-size: 7.5rem; */
|
||||||
border-radius: 10rem;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.headers {
|
.headers {
|
||||||
/* border-bottom: 0.5rem solid #f3f3f3; */
|
/* border-bottom: 0.5rem solid #f3f3f3; */
|
||||||
height: 8rem;
|
height: 44px;
|
||||||
color: #3d4490;
|
color: #3d4490;
|
||||||
font-size: 7.5rem;
|
/* font-size: 7.5rem; */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 6rem;
|
line-height: 44px;
|
||||||
margin-top: -55%;
|
/* margin-top: -55%; */
|
||||||
/* background-color: pink; */
|
/* background-color: pink; */
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -142,7 +143,7 @@ export default {
|
|||||||
::v-deep video::-webkit-media-controls-play-button {
|
::v-deep video::-webkit-media-controls-play-button {
|
||||||
/* background-image: url(play-button.png); */
|
/* background-image: url(play-button.png); */
|
||||||
/* display: none; */
|
/* display: none; */
|
||||||
width: 200rem;
|
/* width: 200rem;
|
||||||
height: 200rem;
|
height: 200rem; */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user