300 lines
7.9 KiB
SCSS
300 lines
7.9 KiB
SCSS
@function px2rem($px, $rem:75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
@font-face{
|
|
font-family: 'pingfang-medium';
|
|
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
|
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
|
url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
|
|
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
|
}
|
|
|
|
@font-face{
|
|
font-family: 'pingfang-bold';
|
|
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
|
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
|
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
|
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
|
}
|
|
|
|
body{
|
|
font-family: 'pingfang-medium';
|
|
// background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
|
|
background-color: #F43C58;
|
|
}
|
|
|
|
.banner{
|
|
width: px2rem(750);
|
|
height: px2rem(620);
|
|
background: url('../images/mall/banner.png') no-repeat 0 0/100% 100%;
|
|
}
|
|
.buy-area{
|
|
width: px2rem(700);
|
|
// height: px2rem(900);
|
|
// height: px2rem(1080);
|
|
height: px2rem(928);
|
|
margin: auto;
|
|
box-sizing: border-box;
|
|
padding: px2rem(90) px2rem(38) 0 px2rem(56);
|
|
background: url('../images/mall/buy-area.png') no-repeat 0 0/100% 100%;
|
|
margin-top: px2rem(-300);
|
|
&.bg-long{
|
|
background-image: url('../images/mall/buy-area-long.png');
|
|
}
|
|
li{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: px2rem(60);
|
|
&.li-bg-long{
|
|
margin-bottom: px2rem(90);
|
|
}
|
|
.headwear-pic{
|
|
width: px2rem(130);
|
|
height: px2rem(130);
|
|
background-color: #F43C58;
|
|
border-radius: px2rem(30);
|
|
margin-right: px2rem(20);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img{
|
|
width: px2rem(100);
|
|
height: px2rem(100);
|
|
}
|
|
}
|
|
.headwear-info{
|
|
flex: 1;
|
|
height: px2rem(110);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
color: #C58138;
|
|
font-size: px2rem(24);
|
|
.headwear-name{
|
|
font-size: px2rem(32);
|
|
font-weight: bold;
|
|
}
|
|
.headwear-price{
|
|
margin-bottom: px2rem(-12);
|
|
}
|
|
.headwear-award{
|
|
color: #ED7B50;
|
|
}
|
|
}
|
|
.buy-btn{
|
|
width: px2rem(134);
|
|
height: px2rem(62);
|
|
img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bottom{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: px2rem(130);
|
|
background: url('../images/mall/bottom.png') no-repeat 0 0/100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
&.mb-long{
|
|
margin-bottom: px2rem(68);
|
|
}
|
|
.avatar{
|
|
width: px2rem(100);
|
|
height: px2rem(100);
|
|
margin-left: px2rem(42);
|
|
margin-right: px2rem(20);
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.info-wrap{
|
|
flex: 1;
|
|
margin-top: px2rem(14);
|
|
.fragment-num, .diamond-num{
|
|
width: px2rem(250);
|
|
height: px2rem(42);
|
|
background-color: #BD7F38;
|
|
border-radius: px2rem(20);
|
|
line-height: px2rem(42);
|
|
font-size: px2rem(26);
|
|
font-weight: bold;
|
|
color: white;
|
|
text-indent: px2rem(10);
|
|
margin-bottom: px2rem(10);
|
|
}
|
|
}
|
|
.add{
|
|
width: px2rem(41);
|
|
height: px2rem(41);
|
|
margin-top: px2rem(-48);
|
|
margin-right: px2rem(70);
|
|
}
|
|
.recharge{
|
|
width: px2rem(144);
|
|
height: px2rem(62);
|
|
margin-right: px2rem(74);
|
|
img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fill-color{
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: px2rem(70);
|
|
background-color:#60acfb;
|
|
}
|
|
// 购买弹窗
|
|
.shade-mask-buy{
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
.shade-content-buy{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: px2rem(600);
|
|
height: px2rem(600);
|
|
border-radius: px2rem(24);
|
|
background-color: white;
|
|
.title{
|
|
font-family: 'pingfang-bold';
|
|
font-size: px2rem(36);
|
|
font-weight: bold;
|
|
color: #333333;
|
|
text-align: center;
|
|
margin: px2rem(36) 0 px2rem(44);
|
|
span{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.buy-num, .buy-day, .buy-price{
|
|
font-size: px2rem(30);
|
|
color: #333333;
|
|
margin-bottom: px2rem(64);
|
|
margin-left: px2rem(48);
|
|
p{
|
|
font-weight: 550;
|
|
}
|
|
}
|
|
.buy-num{
|
|
display: flex;
|
|
align-items: center;
|
|
height: px2rem(60);
|
|
.decrease, .increase{
|
|
width: px2rem(60);
|
|
height: px2rem(60);
|
|
margin-right: px2rem(20);
|
|
img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
input{
|
|
width: px2rem(160);
|
|
height: px2rem(60);
|
|
border-radius: px2rem(30);
|
|
background-color: #EAE5FC;
|
|
color: #7154EE;
|
|
text-align: center;
|
|
margin-right: px2rem(20);
|
|
outline: none;
|
|
caret-color: #7154EE;
|
|
}
|
|
}
|
|
.buy-day, .buy-price{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.buy-confirm-btn{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: px2rem(512);
|
|
height: px2rem(76);
|
|
margin: px2rem(90) auto 0;
|
|
.cancel, .confirm{
|
|
width: px2rem(240);
|
|
height: px2rem(76);
|
|
line-height: px2rem(76);
|
|
background-color: #EAE5FC;
|
|
font-size: px2rem(28);
|
|
color: #7154EE;
|
|
text-align: center;
|
|
border-radius: px2rem(38);
|
|
}
|
|
.confirm{
|
|
background-image: linear-gradient(#735FFE, #8776FF);
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 余额不足弹窗
|
|
.shade-mask-no-money{
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
.shade-content-no-money{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: px2rem(600);
|
|
height: px2rem(600);
|
|
border-radius: px2rem(24);
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.no-money-title{
|
|
font-size: px2rem(36);
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin: px2rem(36) 0 px2rem(108);
|
|
}
|
|
.no-money-pic{
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
margin-bottom: px2rem(50);
|
|
}
|
|
.no-money-tip{
|
|
font-size: px2rem(30);
|
|
font-weight: 550;
|
|
color: #333333;
|
|
}
|
|
.no-money-recharge{
|
|
width: px2rem(240);
|
|
height: px2rem(76);
|
|
background-image: linear-gradient(#735FFE, #8776FF);
|
|
border-radius: px2rem(38);
|
|
line-height: px2rem(76);
|
|
text-align: center;
|
|
color: white;
|
|
margin-top: px2rem(90);
|
|
}
|
|
}
|
|
}
|