相关活动购买头饰新增时间
This commit is contained in:
Dragon
@@ -1,289 +1,346 @@
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 0.6666666667rem;
|
||||
left: 0.4533333333rem;
|
||||
z-index: 99999999;
|
||||
width: 0.8266666667rem;
|
||||
height: 0.8266666667rem; }
|
||||
.back img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: calc(100vh); }
|
||||
|
||||
.more {
|
||||
width: 10rem;
|
||||
height: 100%;
|
||||
background: url("../images/more.png");
|
||||
background-size: 100% 100%;
|
||||
position: relative; }
|
||||
.more .wanfa {
|
||||
width: 1.68rem;
|
||||
height: 0.5866666667rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2.1066666667rem; }
|
||||
.more .wanfa img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.more .dress_wrap {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 1.6rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
overflow-y: scroll; }
|
||||
.more .dress_wrap::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.more .dress_wrap .dress {
|
||||
width: 4.9866666667rem;
|
||||
height: 4.9866666667rem;
|
||||
background: url("../images/dress.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: -0.15rem;
|
||||
position: relative; }
|
||||
.more .dress_wrap .dress:nth-child(2n) {
|
||||
background: url("../images/dress2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
right: 0.15rem; }
|
||||
.more .dress_wrap .dress .gift_img {
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1.8rem; }
|
||||
.more .dress_wrap .dress .title {
|
||||
position: absolute;
|
||||
top: 3.5rem;
|
||||
left: 0.5rem;
|
||||
font-size: 0.2666666667rem;
|
||||
color: #fff; }
|
||||
.more .dress_wrap .dress .give {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
font-size: 0.2666666667rem;
|
||||
color: #0A0092; }
|
||||
.more .dress_wrap .dress .diamond {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 0.5rem;
|
||||
width: 0.2933333333rem;
|
||||
height: 0.2266666667rem; }
|
||||
.more .dress_wrap .dress .diamondNum {
|
||||
position: absolute;
|
||||
top: 3.99rem;
|
||||
left: 0.85rem;
|
||||
font-size: 0.2666666667rem;
|
||||
font-weight: 600;
|
||||
color: #FFF577; }
|
||||
.more .dress_wrap .dress .buy {
|
||||
width: 1.5066666667rem;
|
||||
height: 0.7466666667rem;
|
||||
position: absolute;
|
||||
bottom: 0.6rem;
|
||||
right: 0.7333333333rem; }
|
||||
.more .dress_wrap .dress .buy img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.more .me {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 10rem;
|
||||
height: 2.1733333333rem;
|
||||
background-color: #320FE6;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
.more .me .left {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: -0.3rem; }
|
||||
.more .me .left .touxiang {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
border-radius: 50%; }
|
||||
.more .me .left .nick {
|
||||
font-size: 0.32rem;
|
||||
color: #EFDFC6; }
|
||||
.more .me .right {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: -0.3rem; }
|
||||
.more .me .right .ranyou {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
height: 0.4666666667rem;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 0.2rem; }
|
||||
.more .me .right .ranyou img {
|
||||
width: 0.4533333333rem;
|
||||
height: 0.5066666667rem;
|
||||
position: absolute;
|
||||
top: -0.08rem;
|
||||
left: 0; }
|
||||
.more .me .right .ranyou span {
|
||||
font-size: 0.2666666667rem;
|
||||
color: #FFFFFF;
|
||||
padding-left: 0.4533333333rem;
|
||||
padding-right: 0.0533333333rem; }
|
||||
.more .me .right .zuanshi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
height: 0.4666666667rem;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 0.2rem; }
|
||||
.more .me .right .zuanshi img {
|
||||
width: 0.55rem;
|
||||
height: 0.48rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.2rem; }
|
||||
.more .me .right .zuanshi span {
|
||||
font-size: 0.2666666667rem;
|
||||
color: #FFFFFF;
|
||||
padding-left: 0.4533333333rem;
|
||||
padding-right: 0.0533333333rem; }
|
||||
|
||||
.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.5); }
|
||||
.shade-mask-buy .shade-content-buy {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 7.7333333333rem;
|
||||
height: 6.0266666667rem;
|
||||
background: url("../images/shade_buy.png");
|
||||
background-size: 100% 100%; }
|
||||
.shade-mask-buy .shade-content-buy .title {
|
||||
width: 7.5466666667rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.6666666667rem; }
|
||||
.shade-mask-buy .shade-content-buy .title p,
|
||||
.shade-mask-buy .shade-content-buy .title span {
|
||||
font-size: 0.32rem;
|
||||
color: #49E7F2;
|
||||
font-weight: 600; }
|
||||
.shade-mask-buy .shade-content-buy .buy-num {
|
||||
height: 0.6rem;
|
||||
margin-top: 2rem;
|
||||
margin-left: 1.5333333333rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #49E7F2;
|
||||
font-size: 0.32rem; }
|
||||
.shade-mask-buy .shade-content-buy .buy-num .inputNum {
|
||||
width: 1.4933333333rem;
|
||||
height: 0.5933333333rem;
|
||||
background: #3B4CF5;
|
||||
color: #fff;
|
||||
margin: 0 0.2rem;
|
||||
text-align: center;
|
||||
border: none;
|
||||
outline: none; }
|
||||
.shade-mask-buy .shade-content-buy .buy-num .decrease {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.56rem;
|
||||
margin-left: 0.4rem; }
|
||||
.shade-mask-buy .shade-content-buy .buy-num .decrease img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.shade-mask-buy .shade-content-buy .buy-num .increase {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.56rem; }
|
||||
.shade-mask-buy .shade-content-buy .buy-num .increase img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.shade-mask-buy .shade-content-buy .buy-day,
|
||||
.shade-mask-buy .shade-content-buy .buy-price {
|
||||
height: 0.3466666667rem;
|
||||
margin-top: 0.3rem;
|
||||
margin-left: 1.5333333333rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #49E7F2;
|
||||
font-size: 0.32rem; }
|
||||
.shade-mask-buy .shade-content-buy .buy-day .dayNum,
|
||||
.shade-mask-buy .shade-content-buy .buy-day .diamondNum,
|
||||
.shade-mask-buy .shade-content-buy .buy-price .dayNum,
|
||||
.shade-mask-buy .shade-content-buy .buy-price .diamondNum {
|
||||
font-size: 0.4rem;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-left: 0.4rem; }
|
||||
.shade-mask-buy .shade-content-buy .buy-btn {
|
||||
width: 80%;
|
||||
margin: 0.5rem auto 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly; }
|
||||
.shade-mask-buy .shade-content-buy .buy-btn .confirm,
|
||||
.shade-mask-buy .shade-content-buy .buy-btn .cancel {
|
||||
width: 2.8rem;
|
||||
height: 0.84rem; }
|
||||
|
||||
.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.5); }
|
||||
.shade-mask-no-money .no-money-wrap {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 7.7333333333rem;
|
||||
height: 6.0266666667rem;
|
||||
background: url("../images/noMoney.png");
|
||||
background-size: 100% 100%; }
|
||||
.shade-mask-no-money .no-money-wrap .no_money {
|
||||
font-size: 0.4533333333rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-top: 1.0666666667rem; }
|
||||
.shade-mask-no-money .no-money-wrap .tip {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
margin-top: 0.3466666667rem; }
|
||||
.shade-mask-no-money .no-money-wrap .buy-btn {
|
||||
width: 80%;
|
||||
margin: 4.4rem auto 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly; }
|
||||
.shade-mask-no-money .no-money-wrap .buy-btn .recharge,
|
||||
.shade-mask-no-money .no-money-wrap .buy-btn .cancel {
|
||||
width: 2.8rem;
|
||||
height: 0.84rem; }
|
||||
|
||||
/*# sourceMappingURL=more.css.map */
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 0.6666666667rem;
|
||||
left: 0.4533333333rem;
|
||||
z-index: 99999999;
|
||||
width: 0.8266666667rem;
|
||||
height: 0.8266666667rem;
|
||||
}
|
||||
.back img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
.more {
|
||||
width: 10rem;
|
||||
height: 100%;
|
||||
background: url("../images/more.png");
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
}
|
||||
.more .newDate {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.2666666667rem;
|
||||
top: 0.75rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.more .wanfa {
|
||||
width: 1.68rem;
|
||||
height: 0.5866666667rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2.1066666667rem;
|
||||
}
|
||||
.more .wanfa img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.more .dress_wrap {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 1.6rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.more .dress_wrap::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.more .dress_wrap .dress {
|
||||
width: 4.9866666667rem;
|
||||
height: 4.9866666667rem;
|
||||
background: url("../images/dress.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: -0.15rem;
|
||||
position: relative;
|
||||
}
|
||||
.more .dress_wrap .dress:nth-child(2n) {
|
||||
background: url("../images/dress2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
right: 0.15rem;
|
||||
}
|
||||
.more .dress_wrap .dress .gift_img {
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1.8rem;
|
||||
}
|
||||
.more .dress_wrap .dress .title {
|
||||
position: absolute;
|
||||
top: 3.5rem;
|
||||
left: 0.5rem;
|
||||
font-size: 0.2666666667rem;
|
||||
color: #fff;
|
||||
}
|
||||
.more .dress_wrap .dress .give {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
font-size: 0.2666666667rem;
|
||||
color: #0A0092;
|
||||
}
|
||||
.more .dress_wrap .dress .diamond {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 0.5rem;
|
||||
width: 0.2933333333rem;
|
||||
height: 0.2266666667rem;
|
||||
}
|
||||
.more .dress_wrap .dress .diamondNum {
|
||||
position: absolute;
|
||||
top: 3.99rem;
|
||||
left: 0.85rem;
|
||||
font-size: 0.2666666667rem;
|
||||
font-weight: 600;
|
||||
color: #FFF577;
|
||||
}
|
||||
.more .dress_wrap .dress .buy {
|
||||
width: 1.5066666667rem;
|
||||
height: 0.7466666667rem;
|
||||
position: absolute;
|
||||
bottom: 0.6rem;
|
||||
right: 0.7333333333rem;
|
||||
}
|
||||
.more .dress_wrap .dress .buy img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.more .me {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 10rem;
|
||||
height: 2.1733333333rem;
|
||||
background-color: #320FE6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.more .me .left {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: -0.3rem;
|
||||
}
|
||||
.more .me .left .touxiang {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.more .me .left .nick {
|
||||
font-size: 0.32rem;
|
||||
color: #EFDFC6;
|
||||
}
|
||||
.more .me .right {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: -0.3rem;
|
||||
}
|
||||
.more .me .right .ranyou {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
height: 0.4666666667rem;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
.more .me .right .ranyou img {
|
||||
width: 0.4533333333rem;
|
||||
height: 0.5066666667rem;
|
||||
position: absolute;
|
||||
top: -0.08rem;
|
||||
left: 0;
|
||||
}
|
||||
.more .me .right .ranyou span {
|
||||
font-size: 0.2666666667rem;
|
||||
color: #FFFFFF;
|
||||
padding-left: 0.4533333333rem;
|
||||
padding-right: 0.0533333333rem;
|
||||
}
|
||||
.more .me .right .zuanshi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
height: 0.4666666667rem;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
.more .me .right .zuanshi img {
|
||||
width: 0.55rem;
|
||||
height: 0.48rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.2rem;
|
||||
}
|
||||
.more .me .right .zuanshi span {
|
||||
font-size: 0.2666666667rem;
|
||||
color: #FFFFFF;
|
||||
padding-left: 0.4533333333rem;
|
||||
padding-right: 0.0533333333rem;
|
||||
}
|
||||
|
||||
.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.5);
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 7.7333333333rem;
|
||||
height: 6.0266666667rem;
|
||||
background: url("../images/shade_buy.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .title {
|
||||
width: 7.5466666667rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.6666666667rem;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .title p,
|
||||
.shade-mask-buy .shade-content-buy .title span {
|
||||
font-size: 0.32rem;
|
||||
color: #49E7F2;
|
||||
font-weight: 600;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-num {
|
||||
height: 0.6rem;
|
||||
margin-top: 2rem;
|
||||
margin-left: 1.5333333333rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #49E7F2;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-num .inputNum {
|
||||
width: 1.4933333333rem;
|
||||
height: 0.5933333333rem;
|
||||
background: #3B4CF5;
|
||||
color: #fff;
|
||||
margin: 0 0.2rem;
|
||||
text-align: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-num .decrease {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.56rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-num .decrease img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-num .increase {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.56rem;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-num .increase img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-day,
|
||||
.shade-mask-buy .shade-content-buy .buy-price {
|
||||
height: 0.3466666667rem;
|
||||
margin-top: 0.3rem;
|
||||
margin-left: 1.5333333333rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #49E7F2;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-day .dayNum,
|
||||
.shade-mask-buy .shade-content-buy .buy-day .diamondNum,
|
||||
.shade-mask-buy .shade-content-buy .buy-price .dayNum,
|
||||
.shade-mask-buy .shade-content-buy .buy-price .diamondNum {
|
||||
font-size: 0.4rem;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-btn {
|
||||
width: 80%;
|
||||
margin: 0.5rem auto 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-btn .confirm,
|
||||
.shade-mask-buy .shade-content-buy .buy-btn .cancel {
|
||||
width: 2.8rem;
|
||||
height: 0.84rem;
|
||||
}
|
||||
|
||||
.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.5);
|
||||
}
|
||||
.shade-mask-no-money .no-money-wrap {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 7.7333333333rem;
|
||||
height: 6.0266666667rem;
|
||||
background: url("../images/noMoney.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.shade-mask-no-money .no-money-wrap .no_money {
|
||||
font-size: 0.4533333333rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-top: 1.0666666667rem;
|
||||
}
|
||||
.shade-mask-no-money .no-money-wrap .tip {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
margin-top: 0.3466666667rem;
|
||||
}
|
||||
.shade-mask-no-money .no-money-wrap .buy-btn {
|
||||
width: 80%;
|
||||
margin: 4.4rem auto 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.shade-mask-no-money .no-money-wrap .buy-btn .recharge,
|
||||
.shade-mask-no-money .no-money-wrap .buy-btn .cancel {
|
||||
width: 2.8rem;
|
||||
height: 0.84rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=more.css.map */
|
||||
|
||||
@@ -38,7 +38,15 @@ body {
|
||||
background: url('../images/more.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.newDate{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(20, );
|
||||
top: 0.75rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.wanfa {
|
||||
width: px2rem(126, );
|
||||
height: px2rem(44, );
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
<body>
|
||||
<div class="back"><img src="./images/travel/back.png" alt=""></div>
|
||||
<div class="more">
|
||||
<div class="newDate"><div class="newDate">活动时间：2023/3/1/-2023/5/30</div></div>
|
||||
<!-- <a href="./play_introduce.html" class="wanfa"><img src="./images/wanfa.png" alt=""></a> -->
|
||||
<ul class="dress_wrap">
|
||||
<li class="dress">
|
||||
|
||||
@@ -1,323 +1,384 @@
|
||||
@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: #1f1063; }
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 0.6666666667rem;
|
||||
left: 0.4533333333rem;
|
||||
z-index: 9999;
|
||||
width: 0.8266666667rem;
|
||||
height: 0.8266666667rem; }
|
||||
.back img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
.wrap {
|
||||
background: url("../images/bg.png") no-repeat 0 0/100%;
|
||||
overflow: hidden; }
|
||||
.wrap .rule-btn {
|
||||
position: relative; }
|
||||
.wrap .rule-btn img {
|
||||
position: absolute;
|
||||
top: 4.8rem;
|
||||
right: 0;
|
||||
width: 1.6533333333rem;
|
||||
height: 0.6666666667rem;
|
||||
line-height: 0.64rem;
|
||||
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: #FAC2FF;
|
||||
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.2666666667rem;
|
||||
width: 4.0266666667rem;
|
||||
height: 0.8rem;
|
||||
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: 8.5333333333rem;
|
||||
height: 11.4666666667rem;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1001;
|
||||
background: #6459EF;
|
||||
border-radius: 0.4rem;
|
||||
overflow: hidden;
|
||||
display: none; }
|
||||
.rule-mask .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #fff;
|
||||
margin-top: 0.4rem;
|
||||
font-weight: bold; }
|
||||
.rule-mask .content {
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
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: #fff; }
|
||||
.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: .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: #FFFACF;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
margin-right: 0.2666666667rem;
|
||||
outline: none;
|
||||
caret-color: #000; }
|
||||
.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: #FFFACF;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #000;
|
||||
border: 1px solid #FFE710;
|
||||
text-align: center;
|
||||
border-radius: 0.5066666667rem; }
|
||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
||||
background-color: #FFE710;
|
||||
color: #000; }
|
||||
|
||||
.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.3066666667rem;
|
||||
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: #FFE710;
|
||||
color: #000;
|
||||
font-size: 0.4rem;
|
||||
text-align: center;
|
||||
line-height: 1.0133333333rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.5333333333rem; }
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
@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: #1f1063;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 0.6666666667rem;
|
||||
left: 0.4533333333rem;
|
||||
z-index: 9999;
|
||||
width: 0.8266666667rem;
|
||||
height: 0.8266666667rem;
|
||||
}
|
||||
.back img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
background: url("../images/bg.png") no-repeat 0 0/100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wrap .newDate {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.2666666667rem;
|
||||
margin-top: 4.8266666667rem;
|
||||
}
|
||||
.wrap .rule-btn {
|
||||
position: relative;
|
||||
}
|
||||
.wrap .rule-btn img {
|
||||
position: absolute;
|
||||
top: 4.8rem;
|
||||
right: 0;
|
||||
width: 1.6533333333rem;
|
||||
height: 0.6666666667rem;
|
||||
line-height: 0.64rem;
|
||||
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: #FAC2FF;
|
||||
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.2666666667rem;
|
||||
width: 4.0266666667rem;
|
||||
height: 0.8rem;
|
||||
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: 8.5333333333rem;
|
||||
height: 11.4666666667rem;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1001;
|
||||
background: #6459EF;
|
||||
border-radius: 0.4rem;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
.rule-mask .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #fff;
|
||||
margin-top: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.rule-mask .content {
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
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: #fff;
|
||||
}
|
||||
.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: #FFFACF;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
margin-right: 0.2666666667rem;
|
||||
outline: none;
|
||||
caret-color: #000;
|
||||
}
|
||||
.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: #FFFACF;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #000;
|
||||
border: 1px solid #FFE710;
|
||||
text-align: center;
|
||||
border-radius: 0.5066666667rem;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
||||
background-color: #FFE710;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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.3066666667rem;
|
||||
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: #FFE710;
|
||||
color: #000;
|
||||
font-size: 0.4rem;
|
||||
text-align: center;
|
||||
line-height: 1.0133333333rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.5333333333rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
||||
@@ -50,7 +50,14 @@ body {
|
||||
background: url('../images/bg.png') no-repeat 0 0/100%;
|
||||
// min-height: px2rem(2896);
|
||||
overflow: hidden;
|
||||
|
||||
.newDate{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(20, );
|
||||
margin-top: px2rem(362, );
|
||||
}
|
||||
.rule-btn {
|
||||
position: relative;
|
||||
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
<div class="wrap">
|
||||
<!-- 顶部返回 -->
|
||||
<div class="back"><img src="./images/travel/back.png" alt=""></div>
|
||||
<div class="newDate">活动时间：2023/3/1/-2023/5/30</div>
|
||||
<!-- 规则弹窗 -->
|
||||
<div class="rule-btn">
|
||||
<img src="./images/introduce.png" alt="">
|
||||
|
||||
@@ -1,94 +1,89 @@
|
||||
@font-face {
|
||||
font-family: 'pingfang-medium';
|
||||
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';
|
||||
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';
|
||||
font-family: "pingfang-medium";
|
||||
background-color: #F43C58;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 10rem;
|
||||
height: 8.26667rem;
|
||||
height: 8.2666666667rem;
|
||||
background: url("../images/mall/banner.png") no-repeat 0 0/100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 3.3333333333rem;
|
||||
}
|
||||
.banner .newDate {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.2666666667rem;
|
||||
}
|
||||
|
||||
.buy-area {
|
||||
width: 9.33333rem;
|
||||
height: 12.37333rem;
|
||||
width: 9.3333333333rem;
|
||||
height: 12.3733333333rem;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 1.2rem 0.50667rem 0 0.74667rem;
|
||||
padding: 1.2rem 0.5066666667rem 0 0.7466666667rem;
|
||||
background: url("../images/mall/buy-area.png") no-repeat 0 0/100% 100%;
|
||||
margin-top: -4rem;
|
||||
}
|
||||
|
||||
.buy-area.bg-long {
|
||||
background-image: url("../images/mall/buy-area-long.png");
|
||||
}
|
||||
|
||||
.buy-area li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.buy-area li.li-bg-long {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-pic {
|
||||
width: 1.73333rem;
|
||||
height: 1.73333rem;
|
||||
width: 1.7333333333rem;
|
||||
height: 1.7333333333rem;
|
||||
background-color: #F43C58;
|
||||
border-radius: 0.4rem;
|
||||
margin-right: 0.26667rem;
|
||||
margin-right: 0.2666666667rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-pic img {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
width: 1.3333333333rem;
|
||||
height: 1.3333333333rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info {
|
||||
flex: 1;
|
||||
height: 1.46667rem;
|
||||
height: 1.4666666667rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: #C58138;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info .headwear-name {
|
||||
font-size: 0.42667rem;
|
||||
font-size: 0.4266666667rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info .headwear-price {
|
||||
margin-bottom: -0.16rem;
|
||||
}
|
||||
|
||||
.buy-area li .headwear-info .headwear-award {
|
||||
color: #ED7B50;
|
||||
}
|
||||
|
||||
.buy-area li .buy-btn {
|
||||
width: 1.78667rem;
|
||||
height: 0.82667rem;
|
||||
width: 1.7866666667rem;
|
||||
height: 0.8266666667rem;
|
||||
}
|
||||
|
||||
.buy-area li .buy-btn img {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -99,60 +94,52 @@ body {
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 1.73333rem;
|
||||
height: 1.7333333333rem;
|
||||
background: url("../images/mall/bottom.png") no-repeat 0 0/100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom.mb-long {
|
||||
margin-bottom: 0.90667rem;
|
||||
margin-bottom: 0.9066666667rem;
|
||||
}
|
||||
|
||||
.bottom .avatar {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
width: 1.3333333333rem;
|
||||
height: 1.3333333333rem;
|
||||
margin-left: 0.56rem;
|
||||
margin-right: 0.26667rem;
|
||||
margin-right: 0.2666666667rem;
|
||||
}
|
||||
|
||||
.bottom .avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bottom .info-wrap {
|
||||
flex: 1;
|
||||
margin-top: 0.18667rem;
|
||||
margin-top: 0.1866666667rem;
|
||||
}
|
||||
|
||||
.bottom .info-wrap .fragment-num, .bottom .info-wrap .diamond-num {
|
||||
width: 3.33333rem;
|
||||
width: 3.3333333333rem;
|
||||
height: 0.56rem;
|
||||
background-color: #BD7F38;
|
||||
border-radius: 0.26667rem;
|
||||
border-radius: 0.2666666667rem;
|
||||
line-height: 0.56rem;
|
||||
font-size: 0.34667rem;
|
||||
font-size: 0.3466666667rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-indent: 0.13333rem;
|
||||
margin-bottom: 0.13333rem;
|
||||
text-indent: 0.1333333333rem;
|
||||
margin-bottom: 0.1333333333rem;
|
||||
}
|
||||
|
||||
.bottom .add {
|
||||
width: 0.54667rem;
|
||||
height: 0.54667rem;
|
||||
width: 0.5466666667rem;
|
||||
height: 0.5466666667rem;
|
||||
margin-top: -0.64rem;
|
||||
margin-right: 0.93333rem;
|
||||
margin-right: 0.9333333333rem;
|
||||
}
|
||||
|
||||
.bottom .recharge {
|
||||
width: 1.92rem;
|
||||
height: 0.82667rem;
|
||||
margin-right: 0.98667rem;
|
||||
height: 0.8266666667rem;
|
||||
margin-right: 0.9866666667rem;
|
||||
}
|
||||
|
||||
.bottom .recharge img {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -164,7 +151,7 @@ body {
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 0.93333rem;
|
||||
height: 0.9333333333rem;
|
||||
background-color: #60acfb;
|
||||
}
|
||||
|
||||
@@ -178,7 +165,6 @@ body {
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -189,83 +175,71 @@ body {
|
||||
border-radius: 0.32rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .title {
|
||||
font-family: 'pingfang-bold';
|
||||
font-family: "pingfang-bold";
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin: 0.48rem 0 0.58667rem;
|
||||
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.85333rem;
|
||||
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.26667rem;
|
||||
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.13333rem;
|
||||
width: 2.1333333333rem;
|
||||
height: 0.8rem;
|
||||
border-radius: 0.4rem;
|
||||
background-color: #EAE5FC;
|
||||
color: #7154EE;
|
||||
text-align: center;
|
||||
margin-right: 0.26667rem;
|
||||
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.82667rem;
|
||||
height: 1.01333rem;
|
||||
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.01333rem;
|
||||
line-height: 1.01333rem;
|
||||
height: 1.0133333333rem;
|
||||
line-height: 1.0133333333rem;
|
||||
background-color: #EAE5FC;
|
||||
font-size: 0.37333rem;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #7154EE;
|
||||
text-align: center;
|
||||
border-radius: 0.50667rem;
|
||||
border-radius: 0.5066666667rem;
|
||||
}
|
||||
|
||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
||||
background-image: linear-gradient(#735FFE, #8776FF);
|
||||
color: white;
|
||||
@@ -281,7 +255,6 @@ body {
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shade-mask-no-money .shade-content-no-money {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -295,33 +268,31 @@ body {
|
||||
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;
|
||||
margin-bottom: 0.6666666667rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 1.0133333333rem;
|
||||
background-image: linear-gradient(#735FFE, #8776FF);
|
||||
border-radius: 0.50667rem;
|
||||
line-height: 1.01333rem;
|
||||
border-radius: 0.5066666667rem;
|
||||
line-height: 1.0133333333rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=mall.css.map */
|
||||
|
||||
@@ -28,6 +28,14 @@ body{
|
||||
width: px2rem(750);
|
||||
height: px2rem(620);
|
||||
background: url('../images/mall/banner.png') no-repeat 0 0/100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: px2rem(250, );
|
||||
.newDate{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(20, );
|
||||
}
|
||||
}
|
||||
.buy-area{
|
||||
width: px2rem(700);
|
||||
|
||||
@@ -11,7 +11,9 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="banner"></div>
|
||||
<div class="banner">
|
||||
<div class="newDate">活动时间：2023年4月1日-2023年6月30日</div>
|
||||
</div>
|
||||
<ul class="buy-area">
|
||||
<li>
|
||||
<div class="headwear-pic"><img src="" alt=""></div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -541,7 +541,8 @@ body {
|
||||
text-align: center;
|
||||
margin: px2rem(30, ) auto px2rem(20, );
|
||||
color: #ED4D83;
|
||||
font-size: px2rem(30, );
|
||||
font-size: px2rem(20, );
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
width: px2rem(30, );
|
||||
@@ -553,6 +554,9 @@ body {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
position: absolute;
|
||||
left: 0.4rem;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
<!-- 抽奖按钮 -->
|
||||
<div class="drawBut js-draw-btn">试试手气</div>
|
||||
<!-- 参与活动奖品说明 -->
|
||||
<div class="illustrate"><i>?</i> 参与获得限量头饰，并赠送塔罗占卜机会</div>
|
||||
<div class="illustrate"><i>?</i> 活动时间：2023/4/1/-2023/6/30<br>参与获得限量头饰，并赠送塔罗占卜机会</div>
|
||||
<div class="illustrate_centent">
|
||||
<div class="class1">
|
||||
<img src="./image/class1.png" alt="">
|
||||
|
||||
Reference in New Issue
Block a user