html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
height: 100%;
-webkit-overflow-scrolling: auto;
overflow-scrolling: auto
}
*{
-webkit-tap-highlight-color: transparent;
}
p{
margin: 0;
}
li{
list-style: none;
}
.Box{
width: 100%;
height: 100%;
background-image: url('../../../images/aM/mouse_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.top{
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
height: 0.9rem;
justify-content: space-between;
}
.top_title{
width: 2.86rem;
height: 0.36rem;
background-image: url('../../../images/aM/m_bg1.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.return{
width: 0.23rem;
height: 0.23rem;
margin-left: 0.23rem;
}
.top_title{
color: #FDD54B;
font-size: 0.16rem;
}
.ranging{
width: 0.235rem;
height: 0.215rem;
margin-right: 0.23rem;
}
.top_data{
width: 100%;
height: 0.22rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.Td_L{
width: 0.9rem;
height: 0.22rem;
border-radius: 0.11rem;
background: #5A0D66;
display: flex;
align-items: center;justify-content: center;
}
.Td_L,.Td_R p{
color: #FFFE01;
font-size: 0.12rem;
}
.Td_R{
width: 0.9rem;
height: 0.22rem;
border-radius: 0.11rem;
background: #5A0D66;
display: flex;
align-items: center;justify-content: center;
position: relative;
}
.time_img{
width: 0.14rem;
height: 0.22rem;
position: absolute;
left: 0;
top:0
}
.bottom{
width: 100%;
height: 0.54rem;
position: absolute;
left: 0;
bottom: 0;
}
/*打老鼠部分*/
.hole-container{
width: 100%;
height: 38%;
position: absolute;
left: 0;
bottom: 0.8rem;
}
.hole-container .hole{
width: 0.81rem;
height: 0.27rem;
background-image: url('../../../images/aM/dong.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
}
.mouse{
position: absolute;
width: 0.83rem;
height: 0.78rem;
overflow: hidden;
top:-0.62rem;
}
.mouse .zoon{
position: absolute;
width: 0.83rem;
height: 0.68rem;
top:0.65rem;
z-index: 100;
}
.mouse .yan{
position: absolute;
width: 0.23rem;
height: 0.35rem;
top:0.25rem;
left: 0.3rem;
z-index: 80;
}
.mouse .show_score{
color: #FFFE01;
font-size: 0.14rem;
position: absolute;
top:0;
left: 0.3rem;
}
.status{
width: 90%;
height: 0.45rem;
align-items: center;
justify-content: center;
position: absolute;
left: 5%;
top:40%;
background: black;
opacity: 0.5;
border-radius: 0.05rem;
display: none;
}
.status p{
color: #FFFE01;
font-size: 0.20rem;
}
.status1{
width: 90%;
height: 0.45rem;
align-items: center;
justify-content: center;
position: absolute;
left: 5%;
top:40%;
background: black;
opacity: 0.5;
border-radius: 0.05rem;
display: none;
}
.status1 p{
color: #FFFE01;
font-size: 0.20rem;
}
.status2{
width: 90%;
height: 0.45rem;
align-items: center;
justify-content: center;
position: absolute;
left: 5%;
top:40%;
background: black;
opacity: 0.5;
border-radius: 0.05rem;
display: none;
}
.status2 p{
color: #FFFE01;
font-size: 0.20rem;
}
.status3{
width: 90%;
height: 0.45rem;
align-items: center;
justify-content: center;
position: absolute;
left: 5%;
top:40%;
background: black;
opacity: 0.5;
border-radius: 0.05rem;
display: none;
}
.status3 p{
color: #FFFE01;
font-size: 0.20rem;
}
.circleCount{
position: absolute;
width:0.5rem;
height:0.5rem;
top:50%;
left:50%;
margin-left:-0.25rem;
color:#fdbe23;
font-size:0.18rem;
border-radius:50%;
text-align: center;
line-height: 0.5rem;
border:0.05rem solid #fdbe23;
display: none;
animation: numberAni 1s infinite ease;
}
@keyframes numberAni {
1% {
transform: scale(8);
opacity: 1
}
90% {
transform: scale(1);
opacity: 0
}
100% {
transform: scale(8);
opacity: 0
}
}
.rank_mask{
position: absolute;
left: 0;
top:0;
width: 100%;height: 100%;
display: none;
align-items: center;
justify-content: center;
}
.zhezao{
width: 100%;height: 100%;
position: absolute;
left: 0;
top: 0;
background: #111111;
opacity: 0.5;
}
.rank_box{
width: 90%;
height: 75%;
position: relative;
background-image: url('../../../images/aM/rank_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 18% 5% 2%;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
}
.rBox_top{
width: 100%;
height: 0.75rem;
position: absolute;
left: 0;
top:-0.22rem;
background-image: url('../../../images/aM/rank_top.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
}
.rBox_top p{
color: #FDD54B;
font-size: 0.18rem;
margin-top: 0.12rem;
}
.rank_y{
width: 80%;
height: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.5rem;
border: 2px solid #CE3711;
background: #FFE0BA;
border-radius: 8px;
}
.rank_y p{
color: #873630;
font-size: 0.14rem;
}
.rank_i{
width: 80%;
height: 70%;
overflow-y: auto;
}
.rank_item{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 0.1rem;
}
.rank_itemL{
display: flex;
flex-direction: row;
align-items: center;
}
.rank_item .rank_num{
width: 0.17rem;
height: 0.17rem;
display: flex;
align-items: center;
justify-content: center;
color: #FFFF27;
font-size: 0.11rem;
background-image: url('../../../images/aM/rangpm.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.rank_itemL p{
color: #B7540D;
font-size: 0.12rem;
margin-left: 0.1rem;
}
.rank_itemR{
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.shuxi{
width: 1px;height: 0.13rem;
background: #B7540D;
}
.rank_itemR p{
color: #B7540D;
font-size: 0.12rem;
}
.Close{
position: absolute;
left: 50%;
bottom: -0.4rem;
margin-left: -0.17rem;
width: 0.34rem;
height: 0.34rem;
background-image: url('../../../images/aM/close.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
/*#notice{*/
/* display: flex;*/
/*}*/
.notice_box{
width: 2.8rem;
height: 2.6rem;
background-image: url('../../../images/aM/all_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.notice_top{
width: 0.63rem;
height: 0.63rem;
margin-top: 0.28rem;
}
.notice_box span{
color: #893630;
font-size: 0.15rem;
margin-top: 0.2rem;
}
.notice_content{
width: 2.2rem;
height: 0.4rem;
border-radius: 0.08rem;
border: 1px solid #C8532B;
background: white;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.14rem;
outline: none;
text-align: center;
}
.notice_content span{
width: 2rem;
text-overflow:ellipsis;
overflow: hidden;
margin-top: 0;
white-space:nowrap;
}
.all_Receive{
width: 1.5rem;
height: 0.27rem;
background: #F9CB3B;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.18rem;
border-radius: 0.135rem;
border: none;
outline: none;
}
.all_Receive span{
color: #893630;
font-size: 0.13rem;
margin-top: 0;
}
.all_Close{
position: absolute;
left: 50%;
bottom: -0.5rem;
margin-left: -0.17rem;
width: 0.34rem;
height: 0.34rem;
background-image: url('../../../images/aM/close.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
audio:focus{
outline:none;
}