Files
peko-h5/view/peko/activity/explore/css/index.css
2023-02-23 12:00:45 +08:00

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 */