You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

828 lines
16 KiB
CSS

.home{
width: 100%;
font-family:PingFang SC;
}
.home-box{
padding: 0.5rem 0.37rem 0 0.31rem;
}
.home-fiexd{
height: 4.22rem;
width: 100%;
background-color: #fff;
}
.home-fiexdBox{
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 999;
}
.home-video{
width: 100%;
height: 4.22rem;
background-color: #fff;
}
.home-video video{
width: 100%;
height: 100%;
}
.fiexd-heard{
width: 100%;
height: 1.2rem;
background: rgba(255, 255, 255, 0);
}
.fiexd-heardBox{
padding: 0 0.3rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.32rem;
color: #007AFF;
line-height: 1.2rem;
height: 100%;
}
.fiexd-heardBox>img{
width: 0.6rem;
height: 0.6rem;
border-radius: 0.1rem;
}
.fiexd-pay{
display: flex;
align-items: center;
}
.fiexd-pay>span{
color: #A9A9A9;
font-size: 0.2rem;
margin-right: 0.14rem;
}
.download{
width: 1.5rem;
height: 0.6rem;
background-color: #007AFF;
border-radius: 0.3rem;
color: 0.32rem;
text-align: center;
line-height: 0.6rem;
color: #fff;
font-weight: 500;
}
.heard{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.heard>div>img{
width: 2.5rem;
height: 2.5rem;
border-radius: 0.3rem;
}
.heard>.right{
margin-left: 0.3rem;
}
.heard>.right>div:first-child{
font-size:0.4rem;
font-weight:500;
color:rgba(41,41,41,1);
}
.heard>.right>div:nth-child(2){
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 0.28rem;
color: #A9A9A9;
margin-top: 0.23rem;
}
.heard>.right>div:nth-child(3){
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.32rem;
}
.heard>.right>div:nth-child(3) .download{
width: 1.8rem;
height: 0.6rem;
background:rgba(34,129,245,1);
border-radius:0.3rem;
color:#fff ;
font-size: 0.28rem;
font-weight: 400;
text-align: center;
line-height: 0.6rem;
}
.heard>.right>div:nth-child(3) >img{
width: 0.6rem;
height: 0.6rem;
}
.evaluate{
font-size: 0.32rem;
color: #757575;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.33rem;
}
.evaluate .number{
display: flex;
align-items: center;
}
.evaluate .start{
display: flex;
align-items: center;
margin-left: 0.22rem;
}
.evaluate .start .iconImg{
display: inline-block;
vertical-align: middle;
width: 1.84rem;
height: 0.3rem;
background: url("../images/game_score1.png")no-repeat left center;
background-size: auto 100%;
}
.evaluate .start .iconImg>div{
display: block;
height: 100%;
background: url("../images/game_score2.png")no-repeat left center;
background-size: auto 100%;
}
.evaluate-box{
display: flex;
flex-direction: column;
}
.evaluate-box:last-child,.evaluate-box:nth-child(2){
align-items: center;
justify-content: center;
}
.evaluate-box .grade{
margin-top: 0.19rem;
font-size: 0.24rem;
color: #D3D3D3;
font-weight: 400;
}
.slide_list{
width: 100%;
margin-top:0.4rem;
padding-bottom: 0.39rem;
border-bottom: 1px solid #DEDEDE;
}
.slide-box{
display: -webkit-box;
overflow-x: auto;
/*适应苹果*/
-webkit-overflow-scrolling:touch;
font-size: 0.2rem;
font-size: 100%;
font-weight: normal;
margin: 0;
padding: 0;
}
.slide-item{
width: 4.4rem;
/*height: 6.22rem;*/
margin-right: 30px;
list-style: none;
}
.slide-item >img{
width: 100%;
height: 7.82rem;
pointer-events: none;
}
/*隐藏掉滚动条*/
.slide-box::-webkit-scrollbar {
display: none;
}
.synopsis{
margin-top: 0.41rem;
padding-bottom: 0.38rem;
border-bottom: 1px solid #DEDEDE;
}
.synopsis>div:first-child{
font-size:0.4rem;
font-weight:700;
color:rgba(41,41,41,1);
margin-bottom: 0.41rem;
}
.synopsis>div:nth-child(2){
font-weight:400;
color:rgba(41,41,41,1);
line-height:0.4rem;
font-size: 0.28rem;
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
padding-bottom: 20px;
}
.synopsis>div:last-child{
position: relative;
margin-top: -0.4rem;
}
.synopsis>div:last-child .bg-blur{
background-color: #fff;
-webkit-filter:blur(0.2rem);
filter:blur(0.2rem);
width: 100%;
height: 1rem;
}
.more{
position: absolute;
top: 0.6rem;
left: 50%;
margin-left: -0.7948rem;
font-size: 0.36rem;
color: #2281F5;
/* background-color: #fff; */
}
.appraisal{
margin-top: 0.38rem;
}
.appraisal .title{
font-size:0.4rem;
font-weight:700;
color:rgba(41,41,41,1);
}
.appraisal-box{
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 0.4rem;
padding-bottom: 0.39rem;
border-bottom: 1px solid #DEDEDE;
}
.appraisal-box .left{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.appraisal-box .left>span:first-child{
font-size: 1.2rem;
font-weight: 800;
color: #4B4C50;
}
.appraisal-box .left>span:last-child{
font-size: 0.28rem;
color: #4B4C50;
font-weight: 500;
}
.appraisal-box .right{
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: flex-end;
}
.appraisal-box .right>.start-number{
display: flex;
align-items:center;
justify-content: flex-end;
margin-bottom: 0.06rem;
}
.appraisal-box .right>.start-number .start{
display: flex;
align-items: center;
}
.appraisal-box .right>.start-number .start>img{
width: 0.16rem;
height: 0.16rem;
}
.appraisal-box .right>.start-number .strip{
width: 3rem;
height: 0.04rem;
background-color: #E0E0E0;
position: relative;
margin-left: 0.33rem;
}
.appraisal-box .right>.start-number .strip>div{
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #4B4C50;
}
.appraisal-box .right>.mark{
font-size:0.24rem;
font-weight:400;
color:rgba(75,76,80,1);
margin-top: 0.26rem;
}
.device{
margin-top: 0.4rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid #DEDEDE;
}
.device .title{
font-size:0.4rem;
font-weight:500;
color:rgba(41,41,41,1);
}
.device .soon-title{
margin-top: 0.4rem;
font-size: 0.28rem;
color: #292929;
}
.device .del{
font-size: 0.28rem;
color: #292929;
}
.information{
margin-top: 0.39rem;
}
.information .title{
font-size:0.4rem;
font-weight:500;
color:rgba(41,41,41,1);
margin-bottom: 0.52rem;
}
.information .data-box{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0.3rem;
border-bottom: 1px solid #DEDEDE;
margin-bottom: 0.29rem;
}
.information .data-box>span{
font-size: 0.24rem;
color: #A9A9A9;
font-weight: 400;
}
.information .data-box>div{
font-size: 0.24rem;
color: #292929;
font-weight: 400;
}
.privacy{
font-size: 0.24rem;
color: #292929;
font-weight: 400;
}
.foot{
background-color: #101010;
width: 100%;
padding: 0.29rem 0 0.24rem 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.2rem;
color: #D3D3D3;
margin-top: 0.92rem;
}
.foot div:first-child{
display: flex;
align-items: center;
color: #D3D3D3;
font-weight:400;
font-size: 0.24rem;
}
.foot div:first-child>div{
font-size: 0.24rem;
}
.foot div:first-child>div:first-child{
margin-right: 0.5rem;
}
.foot div:nth-child(2){
margin-top: 0.18rem;
margin-bottom: 0.18rem;
}
.window{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background:rgba(0,0,0,0.6);
}
.containner{
width: 5.50rem;
height: 7.82rem;
background: url(../images/landing_bg.png) no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: flex-end;
}
.containner-box{
padding: 0 0.39rem 0.15rem 0.36rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.containner-box .text{
font-size:0.24rem;
font-weight:400;
color:rgba(41,41,41,1);
line-height:0.36rem;
}
.blue-btn{
width: 4.40rem;
height:0.7rem;
margin: 0.15rem 0;
background:linear-gradient(0deg,rgba(33,177,235,1),rgba(88,197,240,1));
box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17);
border-radius:0.35rem;
text-align: center;
line-height: 0.7rem;
font-size: 0.28rem;
color: #FFf;
}
.gray-btn{
width: 4.40rem;
height:0.7rem;
margin: 0.15rem 0;
background:linear-gradient(0deg,rgba(196,196,196,1),rgba(217,218,218,1));
box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17);
border-radius:0.35rem;
text-align: center;
line-height: 0.7rem;
font-size: 0.28rem;
color: #FFf;
}
.second{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background:rgba(0,0,0,0.6);
}
.second-box{
width: 5.50rem;
height: 7.4rem;
border-radius:0.3rem;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
.second-box .title{
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
height: 1rem;
width: 100%;
line-height: 1rem;
background-color: #489EF6;
font-size: 0.32rem;
font-weight: 500;
text-align: center;
color: #fff;
}
.carousel{
width: 100%;
margin-top: 0.3rem;
}
.swiper-container{
padding-bottom: 0.6rem;
}
.swiper-slide{
width: 100%;
}
.swiper-slide-box{
padding: 0 0.5rem;
}
.swiper-slide-box>div:first-child{
margin-bottom: 0.3rem;
font-size:0.28rem;
font-weight:400;
color:rgba(41,41,41,1);
line-height:0.36rem;
}
.swiper-slide-box>.slide-img{
width: 100%;
position: relative;
font-size: 0.2rem;
}
.swiper-slide-box>.slide-img .case{
position: absolute;
right: 0;
top: -0.18rem;
width: 0.8rem;
height: 0.8rem;
}
.swiper-slide-box>.slide-img>img:first-child{
width: 100%;
}
.swiper-container-horizontal>.swiper-pagination-bullets{
bottom: -9px !important;
}
.safari{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
font-family:PingFang SC;
}
.safari-heard{
width: 6.3rem;
margin-top: 1.4rem;
font-size:0.36rem;
font-weight:500;
color:rgba(255,255,255,1);
display: flex;
justify-content: flex-end;
}
.safari-heard>div{
margin-top: 0.65rem;
}
.safari-heard>img{
width: 1rem;
height: 0.8rem;
margin-left: 0.25rem;
}
.safari-info{
margin-top: 2.4rem;
background: url("../images/safari_bg.png") no-repeat;
width: 6.3rem;
height: 2.8rem;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.safari-info>img{
width: 1.5rem;
height: 1.5rem;
margin-right: 0.24rem;
}
.safari-info>div{
color: #fff;
font-size: 0.32rem;
font-weight: 500;
}
.safari-info>div a{
color: #FCE44B;
font-size: 0.32rem;
font-weight: 500;
}
.register{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background:rgba(0,0,0,0.6);
z-index: 1000;
}
.register-box{
width: 6rem;
height: 7.4rem;
background-color: #fff;
border-radius: 0.3rem;
}
.register-heard{
height: 1rem;
width: 100%;
text-align: center;
line-height: 1rem;
background-color: #489EF6;
font-size: 0.32rem;
color: #fff;
font-weight: 500;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
position: relative;
}
.register-heard>a{
position: absolute;
left: 0.4rem;
top: 0.35rem;
width: 0.17rem;
height: 0.3rem;
background: url("../images/20191225/fanhui.png");
background-size: 100% 100%;
}
.register-input{
margin-top:0.75rem ;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.input-box{
display: flex;
align-items: center;
width: 4.4rem;
border-bottom: 1px solid #C9C9C9;
padding-bottom: 0.14rem;
margin-bottom: 0.51rem;
}
.input-box>img{
width: 0.3rem;
height: 0.3rem;
margin-right: 0.16rem;
}
.input-box>input{
border: 0;
outline: 0;
font-size: 0.24rem;
width: 4rem;
}
.input-code{
width: 4.4rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.input-code>div:first-child{
display: flex;
align-items: center;
width: 2.6rem;
padding-bottom: 0.14rem;
border-bottom: 1px solid #C9C9C9;
font-size: 0.24rem;
}
.input-code>div>img{
width: 0.3rem;
height: 0.3rem;
margin-right: 0.16rem;
}
.input-code>div>input{
border: 0;
outline: 0;
font-size: 0.24rem;
width: 2rem;
}
.input-code>img{
width: 1.6rem;
height: 0.6rem;
border: 1px solid #C9C9C9;
border-radius: 0.1rem;
}
.register-btn{
margin-top: 0.94rem;
width:4.6rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.register-btn>div{
width:2rem;
height:0.7rem;
background:linear-gradient(0deg,rgba(33,177,235,1),rgba(88,197,240,1));
box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17);
border-radius:0.35rem;
font-size: 0.28rem;
color: #FFFFFF;
text-align: center;
line-height: 0.7rem;
}
.register-forget{
width: 4.8rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.4rem;
}
.register-forget>div{
display: flex;
align-items: center;
color: #21B1EB;
font-size: 0.24rem;
}
.register-forget>div>img{
width: 0.3rem;
height: 0.3rem;
margin-right: 0.06rem;
}
.input-code .gain{
width: 1.6rem;
height: 0.5rem;
background:rgba(33,177,235,1);
border-radius:0.25rem;
font-size: 0.24rem;
color: #fff;
text-align: center;
line-height: 0.5rem;
align-content: center;
justify-content: center;
}
.modification{
width:4.40rem;
height:0.7rem;
background:linear-gradient(0deg,rgba(33,177,235,1),rgba(88,197,240,1));
box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17);
border-radius:0.35rem;
margin-top: 0.84rem;
text-align: center;
line-height: 0.7rem;
color: #fff;
font-size: 0.28rem;
}
.register-forget>div>div>div{
color: #292929;
font-size: 0.18rem;
}
.register-forget>div>div>div>span{
color: #E30000;
font-size: 0.2rem;
}
.mounting{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background:rgba(0,0,0,0.6);
z-index: 1000;
}
.mounting-box{
width: 5.7rem;
height: 7rem;
background-color: #fff;
border-radius: 0.3rem;
}
.mounting-heard{
height: 1rem;
width: 100%;
text-align: center;
line-height: 1rem;
background-color: #489EF6;
font-size: 0.32rem;
color: #fff;
font-weight: 500;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.mounting-text{
margin-top: 0.67rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title-one{
display: flex;
align-content: center;
color: #292929;
font-size: 0.28rem;
font-weight: bold;
width: 4.6rem;
}
.title-one>img{
width: 0.3rem;
height: 0.3rem;
}
.one-contain{
width: 4.6rem;
margin-top: 0.32rem;
color: #292929;
font-size: 0.24rem;
font-weight: 400;
line-height: 0.4rem;
}
.one-contain>span{
color: #489EF6;
font-size: 0.24rem;
font-weight: 400;
}
.mounting-btn{
width:4.6rem;
height:0.7rem;
background:linear-gradient(0deg,rgba(33,177,235,1),rgba(88,197,240,1));
box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17);
border-radius:0.35rem;
text-align: center;
line-height: 0.7rem;
font-size: 0.28rem;
color: #FFFFFF;
margin-top: 0.46rem;
}
.title-two{
margin-top: 0.67rem;
color: #292929;
font-size: 0.28rem;
font-weight: bold;
width: 4.6rem;
}