*{
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 解决IOS默认滑动很卡的情况 */
-webkit-overflow-scrolling : touch;
}
body{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: .16rem;
}
/* 禁止缩放表单 */
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}
ol,li,ul,dl,dt,dd{
list-style:none;
}
img{
height: auto;
object-fit: cover;
}
em, i {
font-style: normal;
}
textarea {
resize:none;
}
p {
word-wrap:break-word;
}
a{
text-decoration: none;
color: inherit;
outline: none;
-moz-outline-style: none;
}
a:active, a:focus {
outline: none;
}
.textEllipsis{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* <-- start 头部模块 */
.headerContainer{
width: 100%;
height: 1.18rem;
background-color: #FFF;
}
.warnContainer{
background-color: #FFF;
width: 100%;
height: .5rem;
display: flex;
align-items: center;
justify-content: center;
}
.warnContainer .warnText{
max-width: 12rem;
word-break: break-all;
line-height: 1.4;
font-weight: bold;
font-size: .18rem;
color: #000000;
}
.computerEndHeader{
border: 1px solid green;
max-width: 12rem;
margin: 0 auto;
}
/* end 头部模块 --> */
/* start 年龄提示模块 --> */
.maskContainer{
position: fixed;
width: 100vw;
height: 100vh;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
display: none;
}
.ageReminderBox{
width: 9rem;
background-color: #FFF;
height: 5rem;
left: 50%;
margin-left: -4.5rem;
top: 30%;
position: absolute;
}
.ageReminderBack{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.ageReminderInfo{
position: relative;
z-index: 2;
margin-left: .32rem;
padding-top: 1rem;
color: #fff;
}
.ageReminderInfo h3{
line-height: 1.4;
font-size: .5rem;
max-width: 60%;
font-weight: bold;
}
.ageReminderInfo .ageReminderButBox{
display: flex;
align-items: center;
padding-top: .32rem;
}
.ageReminderInfo .ageReminderButBox .ageRBut{
color: rgba(237, 109, 244, 1);
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: .6rem;
border-radius: .08rem;
font-size: .28rem;
font-weight: bold;
min-width: 1.8rem;
padding: 0 .24rem;
margin-right: .32rem;
cursor: pointer;
}
/* end 年龄提示模块 --> */
/* <-- start 底部模块 */
.footerContainer{
width: 100%;
height: 1.34rem;
background-color: rgba(32, 32, 32, 1);
}
.footerConter{
color: #FFF;
padding-top: .24rem;
display: flex;
}
.leftText{
max-width: 2rem;
margin-right: .8rem;
}
.leftText .ltK{
font-weight: bold;
font-size: .18rem;
word-break: break-all;
padding-bottom: .06rem;
}
.leftText .ltV{
font-size: .14rem;
color: rgba(255, 255, 255, .6);
word-break: break-all;
}
.footerInuptBox{
background: #FFF;
flex: 1;
height: .5rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .24rem;
max-width: 5rem;
margin-right: 1.5rem;
}
.footerInuptBox .mailIcon{
width: .28rem;
height: .28rem;
}
.footerInupt{
flex: 1;
height: 100%;
outline: none;
font-size: .18rem;
margin: 0 .12rem;
}
.footerInuptBox .arrowIcon{
width: .28rem;
height: .28rem;
}
.footerIconContainer{
max-width: 4rem;
}
.footerIconList{
overflow-x: scroll;
white-space: nowrap;
}
.footerIconList::-webkit-scrollbar {
display: none;
}
.footerIconItem{
margin-right: .12rem;
display: inline-flex;
}
.footerIconItem img{
width: .4rem;
height: .4rem;
border-radius: 50%;
}
.footerVlsaImg{
font-size: 0;
}
.footerVlsaImg img{
height: .3rem;
width: auto;
}
/* end 底部模块 --> */
@media (max-width: 1199px) {
.warnContainer{
height: auto;
}
.warnContainer .warnText{
font-size: .22rem;
padding: .06rem .24rem;
}
.footerContainer{
height: auto;
}
.footerConter{
display: block;
padding: .24rem .12rem;
}
.leftText{
max-width: none;
margin-right: 0;
margin-bottom: .32rem;
}
.leftText .ltK{
font-size: .2rem;
}
.leftText .ltV{
font-size: .18rem;
}
.footerInuptBox{
max-width: 6rem;
margin-right: 0;
height: .6rem;
margin-bottom: .32rem;
}
.footerIconContainer{
max-width: none;
}
.footerIconList{
white-space: normal;
overflow-x: hidden;
display: flex;
flex-wrap: wrap;
margin-bottom: .12rem;
}
.footerIconItem{
display: block;
margin-right: .24rem;
}
}
@media (max-width: 899px) {
.warnContainer .warnText{
font-size: .24rem;
}
.ageReminderBox{
width: 7rem;
margin-left: -3.5rem;
height: 3.5rem;
}
.ageReminderInfo{
padding-top: .6rem;
}
.ageReminderInfo h3{
font-size: .4rem;
}
.ageReminderInfo .ageReminderButBox .ageRBut{
font-size: .24rem;
min-width: 1.4rem;
}
.leftText .ltK{
font-size: .22rem;
}
.leftText .ltV{
font-size: .2rem;
}
.footerIconItem img{
width: .5rem;
height: .5rem;
}
.footerVlsaImg img{
height: .4rem;
}
}