336 lines
7.1 KiB
CSS
336 lines
7.1 KiB
CSS
@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-color: #957BEE;
|
|
margin-bottom: 1.33333rem;
|
|
}
|
|
|
|
.banner {
|
|
width: 10rem;
|
|
height: 7.28rem;
|
|
margin: auto;
|
|
background: url("../images/mall/banner.png") no-repeat 0 0/100% 100%;
|
|
}
|
|
|
|
.buy-area {
|
|
width: 9.46667rem;
|
|
border-radius: 0.48rem;
|
|
box-sizing: border-box;
|
|
padding: 0.37333rem 0.4rem 0.48rem;
|
|
background-color: #F5F3FE;
|
|
margin: -1.54667rem auto 0;
|
|
}
|
|
|
|
.buy-area.bg-long {
|
|
background-image: url("../images/mall/buy-area-long.png");
|
|
}
|
|
|
|
.buy-area li {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 0.26667rem;
|
|
}
|
|
|
|
.buy-area li.li-bg-long {
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.buy-area li .headwear-pic {
|
|
width: 2.26667rem;
|
|
height: 2.26667rem;
|
|
background-color: rgba(149, 122, 240, 0.8);
|
|
border-radius: 0.48rem;
|
|
margin-right: 1.06667rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.buy-area li .headwear-pic img {
|
|
width: 80%;
|
|
}
|
|
|
|
.buy-area li .headwear-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.buy-area li .headwear-info .headwear-name {
|
|
font-size: 0.48rem;
|
|
font-weight: bold;
|
|
color: #6138CD;
|
|
}
|
|
|
|
.buy-area li .headwear-info .headwear-award {
|
|
font-size: 0.34667rem;
|
|
color: rgba(0, 0, 0, 0.35);
|
|
margin: 0.10667rem 0 0.21333rem;
|
|
}
|
|
|
|
.buy-area li .headwear-info .headwear-price {
|
|
width: 5.33333rem;
|
|
height: 0.8rem;
|
|
background: url("../images/mall/price-bg.png") no-repeat 0 0/100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.buy-area li .headwear-info .headwear-price .diamond-icon {
|
|
width: 0.50667rem;
|
|
height: 0.4rem;
|
|
margin: 0 0.16rem 0 0.4rem;
|
|
}
|
|
|
|
.buy-area li .headwear-info .headwear-price span {
|
|
flex: 1;
|
|
font-size: 0.4rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.buy-area li .headwear-info .headwear-price .buy-btn {
|
|
width: 2.77333rem;
|
|
height: 0.8rem;
|
|
}
|
|
|
|
.buy-area li .headwear-info .headwear-price .buy-btn img {
|
|
width: 100%;
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: 1.33333rem;
|
|
background-color: #DAC9FF;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bottom.mb-long {
|
|
margin-bottom: 0.90667rem;
|
|
}
|
|
|
|
.bottom .avatar {
|
|
width: 0.96rem;
|
|
height: 0.96rem;
|
|
margin-left: 0.4rem;
|
|
margin-right: 0.21333rem;
|
|
}
|
|
|
|
.bottom .avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.bottom .nick {
|
|
flex: 1;
|
|
font-size: 0.32rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.bottom .info-wrap {
|
|
margin-right: 0.26667rem;
|
|
}
|
|
|
|
.bottom .info-wrap .fragment-num, .bottom .info-wrap .diamond-num {
|
|
font-size: 0.32rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.bottom .info-wrap .fragment-num img, .bottom .info-wrap .diamond-num img {
|
|
width: 0.48rem;
|
|
height: 0.4rem;
|
|
margin-right: 0.08rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.bottom .info-wrap .fragment-num span, .bottom .info-wrap .diamond-num span {
|
|
color: #574FD0;
|
|
}
|
|
|
|
.bottom .info-wrap .diamond-num {
|
|
margin-top: 0.10667rem;
|
|
}
|
|
|
|
.fill-color {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: 0.93333rem;
|
|
background-color: #60acfb;
|
|
}
|
|
|
|
.shade-mask-buy {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 8rem;
|
|
height: 8rem;
|
|
border-radius: 0.32rem;
|
|
background-color: white;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .title {
|
|
font-family: 'pingfang-bold';
|
|
font-size: 0.48rem;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
text-align: center;
|
|
margin: 0.48rem 0 0.58667rem;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .title span {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-num, .shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
|
|
font-size: 0.4rem;
|
|
color: #333333;
|
|
margin-bottom: 0.85333rem;
|
|
margin-left: 0.64rem;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-num p, .shade-mask-buy .shade-content-buy .buy-day p, .shade-mask-buy .shade-content-buy .buy-price p {
|
|
font-weight: 550;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-num {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 0.8rem;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-num .decrease, .shade-mask-buy .shade-content-buy .buy-num .increase {
|
|
width: 0.8rem;
|
|
height: 0.8rem;
|
|
margin-right: 0.26667rem;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-num .decrease img, .shade-mask-buy .shade-content-buy .buy-num .increase img {
|
|
width: 100%;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-num input {
|
|
width: 2.13333rem;
|
|
height: 0.8rem;
|
|
border-radius: 0.4rem;
|
|
background-color: #EAE5FC;
|
|
color: #7154EE;
|
|
text-align: center;
|
|
margin-right: 0.26667rem;
|
|
outline: none;
|
|
caret-color: #7154EE;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-confirm-btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 6.82667rem;
|
|
height: 1.01333rem;
|
|
margin: 1.2rem auto 0;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-confirm-btn .cancel, .shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
|
width: 3.2rem;
|
|
height: 1.01333rem;
|
|
line-height: 1.01333rem;
|
|
background-color: #EAE5FC;
|
|
font-size: 0.37333rem;
|
|
color: #7154EE;
|
|
text-align: center;
|
|
border-radius: 0.50667rem;
|
|
}
|
|
|
|
.shade-mask-buy .shade-content-buy .buy-confirm-btn .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(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.shade-mask-no-money .shade-content-no-money {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 8rem;
|
|
height: 8rem;
|
|
border-radius: 0.32rem;
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.shade-mask-no-money .shade-content-no-money .no-money-title {
|
|
font-size: 0.48rem;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin: 0.48rem 0 1.44rem;
|
|
}
|
|
|
|
.shade-mask-no-money .shade-content-no-money .no-money-pic {
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
margin-bottom: 0.66667rem;
|
|
}
|
|
|
|
.shade-mask-no-money .shade-content-no-money .no-money-tip {
|
|
font-size: 0.4rem;
|
|
font-weight: 550;
|
|
color: #333333;
|
|
}
|
|
|
|
.shade-mask-no-money .shade-content-no-money .no-money-recharge {
|
|
width: 3.2rem;
|
|
height: 1.01333rem;
|
|
background-image: linear-gradient(#735FFE, #8776FF);
|
|
border-radius: 0.50667rem;
|
|
line-height: 1.01333rem;
|
|
text-align: center;
|
|
color: white;
|
|
margin-top: 1.2rem;
|
|
}
|