html,body{
height: 100%;
overflow: hidden;
}
.download{
position: relative;
z-index: 10;
background-color: #9428fc;
height:.9rem;
display: flex;
padding: 0 0.34rem;
justify-content: space-between;
align-items: center;
transition: transform 300ms ease-out;
-webkit-transition:transform 300ms ease-out;
}
.downloadcell{
display: flex;
align-items: center;
}
.download .downloadcell_left img{
width: .64rem;
height: .64rem;
border-radius: 0.1rem;
margin-right: 0.08rem;
}
.download .downloadcell_left h1{
font-size: 0.26rem;
color: #fffefe;
}
.download .downloadcell_left p{
font-size: 0.22rem;
color: #fff;
}
.downloadcell_right{
width: 1.82rem;
height: 0.58rem;
box-sizing: border-box;
border: 0.02rem solid #fff;
border-radius: .29rem;
padding: 0 0.14rem;
justify-content: space-between;
}
.downloadcell_right img{
width: 0.26rem;
height: 0.25rem;
margin-right: 0.06rem;
}
.downloadcell_right p{
font-size: 0.26rem;
color: #fff;
}
.content{
position: relative;
height: calc(100% - 0.9rem);
display: flex;
flex-flow: column;
background-color: #f6f6f6;
transition: transform 300ms ease-out;
-webkit-transition:transform 300ms ease-out;
}
.content .topbar{
position: relative;
z-index: 10;
background-color: #fff;
height: 0.6rem;
display: flex;
justify-content: space-between;
align-items: center;
padding:0 0.26rem;
}
.content .topbar .bar_wrap{
display: flex;
align-items: center;
width: 100%;
justify-content: space-around;
height: 100%;
}
.content .topbar .bar_wrap .bar {
height: 100%;
position: relative;
}
.content .topbar .bar_wrap span{
font-size: 0.28rem;
line-height: .6rem;
}
.content .bar_wrap .barunderline{
width: 0.3rem;
height: 0.04rem;
background-color: transparent;
position: absolute;
bottom: 0;
margin-left: 0.15rem;
}
.content .topbar .bar_wrap .active_bar {
color: #ae24fc;
}
.content .topbar .bar_wrap .active_bar .barunderline{
background-color: #ae24fc;
}
.content .topbar>div{
font-size: 0;
margin: 0 0.34rem 0 0.2rem;
}
.content .topbar>div img{
width: 0.31rem;
height: 0.32rem;
}
.tapbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
height: 0.98rem;
background-color: #fff;
font-size: 0;
justify-content: space-around;
align-items: center;
}
.tapbar .tapbar_item{
text-align: center;
}
.tapbar .tapbar_item img{
height: .7rem;
}
.tapbar .tapbar_item h1{
margin-top: 0.06rem;
font-size: .2rem;
color: #D8D8D8;
line-height: 1;
}
.tapbar .tapbar_item_active h1{
color: #c06ef6;
}
.list_wrap{
/* flex: 1; */
height: calc(100% - 1.58rem);
overflow: hidden;
padding-left: .1rem;
background-color: #F5F5F5;
}
.list_wrap .list_cell{
background-color: #F5F5F5;
}
.list_cell{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.list_cell img.blank_hold_bg{
width: 70%;
height: 5.3rem;
margin: 0.5rem auto 0;
}
.list_cell .chamber{
width: 3.6rem;
height: 3.6rem;
margin-top: .1rem;
margin-right: .1rem;
position: relative;
}
.list_cell .game_chamber{
height: 2rem;
}
.list_cell .chamber div:nth-of-type(1){
width: 100%;
height: 100%;
}
.list_cell .chamber div:nth-of-type(2) img{
height: 100%;
object-fit: fill;
overflow: hidden;
}
.list_cell .chamber h1{
position: absolute;
left: 0.1rem;
bottom: 0.08rem;
font-size:.26rem;
color: #fff;
font-weight: normal;
text-shadow: 1px 1px 1px #000;
}
.list_cell .chamber .family{
padding:0 0.1rem;
border:1px solid #fff;
height: 0.3rem;
line-height: 0.32rem;
color:#fff;
font-size:0.2rem;
border-top-left-radius: 0.1rem;
border-bottom-right-radius: 0.1rem;
background-color:rgba(0, 0, 0, 0.6);
position: absolute;
top:0.1rem;
right: 0.1rem;
}
.list_cell .msgBox{
width: 100%;
padding:0 0.16rem;
box-sizing: border-box;
position: absolute;
left:0;
display: flxe;
justify-content: space-between;
align-items: flex-end!important;
}
.list_cell .msgBox .level_box{
display: flex;
align-items: center;
color:#E2E1E2;
font-size:0.2rem;
margin-bottom: 0.1rem;
font-family: long-din;
}
.list_cell .msgBox .level_box .level{
width: 0.4rem;
height: 0.24rem;
line-height: 0.36rem;
text-align: right;
padding-right: 0.12rem;
border-radius: 0.12rem;
margin-right: 0.1rem;
font-size:0.18rem;
color:#fff;
font-family: long-din;
}
.list_cell .msgBox .name_box .name{
color:#fff;
font-size:0.26rem;
font-weight: bold;
line-height: 1.6;
}
.list_cell .msgBox .people_num{
color: #fff;
font-size:0.3rem;
line-height: 1.6;
font-weight: bold;
font-family: long-din;
}
.level1,.level0{
background: url(../img/zlevel0.png) no-repeat;
background-size:100% 100%;
}
.level2,.level2{
background: url(../img/zlevel1.png) no-repeat;
background-size:100% 100%;
}
.level3,.level3{
background: url(../img/zlevel2.png) no-repeat;
background-size:100% 100%;
}
.level4,.level4{
background: url(../img/zlevel3.png) no-repeat;
background-size:100% 100%;
}
.level5,.level5{
background: url(../img/zlevel4.png) no-repeat;
background-size:100% 100%;
}
.level6,.level6{
background: url(../img/zlevel5.png) no-repeat;
background-size:100% 100%;
}
.level7,.level7{
background: url(../img/zlevel6.png) no-repeat;
background-size:100% 100%;
}
.list_cell .chamber div:nth-of-type(3){
line-height: 0.2rem;
font-size: .2rem;
display: flex;
position: absolute;
right: 0.1rem;
bottom: 0.1rem;
color: #fff;
align-items: center;
}
.list_cell .chamber div:nth-of-type(3) span{
max-width: 1.2rem;
white-space:nowrap;
overflow-x:hidden;
text-overflow:ellipsis;
text-align: right;
}
.list_cell .chamber i{
width: .20rem;
height: .20rem;
background-image:url('../img/icon_address.png');
background-repeat: no-repeat;
background-size: .20rem .20rem;
}
.list_cell .chamber img{
width: 100%;
height: 100%;
border-radius: 0.14rem;
}
.list_cell .chamber img.chamber_connect_icon{
position: absolute;
width: 0.5rem;
height: 0.312rem;
top: 0.1rem;
left: 0.1rem;
}
.list_banner{
width: 7.3rem;
height: 1.65rem;
margin-top: 0.10rem;
border-radius: 0.07rem;
margin-bottom: 0.02rem;
}
.banner_login{
width: 7.3rem;
height: 1.65rem;
margin-top: -1.8rem;
border-radius: 0.07rem;
margin-bottom: 0.02rem;
background: transparent;
position: absolute;
z-index: 2;
display: block;
}
.tu{
width: 7.3rem;
/*height: 1.65rem;*/
height: 1.40rem;
margin: 0 auto;
/*margin-top: 0.10rem;*/
border-radius: 0.07rem;
}
.tu .swiper-pagination{
bottom: 0;
}
.tu img{
width: 7.30rem;
/*height: 1.40rem;*/
height: 2.34rem;
margin: 0 auto;
/*margin-top: 0.10rem;*/
border-radius: 0.07rem;
margin-top: -0.47rem
}
.pop{
box-sizing: border-box;
position: fixed;
z-index: 10;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 5rem;
height: 2.6rem;
background-color:#fff;
border-radius: 0.1rem;
padding: .6rem .24rem 0;
text-align: center;
}
.pop{
word-spacing: .2rem;
}
.pop>div{
display: flex;
justify-content: space-between;
}
.pop p{
font-size: .32rem;
}
.pop .pop_btn{
display: inline-block;
margin-top: .44rem;
width: 2.1rem;
height: .62rem;
line-height: .62rem;
background-image: -moz-linear-gradient(left top, #C20EFE, #7E35FE);
background-image: -ms-linear-gradient(left top, #C20EFE, #7E35FE);
background-image: -o-linear-gradient(left top, #C20EFE, #7E35FE);
background-image: -webkit-gradient(linear, left top, right bottom, from(#C20EFE), to(#7E35FE));
background-image: -webkit-linear-gradient(left top, #C20EFE, #7E35FE);
background-image: linear-gradient(left top, #C20EFE, #7E35FE);
color: #fff;
font-size: .32rem;
}
.pop div.pop_btn{
background-color: #e1dddd;
background-image:none;
color: #000;
}
.mask{
position: fixed;
z-index: 5;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
}
.tour{
position: absolute;
}
.lqGift{
position: fixed;
z-index: 10;
width: 100%;
height: 100%;
top: 0;
color: #fff;
}
/**金币红包mix动画start*/
.flyer{
position: absolute;
height: 100%;
width: 100%;
}
.flyer i{
position: absolute;
top: 50%;
left: 50%;
margin: -0.64rem 0 0 -0.5rem;
background: url(../img/fly_item.png) no-repeat;
background-size: contain;
width: 1rem;
height: 1.28rem;
}
.flyer i.coin{
position: absolute;
top: 50%;
left: 50%;
margin: -0.24rem 0 0 -0.24rem;
background: url(../img/fly_item_coin.png) no-repeat;
background-size: contain;
width: .48rem;
height: .48rem;
}
.flyer i:nth-of-type(1){
animation: fly1 1s linear infinite;
}
.flyer i:nth-of-type(2){
animation: fly2 1s linear 200ms infinite;
}
.flyer i:nth-of-type(3){
animation: fly3 1s linear 400ms infinite;
}
.flyer i:nth-of-type(4){
animation: fly4 1s linear 800ms infinite;
}
.flyer i:nth-of-type(5){
animation: fly5 1s linear 1000ms infinite;
}
.flyer i:nth-of-type(6){
animation: fly6 1s linear 1200ms infinite;
}
.flyer i:nth-of-type(7){
animation: fly7 1s linear infinite;
}
.flyer i:nth-of-type(8){
animation: fly8 1s linear 300ms infinite;
}
.flyer i:nth-of-type(9){
animation: fly9 1s linear 600ms infinite;
}
.flyer i:nth-of-type(10){
animation: fly10 1s linear 900ms infinite;
}
.flyer i:nth-of-type(11){
animation: fly11 1s linear 1200ms infinite;
}
.flyer i:nth-of-type(12){
animation: fly12 1s linear 1500ms infinite;
}
@keyframes fly1{
from{
transform: translate3d(0,0,0) rotate(45deg);
}
to{
transform: translate3d(400px,-400px,0) rotate(45deg);
}
}
@keyframes fly2{
from{
transform: translate3d(0,0,0) rotate(90deg);
}
to{
transform: translate3d(400px,0,0) rotate(90deg);
}
}
@keyframes fly3{
from{
transform: translate3d(0,0,0) rotate(135deg);
}
to{
transform: translate3d(400px,400px,0) rotate(135deg);
}
}
@keyframes fly4{
from{
transform: translate3d(0,0,0) rotate(-45deg);
}
to{
transform: translate3d(-400px,-400px,0) rotate(-45deg);
}
}
@keyframes fly5{
from{
transform: translate3d(0,0,0) rotate(-90deg);
}
to{
transform: translate3d(-400px,0,0) rotate(-90deg);
}
}
@keyframes fly6{
from{
transform: translate3d(0,0,0) rotate(-135deg);
}
to{
transform: translate3d(-400px,400px,0) rotate(-135deg);
}
}
@keyframes fly7{
from{
transform: translate3d(0,0,0);
}
to{
transform: translate3d(-200px,-400px,0) ;
}
}
@keyframes fly8{
from{
transform: translate3d(0,0,0);
}
to{
transform: translate3d(400px,-200px,0);
}
}
@keyframes fly9{
from{
transform: translate3d(0,0,0);
}
to{
transform: translate3d(400px,200px,0);
}
}
@keyframes fly10{
from{
transform: translate3d(0,0,0);
}
to{
transform: translate3d(100px,400px,0);
}
}@keyframes fly11{
from{
transform: translate3d(0,0,0) rotate(-135deg);
}
to{
transform: translate3d(-200px,600px,0) rotate(-135deg);
}
}
@keyframes fly12{
from{
transform: translate3d(0,0,0) rotate(-135deg);
}
to{
transform: translate3d(-400px,-100px,0) rotate(-135deg);
}
}
.lqGift .lqGift_login{
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
margin-top: 4rem;
}
.lqGift .mix_gif{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: url(../img/staic_place.png) no-repeat center;
background-size: 68%;
text-align: center;
}
.mix_gif .bigUbi{
width: 2.42rem;
height: 2.42rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
.mix_gif .uTxt{
width: 2.4rem;
height: .6rem;
}
.mix_gif p{
font-size:.3rem;
font-weight: bold;
}
.mix_gif h2{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
font-size:.3rem;
font-weight: bold;
margin-top: 2.2rem;
}
.mix_gif .confirm_lq_btn{
background: url(../img/lq_btn_bg.png) no-repeat;
background-size: contain;
width: 2.5rem;
height: 0.54rem;
text-align: center;
line-height: 0.54rem;
font-size: .3rem;
margin: 0 auto;
}
.lqGift .ray{
position: absolute;
left: 50%;
top: 50%;
margin-top:-5rem;
margin-left: -5rem;
width:10rem;
height: 10rem;
border-radius: 50%;
background-image: url(../img/ray_bg.png);
background-position: center;
background-repeat: no-repeat;
animation: Ray 5s linear infinite;
}
.mix_gif .full_vison,.mix_gif .less_vison{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
margin-top: 1.8rem;
font-size: 0.3rem;
letter-spacing: 0.02rem;
}
.mix_gif .full_vison>div{
text-align: center;
}
.mix_gif .full_vison>div:nth-of-type(1){
margin-bottom: 0.2rem;
}
.mix_gif .full_vison span{
color: #fef971;
}
.tour_cancle{
position: fixed;
top: 2.3rem;
right: 1.3rem;
z-index: 100;
}
.tour_cancle div:nth-of-type(1){
width: 0.56rem;
height: 0.56rem;
background: url('../img/tour_cancel_icon.png') no-repeat;
background-size: contain;
}
.tour_cancle div:nth-of-type(2){
position: absolute;
left: 50%;
height: 1rem;
width: 0.02rem;
background-color: #fff;
}
/**金币红包mix动画start*/
/*赠送U点style*/
@keyframes Ray{
from{
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* Internet Explorer */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}
to{
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* Internet Explorer */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}
@-webkit-keyframes Ray{
from{
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* Internet Explorer */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}
to{
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* Internet Explorer */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}
/*赠送U点style end*/
/*loadingbox start*/
.loading_box{
position: absolute;
top: -0.4rem;
left: 50%;
width: 1rem;
height: 1rem;
background-size: cover;
}
/*loadingbox end*/
/*弹窗modal*/
.modal .modal_pop{
box-sizing: border-box;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 67%;
padding: .52rem 0;
text-align: center;
font-size: .32rem;
border-radius: 0.1rem;
z-index: 10;
}
.modal .modal_mask{
position: fixed;
z-index: 5;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
}
.modal .cancelbtn{
padding: .1rem 0;
width: 42%;
background-color: #e1dddd;
}
.modal .confirmbtn{
color: #fff;
padding: .1rem 0;
width: 42%;
background-image: -moz-linear-gradient(left top, #C20EFE, #7E35FE);
background-image: -ms-linear-gradient(left top, #C20EFE, #7E35FE);
background-image: -o-linear-gradient(left top, #C20EFE, #7E35FE);
background-image: -webkit-gradient(linear, left top, right bottom, from(#C20EFE), to(#7E35FE));
background-image: -webkit-linear-gradient(left top, #C20EFE, #7E35FE);
background-image: linear-gradient(left top, #C20EFE, #7E35FE);
}
.modal_pop>div{
display: flex;
justify-content: space-around;
margin-top: .42rem;
}
/*弹窗modal*/