完成糖果树以及星级厨房
This commit is contained in:
Dragon
@@ -1,80 +1,75 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'pingfang-medium';
|
font-family: "pingfang-medium";
|
||||||
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
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-face {
|
||||||
font-family: 'pingfang-bold';
|
font-family: "pingfang-bold";
|
||||||
src: url("../../../common/fonts/PingFang-Bold.ttf");
|
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-face {
|
||||||
font-family: 'pingfang-regular';
|
font-family: "pingfang-regular";
|
||||||
src: url("../../../common/fonts/PingFang-Regular.ttf");
|
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 {
|
body {
|
||||||
font-family: 'pingfang-medium';
|
font-family: "pingfang-medium";
|
||||||
|
background: #7956F2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
background: url("../images/bg.png") no-repeat 0 0/100%;
|
background: url("../images/bg.png") no-repeat 0 0/100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .rule-btn {
|
.wrap .rule-btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.wrap .rule-btn div {
|
||||||
.wrap .rule-btn img {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.61333rem;
|
top: 0.6133333333rem;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 1.84rem;
|
width: 1.84rem;
|
||||||
height: 0.64rem;
|
height: 0.64rem;
|
||||||
|
line-height: 0.64rem;
|
||||||
|
background: url(../images/introduce.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 0.3466666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap ul.buy-area {
|
.wrap ul.buy-area {
|
||||||
margin-top: 10.13333rem;
|
margin-top: 4.133333rem;
|
||||||
margin-bottom: 3.2rem;
|
margin-bottom: 3.2rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap ul.buy-area li {
|
.wrap ul.buy-area li {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
height: 6.13333rem;
|
height: 6.1333333333rem;
|
||||||
margin: 0.82667rem auto 0;
|
margin: 0.8266666667rem auto 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap ul.buy-area li .headwear-info {
|
.wrap ul.buy-area li .headwear-info {
|
||||||
margin-left: 3.86667rem;
|
margin-left: 3.8666666667rem;
|
||||||
margin-top: 2.4rem;
|
margin-top: 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap ul.buy-area li .headwear-info .headwear-name {
|
.wrap ul.buy-area li .headwear-info .headwear-name {
|
||||||
font-family: 'pingfang-bold';
|
font-family: "pingfang-bold";
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FFF600;
|
color: #FFF600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap ul.buy-area li .headwear-info .headwear-price {
|
.wrap ul.buy-area li .headwear-info .headwear-price {
|
||||||
line-height: 0.53333rem;
|
line-height: 0.5333333333rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.29333rem;
|
font-size: 0.2933333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap ul.buy-area li .headwear-info .headwear-award {
|
.wrap ul.buy-area li .headwear-info .headwear-award {
|
||||||
color: #4946D8;
|
color: #fff;
|
||||||
font-size: 0.29333rem;
|
font-size: 0.2933333333rem;
|
||||||
margin-top: 0.26667rem;
|
margin-top: 0.2666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap ul.buy-area li .headwear-info .buy-btn {
|
.wrap ul.buy-area li .headwear-info .buy-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@@ -82,19 +77,22 @@ body {
|
|||||||
bottom: 0.4rem;
|
bottom: 0.4rem;
|
||||||
width: 4.8rem;
|
width: 4.8rem;
|
||||||
height: 0.96rem;
|
height: 0.96rem;
|
||||||
|
line-height: 0.96rem;
|
||||||
background: url("../images/buy-btn.png") no-repeat 0 0/100% 100%;
|
background: url("../images/buy-btn.png") no-repeat 0 0/100% 100%;
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
cursor: pointer;
|
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 {
|
.wrap ul.buy-area li .headwear-info .buy-btn .headwear-price-wrap img.icon {
|
||||||
width: 0.50667rem;
|
width: 0.5066666667rem;
|
||||||
height: 0.4rem;
|
height: 0.4rem;
|
||||||
margin-left: 0.26667rem;
|
margin-left: 0.2666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap ul.buy-area li .headwear-info .buy-btn .tip {
|
.wrap ul.buy-area li .headwear-info .buy-btn .tip {
|
||||||
width: 2.66667rem;
|
width: 2.6666666667rem;
|
||||||
height: 0.8rem;
|
height: 0.8rem;
|
||||||
line-height: 0.8rem;
|
line-height: 0.8rem;
|
||||||
background: url("../images/buy-btn.png") no-repeat 0 0/100% 100%;
|
background: url("../images/buy-btn.png") no-repeat 0 0/100% 100%;
|
||||||
@@ -110,23 +108,20 @@ body {
|
|||||||
z-index: 99;
|
z-index: 99;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1.6rem;
|
height: 1.6rem;
|
||||||
background-color: #6D49EF;
|
background: url(../images/bottom.png) no-repeat;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mine .avatar {
|
.mine .avatar {
|
||||||
width: 1.06667rem;
|
width: 1.0666666667rem;
|
||||||
height: 1.06667rem;
|
height: 1.0666666667rem;
|
||||||
margin-left: 0.4rem;
|
margin-left: 0.4rem;
|
||||||
margin-right: 0.26667rem;
|
margin-right: 0.2666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mine .avatar img {
|
.mine .avatar img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mine .info-wrap {
|
.mine .info-wrap {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -136,28 +131,25 @@ body {
|
|||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mine .info-wrap .nick {
|
.mine .info-wrap .nick {
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mine .info-wrap div {
|
.mine .info-wrap div {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-family: 'pingfang-regular';
|
font-family: "pingfang-regular";
|
||||||
font-size: 0.29333rem;
|
font-size: 0.2933333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mine .info-wrap div p {
|
.mine .info-wrap div p {
|
||||||
margin-right: 0.53333rem;
|
margin-right: 0.5333333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-mask {
|
.rule-mask {
|
||||||
width: 7.46667rem;
|
width: 7.4666666667rem;
|
||||||
height: 8rem;
|
height: 8rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
margin-left: -3.73333rem;
|
margin-left: -3.7333333333rem;
|
||||||
margin-top: -4rem;
|
margin-top: -4rem;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@@ -165,40 +157,35 @@ body {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-mask .title {
|
.rule-mask .title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.42667rem;
|
font-size: 0.4266666667rem;
|
||||||
color: #5B1DC2;
|
color: #5B1DC2;
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-mask .content {
|
.rule-mask .content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 0 0.53333rem 0 0.93333rem;
|
padding: 0 0.5333333333rem 0 0.9333333333rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-mask .content::-webkit-scrollbar {
|
.rule-mask .content::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-mask .content p {
|
.rule-mask .content p {
|
||||||
margin-bottom: 0.26667rem;
|
margin-bottom: 0.2666666667rem;
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
line-height: 0.50667rem;
|
line-height: 0.5066666667rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-indent: -0.45333rem;
|
text-indent: -0.4533333333rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-mask .cancel {
|
.rule-mask .cancel {
|
||||||
width: 0.32rem;
|
width: 0.32rem;
|
||||||
height: 0.32rem;
|
height: 0.32rem;
|
||||||
@@ -206,7 +193,6 @@ body {
|
|||||||
right: 10px;
|
right: 10px;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-mask .cancel img {
|
.rule-mask .cancel img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -219,7 +205,7 @@ body {
|
|||||||
top: 0;
|
top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: black;
|
background: black;
|
||||||
opacity: .7;
|
opacity: 0.7;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -233,7 +219,6 @@ body {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask-buy .shade-content-buy {
|
.shade-mask-buy .shade-content-buy {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -244,135 +229,136 @@ body {
|
|||||||
border-radius: 0.32rem;
|
border-radius: 0.32rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask-buy .shade-content-buy .title {
|
.shade-mask-buy .shade-content-buy .title {
|
||||||
font-family: 'pingfang-bold';
|
font-family: "pingfang-bold";
|
||||||
font-size: 0.48rem;
|
font-size: 0.48rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0.48rem 0 0.58667rem;
|
margin: 0.48rem 0 0.5866666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask-buy .shade-content-buy .title span {
|
.shade-mask-buy .shade-content-buy .title span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
.shade-mask-buy .shade-content-buy .buy-num,
|
||||||
.shade-mask-buy .shade-content-buy .buy-num, .shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
|
.shade-mask-buy .shade-content-buy .buy-day,
|
||||||
|
.shade-mask-buy .shade-content-buy .buy-price {
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-bottom: 0.85333rem;
|
margin-bottom: 0.8533333333rem;
|
||||||
margin-left: 0.64rem;
|
margin-left: 0.64rem;
|
||||||
}
|
}
|
||||||
|
.shade-mask-buy .shade-content-buy .buy-num p,
|
||||||
.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 {
|
.shade-mask-buy .shade-content-buy .buy-day p,
|
||||||
|
.shade-mask-buy .shade-content-buy .buy-price p {
|
||||||
font-weight: 550;
|
font-weight: 550;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask-buy .shade-content-buy .buy-num {
|
.shade-mask-buy .shade-content-buy .buy-num {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 0.8rem;
|
height: 0.8rem;
|
||||||
}
|
}
|
||||||
|
.shade-mask-buy .shade-content-buy .buy-num .decrease,
|
||||||
.shade-mask-buy .shade-content-buy .buy-num .decrease, .shade-mask-buy .shade-content-buy .buy-num .increase {
|
.shade-mask-buy .shade-content-buy .buy-num .increase {
|
||||||
width: 0.8rem;
|
width: 0.8rem;
|
||||||
height: 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 .decrease img, .shade-mask-buy .shade-content-buy .buy-num .increase img {
|
.shade-mask-buy .shade-content-buy .buy-num .increase img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask-buy .shade-content-buy .buy-num input {
|
.shade-mask-buy .shade-content-buy .buy-num input {
|
||||||
width: 2.13333rem;
|
width: 2.1333333333rem;
|
||||||
height: 0.8rem;
|
height: 0.8rem;
|
||||||
border-radius: 0.4rem;
|
border-radius: 0.4rem;
|
||||||
background-color: #EAE5FC;
|
background-color: #EAE5FC;
|
||||||
color: #7154EE;
|
color: #7154EE;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 0.26667rem;
|
margin-right: 0.2666666667rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
caret-color: #7154EE;
|
caret-color: #7154EE;
|
||||||
}
|
}
|
||||||
|
.shade-mask-buy .shade-content-buy .buy-day,
|
||||||
.shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
|
.shade-mask-buy .shade-content-buy .buy-price {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn {
|
.shade-mask-buy .shade-content-buy .buy-confirm-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 6.82667rem;
|
width: 6.8266666667rem;
|
||||||
height: 1.01333rem;
|
height: 1.0133333333rem;
|
||||||
margin: 1.2rem auto 0;
|
margin: 1.2rem auto 0;
|
||||||
}
|
}
|
||||||
|
.shade-mask-buy .shade-content-buy .buy-confirm-btn .cancel,
|
||||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn .cancel, .shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
||||||
width: 3.2rem;
|
width: 3.2rem;
|
||||||
height: 1.01333rem;
|
height: 1.0133333333rem;
|
||||||
line-height: 1.01333rem;
|
line-height: 1.0133333333rem;
|
||||||
background-color: #EAE5FC;
|
background-color: #EAE5FC;
|
||||||
font-size: 0.37333rem;
|
font-size: 0.3733333333rem;
|
||||||
color: #7154EE;
|
color: #7154EE;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 0.50667rem;
|
border-radius: 0.5066666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
|
||||||
background-image: linear-gradient(#735FFE, #8776FF);
|
background-image: linear-gradient(#735FFE, #8776FF);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask-success, .shade-mask-no-money {
|
.shade-mask-success,
|
||||||
|
.shade-mask-no-money {
|
||||||
display: none;
|
display: none;
|
||||||
width: 7.46667rem;
|
width: 7.4666666667rem;
|
||||||
height: 6.13333rem;
|
height: 6.1333333333rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
border-radius: 0.21333rem;
|
border-radius: 0.2133333333rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
.shade-mask-success .title,
|
||||||
.shade-mask-success .title, .shade-mask-no-money .title {
|
.shade-mask-no-money .title {
|
||||||
font-size: 0.45333rem;
|
font-size: 0.4533333333rem;
|
||||||
color: #333;
|
color: #333;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 0.53333rem;
|
margin-top: 0.5333333333rem;
|
||||||
}
|
}
|
||||||
|
.shade-mask-success .pic-icon,
|
||||||
.shade-mask-success .pic-icon, .shade-mask-no-money .pic-icon {
|
.shade-mask-no-money .pic-icon {
|
||||||
width: 1.62667rem;
|
width: 1.6266666667rem;
|
||||||
height: 1.62667rem;
|
height: 1.6266666667rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 0.34667rem;
|
margin-top: 0.3466666667rem;
|
||||||
}
|
}
|
||||||
|
.shade-mask-success .pic-icon img,
|
||||||
.shade-mask-success .pic-icon img, .shade-mask-no-money .pic-icon img {
|
.shade-mask-no-money .pic-icon img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.shade-mask-success .tip,
|
||||||
.shade-mask-success .tip, .shade-mask-no-money .tip {
|
.shade-mask-no-money .tip {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #999;
|
color: #999;
|
||||||
margin-top: 0.34667rem;
|
margin-top: 0.3466666667rem;
|
||||||
}
|
}
|
||||||
|
.shade-mask-success .in-btn,
|
||||||
.shade-mask-success .in-btn, .shade-mask-success .recharge, .shade-mask-no-money .in-btn, .shade-mask-no-money .recharge {
|
.shade-mask-success .recharge,
|
||||||
|
.shade-mask-no-money .in-btn,
|
||||||
|
.shade-mask-no-money .recharge {
|
||||||
width: 2.8rem;
|
width: 2.8rem;
|
||||||
height: 1.01333rem;
|
height: 1.0133333333rem;
|
||||||
border-radius: 0.66667rem;
|
border-radius: 0.6666666667rem;
|
||||||
background-color: #7154EE;
|
background-color: #7154EE;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.4rem;
|
font-size: 0.4rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.01333rem;
|
line-height: 1.0133333333rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 0.53333rem;
|
margin-top: 0.5333333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=index.css.map */
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
@return $px / $rem+rem;
|
@return $px / $rem+rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face{
|
@font-face {
|
||||||
font-family: 'pingfang-medium';
|
font-family: 'pingfang-medium';
|
||||||
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||||||
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face{
|
@font-face {
|
||||||
font-family: 'pingfang-bold';
|
font-family: 'pingfang-bold';
|
||||||
src: url('../../../common/fonts/PingFang-Bold.ttf');
|
src: url('../../../common/fonts/PingFang-Bold.ttf');
|
||||||
src: url('../../../common/fonts/PingFang-Bold.ttf') format('woff'),
|
src: url('../../../common/fonts/PingFang-Bold.ttf') format('woff'),
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
url('../../../common/fonts/PingFang-Bold.ttf') format('svg');
|
url('../../../common/fonts/PingFang-Bold.ttf') format('svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face{
|
@font-face {
|
||||||
font-family: 'pingfang-regular';
|
font-family: 'pingfang-regular';
|
||||||
src: url('../../../common/fonts/PingFang-Regular.ttf');
|
src: url('../../../common/fonts/PingFang-Regular.ttf');
|
||||||
src: url('../../../common/fonts/PingFang-Regular.ttf') format('woff'),
|
src: url('../../../common/fonts/PingFang-Regular.ttf') format('woff'),
|
||||||
@@ -26,74 +26,96 @@
|
|||||||
url('../../../common/fonts/PingFang-Regular.ttf') format('svg');
|
url('../../../common/fonts/PingFang-Regular.ttf') format('svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
body{
|
body {
|
||||||
font-family: 'pingfang-medium';
|
font-family: 'pingfang-medium';
|
||||||
|
background: #7956F2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap{
|
.wrap {
|
||||||
// display: none;
|
// display: none;
|
||||||
background: url('../images/bg.png') no-repeat 0 0/100%;
|
background: url('../images/bg.png') no-repeat 0 0/100%;
|
||||||
// min-height: px2rem(2896);
|
// min-height: px2rem(2896);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.rule-btn{
|
|
||||||
|
.rule-btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
img {
|
|
||||||
|
div {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(46);
|
top: px2rem(46);
|
||||||
right: 0;
|
right: 0;
|
||||||
width: px2rem(138);
|
width: px2rem(138);
|
||||||
height: px2rem(48);
|
height: px2rem(48);
|
||||||
}
|
line-height: px2rem(48, );
|
||||||
|
background: url(../images/introduce.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: px2rem(26, );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.buy-area{
|
ul.buy-area {
|
||||||
margin-top: px2rem(760);
|
margin-top: 4.133333rem;
|
||||||
margin-bottom: px2rem(240);
|
margin-bottom: px2rem(240);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
li{
|
|
||||||
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: px2rem(600);
|
width: px2rem(600);
|
||||||
height: px2rem(460);
|
height: px2rem(460);
|
||||||
margin: px2rem(62) auto 0;
|
margin: px2rem(62) auto 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.headwear-info{
|
|
||||||
|
.headwear-info {
|
||||||
margin-left: px2rem(290);
|
margin-left: px2rem(290);
|
||||||
margin-top: px2rem(180);
|
margin-top: px2rem(180);
|
||||||
.headwear-name{
|
|
||||||
|
.headwear-name {
|
||||||
font-family: 'pingfang-bold';
|
font-family: 'pingfang-bold';
|
||||||
font-size: px2rem(30);
|
font-size: px2rem(30);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FFF600;
|
color: #FFF600;
|
||||||
}
|
}
|
||||||
.headwear-price{
|
|
||||||
|
.headwear-price {
|
||||||
line-height: px2rem(40);
|
line-height: px2rem(40);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: px2rem(22);
|
font-size: px2rem(22);
|
||||||
}
|
}
|
||||||
.headwear-award{
|
|
||||||
color: #4946D8;
|
.headwear-award {
|
||||||
|
color: #fff;
|
||||||
font-size: px2rem(22);
|
font-size: px2rem(22);
|
||||||
margin-top: px2rem(20);
|
margin-top: px2rem(20);
|
||||||
}
|
}
|
||||||
.buy-btn{
|
|
||||||
|
.buy-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
bottom: px2rem(30);
|
bottom: px2rem(30);
|
||||||
width: px2rem(360);
|
width: px2rem(360);
|
||||||
height: px2rem(72);
|
height: px2rem(72);
|
||||||
|
line-height: px2rem(72, );
|
||||||
background: url('../images/buy-btn.png') no-repeat 0 0/100% 100%;
|
background: url('../images/buy-btn.png') no-repeat 0 0/100% 100%;
|
||||||
font-size: px2rem(30);
|
font-size: px2rem(30);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.headwear-price-wrap{
|
color: #7944DA;
|
||||||
img.icon{
|
font-size: px2rem(32, );
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
.headwear-price-wrap {
|
||||||
|
img.icon {
|
||||||
width: px2rem(38);
|
width: px2rem(38);
|
||||||
height: px2rem(30);
|
height: px2rem(30);
|
||||||
margin-left: px2rem(20);
|
margin-left: px2rem(20);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.tip{
|
|
||||||
|
.tip {
|
||||||
width: px2rem(200);
|
width: px2rem(200);
|
||||||
height: px2rem(60);
|
height: px2rem(60);
|
||||||
line-height: px2rem(60);
|
line-height: px2rem(60);
|
||||||
@@ -109,28 +131,32 @@ body{
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mine{
|
.mine {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: px2rem(120);
|
height: px2rem(120);
|
||||||
background-color: #6D49EF;
|
// background-color: #6D49EF;
|
||||||
|
background: url(../images/bottom.png) no-repeat;
|
||||||
// border-top: 2px solid #BFFFFF;
|
// border-top: 2px solid #BFFFFF;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.avatar{
|
|
||||||
|
.avatar {
|
||||||
width: px2rem(80);
|
width: px2rem(80);
|
||||||
height: px2rem(80);
|
height: px2rem(80);
|
||||||
margin-left: px2rem(30);
|
margin-left: px2rem(30);
|
||||||
margin-right: px2rem(20);
|
margin-right: px2rem(20);
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.info-wrap{
|
|
||||||
|
.info-wrap {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -138,14 +164,17 @@ body{
|
|||||||
height: 68%;
|
height: 68%;
|
||||||
font-size: px2rem(30);
|
font-size: px2rem(30);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
.nick{
|
|
||||||
|
.nick {
|
||||||
font-size: px2rem(30);
|
font-size: px2rem(30);
|
||||||
}
|
}
|
||||||
div{
|
|
||||||
|
div {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-family: 'pingfang-regular';
|
font-family: 'pingfang-regular';
|
||||||
font-size: px2rem(22, );
|
font-size: px2rem(22, );
|
||||||
p{
|
|
||||||
|
p {
|
||||||
margin-right: px2rem(40, );
|
margin-right: px2rem(40, );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -168,48 +197,48 @@ body{
|
|||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: px2rem(32);
|
font-size: px2rem(32);
|
||||||
color: #5B1DC2;
|
color: #5B1DC2;
|
||||||
margin-top: px2rem(30);
|
margin-top: px2rem(30);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
|
||||||
height: px2rem(450);
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: px2rem(30);
|
|
||||||
overflow: auto;
|
|
||||||
padding: 0 px2rem(40) 0 px2rem(70);
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: px2rem(20);
|
|
||||||
font-size: px2rem(30);
|
|
||||||
line-height: px2rem(38);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-indent: px2rem(-34);
|
height: px2rem(450);
|
||||||
color: #666;
|
margin: 0 auto;
|
||||||
}
|
margin-top: px2rem(30);
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0 px2rem(40) 0 px2rem(70);
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: px2rem(20);
|
||||||
|
font-size: px2rem(30);
|
||||||
|
line-height: px2rem(38);
|
||||||
|
width: 100%;
|
||||||
|
text-indent: px2rem(-34);
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel {
|
.cancel {
|
||||||
width: px2rem(24);
|
width: px2rem(24);
|
||||||
height: px2rem(24);
|
height: px2rem(24);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -226,7 +255,7 @@ body{
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 购买弹窗
|
// 购买弹窗
|
||||||
.shade-mask-buy{
|
.shade-mask-buy {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -235,7 +264,8 @@ body{
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||||
.shade-content-buy{
|
|
||||||
|
.shade-content-buy {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@@ -244,39 +274,50 @@ body{
|
|||||||
height: px2rem(600);
|
height: px2rem(600);
|
||||||
border-radius: px2rem(24);
|
border-radius: px2rem(24);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
.title{
|
|
||||||
|
.title {
|
||||||
font-family: 'pingfang-bold';
|
font-family: 'pingfang-bold';
|
||||||
font-size: px2rem(36);
|
font-size: px2rem(36);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: px2rem(36) 0 px2rem(44);
|
margin: px2rem(36) 0 px2rem(44);
|
||||||
span{
|
|
||||||
|
span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.buy-num, .buy-day, .buy-price{
|
|
||||||
|
.buy-num,
|
||||||
|
.buy-day,
|
||||||
|
.buy-price {
|
||||||
font-size: px2rem(30);
|
font-size: px2rem(30);
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-bottom: px2rem(64);
|
margin-bottom: px2rem(64);
|
||||||
margin-left: px2rem(48);
|
margin-left: px2rem(48);
|
||||||
p{
|
|
||||||
|
p {
|
||||||
font-weight: 550;
|
font-weight: 550;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.buy-num{
|
|
||||||
|
.buy-num {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: px2rem(60);
|
height: px2rem(60);
|
||||||
.decrease, .increase{
|
|
||||||
|
.decrease,
|
||||||
|
.increase {
|
||||||
width: px2rem(60);
|
width: px2rem(60);
|
||||||
height: px2rem(60);
|
height: px2rem(60);
|
||||||
margin-right: px2rem(20);
|
margin-right: px2rem(20);
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
input{
|
|
||||||
|
input {
|
||||||
width: px2rem(160);
|
width: px2rem(160);
|
||||||
height: px2rem(60);
|
height: px2rem(60);
|
||||||
border-radius: px2rem(30);
|
border-radius: px2rem(30);
|
||||||
@@ -288,17 +329,22 @@ body{
|
|||||||
caret-color: #7154EE;
|
caret-color: #7154EE;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.buy-day, .buy-price{
|
|
||||||
|
.buy-day,
|
||||||
|
.buy-price {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.buy-confirm-btn{
|
|
||||||
|
.buy-confirm-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: px2rem(512);
|
width: px2rem(512);
|
||||||
height: px2rem(76);
|
height: px2rem(76);
|
||||||
margin: px2rem(90) auto 0;
|
margin: px2rem(90) auto 0;
|
||||||
.cancel, .confirm{
|
|
||||||
|
.cancel,
|
||||||
|
.confirm {
|
||||||
width: px2rem(240);
|
width: px2rem(240);
|
||||||
height: px2rem(76);
|
height: px2rem(76);
|
||||||
line-height: px2rem(76);
|
line-height: px2rem(76);
|
||||||
@@ -308,15 +354,18 @@ body{
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: px2rem(38);
|
border-radius: px2rem(38);
|
||||||
}
|
}
|
||||||
.confirm{
|
|
||||||
|
.confirm {
|
||||||
background-image: linear-gradient(#735FFE, #8776FF);
|
background-image: linear-gradient(#735FFE, #8776FF);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 购买成功弹窗
|
// 购买成功弹窗
|
||||||
.shade-mask-success, .shade-mask-no-money{
|
.shade-mask-success,
|
||||||
|
.shade-mask-no-money {
|
||||||
display: none;
|
display: none;
|
||||||
width: px2rem(560);
|
width: px2rem(560);
|
||||||
height: px2rem(460);
|
height: px2rem(460);
|
||||||
@@ -327,28 +376,34 @@ body{
|
|||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
border-radius: px2rem(16);
|
border-radius: px2rem(16);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
.title{
|
|
||||||
|
.title {
|
||||||
font-size: px2rem(34);
|
font-size: px2rem(34);
|
||||||
color: #333;
|
color: #333;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: px2rem(40);
|
margin-top: px2rem(40);
|
||||||
}
|
}
|
||||||
.pic-icon{
|
|
||||||
|
.pic-icon {
|
||||||
width: px2rem(122);
|
width: px2rem(122);
|
||||||
height: px2rem(122);
|
height: px2rem(122);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: px2rem(26);
|
margin-top: px2rem(26);
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tip{
|
|
||||||
|
.tip {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #999;
|
color: #999;
|
||||||
margin-top: px2rem(26);
|
margin-top: px2rem(26);
|
||||||
}
|
}
|
||||||
.in-btn, .recharge{
|
|
||||||
|
.in-btn,
|
||||||
|
.recharge {
|
||||||
width: px2rem(210);
|
width: px2rem(210);
|
||||||
height: px2rem(76);
|
height: px2rem(76);
|
||||||
border-radius: px2rem(50);
|
border-radius: px2rem(50);
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 656 KiB |
BIN
view/peko/activity/explore/images/bottom.png
Normal file
BIN
view/peko/activity/explore/images/bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 479 B |
@@ -1,5 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
@@ -14,7 +15,8 @@
|
|||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<!-- 规则弹窗 -->
|
<!-- 规则弹窗 -->
|
||||||
<div class="rule-btn">
|
<div class="rule-btn">
|
||||||
<img src="./images/introduce.png" alt="">
|
<!-- <img src="./images/introduce.png" alt=""> -->
|
||||||
|
<div>玩法介绍</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="buy-area">
|
<ul class="buy-area">
|
||||||
<li>
|
<li>
|
||||||
@@ -22,7 +24,7 @@
|
|||||||
<p class="headwear-name"></p>
|
<p class="headwear-name"></p>
|
||||||
<p class="headwear-price"></p>
|
<p class="headwear-price"></p>
|
||||||
<p class="headwear-award"></p>
|
<p class="headwear-award"></p>
|
||||||
<p class="buy-btn"></p>
|
<p class="buy-btn">立即購買</p>
|
||||||
<!-- <div class="buy-btn">
|
<!-- <div class="buy-btn">
|
||||||
<p class="headwear-price-wrap">
|
<p class="headwear-price-wrap">
|
||||||
<img src="./images/diamond.png" alt="" class="icon">
|
<img src="./images/diamond.png" alt="" class="icon">
|
||||||
@@ -37,7 +39,7 @@
|
|||||||
<p class="headwear-name"></p>
|
<p class="headwear-name"></p>
|
||||||
<p class="headwear-price"></p>
|
<p class="headwear-price"></p>
|
||||||
<p class="headwear-award"></p>
|
<p class="headwear-award"></p>
|
||||||
<p class="buy-btn"></p>
|
<p class="buy-btn">立即購買</p>
|
||||||
<!-- <div class="buy-btn">
|
<!-- <div class="buy-btn">
|
||||||
<p class="headwear-price-wrap">
|
<p class="headwear-price-wrap">
|
||||||
<img src="./images/diamond.png" alt="" class="icon">
|
<img src="./images/diamond.png" alt="" class="icon">
|
||||||
@@ -52,7 +54,7 @@
|
|||||||
<p class="headwear-name"></p>
|
<p class="headwear-name"></p>
|
||||||
<p class="headwear-price"></p>
|
<p class="headwear-price"></p>
|
||||||
<p class="headwear-award"></p>
|
<p class="headwear-award"></p>
|
||||||
<p class="buy-btn"></p>
|
<p class="buy-btn">立即購買</p>
|
||||||
<!-- <div class="buy-btn">
|
<!-- <div class="buy-btn">
|
||||||
<p class="headwear-price-wrap">
|
<p class="headwear-price-wrap">
|
||||||
<img src="./images/diamond.png" alt="" class="icon">
|
<img src="./images/diamond.png" alt="" class="icon">
|
||||||
@@ -67,7 +69,7 @@
|
|||||||
<p class="headwear-name"></p>
|
<p class="headwear-name"></p>
|
||||||
<p class="headwear-price"></p>
|
<p class="headwear-price"></p>
|
||||||
<p class="headwear-award"></p>
|
<p class="headwear-award"></p>
|
||||||
<p class="buy-btn"></p>
|
<p class="buy-btn">立即購買</p>
|
||||||
<!-- <div class="buy-btn">
|
<!-- <div class="buy-btn">
|
||||||
<p class="headwear-price-wrap">
|
<p class="headwear-price-wrap">
|
||||||
<img src="./images/diamond.png" alt="" class="icon">
|
<img src="./images/diamond.png" alt="" class="icon">
|
||||||
@@ -83,31 +85,31 @@
|
|||||||
<div class="info-wrap">
|
<div class="info-wrap">
|
||||||
<p class="nick"></p>
|
<p class="nick"></p>
|
||||||
<div>
|
<div>
|
||||||
<p class="meteor-num">我的糖果：<span></span></p>
|
<p class="meteor-num">我的幸运：<span></span></p>
|
||||||
<p class="diamond-num">我的钻石数量：<span></span></p>
|
<p class="diamond-num">我的钻石数量：<span></span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- 玩法介绍 -->
|
<!-- 玩法介绍 -->
|
||||||
<div class="rule-mask">
|
<div class="rule-mask">
|
||||||
<div class="cancel">
|
<div class="cancel">
|
||||||
<img src="./images/common/cancel.png" alt="">
|
<img src="./images/common/cancel.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="title">玩法介绍</div>
|
<div class="title">玩法介绍</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>1. 促销活动期间,购买限定装扮即可获赠相应会场糖果,参与活动。</p>
|
<p>1. 促销活动期间,购买限定装扮即可获赠相应会场游戏币,参与活动。</p>
|
||||||
<p>2. 购买梦幻限定装扮1“<span></span>”,可获赠糖果1个;<br>
|
<p>2. 购买限定装扮1“<span></span>”,可获赠幸运1个;<br>
|
||||||
购买梦幻限定装扮2“<span></span>”,可随机获赠糖果7-10个;<br>
|
购买限定装扮2“<span></span>”,可随机获赠幸运7-10个;<br>
|
||||||
购买梦幻限定装扮3“<span></span>”,可随机获赠糖果70~100个；<br>
|
购买限定装扮3“<span></span>”,可随机获赠幸运70~100个；<br>
|
||||||
购买梦幻限定装扮4“<span></span>”，可随机获赠糖果700~1000个。</p>
|
购买限定装扮4“<span></span>”，可随机获赠幸运700~1000个。</p>
|
||||||
<p>3. 该活动赠送给您的糖果为参与该活动的虛拟道具，不具任何价值也不能转赠其他用户。</p>
|
<p>3. 该活动赠送给您的游戏币为参与该活动的虛拟道具，不具任何价值也不能转赠其他用户。</p>
|
||||||
<p>4. 活动结束将关闭页面,剩余糖果将会清空,请留意活动关闭时间。</p>
|
<p>4. 活动结束将关闭页面,剩余游戏币将会清空,请留意活动关闭时间。</p>
|
||||||
<p>5. 本活动与Apple Inc.无关,最终解释权归平台所有。</p>
|
<p>5. 本活动与Apple Inc.无关,最终解释权归平台所有。</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 阴影 -->
|
<!-- 阴影 -->
|
||||||
<div class="shade"></div>
|
<div class="shade"></div>
|
||||||
|
|
||||||
@@ -117,9 +119,9 @@
|
|||||||
<div class="title">购买<span></span></div>
|
<div class="title">购买<span></span></div>
|
||||||
<div class="buy-num">
|
<div class="buy-num">
|
||||||
<p>数量：</p>
|
<p>数量：</p>
|
||||||
<p class="decrease"><img src="./images/decrease.png" alt="" ></p>
|
<p class="decrease"><img src="./images/decrease.png" alt=""></p>
|
||||||
<input type="text" value="1" class="inputNum">
|
<input type="text" value="1" class="inputNum">
|
||||||
<p class="increase"><img src="./images/increase.png" alt="" ></p>
|
<p class="increase"><img src="./images/increase.png" alt=""></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="buy-day">
|
<div class="buy-day">
|
||||||
<p>天数：</p>
|
<p>天数：</p>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "pingfang-medium";
|
font-family: "pingfang-medium";
|
||||||
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
||||||
@@ -133,6 +134,15 @@ body {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.invite-record-wrap::before {
|
||||||
|
content: "邀請記錄";
|
||||||
|
color: #141949;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
left: 0.2533333333rem;
|
||||||
|
top: 0.2266666667rem;
|
||||||
|
}
|
||||||
.invite-record-wrap .text {
|
.invite-record-wrap .text {
|
||||||
color: #141949;
|
color: #141949;
|
||||||
font-size: 0.32rem;
|
font-size: 0.32rem;
|
||||||
|
|||||||
@@ -157,6 +157,16 @@ body {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '邀請記錄';
|
||||||
|
color: #141949;
|
||||||
|
font-size: px2rem(24, );
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(19, );
|
||||||
|
top: px2rem(17, );
|
||||||
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
color: #141949;
|
color: #141949;
|
||||||
font-size: px2rem(24, );
|
font-size: px2rem(24, );
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ body {
|
|||||||
z-index: 999;
|
z-index: 999;
|
||||||
width: px2rem(750);
|
width: px2rem(750);
|
||||||
height: px2rem(126);
|
height: px2rem(126);
|
||||||
background: linear-gradient(-90deg, #A493FC 0%, #40D3F8 100%);;
|
background: linear-gradient(-90deg, #A493FC 0%, #40D3F8 100%);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
<p>3.每位新用戶僅能填寫一次邀請碼， 填寫後不可修改。</p>
|
<p>3.每位新用戶僅能填寫一次邀請碼， 填寫後不可修改。</p>
|
||||||
</div>
|
</div>
|
||||||
<ul class="invite-record-wrap">
|
<ul class="invite-record-wrap">
|
||||||
<div class="text">邀請記錄</div>
|
<!-- <li class="text">邀請記錄</li> -->
|
||||||
<!-- <li>
|
<!-- <li>
|
||||||
<div class="item-avatar"><img src="./images/default.png" alt=""></div>
|
<div class="item-avatar"><img src="./images/default.png" alt=""></div>
|
||||||
<div class="item-info">
|
<div class="item-info">
|
||||||
|
|||||||
@@ -5,19 +5,19 @@ if (env == 'test') {
|
|||||||
new VConsole();
|
new VConsole();
|
||||||
}
|
}
|
||||||
|
|
||||||
// const productUrlNew = 'https://api.99park.cn'; // 正式环境
|
// const productUrlNew = 'https://api.99park.cn'; // 正式環境
|
||||||
// const testUrlNew = 'http://beta.99park.cn'; // 测试环境
|
// const testUrlNew = 'http://beta.99park.cn'; // 測試環境
|
||||||
|
|
||||||
const productUrlNew = 'https://api.pekolive.com'; // 正式环境
|
const productUrlNew = 'https://api.pekolive.com'; // 正式環境
|
||||||
const testUrlNew = 'https://beta.api.pekolive.com'; // 测试环境
|
const testUrlNew = 'https://beta.api.pekolive.com'; // 測試環境
|
||||||
//获取新域名前缀
|
//獲取新域名前綴
|
||||||
function getUrlPrefixNew() {
|
function getUrlPrefixNew() {
|
||||||
if (!EnvCheck()) return undefined;
|
if (!EnvCheck()) return undefined;
|
||||||
return EnvCheck() === 'live' ? productUrlNew : testUrlNew;
|
return EnvCheck() === 'live' ? productUrlNew : testUrlNew;
|
||||||
}
|
}
|
||||||
const urlPrefixNew = getUrlPrefixNew()
|
const urlPrefixNew = getUrlPrefixNew()
|
||||||
|
|
||||||
// 封装layer消息提醒框
|
// 封裝layer消息提醒框
|
||||||
let layerIndex
|
let layerIndex
|
||||||
const showLoading = (content = '加載中...') => {
|
const showLoading = (content = '加載中...') => {
|
||||||
layer.open({
|
layer.open({
|
||||||
@@ -44,9 +44,9 @@ let shareObj = {
|
|||||||
type: 2,
|
type: 2,
|
||||||
data: {
|
data: {
|
||||||
msg: 'llllll',
|
msg: 'llllll',
|
||||||
title: '玩游戏交朋友，来peko',
|
title: '來peko，邂逅你的專屬聲音',
|
||||||
imgUrl: 'https://beta.api.pekolive.com/peko/modules/wxPubPay/images/logo.png',
|
imgUrl: 'http://beta.img.pekolive.com/logo.png',
|
||||||
desc: '人美声甜小姐姐在线连麦陪玩，有趣的人正在等你~',
|
desc: '聽聲音玩遊戲交朋友，來peko~',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -117,10 +117,10 @@ const getRule = () => {
|
|||||||
tickets = res.data.tickets
|
tickets = res.data.tickets
|
||||||
let desc = ''
|
let desc = ''
|
||||||
tickets.map((item, index) => {
|
tickets.map((item, index) => {
|
||||||
desc += `${item.ticketName}${item.ticketNum}张${index === tickets.length-1 ? '。' : '，'}`
|
desc += `${item.ticketName}${item.ticketNum}張${index === tickets.length-1 ? '。' : '，'}`
|
||||||
})
|
})
|
||||||
let str = `
|
let str = `
|
||||||
<p>4.每成功邀请${taskLimit}位好友注册且报名比赛，可获赠${desc}</p>
|
<p>4.每成功邀請${taskLimit}位好友註冊且報名比賽，可獲贈${desc}</p>
|
||||||
`
|
`
|
||||||
$('.rule-wrap').append(str)
|
$('.rule-wrap').append(str)
|
||||||
}
|
}
|
||||||
@@ -150,9 +150,9 @@ const renderInviteList = () => {
|
|||||||
item.gender ? `<img src="${item.gender === 1 ? `./images/male.png` : `./images/female.png`}" alt="">` : ''
|
item.gender ? `<img src="${item.gender === 1 ? `./images/male.png` : `./images/female.png`}" alt="">` : ''
|
||||||
}
|
}
|
||||||
</p>
|
</p>
|
||||||
<div class="item-date"><span>${dateFormat(item.createTime, "yyyy-MM-dd hh:mm")}</span> 注册</div>
|
<div class="item-date"><span>${dateFormat(item.createTime, "yyyy-MM-dd hh:mm")}</span> 註冊</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="isActive ${item.hasLoginActived ? '' : 'inactive'}">${item.hasLoginActived ? '已登录激活' : '未登录激活'}</div>
|
<div class="isActive ${item.hasLoginActived ? '' : 'inactive'}">${item.hasLoginActived ? '已登錄激活' : '未登錄激活'}</div>
|
||||||
</li>
|
</li>
|
||||||
`
|
`
|
||||||
} )
|
} )
|
||||||
|
|||||||
@@ -6,6 +6,16 @@
|
|||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
<title class="appName">邀请好友</title>
|
<title class="appName">邀请好友</title>
|
||||||
|
<meta property="og:url" content="" />
|
||||||
|
<meta property="fb:app_id" content="1266232494209868" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:title" content="來peko，邂逅你的專屬聲音" />
|
||||||
|
<meta property="og:description" content="聽聲音玩遊戲交朋友，來peko" />
|
||||||
|
<!-- https://pic.lecheng163.com/ananLogo256.png -->
|
||||||
|
<meta class="content_image" property="og:image" content="http://beta.img.pekolive.com/logo-512.png?from_wecom=1" />
|
||||||
|
<meta property="og:image:width" content="256">
|
||||||
|
<meta property="og:image:height" content="256">
|
||||||
|
<meta property="og:image:type" content="image/png">
|
||||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||||
<link rel="stylesheet" href="./css/register.css?v=3.0">
|
<link rel="stylesheet" href="./css/register.css?v=3.0">
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,13 +1,12 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'pingfang-medium';
|
font-family: "pingfang-medium";
|
||||||
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
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");
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
font-family: 'pingfang-medium';
|
font-family: "pingfang-medium";
|
||||||
background: #9B251E;
|
background: #2FA07C;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
@@ -15,151 +14,134 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 8.56rem;
|
height: 8.56rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner img {
|
.banner img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner p {
|
.banner p {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 7.62667rem;
|
top: 7.6266666667rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.34667rem;
|
font-size: 0.3466666667rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 23.73333rem;
|
height: 23.7333333333rem;
|
||||||
background: url("../image/bg.png") no-repeat 0 0/100% 100%;
|
background: url("../image/bg.png") no-repeat 0 0/100% 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .time {
|
.wrap .time {
|
||||||
width: 6.61333rem;
|
width: 6.6133333333rem;
|
||||||
height: 1.04rem;
|
height: 0.7466666667rem;
|
||||||
background: url("../image/time-bg.png") no-repeat 0 0/100% 100%;
|
background: url("../image/time-bg.png") no-repeat 0 0/100% 100%;
|
||||||
margin: 5.97333rem auto 0.66667rem;
|
margin: 5.9733333333rem auto 0.6666666667rem;
|
||||||
color: #FDE6B5;
|
color: #fff;
|
||||||
font-size: 0.45333rem;
|
font-size: 0.3733333333rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.04rem;
|
line-height: 0.7466666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .headwear-wrap {
|
.wrap .headwear-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
width: 9.46667rem;
|
width: 9.4666666667rem;
|
||||||
height: 5.52rem;
|
height: 5.52rem;
|
||||||
background: url("../image/headwear-wrap-bg.png") no-repeat 0 0/100% 100%;
|
background: url("../image/headwear-wrap-bg.png") no-repeat 0 0/100% 100%;
|
||||||
margin: 0rem auto 0.66667rem;
|
margin: 0rem auto 0.6666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .headwear-wrap .title {
|
.wrap .headwear-wrap .title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.66667rem;
|
top: 0.6666666667rem;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 0.34667rem;
|
font-size: 0.32rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #9D1F11;
|
color: #34846B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .headwear-wrap .headwear-item {
|
.wrap .headwear-wrap .headwear-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #9D1F11;
|
color: #9D1F11;
|
||||||
font-size: 0.32rem;
|
font-size: 0.32rem;
|
||||||
margin-top: 1.30667rem;
|
margin-top: 1.3066666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .headwear-wrap .headwear-item .pic-wrap {
|
.wrap .headwear-wrap .headwear-item .pic-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 2.50667rem;
|
width: 2.5066666667rem;
|
||||||
height: 2.66667rem;
|
height: 2.6666666667rem;
|
||||||
background: url("../image/headwear-bg.png") no-repeat 0 0/100% 100%;
|
background: url("../image/headwear-bg.png") no-repeat 0 0/100% 100%;
|
||||||
margin-bottom: 0.24rem;
|
margin-bottom: 0.24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .headwear-wrap .headwear-item .pic-wrap.active {
|
.wrap .headwear-wrap .headwear-item .pic-wrap.active {
|
||||||
background-image: url("../image/headwear-active-bg.png");
|
background-image: url("../image/headwear-active-bg.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .headwear-wrap .headwear-item .pic-wrap img {
|
.wrap .headwear-wrap .headwear-item .pic-wrap img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 2.05333rem;
|
width: 2.0533333333rem;
|
||||||
height: 2.05333rem;
|
height: 2.0533333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .headwear-wrap .headwear-item .headwear-name {
|
.wrap .headwear-wrap .headwear-item .headwear-name {
|
||||||
margin-bottom: 0.10667rem;
|
margin-bottom: 0.1066666667rem;
|
||||||
|
color: #34846B;
|
||||||
|
font-size: 0.32rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .headwear-wrap .headwear-item .headwear-price {
|
.wrap .headwear-wrap .headwear-item .headwear-price {
|
||||||
color: #FF5105;
|
color: #FC9362;
|
||||||
font-size: 0.37333rem;
|
font-size: 0.2666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .headwear-wrap .headwear-item .headwear-price .diamond-icon {
|
.wrap .headwear-wrap .headwear-item .headwear-price .diamond-icon {
|
||||||
width: 0.50667rem;
|
width: 0.5066666667rem;
|
||||||
height: 0.4rem;
|
height: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap {
|
.wrap .day-wrap {
|
||||||
width: 9.46667rem;
|
width: 9.4666666667rem;
|
||||||
height: 9.06667rem;
|
height: 9.0666666667rem;
|
||||||
background: url("../image/day-wrap-bg.png") no-repeat 0 0/100% 100%;
|
background: url("../image/day-wrap-bg.png") no-repeat 0 0/100% 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 auto 0.82667rem;
|
margin: 0 auto 0.8266666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .select-title {
|
.wrap .day-wrap .select-title {
|
||||||
width: 4.4rem;
|
width: 4.4rem;
|
||||||
height: 0.93333rem;
|
height: 0.9333333333rem;
|
||||||
line-height: 0.93333rem;
|
line-height: 0.9333333333rem;
|
||||||
margin: 0rem auto 0.48rem;
|
margin: 0.5333333333rem auto 0.48rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #FDE6B5;
|
color: #4FA989;
|
||||||
font-size: 0.45333rem;
|
font-size: 0.48rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .advertising {
|
.wrap .day-wrap .advertising {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.32rem;
|
height: 0.32rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .advertising ul li {
|
.wrap .day-wrap .advertising ul li {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #AA3826;
|
color: #AA3826;
|
||||||
font-size: 0.26667rem;
|
font-size: 0.2666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .advertising ul li div {
|
.wrap .day-wrap .advertising ul li div {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
.wrap .day-wrap .advertising ul li .nick,
|
||||||
.wrap .day-wrap .advertising ul li .nick, .wrap .day-wrap .advertising ul li .diamond-num {
|
.wrap .day-wrap .advertising ul li .diamond-num {
|
||||||
color: #FF5105;
|
color: #FF5105;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .advertising ul li img {
|
.wrap .day-wrap .advertising ul li img {
|
||||||
width: 0.4rem;
|
width: 0.4rem;
|
||||||
height: 0.32rem;
|
height: 0.32rem;
|
||||||
margin-right: 0.21333rem;
|
margin-right: 0.2133333333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .select-item {
|
.wrap .day-wrap .select-item {
|
||||||
width: 92%;
|
width: 92%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -167,37 +149,35 @@ body {
|
|||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
margin: 0.4rem auto 0;
|
margin: 0.4rem auto 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .select-item p {
|
.wrap .day-wrap .select-item p {
|
||||||
width: 2.32rem;
|
width: 2.5333333333rem;
|
||||||
height: 1.06667rem;
|
height: 0.8533333333rem;
|
||||||
line-height: 1.06667rem;
|
line-height: 0.8533333333rem;
|
||||||
background: url("../image/unselected.png") no-repeat 0 0/100% 100%;
|
background: #5CC6A4;
|
||||||
color: white;
|
color: #FFFFFF;
|
||||||
font-size: 0.37333rem;
|
font-size: 0.3733333333rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 0.42667rem;
|
margin-bottom: 0.4266666667rem;
|
||||||
|
border-radius: 0.2666666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .select-item p.active {
|
.wrap .day-wrap .select-item p.active {
|
||||||
background: url("../image/selected.png") no-repeat 0 0/100% 100%;
|
background: #FD8D5D;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .total-price {
|
.wrap .day-wrap .total-price {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #9D1F11;
|
color: #4FA989;
|
||||||
font-size: 0.34667rem;
|
font-size: 0.32rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .day-wrap .buy-btn {
|
.wrap .day-wrap .buy-btn {
|
||||||
width: 6.58667rem;
|
width: 6.0666666667rem;
|
||||||
background: url("../image/buy-btn.png") no-repeat 0 0/100% 100%;
|
background: url("../image/know.png") no-repeat 0 0/100% 100%;
|
||||||
line-height: 1.13333rem;
|
line-height: 1.1466666667rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #FFEB8D;
|
color: #FFEB8D;
|
||||||
font-size: 0.42667rem;
|
font-size: 0.4266666667rem;
|
||||||
margin: 0.32rem auto 0;
|
margin: 0.32rem auto 0;
|
||||||
|
height: 1.1466666667rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask {
|
.shade-mask {
|
||||||
@@ -210,7 +190,6 @@ body {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask .shade-content {
|
.shade-mask .shade-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -219,62 +198,63 @@ body {
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 9.46667rem;
|
width: 9.4666666667rem;
|
||||||
height: 7.38667rem;
|
height: 7.3866666667rem;
|
||||||
background: url("../image/index-panel.png") no-repeat 0 0/100% 100%;
|
background: url("../image/index-panel.png") no-repeat 0 0/100% 100%;
|
||||||
color: #9D1F11;
|
color: #9D1F11;
|
||||||
font-size: 0.32rem;
|
font-size: 0.32rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask .shade-content .content-title {
|
.shade-mask .shade-content .content-title {
|
||||||
font-size: 0.34667rem;
|
font-size: 0.3466666667rem;
|
||||||
margin-top: 0.66667rem;
|
margin-top: 0.6666666667rem;
|
||||||
margin-bottom: 0.32rem;
|
margin-bottom: 0.32rem;
|
||||||
|
color: #4FA989;
|
||||||
|
font-size: 0.48rem;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask .shade-content .headwear-info-wrap {
|
.shade-mask .shade-content .headwear-info-wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 0.56rem;
|
margin-bottom: 0.56rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask .shade-content .headwear-info-wrap .headwear-info {
|
.shade-mask .shade-content .headwear-info-wrap .headwear-info {
|
||||||
width: 32%;
|
width: 32%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask .shade-content .headwear-info-wrap .headwear-info .hw-pic {
|
.shade-mask .shade-content .headwear-info-wrap .headwear-info .hw-pic {
|
||||||
width: 2.50667rem;
|
width: 2.5066666667rem;
|
||||||
height: 2.66667rem;
|
height: 2.6666666667rem;
|
||||||
background: url("../image/panel-item-bg.png") no-repeat 0 0/100% 100%;
|
background: url("../image/panel-item-bg.png") no-repeat 0 0/100% 100%;
|
||||||
border-radius: 0.13333rem;
|
border-radius: 0.1333333333rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask .shade-content .headwear-info-wrap .headwear-info .hw-pic img {
|
.shade-mask .shade-content .headwear-info-wrap .headwear-info .hw-pic img {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask .shade-content .headwear-info-wrap .headwear-info .hw-name {
|
.shade-mask .shade-content .headwear-info-wrap .headwear-info .hw-name {
|
||||||
margin: 0.13333rem 0;
|
margin: 0.1333333333rem 0;
|
||||||
|
color: #34846B;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.32rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask .shade-content .headwear-info-wrap .headwear-info .hw-days {
|
.shade-mask .shade-content .headwear-info-wrap .headwear-info .hw-days {
|
||||||
color: #FF5105;
|
color: #FC9362;
|
||||||
font-size: 0.37333rem;
|
font-size: 0.2666666667rem;
|
||||||
|
}
|
||||||
|
.shade-mask .shade-content .know {
|
||||||
|
width: 4.4533333333rem;
|
||||||
|
height: 1.1466666667rem;
|
||||||
|
background: url("../image/know.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
line-height: 1.1466666667rem;
|
||||||
|
font-size: 0.4266666667rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shade-mask .shade-content .know {
|
/*# sourceMappingURL=index.css.map */
|
||||||
width: 4.45333rem;
|
|
||||||
height: 1.14667rem;
|
|
||||||
background: url("../image/know.png") no-repeat 0 0/100% 100%;
|
|
||||||
line-height: 1.14667rem;
|
|
||||||
font-size: 0.48rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #FFEB8D;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
@return $px / $rem+rem;
|
@return $px / $rem+rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face{
|
@font-face {
|
||||||
font-family: 'pingfang-medium';
|
font-family: 'pingfang-medium';
|
||||||
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||||||
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||||||
@@ -16,20 +16,22 @@ html,
|
|||||||
body {
|
body {
|
||||||
font-family: 'pingfang-medium';
|
font-family: 'pingfang-medium';
|
||||||
// height: 100%;
|
// height: 100%;
|
||||||
background: #9B251E;
|
background: #2FA07C;
|
||||||
// margin-bottom: px2rem(90, );
|
// margin-bottom: px2rem(90, );
|
||||||
// overflow-y: hidden;
|
// overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner{
|
.banner {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: px2rem(642, );
|
height: px2rem(642, );
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
p{
|
|
||||||
|
p {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(572, );
|
top: px2rem(572, );
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@@ -40,23 +42,24 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap{
|
.wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: px2rem(1780, );
|
height: px2rem(1780, );
|
||||||
background: url('../image/bg.png') no-repeat 0 0/100% 100%;
|
background: url('../image/bg.png') no-repeat 0 0/100% 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.time{
|
|
||||||
|
.time {
|
||||||
width: px2rem(496, );
|
width: px2rem(496, );
|
||||||
height: px2rem(78, );
|
height: px2rem(56, );
|
||||||
background: url('../image/time-bg.png') no-repeat 0 0/100% 100%;
|
background: url('../image/time-bg.png') no-repeat 0 0/100% 100%;
|
||||||
margin: px2rem(448, ) auto px2rem(50, );
|
margin: px2rem(448, ) auto px2rem(50, );
|
||||||
color: #FDE6B5;
|
color: #fff;
|
||||||
font-size: px2rem(34, );
|
font-size: px2rem(28, );
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: px2rem(78, );
|
line-height: px2rem(56, );
|
||||||
}
|
}
|
||||||
|
|
||||||
.headwear-wrap{
|
.headwear-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
@@ -65,30 +68,35 @@ body {
|
|||||||
height: px2rem(414, );
|
height: px2rem(414, );
|
||||||
background: url('../image/headwear-wrap-bg.png') no-repeat 0 0/100% 100%;
|
background: url('../image/headwear-wrap-bg.png') no-repeat 0 0/100% 100%;
|
||||||
margin: px2rem(0, ) auto px2rem(50, );
|
margin: px2rem(0, ) auto px2rem(50, );
|
||||||
.title{
|
|
||||||
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(50, );
|
top: px2rem(50, );
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: px2rem(26, );
|
font-size: px2rem(24, );
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #9D1F11;
|
color: #34846B;
|
||||||
}
|
}
|
||||||
.headwear-item{
|
|
||||||
|
.headwear-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #9D1F11;
|
color: #9D1F11;
|
||||||
font-size: px2rem(24, );
|
font-size: px2rem(24, );
|
||||||
margin-top: px2rem(98, );
|
margin-top: px2rem(98, );
|
||||||
.pic-wrap{
|
|
||||||
|
.pic-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: px2rem(188, );
|
width: px2rem(188, );
|
||||||
height: px2rem(200, );
|
height: px2rem(200, );
|
||||||
background: url('../image/headwear-bg.png') no-repeat 0 0/100% 100%;
|
background: url('../image/headwear-bg.png') no-repeat 0 0/100% 100%;
|
||||||
margin-bottom: px2rem(18, );
|
margin-bottom: px2rem(18, );
|
||||||
&.active{
|
|
||||||
|
&.active {
|
||||||
background-image: url('../image/headwear-active-bg.png');
|
background-image: url('../image/headwear-active-bg.png');
|
||||||
}
|
}
|
||||||
img{
|
|
||||||
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -97,56 +105,68 @@ body {
|
|||||||
height: px2rem(154, );
|
height: px2rem(154, );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.headwear-name{
|
|
||||||
|
.headwear-name {
|
||||||
margin-bottom: px2rem(8, );
|
margin-bottom: px2rem(8, );
|
||||||
|
color: #34846B;
|
||||||
|
font-size: px2rem(24, );
|
||||||
}
|
}
|
||||||
.headwear-price{
|
|
||||||
color: #FF5105;
|
.headwear-price {
|
||||||
font-size: px2rem(28, );
|
color: #FC9362;
|
||||||
.diamond-icon{
|
font-size: px2rem(20, );
|
||||||
|
|
||||||
|
.diamond-icon {
|
||||||
width: px2rem(38, );
|
width: px2rem(38, );
|
||||||
height: px2rem(30, );
|
height: px2rem(30, );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.day-wrap{
|
.day-wrap {
|
||||||
width: px2rem(710, );
|
width: px2rem(710, );
|
||||||
height: px2rem(680, );
|
height: px2rem(680, );
|
||||||
background: url('../image/day-wrap-bg.png') no-repeat 0 0/100% 100%;
|
background: url('../image/day-wrap-bg.png') no-repeat 0 0/100% 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 auto px2rem(62, );
|
margin: 0 auto px2rem(62, );
|
||||||
.select-title{
|
|
||||||
|
.select-title {
|
||||||
width: px2rem(330, );
|
width: px2rem(330, );
|
||||||
height: px2rem(70, );
|
height: px2rem(70, );
|
||||||
line-height: px2rem(70, );
|
line-height: px2rem(70, );
|
||||||
margin: px2rem(0, ) auto px2rem(36, );
|
margin: px2rem(40, ) auto px2rem(36, );
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #FDE6B5;
|
color: #4FA989;
|
||||||
font-size: px2rem(34, );
|
font-size: px2rem(36, );
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.advertising{
|
|
||||||
|
.advertising {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: px2rem(24, );
|
height: px2rem(24, );
|
||||||
margin: auto;
|
margin: auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
ul{
|
|
||||||
li{
|
ul {
|
||||||
|
li {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #AA3826;
|
color: #AA3826;
|
||||||
font-size: px2rem(20, );
|
font-size: px2rem(20, );
|
||||||
div{
|
|
||||||
|
div {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.nick, .diamond-num{
|
|
||||||
|
.nick,
|
||||||
|
.diamond-num {
|
||||||
color: #FF5105;
|
color: #FF5105;
|
||||||
}
|
}
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: px2rem(30, );
|
width: px2rem(30, );
|
||||||
height: px2rem(24, );
|
height: px2rem(24, );
|
||||||
margin-right: px2rem(16, );
|
margin-right: px2rem(16, );
|
||||||
@@ -154,42 +174,50 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.select-item{
|
|
||||||
|
.select-item {
|
||||||
width: 92%;
|
width: 92%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
margin: px2rem(30, ) auto 0;
|
margin: px2rem(30, ) auto 0;
|
||||||
p{
|
|
||||||
width: px2rem(174, );
|
p {
|
||||||
height: px2rem(80, );
|
width: px2rem(190, );
|
||||||
line-height: px2rem(80, );
|
height: px2rem(64, );
|
||||||
background: url('../image/unselected.png') no-repeat 0 0/100% 100%;
|
line-height: px2rem(64, );
|
||||||
color: white;
|
// background: url('../image/unselected.png') no-repeat 0 0/100% 100%;
|
||||||
|
background: #5CC6A4;
|
||||||
|
color: #FFFFFF;
|
||||||
font-size: px2rem(28, );
|
font-size: px2rem(28, );
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: px2rem(32, );
|
margin-bottom: px2rem(32, );
|
||||||
&.active{
|
border-radius: px2rem(20, );
|
||||||
background: url('../image/selected.png') no-repeat 0 0/100% 100%;
|
|
||||||
|
&.active {
|
||||||
|
// background: url('../image/selected.png') no-repeat 0 0/100% 100%;
|
||||||
|
background: #FD8D5D;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.total-price{
|
|
||||||
|
.total-price {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #9D1F11;
|
color: #4FA989;
|
||||||
font-size: px2rem(26, );
|
font-size: px2rem(24, );
|
||||||
}
|
}
|
||||||
|
|
||||||
.buy-btn{
|
.buy-btn {
|
||||||
width: px2rem(494, );
|
width: px2rem(455, );
|
||||||
background: url('../image/buy-btn.png') no-repeat 0 0/100% 100%;
|
background: url('../image/know.png') no-repeat 0 0/100% 100%;
|
||||||
line-height: px2rem(85, );
|
line-height: px2rem(86, );
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #FFEB8D;
|
color: #FFEB8D;
|
||||||
font-size: px2rem(32, );
|
font-size: px2rem(32, );
|
||||||
margin: px2rem(24, ) auto 0;
|
margin: px2rem(24, ) auto 0;
|
||||||
|
height: px2rem(86, );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -197,7 +225,7 @@ body {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
.shade-mask{
|
.shade-mask {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -206,7 +234,8 @@ body {
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: rgba($color: #000000, $alpha: .7);
|
background-color: rgba($color: #000000, $alpha: .7);
|
||||||
.shade-content{
|
|
||||||
|
.shade-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -219,58 +248,67 @@ body {
|
|||||||
background: url('../image/index-panel.png') no-repeat 0 0/100% 100%;
|
background: url('../image/index-panel.png') no-repeat 0 0/100% 100%;
|
||||||
color: #9D1F11;
|
color: #9D1F11;
|
||||||
font-size: px2rem(24, );
|
font-size: px2rem(24, );
|
||||||
.content-title{
|
|
||||||
|
.content-title {
|
||||||
font-size: px2rem(26, );
|
font-size: px2rem(26, );
|
||||||
margin-top: px2rem(50, );
|
margin-top: px2rem(50, );
|
||||||
margin-bottom: px2rem(24, );
|
margin-bottom: px2rem(24, );
|
||||||
|
color: #4FA989;
|
||||||
|
font-size: px2rem(36, );
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.headwear-info-wrap{
|
|
||||||
|
.headwear-info-wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: px2rem(42, );
|
margin-bottom: px2rem(42, );
|
||||||
.headwear-info{
|
|
||||||
|
.headwear-info {
|
||||||
width: 32%;
|
width: 32%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.hw-pic{
|
|
||||||
|
.hw-pic {
|
||||||
width: px2rem(188, );
|
width: px2rem(188, );
|
||||||
height: px2rem(200, );
|
height: px2rem(200, );
|
||||||
// background-color: #081C43;
|
// background-color: #081C43;
|
||||||
background: url('../image/panel-item-bg.png') no-repeat 0 0/100% 100%;
|
background: url('../image/panel-item-bg.png') no-repeat 0 0/100% 100%;
|
||||||
|
// background: #FFF8D6;
|
||||||
border-radius: px2rem(10, );
|
border-radius: px2rem(10, );
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.hw-name{
|
|
||||||
|
.hw-name {
|
||||||
margin: px2rem(10, ) 0;
|
margin: px2rem(10, ) 0;
|
||||||
|
color: #34846B;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: px2rem(24, );
|
||||||
}
|
}
|
||||||
.hw-days{
|
|
||||||
color: #FF5105;
|
.hw-days {
|
||||||
font-size: px2rem(28, );
|
color: #FC9362;
|
||||||
|
font-size: px2rem(20, );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.know{
|
|
||||||
|
.know {
|
||||||
width: px2rem(334, );
|
width: px2rem(334, );
|
||||||
height: px2rem(86, );
|
height: px2rem(86, );
|
||||||
background: url('../image/know.png') no-repeat 0 0/100% 100%;
|
background: url('../image/know.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
line-height: px2rem(86, );
|
line-height: px2rem(86, );
|
||||||
font-size: px2rem(36, );
|
font-size: px2rem(32, );
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #FFEB8D;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 469 KiB After Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 426 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 198 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 236 KiB After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 19 KiB |
@@ -23,7 +23,7 @@
|
|||||||
<p>有效期：2022年2月15日</p>
|
<p>有效期：2022年2月15日</p>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="time">有效期：2022年6月15日</div>
|
<div class="time">有效期：2023年12月31日</div>
|
||||||
<div class="headwear-wrap">
|
<div class="headwear-wrap">
|
||||||
<div class="headwear-item">
|
<div class="headwear-item">
|
||||||
<div class="pic-wrap"><img alt=""></div>
|
<div class="pic-wrap"><img alt=""></div>
|
||||||
|
|||||||
@@ -1,30 +1,30 @@
|
|||||||
/**
|
/**
|
||||||
* dropload
|
* dropload
|
||||||
* 西门(http://ons.me/526.html)
|
* 西門(http://ons.me/526.html)
|
||||||
* 0.9.0(160215)
|
* 0.9.0(160215)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
;(function($){
|
; (function ($) {
|
||||||
'use strict';
|
'use strict';
|
||||||
var win = window;
|
var win = window;
|
||||||
var doc = document;
|
var doc = document;
|
||||||
var $win = $(win);
|
var $win = $(win);
|
||||||
var $doc = $(doc);
|
var $doc = $(doc);
|
||||||
$.fn.dropload = function(options){
|
$.fn.dropload = function (options) {
|
||||||
console.log('this', this);
|
console.log('this', this);
|
||||||
return new MyDropLoad(this, options);
|
return new MyDropLoad(this, options);
|
||||||
};
|
};
|
||||||
var MyDropLoad = function(element, options){
|
var MyDropLoad = function (element, options) {
|
||||||
var me = this;
|
var me = this;
|
||||||
me.$element = element;
|
me.$element = element;
|
||||||
// 上方是否插入DOM
|
// 上方是否插入DOM
|
||||||
me.upInsertDOM = false;
|
me.upInsertDOM = false;
|
||||||
// loading状态
|
// loading狀態
|
||||||
me.loading = false;
|
me.loading = false;
|
||||||
// 是否锁定
|
// 是否鎖定
|
||||||
me.isLockUp = false;
|
me.isLockUp = false;
|
||||||
me.isLockDown = false;
|
me.isLockDown = false;
|
||||||
// 是否有数据
|
// 是否有數據
|
||||||
me.isData = true;
|
me.isData = true;
|
||||||
me._scrollTop = 0;
|
me._scrollTop = 0;
|
||||||
me._threshold = 0;
|
me._threshold = 0;
|
||||||
@@ -34,168 +34,168 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
MyDropLoad.prototype.init = function(options){
|
MyDropLoad.prototype.init = function (options) {
|
||||||
var me = this;
|
var me = this;
|
||||||
me.opts = $.extend(true, {}, {
|
me.opts = $.extend(true, {}, {
|
||||||
scrollArea : me.$element, // 滑动区域
|
scrollArea: me.$element, // 滑動區域
|
||||||
domUp : { // 上方DOM
|
domUp: { // 上方DOM
|
||||||
domClass : 'dropload-up',
|
domClass: 'dropload-up',
|
||||||
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
|
domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
|
||||||
domUpdate : '<div class="dropload-update">↑释放更新</div>',
|
domUpdate: '<div class="dropload-update">↑釋放更新</div>',
|
||||||
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中...</div>'
|
domLoad: '<div class="dropload-load"><span class="loading"></span>加載中...</div>'
|
||||||
},
|
},
|
||||||
domDown : { // 下方DOM
|
domDown: { // 下方DOM
|
||||||
domClass : 'dropload-down',
|
domClass: 'dropload-down',
|
||||||
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
|
domRefresh: '<div class="dropload-refresh">↑上拉加載更多</div>',
|
||||||
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
|
domLoad: '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
|
||||||
domNoData : '<div class="dropload-noData">没有更多了</div>'
|
domNoData: '<div class="dropload-noData">沒有更多了</div>'
|
||||||
},
|
},
|
||||||
autoLoad : true, // 自动加载
|
autoLoad: true, // 自動加載
|
||||||
distance : 50, // 拉动距离
|
distance: 50, // 拉動距離
|
||||||
threshold : '', // 提前加载距离
|
threshold: '', // 提前加載距離
|
||||||
loadUpFn : '', // 上方function
|
loadUpFn: '', // 上方function
|
||||||
loadDownFn : '' // 下方function
|
loadDownFn: '' // 下方function
|
||||||
}, options);
|
}, options);
|
||||||
|
|
||||||
// 如果加载下方，事先在下方插入DOM
|
// 如果加載下方，事先在下方插入DOM
|
||||||
if(me.opts.loadDownFn != ''){
|
if (me.opts.loadDownFn != '') {
|
||||||
me.$element.append('<div class="'+me.opts.domDown.domClass+'">'+me.opts.domDown.domRefresh+'</div>');
|
me.$element.append('<div class="' + me.opts.domDown.domClass + '">' + me.opts.domDown.domRefresh + '</div>');
|
||||||
me.$domDown = $('.'+me.opts.domDown.domClass);
|
me.$domDown = $('.' + me.opts.domDown.domClass);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 计算提前加载距离
|
// 計算提前加載距離
|
||||||
if(!!me.$domDown && me.opts.threshold === ''){
|
if (!!me.$domDown && me.opts.threshold === '') {
|
||||||
// 默认滑到加载区2/3处时加载
|
// 默認滑到加載區2/3處時加載
|
||||||
me._threshold = Math.floor(me.$domDown.height()*1/3);
|
me._threshold = Math.floor(me.$domDown.height() * 1 / 3);
|
||||||
}else{
|
} else {
|
||||||
me._threshold = me.opts.threshold;
|
me._threshold = me.opts.threshold;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 判断滚动区域
|
// 判斷滾動區域
|
||||||
if(me.opts.scrollArea == win){
|
if (me.opts.scrollArea == win) {
|
||||||
me.$scrollArea = $win;
|
me.$scrollArea = $win;
|
||||||
// 获取文档高度
|
// 獲取文檔高度
|
||||||
me._scrollContentHeight = $doc.height();
|
me._scrollContentHeight = $doc.height();
|
||||||
// 获取win显示区高度 —— 这里有坑
|
// 獲取win顯示區高度 —— 這裏有坑
|
||||||
me._scrollWindowHeight = doc.documentElement.clientHeight;
|
me._scrollWindowHeight = doc.documentElement.clientHeight;
|
||||||
}else{
|
} else {
|
||||||
me.$scrollArea = me.opts.scrollArea;
|
me.$scrollArea = me.opts.scrollArea;
|
||||||
me._scrollContentHeight = me.$element[0].scrollHeight;
|
me._scrollContentHeight = me.$element[0].scrollHeight;
|
||||||
me._scrollWindowHeight = me.$element.height();
|
me._scrollWindowHeight = me.$element.height();
|
||||||
}
|
}
|
||||||
fnAutoLoad(me);
|
fnAutoLoad(me);
|
||||||
|
|
||||||
// 窗口调整
|
// 窗口調整
|
||||||
$win.on('resize',function(){
|
$win.on('resize', function () {
|
||||||
if(me.opts.scrollArea == win){
|
if (me.opts.scrollArea == win) {
|
||||||
// 重新获取win显示区高度
|
// 重新獲取win顯示區高度
|
||||||
me._scrollWindowHeight = win.innerHeight;
|
me._scrollWindowHeight = win.innerHeight;
|
||||||
}else{
|
} else {
|
||||||
me._scrollWindowHeight = me.$element.height();
|
me._scrollWindowHeight = me.$element.height();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 绑定触摸
|
// 綁定觸摸
|
||||||
me.$element.on('touchstart',function(e){
|
me.$element.on('touchstart', function (e) {
|
||||||
if(!me.loading){
|
if (!me.loading) {
|
||||||
fnTouches(e);
|
fnTouches(e);
|
||||||
fnTouchstart(e, me);
|
fnTouchstart(e, me);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
me.$element.on('touchmove',function(e){
|
me.$element.on('touchmove', function (e) {
|
||||||
if(!me.loading){
|
if (!me.loading) {
|
||||||
fnTouches(e, me);
|
fnTouches(e, me);
|
||||||
fnTouchmove(e, me);
|
fnTouchmove(e, me);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
me.$element.on('touchend',function(){
|
me.$element.on('touchend', function () {
|
||||||
if(!me.loading){
|
if (!me.loading) {
|
||||||
fnTouchend(me);
|
fnTouchend(me);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 加载下方
|
// 加載下方
|
||||||
me.$scrollArea.on('scroll',function(){
|
me.$scrollArea.on('scroll', function () {
|
||||||
me._scrollTop = me.$scrollArea.scrollTop();
|
me._scrollTop = me.$scrollArea.scrollTop();
|
||||||
|
|
||||||
// 滚动页面触发加载数据
|
// 滾動頁面觸發加載數據
|
||||||
if(me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)){
|
if (me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)) {
|
||||||
loadDown(me);
|
loadDown(me);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// touches
|
// touches
|
||||||
function fnTouches(e){
|
function fnTouches (e) {
|
||||||
if(!e.touches){
|
if (!e.touches) {
|
||||||
e.touches = e.originalEvent.touches;
|
e.touches = e.originalEvent.touches;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// touchstart
|
// touchstart
|
||||||
function fnTouchstart(e, me){
|
function fnTouchstart (e, me) {
|
||||||
me._startY = e.touches[0].pageY;
|
me._startY = e.touches[0].pageY;
|
||||||
// 记住触摸时的scrolltop值
|
// 記住觸摸時的scrolltop值
|
||||||
me.touchScrollTop = me.$scrollArea.scrollTop();
|
me.touchScrollTop = me.$scrollArea.scrollTop();
|
||||||
}
|
}
|
||||||
|
|
||||||
// touchmove
|
// touchmove
|
||||||
function fnTouchmove(e, me){
|
function fnTouchmove (e, me) {
|
||||||
me._curY = e.touches[0].pageY;
|
me._curY = e.touches[0].pageY;
|
||||||
me._moveY = me._curY - me._startY;
|
me._moveY = me._curY - me._startY;
|
||||||
|
|
||||||
if(me._moveY > 0){
|
if (me._moveY > 0) {
|
||||||
me.direction = 'down';
|
me.direction = 'down';
|
||||||
}else if(me._moveY < 0){
|
} else if (me._moveY < 0) {
|
||||||
me.direction = 'up';
|
me.direction = 'up';
|
||||||
}
|
}
|
||||||
|
|
||||||
var _absMoveY = Math.abs(me._moveY);
|
var _absMoveY = Math.abs(me._moveY);
|
||||||
|
|
||||||
// 加载上方
|
// 加載上方
|
||||||
if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
|
if (me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
me.$domUp = $('.'+me.opts.domUp.domClass);
|
me.$domUp = $('.' + me.opts.domUp.domClass);
|
||||||
// 如果加载区没有DOM
|
// 如果加載區沒有DOM
|
||||||
if(!me.upInsertDOM){
|
if (!me.upInsertDOM) {
|
||||||
me.$element.prepend('<div class="'+me.opts.domUp.domClass+'"></div>');
|
me.$element.prepend('<div class="' + me.opts.domUp.domClass + '"></div>');
|
||||||
me.upInsertDOM = true;
|
me.upInsertDOM = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
fnTransition(me.$domUp,0);
|
fnTransition(me.$domUp, 0);
|
||||||
|
|
||||||
// 下拉
|
// 下拉
|
||||||
if(_absMoveY <= me.opts.distance){
|
if (_absMoveY <= me.opts.distance) {
|
||||||
me._offsetY = _absMoveY;
|
me._offsetY = _absMoveY;
|
||||||
// todo：move时会不断清空、增加dom，有可能影响性能，下同
|
// todo：move時會不斷清空、增加dom，有可能影響性能，下同
|
||||||
me.$domUp.html(me.opts.domUp.domRefresh);
|
me.$domUp.html(me.opts.domUp.domRefresh);
|
||||||
// 指定距离 < 下拉距离 < 指定距离*2
|
// 指定距離 < 下拉距離 < 指定距離*2
|
||||||
}else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){
|
} else if (_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance * 2) {
|
||||||
me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5;
|
me._offsetY = me.opts.distance + (_absMoveY - me.opts.distance) * 0.5;
|
||||||
me.$domUp.html(me.opts.domUp.domUpdate);
|
me.$domUp.html(me.opts.domUp.domUpdate);
|
||||||
// 下拉距离 > 指定距离*2
|
// 下拉距離 > 指定距離*2
|
||||||
}else{
|
} else {
|
||||||
me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2;
|
me._offsetY = me.opts.distance + me.opts.distance * 0.5 + (_absMoveY - me.opts.distance * 2) * 0.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
me.$domUp.css({'height': me._offsetY});
|
me.$domUp.css({ 'height': me._offsetY });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// touchend
|
// touchend
|
||||||
function fnTouchend(me){
|
function fnTouchend (me) {
|
||||||
var _absMoveY = Math.abs(me._moveY);
|
var _absMoveY = Math.abs(me._moveY);
|
||||||
if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
|
if (me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp) {
|
||||||
fnTransition(me.$domUp,300);
|
fnTransition(me.$domUp, 300);
|
||||||
|
|
||||||
if(_absMoveY > me.opts.distance){
|
if (_absMoveY > me.opts.distance) {
|
||||||
me.$domUp.css({'height':me.$domUp.children().height()});
|
me.$domUp.css({ 'height': me.$domUp.children().height() });
|
||||||
me.$domUp.html(me.opts.domUp.domLoad);
|
me.$domUp.html(me.opts.domUp.domLoad);
|
||||||
me.loading = true;
|
me.loading = true;
|
||||||
me.opts.loadUpFn(me);
|
me.opts.loadUpFn(me);
|
||||||
}else{
|
} else {
|
||||||
me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
|
me.$domUp.css({ 'height': '0' }).on('webkitTransitionEnd mozTransitionEnd transitionend', function () {
|
||||||
me.upInsertDOM = false;
|
me.upInsertDOM = false;
|
||||||
$(this).remove();
|
$(this).remove();
|
||||||
});
|
});
|
||||||
@@ -204,108 +204,108 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果文档高度不大于窗口高度，数据较少，自动加载下方数据
|
// 如果文檔高度不大於窗口高度，數據較少，自動加載下方數據
|
||||||
function fnAutoLoad(me){
|
function fnAutoLoad (me) {
|
||||||
if(me.opts.autoLoad){
|
if (me.opts.autoLoad) {
|
||||||
if((me._scrollContentHeight - me._threshold) <= me._scrollWindowHeight){
|
if ((me._scrollContentHeight - me._threshold) <= me._scrollWindowHeight) {
|
||||||
loadDown(me);
|
loadDown(me);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重新获取文档高度
|
// 重新獲取文檔高度
|
||||||
function fnRecoverContentHeight(me){
|
function fnRecoverContentHeight (me) {
|
||||||
if(me.opts.scrollArea == win){
|
if (me.opts.scrollArea == win) {
|
||||||
me._scrollContentHeight = $doc.height();
|
me._scrollContentHeight = $doc.height();
|
||||||
}else{
|
} else {
|
||||||
me._scrollContentHeight = me.$element[0].scrollHeight;
|
me._scrollContentHeight = me.$element[0].scrollHeight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载下方
|
// 加載下方
|
||||||
function loadDown(me){
|
function loadDown (me) {
|
||||||
me.direction = 'up';
|
me.direction = 'up';
|
||||||
me.$domDown.html(me.opts.domDown.domLoad);
|
me.$domDown.html(me.opts.domDown.domLoad);
|
||||||
me.loading = true;
|
me.loading = true;
|
||||||
me.opts.loadDownFn(me);
|
me.opts.loadDownFn(me);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 锁定
|
// 鎖定
|
||||||
MyDropLoad.prototype.lock = function(direction){
|
MyDropLoad.prototype.lock = function (direction) {
|
||||||
var me = this;
|
var me = this;
|
||||||
// 如果不指定方向
|
// 如果不指定方向
|
||||||
if(direction === undefined){
|
if (direction === undefined) {
|
||||||
// 如果操作方向向上
|
// 如果操作方向向上
|
||||||
if(me.direction == 'up'){
|
if (me.direction == 'up') {
|
||||||
me.isLockDown = true;
|
me.isLockDown = true;
|
||||||
// 如果操作方向向下
|
// 如果操作方向向下
|
||||||
}else if(me.direction == 'down'){
|
} else if (me.direction == 'down') {
|
||||||
me.isLockUp = true;
|
me.isLockUp = true;
|
||||||
}else{
|
} else {
|
||||||
me.isLockUp = true;
|
me.isLockUp = true;
|
||||||
me.isLockDown = true;
|
me.isLockDown = true;
|
||||||
}
|
}
|
||||||
// 如果指定锁上方
|
// 如果指定鎖上方
|
||||||
}else if(direction == 'up'){
|
} else if (direction == 'up') {
|
||||||
me.isLockUp = true;
|
me.isLockUp = true;
|
||||||
// 如果指定锁下方
|
// 如果指定鎖下方
|
||||||
}else if(direction == 'down'){
|
} else if (direction == 'down') {
|
||||||
me.isLockDown = true;
|
me.isLockDown = true;
|
||||||
// 为了解决DEMO5中tab效果bug，因为滑动到下面，再滑上去点tab，direction=down，所以有bug
|
// 為了解決DEMO5中tab效果bug，因為滑動到下面，再滑上去點tab，direction=down，所以有bug
|
||||||
me.direction = 'up';
|
me.direction = 'up';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 解锁
|
// 解鎖
|
||||||
MyDropLoad.prototype.unlock = function(){
|
MyDropLoad.prototype.unlock = function () {
|
||||||
var me = this;
|
var me = this;
|
||||||
// 简单粗暴解锁
|
// 簡單粗暴解鎖
|
||||||
me.isLockUp = false;
|
me.isLockUp = false;
|
||||||
me.isLockDown = false;
|
me.isLockDown = false;
|
||||||
// 为了解决DEMO5中tab效果bug，因为滑动到下面，再滑上去点tab，direction=down，所以有bug
|
// 為了解決DEMO5中tab效果bug，因為滑動到下面，再滑上去點tab，direction=down，所以有bug
|
||||||
me.direction = 'up';
|
me.direction = 'up';
|
||||||
};
|
};
|
||||||
|
|
||||||
// 无数据
|
// 無數據
|
||||||
MyDropLoad.prototype.noData = function(flag){
|
MyDropLoad.prototype.noData = function (flag) {
|
||||||
var me = this;
|
var me = this;
|
||||||
if(flag === undefined || flag == true){
|
if (flag === undefined || flag == true) {
|
||||||
me.isData = false;
|
me.isData = false;
|
||||||
}else if(flag == false){
|
} else if (flag == false) {
|
||||||
me.isData = true;
|
me.isData = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 重置
|
// 重置
|
||||||
MyDropLoad.prototype.resetload = function(){
|
MyDropLoad.prototype.resetload = function () {
|
||||||
var me = this;
|
var me = this;
|
||||||
if(me.direction == 'down' && me.upInsertDOM){
|
if (me.direction == 'down' && me.upInsertDOM) {
|
||||||
me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
|
me.$domUp.css({ 'height': '0' }).on('webkitTransitionEnd mozTransitionEnd transitionend', function () {
|
||||||
me.loading = false;
|
me.loading = false;
|
||||||
me.upInsertDOM = false;
|
me.upInsertDOM = false;
|
||||||
$(this).remove();
|
$(this).remove();
|
||||||
fnRecoverContentHeight(me);
|
fnRecoverContentHeight(me);
|
||||||
});
|
});
|
||||||
}else if(me.direction == 'up'){
|
} else if (me.direction == 'up') {
|
||||||
me.loading = false;
|
me.loading = false;
|
||||||
// 如果有数据
|
// 如果有數據
|
||||||
if(me.isData){
|
if (me.isData) {
|
||||||
// 加载区修改样式
|
// 加載區修改樣式
|
||||||
me.$domDown.html(me.opts.domDown.domRefresh);
|
me.$domDown.html(me.opts.domDown.domRefresh);
|
||||||
fnRecoverContentHeight(me);
|
fnRecoverContentHeight(me);
|
||||||
fnAutoLoad(me);
|
fnAutoLoad(me);
|
||||||
}else{
|
} else {
|
||||||
// 如果没数据
|
// 如果沒數據
|
||||||
me.$domDown.html(me.opts.domDown.domNoData);
|
me.$domDown.html(me.opts.domDown.domNoData);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// css过渡
|
// css過渡
|
||||||
function fnTransition(dom,num){
|
function fnTransition (dom, num) {
|
||||||
dom.css({
|
dom.css({
|
||||||
'-webkit-transition':'all '+num+'ms',
|
'-webkit-transition': 'all ' + num + 'ms',
|
||||||
'transition':'all '+num+'ms'
|
'transition': 'all ' + num + 'ms'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})(window.Zepto || window.jQuery);
|
})(window.Zepto || window.jQuery);
|
||||||
@@ -6,12 +6,12 @@ let hwPrice = 0
|
|||||||
let selectDays = 0
|
let selectDays = 0
|
||||||
|
|
||||||
let prodIDArr = [];
|
let prodIDArr = [];
|
||||||
let headwearArr = [];//获取头饰
|
let headwearArr = [];//獲取頭飾
|
||||||
let giftNameArr = [];//礼物名称数组
|
let giftNameArr = [];//禮物名稱數組
|
||||||
|
|
||||||
let limitPurchaseSwitch //后台是否开启限购
|
let limitPurchaseSwitch //後臺是否開啟限購
|
||||||
let remainDayArr = [];//用户剩余购买天数数组
|
let remainDayArr = [];//用戶剩余購買天數數組
|
||||||
let userRemainDay;//用户剩余购买天数
|
let userRemainDay;//用戶剩余購買天數
|
||||||
|
|
||||||
let isNeedUpgrade
|
let isNeedUpgrade
|
||||||
|
|
||||||
@@ -22,7 +22,7 @@ const toastMsg = (content = '操作完成', time = 2) => {
|
|||||||
time
|
time
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// 获取头饰请求
|
// 獲取頭飾請求
|
||||||
function headwearFun() {
|
function headwearFun() {
|
||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
@@ -43,7 +43,7 @@ function headwearFun() {
|
|||||||
})
|
})
|
||||||
console.log('prodIDArr', prodIDArr);
|
console.log('prodIDArr', prodIDArr);
|
||||||
headwearArr = res.data;
|
headwearArr = res.data;
|
||||||
// 设置头饰
|
// 設置頭飾
|
||||||
headwearArr.map((item, index) => {
|
headwearArr.map((item, index) => {
|
||||||
giftNameArr[index] = item.giftName
|
giftNameArr[index] = item.giftName
|
||||||
$('.headwear-wrap .headwear-item').eq(index).find('.pic-wrap img').attr("src", headwearArr[index].headwearPic)
|
$('.headwear-wrap .headwear-item').eq(index).find('.pic-wrap img').attr("src", headwearArr[index].headwearPic)
|
||||||
@@ -51,17 +51,17 @@ function headwearFun() {
|
|||||||
console.log('giftNameArr', giftNameArr);
|
console.log('giftNameArr', giftNameArr);
|
||||||
} else if (res.code == 80002) {
|
} else if (res.code == 80002) {
|
||||||
isNeedUpgrade = true
|
isNeedUpgrade = true
|
||||||
return toastMsg('当前版本过低，请前往升级最高版本使用~')
|
return toastMsg('當前版本過低，請前往升級最高版本使用~')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function (res) {
|
error: function (res) {
|
||||||
console.log(res, '报错啦');
|
console.log(res, '報錯啦');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 广告轮播
|
// 廣告輪播
|
||||||
function advertising() {
|
function advertising() {
|
||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
@@ -77,7 +77,7 @@ function advertising() {
|
|||||||
result += `
|
result += `
|
||||||
<li>
|
<li>
|
||||||
<img src="./image/laba.png" alt="">
|
<img src="./image/laba.png" alt="">
|
||||||
<div>恭喜！<span class="nick">${res.nick.length > 4 ? res.nick.slice(0, 4)+'...' : res.nick}</span> 购买${res.prodName}寻找到小精灵获得<span class="diamond-num">${res.giftName}</span></div>
|
<div>恭喜！<span class="nick">${res.nick.length > 4 ? res.nick.slice(0, 4)+'...' : res.nick}</span> 購買${res.prodName}尋找到小精靈獲得<span class="diamond-num">${res.giftName}</span></div>
|
||||||
</li>
|
</li>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
@@ -97,13 +97,13 @@ function advertising() {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function (res) {
|
error: function (res) {
|
||||||
console.log(res, '报错啦');
|
console.log(res, '報錯啦');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取头饰限购信息
|
// 獲取頭飾限購信息
|
||||||
function getLimitInfo() {
|
function getLimitInfo() {
|
||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
@@ -120,7 +120,7 @@ function getLimitInfo() {
|
|||||||
<div class="headwear-info">
|
<div class="headwear-info">
|
||||||
<div class="hw-pic"><img src="${item.headwearPic}" alt=""></div>
|
<div class="hw-pic"><img src="${item.headwearPic}" alt=""></div>
|
||||||
<div class="hw-name">${item.prodName} (1天)</div>
|
<div class="hw-name">${item.prodName} (1天)</div>
|
||||||
<div class="hw-days">还可购<span>${item.remainDay}</span>天</div>
|
<div class="hw-days">還可購<span>${item.remainDay}</span>天</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
@@ -132,7 +132,7 @@ function getLimitInfo() {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function (res) {
|
error: function (res) {
|
||||||
console.log(res, '报错啦');
|
console.log(res, '報錯啦');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -145,9 +145,9 @@ $(function () {
|
|||||||
}
|
}
|
||||||
getInfoFromClient()
|
getInfoFromClient()
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
headwearFun()//获取头饰
|
headwearFun()//獲取頭飾
|
||||||
advertising()//通告栏滚动调用
|
advertising()//通告欄滾動調用
|
||||||
getLimitInfo()//后台是否配置开启限购
|
getLimitInfo()//後臺是否配置開啟限購
|
||||||
}, 50)
|
}, 50)
|
||||||
|
|
||||||
|
|
||||||
@@ -206,10 +206,10 @@ $(function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
$('.buy-btn').on('click', () => {
|
$('.buy-btn').on('click', () => {
|
||||||
if (isNeedUpgrade) return toastMsg('当前版本过低，请前往升级最高版本使用~');
|
if (isNeedUpgrade) return toastMsg('當前版本過低，請前往升級最高版本使用~');
|
||||||
if (!isSelectHw) return toastMsg('请选择头饰');
|
if (!isSelectHw) return toastMsg('請選擇頭飾');
|
||||||
if (!isSelectDay) return toastMsg('请选择购买天数');
|
if (!isSelectDay) return toastMsg('請選擇購買天數');
|
||||||
if (selectDays > userRemainDay) return toastMsg('购买头饰不能超过限购天数');
|
if (selectDays > userRemainDay) return toastMsg('購買頭飾不能超過限購天數');
|
||||||
window.location.href = './main.html'
|
window.location.href = './main.html'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
let browser = checkVersion()
|
let browser = checkVersion()
|
||||||
let urlPrefix = getUrlPrefix();//判断正式环境或者测试环境
|
let urlPrefix = getUrlPrefix();//判斷正式環境或者測試環境
|
||||||
|
|
||||||
const toastMsg = (content = '操作完成', time = 2) => {
|
const toastMsg = (content = '操作完成', time = 2) => {
|
||||||
layer.open({
|
layer.open({
|
||||||
@@ -7,24 +7,24 @@ const toastMsg = (content = '操作完成', time = 2) => {
|
|||||||
skin: 'msg',
|
skin: 'msg',
|
||||||
time
|
time
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let roomId = null;
|
let roomId = null;
|
||||||
let userDiamonds = 0 //用户钻石数量
|
let userDiamonds = 0 //用戶鉆石數量
|
||||||
const MAX_NUM = 9 //后台限购关闭时最大选择数
|
const MAX_NUM = 9 //後臺限購關閉時最大選擇數
|
||||||
let currentNum = 0
|
let currentNum = 0
|
||||||
let time = null;
|
let time = null;
|
||||||
let cardID = [];
|
let cardID = [];
|
||||||
let requestStatus = false;
|
let requestStatus = false;
|
||||||
let prizeRecord = [];//中奖记录
|
let prizeRecord = [];//中獎記錄
|
||||||
var page = 0;// 页数
|
var page = 0;// 頁數
|
||||||
var size = 10;// 每页展示n个
|
var size = 10;// 每頁展示n個
|
||||||
|
|
||||||
let selectDays = window.sessionStorage.getItem('selectDays')
|
let selectDays = window.sessionStorage.getItem('selectDays')
|
||||||
let userSelectInfo = JSON.parse(window.sessionStorage.getItem('userSelectInfo'))
|
let userSelectInfo = JSON.parse(window.sessionStorage.getItem('userSelectInfo'))
|
||||||
let {diamondNum, selectSrc, prodID, limitPurchaseSwitch, giftName} = JSON.parse(window.sessionStorage.getItem('userSelectInfo'))
|
let { diamondNum, selectSrc, prodID, limitPurchaseSwitch, giftName } = JSON.parse(window.sessionStorage.getItem('userSelectInfo'))
|
||||||
|
|
||||||
// 小动物数组
|
// 小動物數組
|
||||||
let animalArr = [
|
let animalArr = [
|
||||||
{
|
{
|
||||||
animalPic: './image/animal/1.png',
|
animalPic: './image/animal/1.png',
|
||||||
@@ -40,7 +40,7 @@ let animalArr = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
animalPic: './image/animal/4.png',
|
animalPic: './image/animal/4.png',
|
||||||
animalName: '小猫'
|
animalName: '小貓'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
animalPic: './image/animal/5.png',
|
animalPic: './image/animal/5.png',
|
||||||
@@ -56,7 +56,7 @@ let animalArr = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
animalPic: './image/animal/8.png',
|
animalPic: './image/animal/8.png',
|
||||||
animalName: '小鸡'
|
animalName: '小雞'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
animalPic: './image/animal/9.png',
|
animalPic: './image/animal/9.png',
|
||||||
@@ -64,7 +64,7 @@ let animalArr = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
animalPic: './image/animal/10.png',
|
animalPic: './image/animal/10.png',
|
||||||
animalName: '小猪'
|
animalName: '小豬'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
@@ -106,7 +106,7 @@ $(function () {
|
|||||||
if (!limitPurchaseSwitch) {
|
if (!limitPurchaseSwitch) {
|
||||||
if (currentNum <= MAX_NUM) {
|
if (currentNum <= MAX_NUM) {
|
||||||
$(this).addClass('active')
|
$(this).addClass('active')
|
||||||
$('.prob').html(`获得${giftName}的概率为${currentNum * 10}%`)
|
$('.prob').html(`獲得${giftName}的概率為${currentNum * 10}%`)
|
||||||
$('.prob').show()
|
$('.prob').show()
|
||||||
$('.desc').hide()
|
$('.desc').hide()
|
||||||
cardID.push(index)
|
cardID.push(index)
|
||||||
@@ -117,7 +117,7 @@ $(function () {
|
|||||||
if (window.sessionStorage.getItem('leftDays') != null) {
|
if (window.sessionStorage.getItem('leftDays') != null) {
|
||||||
if (window.sessionStorage.getItem('leftDays') <= 0) {
|
if (window.sessionStorage.getItem('leftDays') <= 0) {
|
||||||
console.log('leftDays', window.sessionStorage.getItem('leftDays'));
|
console.log('leftDays', window.sessionStorage.getItem('leftDays'));
|
||||||
toastMsg('该头饰已达限购上限')
|
toastMsg('該頭飾已達限購上限')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
sessionStorage.clear()
|
sessionStorage.clear()
|
||||||
history.go(-1)
|
history.go(-1)
|
||||||
@@ -132,13 +132,13 @@ $(function () {
|
|||||||
|
|
||||||
if (currentNum <= userRemainDay) {
|
if (currentNum <= userRemainDay) {
|
||||||
$(this).addClass('active')
|
$(this).addClass('active')
|
||||||
$('.prob').html(`获得${giftName}的概率为${currentNum * 10}%`)
|
$('.prob').html(`獲得${giftName}的概率為${currentNum * 10}%`)
|
||||||
$('.prob').show()
|
$('.prob').show()
|
||||||
$('.desc').hide()
|
$('.desc').hide()
|
||||||
cardID.push(index)
|
cardID.push(index)
|
||||||
} else {
|
} else {
|
||||||
if (userRemainDay < MAX_NUM) {
|
if (userRemainDay < MAX_NUM) {
|
||||||
toastMsg('选择数量不能超过限购天数')
|
toastMsg('選擇數量不能超過限購天數')
|
||||||
}
|
}
|
||||||
currentNum = userRemainDay
|
currentNum = userRemainDay
|
||||||
}
|
}
|
||||||
@@ -147,7 +147,7 @@ $(function () {
|
|||||||
} else {
|
} else {
|
||||||
currentNum--
|
currentNum--
|
||||||
$(this).removeClass('active')
|
$(this).removeClass('active')
|
||||||
$('.prob').html(`获得${giftName}的概率为${currentNum * 10}%`)
|
$('.prob').html(`獲得${giftName}的概率為${currentNum * 10}%`)
|
||||||
const currentIndex = cardID.indexOf(index)
|
const currentIndex = cardID.indexOf(index)
|
||||||
cardID.splice(currentIndex, 1)
|
cardID.splice(currentIndex, 1)
|
||||||
console.log(cardID);
|
console.log(cardID);
|
||||||
@@ -158,12 +158,12 @@ $(function () {
|
|||||||
}
|
}
|
||||||
animation()
|
animation()
|
||||||
|
|
||||||
// 打开介绍弹窗
|
// 打開介紹彈窗
|
||||||
$('.introduction-btn').on('click', function () {
|
$('.introduction-btn').on('click', function () {
|
||||||
$('.shade-mask').show()
|
$('.shade-mask').show()
|
||||||
$('body').css('overflow', 'hidden')
|
$('body').css('overflow', 'hidden')
|
||||||
})
|
})
|
||||||
// 关闭弹窗
|
// 關閉彈窗
|
||||||
$('.shade-mask').on('click', () => {
|
$('.shade-mask').on('click', () => {
|
||||||
$('.shade-mask').hide()
|
$('.shade-mask').hide()
|
||||||
$('body').css('overflow', 'auto')
|
$('body').css('overflow', 'auto')
|
||||||
@@ -186,15 +186,15 @@ $(function () {
|
|||||||
$('.not-enough-content').click((e) => {
|
$('.not-enough-content').click((e) => {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
})
|
})
|
||||||
// 关闭青少年 未成年提示弹窗
|
// 關閉青少年 未成年提示彈窗
|
||||||
$('.know').on('click', () => {
|
$('.know').on('click', () => {
|
||||||
$('.shade-mask-teen').hide()
|
$('.shade-mask-teen').hide()
|
||||||
})
|
})
|
||||||
// 关闭认证弹窗
|
// 關閉認證彈窗
|
||||||
$('.button-cancel, .button-agree').on('click', function () {
|
$('.button-cancel, .button-agree').on('click', function () {
|
||||||
$(this).parents('.identity-mask').hide();
|
$(this).parents('.identity-mask').hide();
|
||||||
});
|
});
|
||||||
// 记录
|
// 記錄
|
||||||
$('.record-btn').click(() => {
|
$('.record-btn').click(() => {
|
||||||
page = 0;
|
page = 0;
|
||||||
$('.dropload-refresh').css({ display: 'block' })
|
$('.dropload-refresh').css({ display: 'block' })
|
||||||
@@ -205,17 +205,17 @@ $(function () {
|
|||||||
$('.table-shade').show()
|
$('.table-shade').show()
|
||||||
})
|
})
|
||||||
|
|
||||||
// 跳转充值页面
|
// 跳轉充值頁面
|
||||||
$('.go-to-recharge, .recharge-icon').click(() => {
|
$('.go-to-recharge, .recharge-icon').click(() => {
|
||||||
if(browser.app){
|
if (browser.app) {
|
||||||
if(browser.android){
|
if (browser.android) {
|
||||||
// window.androidJsObj.openChargePage()
|
// window.androidJsObj.openChargePage()
|
||||||
tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE')
|
tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE')
|
||||||
}else if(browser.ios){
|
} else if (browser.ios) {
|
||||||
window.webkit.messageHandlers.openChargePage.postMessage(null)
|
window.webkit.messageHandlers.openChargePage.postMessage(null)
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
toastMsg('请在app内打开')
|
toastMsg('請在app內打開')
|
||||||
}
|
}
|
||||||
$('.not-enough').hide()
|
$('.not-enough').hide()
|
||||||
})
|
})
|
||||||
@@ -224,9 +224,9 @@ $(function () {
|
|||||||
|
|
||||||
$('.explore').on('click', function () {
|
$('.explore').on('click', function () {
|
||||||
if (currentNum == 0) {
|
if (currentNum == 0) {
|
||||||
toastMsg('请选择小动物~')
|
toastMsg('請選擇小動物~')
|
||||||
} else if (selectDays != currentNum && !$(this).hasClass('again')) {
|
} else if (selectDays != currentNum && !$(this).hasClass('again')) {
|
||||||
let headwearName = diamondNum == 10 ? '初级头饰' : ( diamondNum == 100 ? '中级头饰' : '高级头饰')
|
let headwearName = diamondNum == 10 ? '初級頭飾' : (diamondNum == 100 ? '中級頭飾' : '高級頭飾')
|
||||||
$('.planet-num span').html(currentNum)
|
$('.planet-num span').html(currentNum)
|
||||||
$('.headwear img').attr('src', selectSrc)
|
$('.headwear img').attr('src', selectSrc)
|
||||||
$('.headwear-day').html(`${headwearName}${currentNum}天`)
|
$('.headwear-day').html(`${headwearName}${currentNum}天`)
|
||||||
@@ -248,7 +248,7 @@ $(function () {
|
|||||||
window.location.reload()
|
window.location.reload()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// 关闭支付弹窗
|
// 關閉支付彈窗
|
||||||
$('.shade-mask-recharge').click(function () {
|
$('.shade-mask-recharge').click(function () {
|
||||||
$(this).hide()
|
$(this).hide()
|
||||||
})
|
})
|
||||||
@@ -262,7 +262,7 @@ $(function () {
|
|||||||
history.go(-1)
|
history.go(-1)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 抽奖支付按钮点击事件
|
// 抽獎支付按鈕點擊事件
|
||||||
$('.recharge-btn').click(function () {
|
$('.recharge-btn').click(function () {
|
||||||
let leftDays;
|
let leftDays;
|
||||||
if (window.sessionStorage.getItem('leftDays') != null) {
|
if (window.sessionStorage.getItem('leftDays') != null) {
|
||||||
@@ -282,8 +282,8 @@ $(function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
//中奖记录请求
|
//中獎記錄請求
|
||||||
function prizeRecordFun() {
|
function prizeRecordFun () {
|
||||||
var dropload = $('.table-wrap').dropload({
|
var dropload = $('.table-wrap').dropload({
|
||||||
scrollArea: $('.table-wrap'),
|
scrollArea: $('.table-wrap'),
|
||||||
loadDownFn: function (me) {
|
loadDownFn: function (me) {
|
||||||
@@ -304,17 +304,17 @@ function prizeRecordFun() {
|
|||||||
var arrLen = res.data.records.length;
|
var arrLen = res.data.records.length;
|
||||||
if (arrLen < size) {
|
if (arrLen < size) {
|
||||||
page = 0;
|
page = 0;
|
||||||
me.lock(); // 锁定
|
me.lock(); // 鎖定
|
||||||
me.noData(); // 无数据
|
me.noData(); // 無數據
|
||||||
}
|
}
|
||||||
if (arrLen > 0) {
|
if (arrLen > 0) {
|
||||||
result = prizeRecordDom();
|
result = prizeRecordDom();
|
||||||
$('.table').append(result)// 插入数据到页面，放到最后面
|
$('.table').append(result)// 插入數據到頁面，放到最後面
|
||||||
me.resetload();// 每次数据加载完，必须重置
|
me.resetload();// 每次數據加載完，必須重置
|
||||||
} else {// 如果没有数据
|
} else {// 如果沒有數據
|
||||||
me.resetload();
|
me.resetload();
|
||||||
me.lock(); // 锁定
|
me.lock(); // 鎖定
|
||||||
me.noData(); // 无数据
|
me.noData(); // 無數據
|
||||||
console.log($('.rule_record .conent .table tr').length)
|
console.log($('.rule_record .conent .table tr').length)
|
||||||
if (page == 0 && $('.rule_record .conent .table tr').length == 1) {
|
if (page == 0 && $('.rule_record .conent .table tr').length == 1) {
|
||||||
$('.dropload-noData').remove();
|
$('.dropload-noData').remove();
|
||||||
@@ -327,10 +327,10 @@ function prizeRecordFun() {
|
|||||||
error: function (res) {
|
error: function (res) {
|
||||||
$('.dropload-down').hide()
|
$('.dropload-down').hide()
|
||||||
requestStatus = false;
|
requestStatus = false;
|
||||||
console.log(res, '报错啦');
|
console.log(res, '報錯啦');
|
||||||
me.lock(); // 锁定
|
me.lock(); // 鎖定
|
||||||
me.noData(); // 无数据
|
me.noData(); // 無數據
|
||||||
me.resetload();// 即使加载出错，也得重置
|
me.resetload();// 即使加載出錯，也得重置
|
||||||
$('.table').css({ display: 'none' })
|
$('.table').css({ display: 'none' })
|
||||||
$('.noData').css({ display: 'block' })
|
$('.noData').css({ display: 'block' })
|
||||||
}
|
}
|
||||||
@@ -341,8 +341,8 @@ function prizeRecordFun() {
|
|||||||
console.log('dropload-----', dropload);
|
console.log('dropload-----', dropload);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 中奖记录渲染
|
// 中獎記錄渲染
|
||||||
function prizeRecordDom() {
|
function prizeRecordDom () {
|
||||||
let result = ''
|
let result = ''
|
||||||
prizeRecord.forEach((res, i) => {
|
prizeRecord.forEach((res, i) => {
|
||||||
// console.log(res);
|
// console.log(res);
|
||||||
@@ -358,7 +358,7 @@ function prizeRecordDom() {
|
|||||||
return result
|
return result
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取用户信息
|
// 獲取用戶信息
|
||||||
const getUserInfo = () => {
|
const getUserInfo = () => {
|
||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'POST',
|
type: 'POST',
|
||||||
@@ -370,12 +370,12 @@ const getUserInfo = () => {
|
|||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
userDiamonds = res.data.diamonds
|
userDiamonds = res.data.diamonds
|
||||||
$('.mine .avatar img').attr('src', res.data.avatar)
|
$('.mine .avatar img').attr('src', res.data.avatar)
|
||||||
$('.mine .nick').html(res.data.nick.length > 8 ? res.data.nick.slice(0, 8)+'...' : res.data.nick)
|
$('.mine .nick').html(res.data.nick.length > 8 ? res.data.nick.slice(0, 8) + '...' : res.data.nick)
|
||||||
$('.mine .diamond-num span').html(res.data.diamonds)
|
$('.mine .diamond-num span').html(res.data.diamonds)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function (res) {
|
error: function (res) {
|
||||||
console.log(res, '报错啦');
|
console.log(res, '報錯啦');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -400,18 +400,18 @@ const draw = () => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$('.svga').hide()
|
$('.svga').hide()
|
||||||
result = res.data
|
result = res.data
|
||||||
console.log('结果', res.data);
|
console.log('結果', res.data);
|
||||||
renderResult()
|
renderResult()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function (res) {
|
error: function (res) {
|
||||||
console.log(res, '报错啦');
|
console.log(res, '報錯啦');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 播放过场动画
|
// 播放過場動畫
|
||||||
const playAnimate = () => {
|
const playAnimate = () => {
|
||||||
$('.explore').addClass('again')
|
$('.explore').addClass('again')
|
||||||
$('.shade-mask-recharge').hide()
|
$('.shade-mask-recharge').hide()
|
||||||
@@ -437,29 +437,29 @@ const renderResult = () => {
|
|||||||
$('.prob').hide()
|
$('.prob').hide()
|
||||||
$('.desc').addClass('success')
|
$('.desc').addClass('success')
|
||||||
$('.desc').html(`
|
$('.desc').html(`
|
||||||
成功找到小精灵！</br>
|
成功找到小精靈！</br>
|
||||||
<span>小精灵将送你价值${result.receiveGiftPrice}钻石的</br>${result.receiveGiftName}</span>
|
<span>小精靈將送你價值${result.receiveGiftPrice}鉆石的</br>${result.receiveGiftName}</span>
|
||||||
`).show()
|
`).show()
|
||||||
} else {
|
} else {
|
||||||
$('.result-content').addClass('fail')
|
$('.result-content').addClass('fail')
|
||||||
$('.prob').hide()
|
$('.prob').hide()
|
||||||
$('.desc').addClass('fail')
|
$('.desc').addClass('fail')
|
||||||
$('.desc').html('很遗憾未能找到小精灵</br>下次再接再厉哦！').show()
|
$('.desc').html('很遺憾未能找到小精靈</br>下次再接再厲哦！').show()
|
||||||
$('.select-area div').eq(index).find('.default').hide().siblings('.fail').show()
|
$('.select-area div').eq(index).find('.default').hide().siblings('.fail').show()
|
||||||
}
|
}
|
||||||
$('.result-shade').show()
|
$('.result-shade').show()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//返回页面 重新请求接口
|
//返回頁面 重新請求接口
|
||||||
var hiddenProperty = 'hidden' in document ? 'hidden' :
|
var hiddenProperty = 'hidden' in document ? 'hidden' :
|
||||||
'webkitHidden' in document ? 'webkitHidden' :
|
'webkitHidden' in document ? 'webkitHidden' :
|
||||||
'mozHidden' in document ? 'mozHidden' : null;
|
'mozHidden' in document ? 'mozHidden' : null;
|
||||||
|
|
||||||
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
|
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
|
||||||
var onVisibilityChange = function () {
|
var onVisibilityChange = function () {
|
||||||
if(!document[hiddenProperty]){
|
if (!document[hiddenProperty]) {
|
||||||
getUserInfo()
|
getUserInfo()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
|
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
|
||||||
Reference in New Issue
Block a user