423 lines
7.8 KiB
CSS
423 lines
7.8 KiB
CSS
|
|
.header{
|
|
width:2.80rem;
|
|
height:1rem;
|
|
font-size:0.90rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(0,0,0,1);
|
|
margin:1.92rem auto 0 auto;
|
|
|
|
|
|
}
|
|
.page-top{
|
|
width:20rem;
|
|
height:2.35rem;
|
|
background:rgba(255,255,255,1);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
.page-top .top-it{
|
|
width: 3.2rem;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
font-size:0.80rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
text-align: center;
|
|
line-height:2.35rem ;
|
|
|
|
}
|
|
.page-top .top-it a{
|
|
color:#666364;
|
|
}
|
|
.page-top .top-it#it-1{
|
|
border-bottom: solid 0.16rem #3962A8;
|
|
}
|
|
.page-top .top-it#it-1 a{
|
|
color: #3962A8;
|
|
}
|
|
.banner{
|
|
width: 20rem;
|
|
height: 6.13rem;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.banner .wrap{
|
|
width: 40rem;
|
|
height: 6.13rem;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
.banner .wrap img
|
|
{
|
|
width: 20rem;
|
|
height: 6.13rem;
|
|
float: left;
|
|
}
|
|
.banner .banner-button{
|
|
width: 1.38rem;
|
|
height: 0.37rem;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 9.07rem;
|
|
top: 5.33rem;
|
|
|
|
}
|
|
.banner .banner-button span{
|
|
margin-left: 0.32rem;
|
|
width: 0.37rem;
|
|
height: 0.37rem;
|
|
border-radius: 50%;
|
|
display:inline-block;
|
|
float: left;
|
|
background: white;
|
|
}
|
|
.art-top,.only-top{
|
|
height: 0.8rem;
|
|
margin-top:0.8rem ;
|
|
position: relative;
|
|
}
|
|
.art-top .left,.only-top .left{
|
|
width: 0.16rem;
|
|
height: 0.69rem;
|
|
background: #3962A8;
|
|
margin-left: 0.53rem;
|
|
position: absolute;
|
|
}
|
|
.art-top .left-text,.only-top .left-text{
|
|
width: 2.4rem;
|
|
height: 0.77rem;
|
|
position: absolute;
|
|
font-size:0.8rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(51,51,51,1);
|
|
margin-left:1.09rem ;
|
|
line-height: 0.77rem;
|
|
}
|
|
.art-top img,.only-top img{
|
|
width: 0.69rem;
|
|
height: 0.69rem;
|
|
position: absolute;
|
|
margin-left: 15.73rem;
|
|
}
|
|
.art-top .right-text,.only-top .right-text{
|
|
position: absolute;
|
|
margin-left: 16.75rem;
|
|
width: 2.8rem;
|
|
height: 0.67rem;
|
|
font-size:0.69rem;
|
|
font-family:PingFang SC;
|
|
font-weight:500;
|
|
color:rgba(51,51,51,1);
|
|
line-height: 0.67rem;
|
|
}
|
|
.art{
|
|
margin-top: 1rem;
|
|
height: 4.13rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
|
|
}
|
|
.art .art-2,.art .art-3,.art .art-4{
|
|
width: 6.05rem;
|
|
height: 4.13rem;
|
|
background:rgba(245,245,245,1);
|
|
border-radius:1rem;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.art #top{
|
|
width: 3.6rem;
|
|
height: 1.07rem;
|
|
font-size:0.69rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(51,51,51,1);
|
|
background: #F7C846;
|
|
text-align: center;
|
|
line-height: 1.07rem;
|
|
}
|
|
.art #body{
|
|
width: 2.5rem;
|
|
height: 0.67rem;
|
|
margin-top: 0.59rem;
|
|
margin-left: 0.56rem;
|
|
font-size:0.69rem;
|
|
font-family:PingFang SC;
|
|
font-weight:800;
|
|
color:rgba(0,0,0,1);
|
|
line-height: 0.67rem;
|
|
}
|
|
.art #foot{
|
|
width: 2.2rem;
|
|
height: 0.8rem;
|
|
margin-top: 0.59rem;
|
|
margin-left: 0.53rem;
|
|
font-size:1.01rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(51,51,51,1);
|
|
line-height: 0.8rem;
|
|
|
|
}
|
|
.art img{
|
|
position: absolute;
|
|
width: 1.17rem;
|
|
height: 1.17rem;
|
|
top: 2.37rem;
|
|
left: 4.48rem;
|
|
}
|
|
.only-shop{
|
|
width: 18.94rem;
|
|
height: 27.26rem;
|
|
margin-top: 0.8rem;
|
|
margin-left:0.53rem ;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
align-content:space-around;
|
|
}
|
|
.only-shop .only{
|
|
height: 6.19rem;
|
|
width: 4.56rem;
|
|
}
|
|
.only-shop .only .only-body{
|
|
width: 4.56rem;
|
|
height: 4.56rem;
|
|
position: relative;
|
|
}
|
|
.only-shop .only .only-body .body-value{
|
|
width: 4.56rem;
|
|
height: 4.56rem;
|
|
}
|
|
.only-shop .only .only-body .add{
|
|
position: absolute;
|
|
width: 0.96rem;
|
|
height: 0.96rem;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: 0;
|
|
top: 3.41rem;
|
|
left: 3.44rem;
|
|
}
|
|
.only-shop .only .only-foot1{
|
|
margin-top: 0.32rem;
|
|
height: 0.56rem;
|
|
width: 4.56rem;
|
|
text-align: center;
|
|
line-height: 0.56rem;
|
|
font-size:0.56rem;
|
|
font-family:PingFang SC;
|
|
font-weight:800;
|
|
color:rgba(51,51,51,1);
|
|
}
|
|
.only-shop .only .only-foot2{
|
|
margin-top:0.27rem ;
|
|
height: 0.45rem;
|
|
font-size:0.59rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(51,51,51,1);
|
|
text-align: center;
|
|
line-height: 0.45rem;
|
|
}
|
|
.footer{
|
|
height: 3.14rem;
|
|
width: 20rem;
|
|
margin-top: 0.85rem;
|
|
border-top: 0.05rem solid #E6E3E6;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
.footer .shop{
|
|
width: 2.67rem;
|
|
height: 2.67rem;
|
|
border-radius: 50%;
|
|
margin-top: 0.21rem;
|
|
margin-left: 0.53rem;
|
|
background: pink;
|
|
position: relative;
|
|
}
|
|
.footer .shop .shoping{
|
|
width: 2.67rem;
|
|
height: 2.67rem;
|
|
border-radius: 50%;
|
|
}
|
|
.footer .shop:after{
|
|
content: "0";
|
|
width: 1.07rem;
|
|
height: 1.07rem;
|
|
background: red;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top:0.1rem;
|
|
left:2.14rem;
|
|
border-radius: 50%;
|
|
color: #FFE9E6;
|
|
text-align: center;
|
|
line-height:1.07rem ;
|
|
font-size: 0.68rem;
|
|
}
|
|
.footer .add{
|
|
width: 4.5rem;
|
|
height: 0.77rem;
|
|
font-size:0.8rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(0,0,0,1);
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
left: 9.04rem;
|
|
line-height: 0.77rem;
|
|
}
|
|
.footer .cheap{
|
|
width: 3rem;
|
|
height: 0.6rem;
|
|
font-size:0.4rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(255,51,51,1);
|
|
position: absolute;
|
|
top:1.71rem ;
|
|
left:10.33rem ;
|
|
line-height: 0.6rem;
|
|
}
|
|
.footer .gopay{
|
|
width: 5.6rem;
|
|
height: 2.12rem;
|
|
border-radius: 1.06rem;
|
|
background: #3954AB;
|
|
font-size:0.85rem;
|
|
font-family:PingFang SC;
|
|
font-weight:500;
|
|
color:rgba(255,255,255,1);
|
|
position: absolute;
|
|
line-height: 2.12rem;
|
|
text-align: center;
|
|
top: 0.54rem;
|
|
left: 13.87rem;
|
|
}
|
|
|
|
.float,.float2{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 51.8rem;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 4;
|
|
display: none;
|
|
|
|
}
|
|
.float .value{
|
|
position: absolute;
|
|
width:17.01rem;
|
|
height:15.28rem;
|
|
background:rgba(255,255,255,1);
|
|
border-radius:1rem;
|
|
top: 11.09rem;
|
|
left: 1.49rem;
|
|
}
|
|
.float .value .tite{
|
|
width:4.3rem;
|
|
height:0.83rem;
|
|
font-size:0.85rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(51,51,51,1);
|
|
line-height:0.83rem;
|
|
margin-top:1.25rem ;
|
|
margin-left: 6.29rem;
|
|
}
|
|
.float .value .body{
|
|
width:14.85rem;
|
|
height:8.63rem;
|
|
font-size:0.59rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(102,102,102,1);
|
|
line-height:0.83rem;
|
|
margin-top: 1.17rem;
|
|
margin-left: 0.99rem;
|
|
}
|
|
.float .value .button{
|
|
height: 2.2rem;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-top: 0.05rem solid rgba(230,230,230,1);
|
|
text-align: center;
|
|
line-height: 2.2rem;
|
|
font-size:0.96rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(57,85,168,1);
|
|
margin-top: 1.17rem;
|
|
}
|
|
.float2 .value{
|
|
position: absolute;
|
|
width:17.01rem;
|
|
height:11.89rem;
|
|
background:rgba(255,255,255,1);
|
|
border-radius:1rem;
|
|
top: 12.05rem;
|
|
left: 1.49rem;
|
|
}
|
|
.float2 .value .tite{
|
|
width:4.3rem;
|
|
height:0.83rem;
|
|
font-size:0.85rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(51,51,51,1);
|
|
line-height:0.83rem;
|
|
margin-top:1.25rem ;
|
|
margin-left: 6.29rem;
|
|
}
|
|
.float2 .value .body{
|
|
width:14.72rem;
|
|
height:4.7rem;
|
|
font-size:0.59rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(102,102,102,1);
|
|
line-height:0.83rem;
|
|
margin-top: 1.17rem;
|
|
margin-left: 0.99rem;
|
|
}
|
|
.float2 .value .button{
|
|
height: 2.2rem;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-top: 0.05rem solid rgba(230,230,230,1);
|
|
text-align: center;
|
|
line-height: 2.2rem;
|
|
font-size:0.96rem;
|
|
font-family:PingFang SC;
|
|
font-weight:bold;
|
|
color:rgba(57,85,168,1);
|
|
margin-top: 1.76rem;
|
|
}
|
|
.footer .cart{
|
|
position: absolute;
|
|
width:20rem;
|
|
height:9.89rem;
|
|
background:rgba(255,255,255,1);
|
|
z-index: 2;
|
|
bottom: 3.17rem;
|
|
box-sizing: border-box;
|
|
border-top: 0.03rem solid black;
|
|
display: none;
|
|
}
|
|
.footer .cart .cart-header{
|
|
width:20rem;
|
|
height:2.13rem;
|
|
background:rgba(245,245,244,1);
|
|
}
|
|
.footer .cart .cart-body{
|
|
height: 7.76rem;
|
|
width: 20rem;
|
|
} |