366 lines
8.5 KiB
CSS
366 lines
8.5 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");
|
|
}
|
|
@font-face {
|
|
font-family: "pingfang-regular";
|
|
src: url("../../../common/fonts/PingFang-Regular.ttf");
|
|
src: url("../../../common/fonts/PingFang-Regular.ttf") format("woff"), url("../../../common/fonts/PingFang-Regular.ttf") format("truetype"), url("../../../common/fonts/PingFang-Regular.ttf") format("svg");
|
|
}
|
|
body {
|
|
font-family: "pingfang-medium";
|
|
background: #7956F2;
|
|
}
|
|
|
|
.wrap {
|
|
background: url("../images/bg.png") no-repeat 0 0/100%;
|
|
overflow: hidden;
|
|
}
|
|
.wrap .rule-btn {
|
|
position: relative;
|
|
}
|
|
.wrap .rule-btn div {
|
|
position: absolute;
|
|
top: 0.6133333333rem;
|
|
right: 0;
|
|
width: 1.84rem;
|
|
height: 0.64rem;
|
|
line-height: 0.64rem;
|
|
background: url(../images/introduce.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 0.3466666667rem;
|
|
}
|
|
.wrap ul.buy-area {
|
|
margin-top: 4.133333rem;
|
|
margin-bottom: 3.2rem;
|
|
overflow: hidden;
|
|
}
|
|
.wrap ul.buy-area li {
|
|
position: relative;
|
|
width: 8rem;
|
|
height: 6.1333333333rem;
|
|
margin: 0.8266666667rem auto 0;
|
|
overflow: hidden;
|
|
}
|
|
.wrap ul.buy-area li .headwear-info {
|
|
margin-left: 3.8666666667rem;
|
|
margin-top: 2.4rem;
|
|
}
|
|
.wrap ul.buy-area li .headwear-info .headwear-name {
|
|
font-family: "pingfang-bold";
|
|
font-size: 0.4rem;
|
|
font-weight: bold;
|
|
color: #FFF600;
|
|
}
|
|
.wrap ul.buy-area li .headwear-info .headwear-price {
|
|
line-height: 0.5333333333rem;
|
|
color: #fff;
|
|
font-size: 0.2933333333rem;
|
|
}
|
|
.wrap ul.buy-area li .headwear-info .headwear-award {
|
|
color: #fff;
|
|
font-size: 0.2933333333rem;
|
|
margin-top: 0.2666666667rem;
|
|
}
|
|
.wrap ul.buy-area li .headwear-info .buy-btn {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0.4rem;
|
|
width: 4.8rem;
|
|
height: 0.96rem;
|
|
line-height: 0.96rem;
|
|
background: url("../images/buy-btn.png") no-repeat 0 0/100% 100%;
|
|
font-size: 0.4rem;
|
|
cursor: pointer;
|
|
color: #7944DA;
|
|
font-size: 0.4266666667rem;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
.wrap ul.buy-area li .headwear-info .buy-btn .headwear-price-wrap img.icon {
|
|
width: 0.5066666667rem;
|
|
height: 0.4rem;
|
|
margin-left: 0.2666666667rem;
|
|
}
|
|
.wrap ul.buy-area li .headwear-info .buy-btn .tip {
|
|
width: 2.6666666667rem;
|
|
height: 0.8rem;
|
|
line-height: 0.8rem;
|
|
background: url("../images/buy-btn.png") no-repeat 0 0/100% 100%;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #3E0D07;
|
|
}
|
|
|
|
.mine {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: 1.6rem;
|
|
background: url(../images/bottom.png) no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.mine .avatar {
|
|
width: 1.0666666667rem;
|
|
height: 1.0666666667rem;
|
|
margin-left: 0.4rem;
|
|
margin-right: 0.2666666667rem;
|
|
}
|
|
.mine .avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
.mine .info-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
height: 68%;
|
|
font-size: 0.4rem;
|
|
color: #fff;
|
|
}
|
|
.mine .info-wrap .nick {
|
|
font-size: 0.4rem;
|
|
}
|
|
.mine .info-wrap div {
|
|
display: flex;
|
|
font-family: "pingfang-regular";
|
|
font-size: 0.2933333333rem;
|
|
}
|
|
.mine .info-wrap div p {
|
|
margin-right: 0.5333333333rem;
|
|
}
|
|
|
|
.rule-mask {
|
|
width: 7.4666666667rem;
|
|
height: 8rem;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -3.7333333333rem;
|
|
margin-top: -4rem;
|
|
z-index: 1001;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
display: none;
|
|
}
|
|
.rule-mask .title {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 0.4266666667rem;
|
|
color: #5B1DC2;
|
|
margin-top: 0.4rem;
|
|
font-weight: bold;
|
|
}
|
|
.rule-mask .content {
|
|
width: 100%;
|
|
height: 6rem;
|
|
margin: 0 auto;
|
|
margin-top: 0.4rem;
|
|
overflow: auto;
|
|
padding: 0 0.5333333333rem 0 0.9333333333rem;
|
|
box-sizing: border-box;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.rule-mask .content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.rule-mask .content p {
|
|
margin-bottom: 0.2666666667rem;
|
|
font-size: 0.4rem;
|
|
line-height: 0.5066666667rem;
|
|
width: 100%;
|
|
text-indent: -0.4533333333rem;
|
|
color: #666;
|
|
}
|
|
.rule-mask .cancel {
|
|
width: 0.32rem;
|
|
height: 0.32rem;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
}
|
|
.rule-mask .cancel img {
|
|
width: 100%;
|
|
}
|
|
|
|
.shade {
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background: black;
|
|
opacity: 0.7;
|
|
display: none;
|
|
}
|
|
|
|
.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.5866666667rem;
|
|
}
|
|
.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.8533333333rem;
|
|
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.2666666667rem;
|
|
}
|
|
.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.1333333333rem;
|
|
height: 0.8rem;
|
|
border-radius: 0.4rem;
|
|
background-color: #EAE5FC;
|
|
color: #7154EE;
|
|
text-align: center;
|
|
margin-right: 0.2666666667rem;
|
|
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.8266666667rem;
|
|
height: 1.0133333333rem;
|
|
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.0133333333rem;
|
|
line-height: 1.0133333333rem;
|
|
background-color: #EAE5FC;
|
|
font-size: 0.3733333333rem;
|
|
color: #7154EE;
|
|
text-align: center;
|
|
border-radius: 0.5066666667rem;
|
|
}
|
|
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
|
background-image: linear-gradient(#735FFE, #8776FF);
|
|
color: white;
|
|
}
|
|
|
|
.shade-mask-success,
|
|
.shade-mask-no-money {
|
|
display: none;
|
|
width: 7.4666666667rem;
|
|
height: 6.1333333333rem;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1001;
|
|
border-radius: 0.2133333333rem;
|
|
background-color: white;
|
|
}
|
|
.shade-mask-success .title,
|
|
.shade-mask-no-money .title {
|
|
font-size: 0.4533333333rem;
|
|
color: #333;
|
|
text-align: center;
|
|
margin-top: 0.5333333333rem;
|
|
}
|
|
.shade-mask-success .pic-icon,
|
|
.shade-mask-no-money .pic-icon {
|
|
width: 1.6266666667rem;
|
|
height: 1.6266666667rem;
|
|
margin: 0 auto;
|
|
margin-top: 0.3466666667rem;
|
|
}
|
|
.shade-mask-success .pic-icon img,
|
|
.shade-mask-no-money .pic-icon img {
|
|
width: 100%;
|
|
}
|
|
.shade-mask-success .tip,
|
|
.shade-mask-no-money .tip {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: #999;
|
|
margin-top: 0.3466666667rem;
|
|
}
|
|
.shade-mask-success .in-btn,
|
|
.shade-mask-success .recharge,
|
|
.shade-mask-no-money .in-btn,
|
|
.shade-mask-no-money .recharge {
|
|
width: 2.8rem;
|
|
height: 1.0133333333rem;
|
|
border-radius: 0.6666666667rem;
|
|
background-color: #7154EE;
|
|
color: #fff;
|
|
font-size: 0.4rem;
|
|
text-align: center;
|
|
line-height: 1.0133333333rem;
|
|
margin: 0 auto;
|
|
margin-top: 0.5333333333rem;
|
|
}
|
|
|
|
/*# sourceMappingURL=index.css.map */
|