手机官网-落地页
“用lww
5 years ago
parent
28db83f646
commit
07a33ab051
@ -0,0 +1,445 @@
|
||||
.home{
|
||||
width: 100%;
|
||||
font-family:PingFang SC;
|
||||
}
|
||||
.home-box{
|
||||
padding: 0.5rem 0.37rem 0 0.31rem;
|
||||
}
|
||||
.heard{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.heard>img{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
.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.32rem;
|
||||
}
|
||||
.evaluate .start>img{
|
||||
width: 0.3rem;
|
||||
height: 0.3rem;
|
||||
}
|
||||
.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: 100%;
|
||||
}
|
||||
/*隐藏掉滚动条*/
|
||||
.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;
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
/* font-size: calc(266.67% + 57.3333 * (100vw - 320px) / 430); */
|
||||
}
|
||||
/*清除一些默认样式*/
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img{border:0;}
|
||||
a{text-decoration:none; color:#000; outline:none;}
|
||||
a:hover{text-decoration:none;}
|
||||
em,strong,i{font-style:normal;}
|
||||
h1,h2,h3,h4,h5,h6,span,strong,i{font-size:100%;font-weight:normal;margin: 0;padding: 0;}
|
||||
.trans {
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-ms-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
.clearfix {*zoom:1;}
|
||||
.clearfix:after {content:'\200B';clear:both;display:block;height:0px}
|
||||
|
||||
/* html{-webkit-tap-highlight-color:transparent;} */
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 722 B |
Binary file not shown.
|
After Width: | Height: | Size: 555 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,20 @@
|
||||
function getRem(pwidth,prem){
|
||||
var html = document.getElementsByTagName("html")[0];
|
||||
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
|
||||
//var oHeight = document.body.clientHeight || document.documentElement.clientHeight;
|
||||
// if (oWidth >= pwidth) {
|
||||
// oWidth = pwidth;
|
||||
// }
|
||||
// if (oWidth > oHeight) {
|
||||
// oWidth = oHeight
|
||||
// }
|
||||
var size=oWidth/pwidth*prem;
|
||||
html.style.fontSize = size + "px";
|
||||
}
|
||||
$(document).ready(function(){
|
||||
//画布、字体大小设定
|
||||
getRem(750,100);
|
||||
$(window).resize(function() {
|
||||
getRem(750,100);
|
||||
})
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue