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.
578 lines
11 KiB
CSS
578 lines
11 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.32rem;
|
|
background: url(../images/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.58rem;
|
|
height:0.98rem;
|
|
background: url(../images/btn-blue.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size:0.28rem;
|
|
font-weight:400;
|
|
color:rgba(255,255,255,1);
|
|
text-align: center;
|
|
line-height: 0.86rem;
|
|
margin: 0.15rem 0;
|
|
}
|
|
.gray-btn{
|
|
width: 4.58rem;
|
|
height:0.98rem;
|
|
background: url(../images/btn-gray.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size:0.28rem;
|
|
font-weight:400;
|
|
color:rgba(255,255,255,1);
|
|
text-align: center;
|
|
line-height: 0.86rem;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
|
|
|