相关活动购买头饰新增时间
This commit is contained in:
Dragon
@@ -4,32 +4,47 @@
|
||||
left: 0.4533333333rem;
|
||||
z-index: 99999999;
|
||||
width: 0.8266666667rem;
|
||||
height: 0.8266666667rem; }
|
||||
.back img {
|
||||
height: 0.8266666667rem;
|
||||
}
|
||||
.back img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: calc(100vh); }
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
.more {
|
||||
width: 10rem;
|
||||
height: 100%;
|
||||
background: url("../images/more.png");
|
||||
background-size: 100% 100%;
|
||||
position: relative; }
|
||||
.more .wanfa {
|
||||
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 {
|
||||
top: 2.1066666667rem;
|
||||
}
|
||||
.more .wanfa img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.more .dress_wrap {
|
||||
height: 100%;
|
||||
}
|
||||
.more .dress_wrap {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 0;
|
||||
@@ -38,35 +53,41 @@ body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
overflow-y: scroll; }
|
||||
.more .dress_wrap::-webkit-scrollbar {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.more .dress_wrap::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.more .dress_wrap .dress {
|
||||
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) {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
color: #fff;
|
||||
}
|
||||
.more .dress_wrap .dress .give {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
@@ -74,30 +95,35 @@ body {
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
font-size: 0.2666666667rem;
|
||||
color: #0A0092; }
|
||||
.more .dress_wrap .dress .diamond {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
right: 0.7333333333rem;
|
||||
}
|
||||
.more .dress_wrap .dress .buy img {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.more .me {
|
||||
height: 100%;
|
||||
}
|
||||
.more .me {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@@ -105,63 +131,74 @@ body {
|
||||
height: 2.1733333333rem;
|
||||
background-color: #320FE6;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
.more .me .left {
|
||||
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 {
|
||||
margin-top: -0.3rem;
|
||||
}
|
||||
.more .me .left .touxiang {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
border-radius: 50%; }
|
||||
.more .me .left .nick {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.more .me .left .nick {
|
||||
font-size: 0.32rem;
|
||||
color: #EFDFC6; }
|
||||
.more .me .right {
|
||||
color: #EFDFC6;
|
||||
}
|
||||
.more .me .right {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: -0.3rem; }
|
||||
.more .me .right .ranyou {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
left: -0.2rem;
|
||||
}
|
||||
.more .me .right .zuanshi span {
|
||||
font-size: 0.2666666667rem;
|
||||
color: #FFFFFF;
|
||||
padding-left: 0.4533333333rem;
|
||||
padding-right: 0.0533333333rem; }
|
||||
padding-right: 0.0533333333rem;
|
||||
}
|
||||
|
||||
.shade-mask-buy {
|
||||
display: none;
|
||||
@@ -171,8 +208,9 @@ body {
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
.shade-mask-buy .shade-content-buy {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -180,26 +218,30 @@ body {
|
||||
width: 7.7333333333rem;
|
||||
height: 6.0266666667rem;
|
||||
background: url("../images/shade_buy.png");
|
||||
background-size: 100% 100%; }
|
||||
.shade-mask-buy .shade-content-buy .title {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-num .inputNum {
|
||||
width: 1.4933333333rem;
|
||||
height: 0.5933333333rem;
|
||||
background: #3B4CF5;
|
||||
@@ -207,46 +249,55 @@ body {
|
||||
margin: 0 0.2rem;
|
||||
text-align: center;
|
||||
border: none;
|
||||
outline: none; }
|
||||
.shade-mask-buy .shade-content-buy .buy-num .decrease {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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: 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.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 {
|
||||
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 {
|
||||
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; }
|
||||
height: 0.84rem;
|
||||
}
|
||||
|
||||
.shade-mask-no-money {
|
||||
display: none;
|
||||
@@ -256,8 +307,9 @@ body {
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
.shade-mask-no-money .no-money-wrap {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.shade-mask-no-money .no-money-wrap {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -265,25 +317,30 @@ body {
|
||||
width: 7.7333333333rem;
|
||||
height: 6.0266666667rem;
|
||||
background: url("../images/noMoney.png");
|
||||
background-size: 100% 100%; }
|
||||
.shade-mask-no-money .no-money-wrap .no_money {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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; }
|
||||
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,18 +1,22 @@
|
||||
@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"); }
|
||||
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"); }
|
||||
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';
|
||||
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"); }
|
||||
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; }
|
||||
font-family: "pingfang-medium";
|
||||
background: #1f1063;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
@@ -20,17 +24,29 @@ body {
|
||||
left: 0.4533333333rem;
|
||||
z-index: 9999;
|
||||
width: 0.8266666667rem;
|
||||
height: 0.8266666667rem; }
|
||||
.back img {
|
||||
height: 0.8266666667rem;
|
||||
}
|
||||
.back img {
|
||||
width: 100%;
|
||||
height: 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 {
|
||||
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;
|
||||
@@ -39,34 +55,41 @@ body {
|
||||
line-height: 0.64rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.3466666667rem; }
|
||||
.wrap ul.buy-area {
|
||||
font-size: 0.3466666667rem;
|
||||
}
|
||||
.wrap ul.buy-area {
|
||||
margin-top: 4.133333rem;
|
||||
margin-bottom: 3.2rem;
|
||||
overflow: hidden; }
|
||||
.wrap ul.buy-area li {
|
||||
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 {
|
||||
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';
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
margin-top: 0.2666666667rem;
|
||||
}
|
||||
.wrap ul.buy-area li .headwear-info .buy-btn {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@@ -80,19 +103,22 @@ body {
|
||||
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 {
|
||||
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 {
|
||||
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; }
|
||||
color: #3E0D07;
|
||||
}
|
||||
|
||||
.mine {
|
||||
position: fixed;
|
||||
@@ -103,32 +129,39 @@ body {
|
||||
height: 1.6rem;
|
||||
background: url(../images/bottom.png) no-repeat;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
.mine .avatar {
|
||||
align-items: center;
|
||||
}
|
||||
.mine .avatar {
|
||||
width: 1.0666666667rem;
|
||||
height: 1.0666666667rem;
|
||||
margin-left: 0.4rem;
|
||||
margin-right: 0.2666666667rem; }
|
||||
.mine .avatar img {
|
||||
margin-right: 0.2666666667rem;
|
||||
}
|
||||
.mine .avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%; }
|
||||
.mine .info-wrap {
|
||||
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 {
|
||||
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; }
|
||||
font-family: "pingfang-regular";
|
||||
font-size: 0.2933333333rem;
|
||||
}
|
||||
.mine .info-wrap div p {
|
||||
margin-right: 0.5333333333rem;
|
||||
}
|
||||
|
||||
.rule-mask {
|
||||
width: 8.5333333333rem;
|
||||
@@ -141,15 +174,17 @@ body {
|
||||
background: #6459EF;
|
||||
border-radius: 0.4rem;
|
||||
overflow: hidden;
|
||||
display: none; }
|
||||
.rule-mask .title {
|
||||
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 {
|
||||
font-weight: bold;
|
||||
}
|
||||
.rule-mask .content {
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
margin: 0 auto;
|
||||
@@ -157,24 +192,29 @@ body {
|
||||
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 {
|
||||
-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 {
|
||||
color: #fff;
|
||||
}
|
||||
.rule-mask .cancel {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px; }
|
||||
.rule-mask .cancel img {
|
||||
width: 100%; }
|
||||
top: 10px;
|
||||
}
|
||||
.rule-mask .cancel img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shade {
|
||||
width: 100%;
|
||||
@@ -184,8 +224,9 @@ body {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: black;
|
||||
opacity: .7;
|
||||
display: none; }
|
||||
opacity: 0.7;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shade-mask-buy {
|
||||
display: none;
|
||||
@@ -195,8 +236,9 @@ body {
|
||||
z-index: 999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4); }
|
||||
.shade-mask-buy .shade-content-buy {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -204,40 +246,48 @@ body {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 0.32rem;
|
||||
background-color: white; }
|
||||
.shade-mask-buy .shade-content-buy .title {
|
||||
font-family: 'pingfang-bold';
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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;
|
||||
@@ -246,19 +296,22 @@ body {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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;
|
||||
@@ -267,10 +320,12 @@ body {
|
||||
color: #000;
|
||||
border: 1px solid #FFE710;
|
||||
text-align: center;
|
||||
border-radius: 0.5066666667rem; }
|
||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
||||
border-radius: 0.5066666667rem;
|
||||
}
|
||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
||||
background-color: #FFE710;
|
||||
color: #000; }
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.shade-mask-success,
|
||||
.shade-mask-no-money {
|
||||
@@ -283,32 +338,37 @@ body {
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1001;
|
||||
border-radius: 0.3066666667rem;
|
||||
background-color: white; }
|
||||
.shade-mask-success .title,
|
||||
.shade-mask-no-money .title {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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;
|
||||
@@ -318,6 +378,7 @@ body {
|
||||
text-align: center;
|
||||
line-height: 1.0133333333rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.5333333333rem; }
|
||||
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>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
html,
|
||||
body {
|
||||
background: #f5b2c3; }
|
||||
background: #f5b2c3;
|
||||
}
|
||||
|
||||
.identity-mask {
|
||||
position: fixed;
|
||||
@@ -10,8 +11,9 @@ body {
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
z-index: 999999; }
|
||||
.identity-mask .main {
|
||||
z-index: 999999;
|
||||
}
|
||||
.identity-mask .main {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 180px;
|
||||
@@ -36,18 +38,22 @@ body {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto; }
|
||||
.identity-mask .main .title {
|
||||
margin: auto;
|
||||
}
|
||||
.identity-mask .main .title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px; }
|
||||
.identity-mask .main p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.identity-mask .main p {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: center; }
|
||||
.identity-mask .main span {
|
||||
color: #1AA9FE; }
|
||||
.identity-mask .main .button-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
.identity-mask .main span {
|
||||
color: #1AA9FE;
|
||||
}
|
||||
.identity-mask .main .button-wrapper {
|
||||
margin-top: 10px;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
@@ -56,22 +62,26 @@ body {
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
width: 220px; }
|
||||
.identity-mask .main .button-wrapper div {
|
||||
width: 220px;
|
||||
}
|
||||
.identity-mask .main .button-wrapper div {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
background: #e6e6e6;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
color: #999; }
|
||||
.identity-mask .main .button-wrapper .button-agree {
|
||||
background: linear-gradient(-90deg, #11A5FE 0%, #4CBBFF 100%); }
|
||||
.identity-mask .main .button-wrapper .button-agree a {
|
||||
color: #999;
|
||||
}
|
||||
.identity-mask .main .button-wrapper .button-agree {
|
||||
background: linear-gradient(-90deg, #11A5FE 0%, #4CBBFF 100%);
|
||||
}
|
||||
.identity-mask .main .button-wrapper .button-agree a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
display: inline-block; }
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layer {
|
||||
position: fixed;
|
||||
@@ -81,7 +91,8 @@ body {
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1;
|
||||
display: none; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layer1 {
|
||||
position: fixed;
|
||||
@@ -91,7 +102,8 @@ body {
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
display: none; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
@@ -101,8 +113,9 @@ body {
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9999;
|
||||
display: none; }
|
||||
.swiper .outSwiper {
|
||||
display: none;
|
||||
}
|
||||
.swiper .outSwiper {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: -2rem;
|
||||
@@ -111,23 +124,27 @@ body {
|
||||
display: block;
|
||||
color: #fff;
|
||||
z-index: 6;
|
||||
font-size: 0.6rem; }
|
||||
.swiper .swiper-container .swiper-wrapper .swiper-slide {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.swiper .swiper-container .swiper-wrapper .swiper-slide {
|
||||
width: 5rem;
|
||||
height: 8rem;
|
||||
background-size: 5rem, 8rem;
|
||||
background-repeat: no-repeat; }
|
||||
.swiper .swiper-container-horizontal > .swiper-pagination-bullets,
|
||||
.swiper .swiper-pagination-custom,
|
||||
.swiper .swiper-pagination-fraction {
|
||||
bottom: 0; }
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.swiper .swiper-container-horizontal > .swiper-pagination-bullets,
|
||||
.swiper .swiper-pagination-custom,
|
||||
.swiper .swiper-pagination-fraction {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.bigBox {
|
||||
width: 10rem;
|
||||
background: url(../image/bg.png) no-repeat;
|
||||
background-size: 100%;
|
||||
margin: 0 auto; }
|
||||
.bigBox .advertising {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bigBox .advertising {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -136,17 +153,20 @@ body {
|
||||
line-height: 0.6666666667rem;
|
||||
background: #F28195;
|
||||
overflow: hidden;
|
||||
z-index: 3; }
|
||||
.bigBox .advertising .ul1 {
|
||||
z-index: 3;
|
||||
}
|
||||
.bigBox .advertising .ul1 {
|
||||
width: 100%;
|
||||
overflow: hidden; }
|
||||
.bigBox .advertising .ul1 li {
|
||||
overflow: hidden;
|
||||
}
|
||||
.bigBox .advertising .ul1 li {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 0.32rem;
|
||||
color: #fff;
|
||||
text-align: center; }
|
||||
.bigBox .rule_record {
|
||||
text-align: center;
|
||||
}
|
||||
.bigBox .rule_record {
|
||||
width: 9.4666666667rem;
|
||||
height: 1.6rem;
|
||||
margin: 0.6666666667rem auto 0;
|
||||
@@ -154,22 +174,25 @@ body {
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-radius: 0.1333333333rem; }
|
||||
.bigBox .rule_record .rule,
|
||||
.bigBox .rule_record .record {
|
||||
border-radius: 0.1333333333rem;
|
||||
}
|
||||
.bigBox .rule_record .rule,
|
||||
.bigBox .rule_record .record {
|
||||
height: 100%;
|
||||
line-height: 1.6rem;
|
||||
text-align: center;
|
||||
width: 5rem;
|
||||
font-size: 0.48rem;
|
||||
color: #fff;
|
||||
position: relative; }
|
||||
.bigBox .rule_record .rule i,
|
||||
.bigBox .rule_record .record i {
|
||||
position: relative;
|
||||
}
|
||||
.bigBox .rule_record .rule i,
|
||||
.bigBox .rule_record .record i {
|
||||
font-style: normal;
|
||||
color: #fff; }
|
||||
.bigBox .rule_record .rule .line,
|
||||
.bigBox .rule_record .record .line {
|
||||
color: #fff;
|
||||
}
|
||||
.bigBox .rule_record .rule .line,
|
||||
.bigBox .rule_record .record .line {
|
||||
display: none;
|
||||
width: 0.64rem;
|
||||
height: 0.08rem;
|
||||
@@ -177,29 +200,33 @@ body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0.2rem; }
|
||||
.bigBox .rule_record .cancel {
|
||||
bottom: 0.2rem;
|
||||
}
|
||||
.bigBox .rule_record .cancel {
|
||||
position: absolute;
|
||||
font-size: 0.6666666667rem;
|
||||
bottom: -14rem;
|
||||
left: 50%;
|
||||
display: none;
|
||||
color: #fff;
|
||||
z-index: 2; }
|
||||
.bigBox .rule_record .rule.active,
|
||||
.bigBox .rule_record .record.active {
|
||||
color: #5B1522; }
|
||||
.bigBox .rule_record .rule.active ::after,
|
||||
.bigBox .rule_record .record.active ::after {
|
||||
content: '';
|
||||
z-index: 2;
|
||||
}
|
||||
.bigBox .rule_record .rule.active,
|
||||
.bigBox .rule_record .record.active {
|
||||
color: #5B1522;
|
||||
}
|
||||
.bigBox .rule_record .rule.active ::after,
|
||||
.bigBox .rule_record .record.active ::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.64rem;
|
||||
height: 0.08rem;
|
||||
background: #E74B81;
|
||||
left: 50%;
|
||||
bottom: 0.2rem;
|
||||
transform: translateX(-50%); }
|
||||
.bigBox .rule_record .conent {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.bigBox .rule_record .conent {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
@@ -211,8 +238,9 @@ body {
|
||||
height: 0rem;
|
||||
z-index: 3;
|
||||
transition: all 0.5s;
|
||||
overflow-y: hidden; }
|
||||
.bigBox .rule_record .conent .text {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.bigBox .rule_record .conent .text {
|
||||
width: 8.2rem;
|
||||
margin: 0 auto;
|
||||
line-height: 0.6rem;
|
||||
@@ -220,43 +248,52 @@ body {
|
||||
padding-top: 0.4266666667rem;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
word-break: break-all; }
|
||||
.bigBox .rule_record .conent .text h3 {
|
||||
word-break: break-all;
|
||||
}
|
||||
.bigBox .rule_record .conent .text h3 {
|
||||
color: #652DAD;
|
||||
font-size: 0.4266666667rem; }
|
||||
.bigBox .rule_record .conent .text p {
|
||||
font-size: 0.4266666667rem;
|
||||
}
|
||||
.bigBox .rule_record .conent .text p {
|
||||
font-size: 0.3733333333rem;
|
||||
color: #333333; }
|
||||
.bigBox .rule_record .conent .table-wrap {
|
||||
color: #333333;
|
||||
}
|
||||
.bigBox .rule_record .conent .table-wrap {
|
||||
max-height: 13.3333333333rem;
|
||||
min-height: 13.3333333333rem;
|
||||
overflow-y: auto; }
|
||||
.bigBox .rule_record .conent .table {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.bigBox .rule_record .conent .table {
|
||||
width: 100%;
|
||||
display: none;
|
||||
padding: 0.1333333333rem;
|
||||
table-layout: fixed; }
|
||||
.bigBox .rule_record .conent .table tr {
|
||||
table-layout: fixed;
|
||||
}
|
||||
.bigBox .rule_record .conent .table tr {
|
||||
font-size: 0.32rem;
|
||||
text-align: center;
|
||||
height: 1.0666666667rem;
|
||||
border-bottom: 1px solid pink;
|
||||
width: 100%; }
|
||||
.bigBox .rule_record .conent .table tr th {
|
||||
width: 100%;
|
||||
}
|
||||
.bigBox .rule_record .conent .table tr th {
|
||||
color: #652DAD;
|
||||
width: 1.9rem;
|
||||
line-height: 1.0666666667rem; }
|
||||
.bigBox .rule_record .conent .table tr td {
|
||||
line-height: 1.0666666667rem;
|
||||
}
|
||||
.bigBox .rule_record .conent .table tr td {
|
||||
color: #333;
|
||||
padding-top: 0.5333333333rem;
|
||||
box-sizing: border-box;
|
||||
height: 1.0666666667rem;
|
||||
max-width: 1rem;
|
||||
word-wrap: break-word; }
|
||||
.bigBox .rule_record .conent .table tr td span {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.bigBox .rule_record .conent .table tr td span {
|
||||
max-width: 2.5rem;
|
||||
display: block; }
|
||||
.bigBox .rule_record .conent .noData {
|
||||
display: block;
|
||||
}
|
||||
.bigBox .rule_record .conent .noData {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -266,8 +303,9 @@ body {
|
||||
color: #333;
|
||||
z-index: 1;
|
||||
font-weight: bold;
|
||||
background: #fff; }
|
||||
.bigBox .loding {
|
||||
background: #fff;
|
||||
}
|
||||
.bigBox .loding {
|
||||
z-index: 9999999999999;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
@@ -280,13 +318,15 @@ body {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
bottom: 8rem;
|
||||
display: none; }
|
||||
.bigBox .card {
|
||||
display: none;
|
||||
}
|
||||
.bigBox .card {
|
||||
width: 8.6666666667rem;
|
||||
height: 9.7333333333rem;
|
||||
margin: 0.4rem auto 0.9066666667rem;
|
||||
position: relative; }
|
||||
.bigBox .card .cardtext {
|
||||
position: relative;
|
||||
}
|
||||
.bigBox .card .cardtext {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
color: #5B1522;
|
||||
@@ -296,8 +336,9 @@ body {
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
width: 3rem;
|
||||
height: 1.1466666667rem; }
|
||||
.bigBox .card div {
|
||||
height: 1.1466666667rem;
|
||||
}
|
||||
.bigBox .card div {
|
||||
background-image: url(../image/cardPrimary.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
@@ -311,8 +352,9 @@ body {
|
||||
font-weight: bold;
|
||||
left: 3.5rem;
|
||||
top: 3.5rem;
|
||||
transition: all 0.3s; }
|
||||
.bigBox .card div b {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.bigBox .card div b {
|
||||
width: 2.5rem;
|
||||
height: 3.3rem;
|
||||
background: url(../image/losingLottery.png) no-repeat;
|
||||
@@ -320,60 +362,73 @@ body {
|
||||
position: absolute;
|
||||
left: -0.3rem;
|
||||
top: -0.3rem;
|
||||
display: none; }
|
||||
.bigBox .card .smallbox0,
|
||||
.bigBox .card .smallbox1,
|
||||
.bigBox .card .smallbox2,
|
||||
.bigBox .card .smallbox3,
|
||||
.bigBox .card .smallbox9,
|
||||
.bigBox .card .smallbox4,
|
||||
.bigBox .card .smallbox5,
|
||||
.bigBox .card .smallbox6,
|
||||
.bigBox .card .smallbox7,
|
||||
.bigBox .card .smallbox8 {
|
||||
display: none;
|
||||
}
|
||||
.bigBox .card .smallbox0,
|
||||
.bigBox .card .smallbox1,
|
||||
.bigBox .card .smallbox2,
|
||||
.bigBox .card .smallbox3,
|
||||
.bigBox .card .smallbox9,
|
||||
.bigBox .card .smallbox4,
|
||||
.bigBox .card .smallbox5,
|
||||
.bigBox .card .smallbox6,
|
||||
.bigBox .card .smallbox7,
|
||||
.bigBox .card .smallbox8 {
|
||||
position: absolute;
|
||||
background: rgba(21, 20, 70, 0.6);
|
||||
width: 1.8666666667rem;
|
||||
height: 2.8rem;
|
||||
z-index: 1;
|
||||
display: none; }
|
||||
.bigBox .card .smallbox0 {
|
||||
display: none;
|
||||
}
|
||||
.bigBox .card .smallbox0 {
|
||||
left: 0rem;
|
||||
top: 0rem; }
|
||||
.bigBox .card .smallbox1 {
|
||||
top: 0rem;
|
||||
}
|
||||
.bigBox .card .smallbox1 {
|
||||
left: 2.25rem;
|
||||
top: 0rem; }
|
||||
.bigBox .card .smallbox2 {
|
||||
top: 0rem;
|
||||
}
|
||||
.bigBox .card .smallbox2 {
|
||||
left: 4.5rem;
|
||||
top: 0rem; }
|
||||
.bigBox .card .smallbox3 {
|
||||
top: 0rem;
|
||||
}
|
||||
.bigBox .card .smallbox3 {
|
||||
left: 6.8rem;
|
||||
top: 0rem; }
|
||||
.bigBox .card .smallbox9 {
|
||||
top: 0rem;
|
||||
}
|
||||
.bigBox .card .smallbox9 {
|
||||
left: 0rem;
|
||||
top: 3.52rem; }
|
||||
.bigBox .card .smallbox4 {
|
||||
top: 3.52rem;
|
||||
}
|
||||
.bigBox .card .smallbox4 {
|
||||
left: 6.8rem;
|
||||
top: 3.52rem; }
|
||||
.bigBox .card .smallbox8 {
|
||||
top: 3.52rem;
|
||||
}
|
||||
.bigBox .card .smallbox8 {
|
||||
left: 0rem;
|
||||
top: 7rem; }
|
||||
.bigBox .card .smallbox7 {
|
||||
top: 7rem;
|
||||
}
|
||||
.bigBox .card .smallbox7 {
|
||||
left: 2.25rem;
|
||||
top: 7rem; }
|
||||
.bigBox .card .smallbox6 {
|
||||
top: 7rem;
|
||||
}
|
||||
.bigBox .card .smallbox6 {
|
||||
left: 4.5rem;
|
||||
top: 7rem; }
|
||||
.bigBox .card .smallbox5 {
|
||||
top: 7rem;
|
||||
}
|
||||
.bigBox .card .smallbox5 {
|
||||
left: 6.8rem;
|
||||
top: 7rem; }
|
||||
.bigBox .cardGrade {
|
||||
top: 7rem;
|
||||
}
|
||||
.bigBox .cardGrade {
|
||||
width: 9.0666666667rem;
|
||||
height: 1.5333333333rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0.5066666667rem auto 0; }
|
||||
.bigBox .cardGrade div {
|
||||
margin: 0.5066666667rem auto 0;
|
||||
}
|
||||
.bigBox .cardGrade div {
|
||||
width: 2.8666666667rem;
|
||||
height: 1.5333333333rem;
|
||||
color: #fff;
|
||||
@@ -381,27 +436,32 @@ body {
|
||||
text-align: center;
|
||||
padding-top: 0.4rem;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.1066666667rem; }
|
||||
.bigBox .cardGrade div h3 {
|
||||
border-radius: 0.1066666667rem;
|
||||
}
|
||||
.bigBox .cardGrade div h3 {
|
||||
font-size: 0.4rem;
|
||||
z-index: 2; }
|
||||
.bigBox .cardGrade div p {
|
||||
z-index: 2;
|
||||
}
|
||||
.bigBox .cardGrade div p {
|
||||
margin-top: 0.1333333333rem;
|
||||
font-size: 0.2666666667rem; }
|
||||
.bigBox .cardGrade .cardGradeActive {
|
||||
font-size: 0.2666666667rem;
|
||||
}
|
||||
.bigBox .cardGrade .cardGradeActive {
|
||||
width: 2.8666666667rem;
|
||||
height: 1.5333333333rem;
|
||||
background: url("../image/cardGrade.png") no-repeat;
|
||||
background-size: 2.8666666667rem 1.5333333333rem;
|
||||
border: none; }
|
||||
.bigBox .allGold {
|
||||
border: none;
|
||||
}
|
||||
.bigBox .allGold {
|
||||
margin: 0.4rem auto 0.4rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 0.4533333333rem;
|
||||
width: 2.6666666667rem;
|
||||
text-align: center; }
|
||||
.bigBox .drawBut {
|
||||
text-align: center;
|
||||
}
|
||||
.bigBox .drawBut {
|
||||
width: 6.6666666667rem;
|
||||
height: 1.0666666667rem;
|
||||
line-height: 1.0666666667rem;
|
||||
@@ -411,16 +471,19 @@ body {
|
||||
border: 1px solid #3C0900;
|
||||
margin: 0 auto;
|
||||
background: #DBDBDB;
|
||||
text-align: center; }
|
||||
.bigBox .illustrate {
|
||||
text-align: center;
|
||||
}
|
||||
.bigBox .illustrate {
|
||||
width: 7.8rem;
|
||||
height: 0.4266666667rem;
|
||||
line-height: 0.4266666667rem;
|
||||
text-align: center;
|
||||
margin: 0.4rem auto 0.2666666667rem;
|
||||
color: #ED4D83;
|
||||
font-size: 0.4rem; }
|
||||
.bigBox .illustrate i {
|
||||
font-size: 0.2666666667rem;
|
||||
position: relative;
|
||||
}
|
||||
.bigBox .illustrate i {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
background: #ED4D83;
|
||||
@@ -429,8 +492,12 @@ body {
|
||||
line-height: 0.4rem;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-style: normal; }
|
||||
.bigBox .illustrate_centent {
|
||||
font-style: normal;
|
||||
position: absolute;
|
||||
left: 0.4rem;
|
||||
top: 50%;
|
||||
}
|
||||
.bigBox .illustrate_centent {
|
||||
display: none;
|
||||
width: 8.6666666667rem;
|
||||
height: 8.6rem;
|
||||
@@ -442,29 +509,34 @@ body {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%); }
|
||||
.bigBox .illustrate_centent div {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.bigBox .illustrate_centent div {
|
||||
width: 100%;
|
||||
display: flex; }
|
||||
.bigBox .illustrate_centent div img {
|
||||
display: flex;
|
||||
}
|
||||
.bigBox .illustrate_centent div img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: #F7F7F7;
|
||||
border-radius: 0.1333333333rem; }
|
||||
.bigBox .illustrate_centent div p {
|
||||
border-radius: 0.1333333333rem;
|
||||
}
|
||||
.bigBox .illustrate_centent div p {
|
||||
flex: 1;
|
||||
font-size: 0.4rem;
|
||||
color: #666;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.4rem;
|
||||
padding-top: 0.2666666667rem; }
|
||||
.bigBox .illustrate_centent span {
|
||||
padding-top: 0.2666666667rem;
|
||||
}
|
||||
.bigBox .illustrate_centent span {
|
||||
width: 100%;
|
||||
height: 0.0266666667rem;
|
||||
background: #EAEAEA;
|
||||
display: block;
|
||||
margin: 0.4rem 0; }
|
||||
.bigBox .illustrate_centent b {
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
.bigBox .illustrate_centent b {
|
||||
position: absolute;
|
||||
right: 0.1rem;
|
||||
top: 0.1rem;
|
||||
@@ -474,6 +546,7 @@ body {
|
||||
line-height: 0.48rem;
|
||||
background: #DBDBDB;
|
||||
color: #fff;
|
||||
border-radius: 50%; }
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
||||
@@ -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