* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.content {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.content::-webkit-scrollbar {
width:0;
}
.question-container {
width: 100%;
position: relative;
}
.container-bg {
width: 100%;
display: block;
}
.title {
position: absolute;
top: 6.91rem;
left: 50%;
transform: translateX(-50%);
width: 7.12rem;
height: .54rem;
}
.title img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.subject {
position: absolute;
top: 7.14rem;
left: 0;
right: 0;
margin:0 auto;
width: 6.62rem;
border-radius: 0 0 .2rem .2rem;
}
.question {
position: relative;
z-index: 2;
width: 6.62rem;
height: auto;
border-radius: 0 0 .2rem .2rem;
background: #fff;
overflow: hidden;
padding: 0 .4rem;
box-sizing: border-box;
}
.inset {
position: absolute;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: .54rem;
}
.bottom {
position: absolute;
left: 0;
bottom: -.18rem;
width: 100%;
height: .26rem;
}
.question-box {
height: 9.72rem;
overflow: hidden;
border-radius: 0 0 .2rem .2rem;
background: #fff;
}
.audio {
position: absolute;
top: .5rem;
left: .5rem;
display: flex;
align-items: center;
}
.audio .audiobtn {
width: .7rem;
height: .7rem;
}
.audio div {
font-size: .32rem;
}
.question-photo {
position: relative;
width: 100%;
margin-top: 1.7rem;
height: 3.72rem;
}
.question-photo img {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
.option {
width: 100%;
margin-top: .5rem;
}
.option li {
width: 100%;
height: .7rem;
border: .02rem #FEA10F solid;
margin-bottom: .3rem;
font-size: .28rem;
text-align: center;
line-height: .7rem;
border-radius: .16rem;
list-style:none;
}
.select {
background: #FEA10F;
color: #fff;
}
.order {
font-size: .28rem;
text-align: center;
padding-bottom: .3rem;
}
.ind {
color: #7A81FF;
}
.popup {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('../image/question/popupBg.png');
z-index: 999;
display: none;
}
.popup-content {
width: 100%;
height: 100%;
}
.popup-content .bg {
position: absolute;
left: 5%;
top: 1.2rem;
width: 90%;
}
canvas {
position: absolute;
top: -9999px;
left: -9999px;
}
.baocun {
position: absolute;
left: 50%;
bottom: 2.48rem;
transform: translateX(-50%);
width: 100%;
color: #fff;
font-size: .34rem;
text-align: center;
}
.lingqu {
position: absolute;
left: 1.45rem;
bottom: 1.02rem;
width: 4.6rem;
height: .98rem;
background: url('../image/question/lingqu.png');
background-size: 100% 100%;
display: block;
}
/*卷边效果 需要完善已经注释*/
/*
box-shadow: 0 4px 8px 0 #A691D3;
.question:before{
content: '';
position: absolute;
right:0;
bottom:0;
border-style: solid;
border-width: 0;
border-color:#fff rgba(0, 0, 0, 0.2);
transition: all .5s;
border-radius: 0 0 50% 0;
}
.question:hover:before {
border-top-width: 300px;
border-right-width: 300px;
} */