fix: 修复培训考试h5页面样式问题

This commit is contained in:
光头强 2024-05-02 19:33:56 +08:00
parent f36e9261c4
commit 7ed38f2daf
3 changed files with 145 additions and 138 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>