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