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; }