完善幸运数字静态首页，我的历史静态页面
This commit is contained in:
chenruiye
@@ -17,6 +17,7 @@ body {
|
||||
color: #FFFFFF;
|
||||
font-size: 0.5066666667rem;
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
}
|
||||
.back img {
|
||||
width: 0.5866666667rem;
|
||||
@@ -107,6 +108,24 @@ body {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.6933333333rem;
|
||||
}
|
||||
.top_bg .rules {
|
||||
background-image: url("../images/rules.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #321000;
|
||||
text-align: center;
|
||||
width: 1.7866666667rem;
|
||||
height: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 0.1866666667rem;
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.describe_box {
|
||||
background-image: url("../images/shuoming_kuang.png");
|
||||
@@ -127,7 +146,7 @@ body {
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
padding: 0.6666666667rem 0.9333333333rem;
|
||||
margin-top: 0.4266666667rem;
|
||||
margin: 0.4266666667rem 0.2rem 0;
|
||||
}
|
||||
.reward_wrap .title {
|
||||
font-family: PingFang SC;
|
||||
@@ -149,3 +168,127 @@ body {
|
||||
margin-top: 0.3466666667rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.fortunate_number {
|
||||
background-image: url("../images/xysz_bg1.png");
|
||||
background-size: 100% 100%;
|
||||
padding-top: 1.0666666667rem;
|
||||
margin: 0.4533333333rem 0.1866666667rem 0;
|
||||
position: relative;
|
||||
}
|
||||
.fortunate_number .tip_chang {
|
||||
background-image: url("../images/tip_chang.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.fortunate_number .tip_chang .tip_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.4533333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
padding: 0.2666666667rem;
|
||||
text-align: center;
|
||||
}
|
||||
.fortunate_number .today_number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
margin-top: 0.6666666667rem;
|
||||
text-align: center;
|
||||
}
|
||||
.fortunate_number .num_show {
|
||||
background-image: url("../images/num_jiqi.png");
|
||||
background-size: 100% 100%;
|
||||
width: 5.2266666667rem;
|
||||
height: 2.88rem;
|
||||
margin: 0.32rem auto 0;
|
||||
position: relative;
|
||||
}
|
||||
.fortunate_number .num_show .left_txt,
|
||||
.fortunate_number .num_show .right_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 1.7333333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
background: linear-gradient(0deg, #FFED26 100%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: 0.04rem #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.fortunate_number .num_show .left_txt {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 20%;
|
||||
}
|
||||
.fortunate_number .num_show .right_txt {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20%;
|
||||
}
|
||||
.fortunate_number .history_btn {
|
||||
background-image: url("../images/rules.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #321000;
|
||||
text-align: center;
|
||||
width: 1.7866666667rem;
|
||||
height: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 0.0533333333rem;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
right: 0.1866666667rem;
|
||||
}
|
||||
|
||||
.fortunate_bottom {
|
||||
background-image: url("../images/xysz_bg2.png");
|
||||
background-size: 100% 100%;
|
||||
margin: 0 0.1866666667rem;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.9333333333rem;
|
||||
}
|
||||
.fortunate_bottom .participate_btn {
|
||||
background-image: url("../images/participate_btn.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.5333333333rem;
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5333333333rem 0;
|
||||
margin: 0 1.8666666667rem;
|
||||
}
|
||||
.fortunate_bottom .participate_btn img {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.6933333333rem;
|
||||
margin: 0 0.1066666667rem;
|
||||
}
|
||||
.fortunate_bottom .my_number {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 0.1866666667rem;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
padding: 0.24rem 0.3466666667rem;
|
||||
margin: 0.2133333333rem 0.5333333333rem;
|
||||
}
|
||||
.fortunate_bottom .my_history {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3466666667rem;
|
||||
color: #FFF783;
|
||||
text-decoration-line: underline;
|
||||
margin-top: 0.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -24,7 +24,7 @@ body {
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(38);
|
||||
font-weight: bold;
|
||||
|
||||
z-index: 99;
|
||||
img {
|
||||
width: px2rem(44);
|
||||
height: px2rem(44);
|
||||
@@ -40,7 +40,6 @@ body {
|
||||
height: px2rem(1073);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.countdown_box {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
@@ -112,10 +111,11 @@ body {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
|
||||
.num {
|
||||
font-size: px2rem(56);
|
||||
margin: 0 px2rem(8);
|
||||
font-weight: 600;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -124,45 +124,208 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
.rules {
|
||||
background-image: url('../images/rules.png');
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
color: #321000;
|
||||
text-align: center;
|
||||
width: px2rem(134);
|
||||
height: px2rem(60);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: px2rem(14);
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
.describe_box{
|
||||
|
||||
.describe_box {
|
||||
background-image: url('../images/shuoming_kuang.png');
|
||||
background-size: 100% 100%;
|
||||
.txt{
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
padding: px2rem(56) px2rem(70);
|
||||
text-align: center;
|
||||
|
||||
.txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
padding: px2rem(56) px2rem(70);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.reward_wrap{
|
||||
|
||||
.reward_wrap {
|
||||
background-image: url('../images/reward_kuang.png');
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
padding: px2rem(50) px2rem(70);
|
||||
margin-top: px2rem(32);
|
||||
.title{
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(36);
|
||||
color: #FFF783;
|
||||
margin: px2rem(32) px2rem(15) 0;
|
||||
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(36);
|
||||
color: #FFF783;
|
||||
}
|
||||
.txt{
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
margin-top: px2rem(30);
|
||||
|
||||
.txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
margin-top: px2rem(30);
|
||||
|
||||
}
|
||||
img{
|
||||
|
||||
img {
|
||||
width: px2rem(449);
|
||||
height: px2rem(194);
|
||||
margin-top: px2rem(26);
|
||||
margin-bottom: px2rem(30);
|
||||
}
|
||||
}
|
||||
|
||||
.fortunate_number {
|
||||
background-image: url('../images/xysz_bg1.png');
|
||||
background-size: 100% 100%;
|
||||
padding-top: px2rem(80);
|
||||
margin: px2rem(34) px2rem(14) 0;
|
||||
position: relative;
|
||||
.tip_chang {
|
||||
background-image: url('../images/tip_chang.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.tip_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(34);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
padding: px2rem(20);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.today_number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
margin-top: px2rem(50);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.num_show {
|
||||
background-image: url('../images/num_jiqi.png');
|
||||
background-size: 100% 100%;
|
||||
width: px2rem(392);
|
||||
height: px2rem(216);
|
||||
margin: px2rem(24) auto 0;
|
||||
position: relative;
|
||||
|
||||
.left_txt,
|
||||
.right_txt {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(130);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
// text-stroke: px2rem(3) #3A1600;
|
||||
background: linear-gradient(0deg, #FFED26 100%, #FFFFFF 100%);
|
||||
-webkit-text-stroke: px2rem(3) #3A1600;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.left_txt {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
.right_txt {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.history_btn {
|
||||
background-image: url('../images/rules.png');
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: px2rem(28);
|
||||
color: #321000;
|
||||
text-align: center;
|
||||
width: px2rem(134);
|
||||
height: px2rem(60);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: px2rem(4);
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
right: px2rem(14);
|
||||
}
|
||||
}
|
||||
|
||||
.fortunate_bottom {
|
||||
background-image: url('../images/xysz_bg2.png');
|
||||
background-size: 100% 100%;
|
||||
margin: 0 px2rem(14);
|
||||
padding-top: px2rem(30);
|
||||
padding-bottom: px2rem(70);
|
||||
|
||||
.participate_btn {
|
||||
background-image: url('../images/participate_btn.png');
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(40);
|
||||
color: #5D2600;
|
||||
// line-height: px2rem(36);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: px2rem(40) 0;
|
||||
margin: 0 px2rem(140);
|
||||
|
||||
img {
|
||||
width: px2rem(52);
|
||||
height: px2rem(52);
|
||||
margin: 0 px2rem(8);
|
||||
}
|
||||
}
|
||||
|
||||
.my_number {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: px2rem(14);
|
||||
// opacity: 0.8;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
padding: px2rem(18) px2rem(26);
|
||||
margin: px2rem(16) px2rem(40);
|
||||
}
|
||||
|
||||
.my_history {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(26);
|
||||
color: #FFF783;
|
||||
text-decoration-line: underline;
|
||||
margin-top: px2rem(30);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
115
view/molistar/activity/luckyNumbers/css/myHistory.css
Normal file
115
view/molistar/activity/luckyNumbers/css/myHistory.css
Normal file
@@ -0,0 +1,115 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 0.56rem;
|
||||
line-height: 0.56rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: 1.4666666667rem;
|
||||
padding-bottom: 0.2933333333rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.5066666667rem;
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
background: #160900;
|
||||
}
|
||||
.back img {
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
}
|
||||
.back p {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4533333333rem;
|
||||
color: #FFF783;
|
||||
}
|
||||
|
||||
.content_list {
|
||||
margin: 2.6666666667rem 0.1866666667rem 0;
|
||||
}
|
||||
.content_list .content_box {
|
||||
background: linear-gradient(0deg, #170D03, #5E2300);
|
||||
border-radius: 0.4rem;
|
||||
border: 0.04rem solid #FFE96E;
|
||||
padding: 0.5333333333rem 0.3466666667rem 0.2666666667rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.content_list .content_box .felx_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content_list .content_box .felx_box .left .time {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.48rem;
|
||||
}
|
||||
.content_list .content_box .felx_box .left .fortunate_number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF784;
|
||||
margin-top: 0.2666666667rem;
|
||||
}
|
||||
.content_list .content_box .felx_box .left .fortunate_number .number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.6666666667rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.content_list .content_box .felx_box .Receive_btn {
|
||||
background-image: url("../images/participate_btn.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.32rem 0.4266666667rem;
|
||||
}
|
||||
.content_list .content_box .felx_box .view_results {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
}
|
||||
.content_list .content_box .felx_box .view_results img {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
.content_list .content_box .my_number {
|
||||
background: #000000;
|
||||
border-radius: 0.1866666667rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FFF783;
|
||||
line-height: 0.56rem;
|
||||
margin-top: 0.3733333333rem;
|
||||
padding: 0.24rem 0.2933333333rem;
|
||||
}
|
||||
|
||||
#myVideo {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 110%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background: #000000;
|
||||
}
|
||||
136
view/molistar/activity/luckyNumbers/css/myHistory.scss
Normal file
136
view/molistar/activity/luckyNumbers/css/myHistory.scss
Normal file
@@ -0,0 +1,136 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: px2rem(42);
|
||||
line-height: px2rem(42);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: px2rem(110);
|
||||
padding-bottom: px2rem(22);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(38);
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
background: #160900;
|
||||
|
||||
img {
|
||||
width: px2rem(42);
|
||||
height: px2rem(42);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(34);
|
||||
color: #FFF783;
|
||||
}
|
||||
}
|
||||
|
||||
.content_list {
|
||||
margin: px2rem(200) px2rem(14) 0;
|
||||
|
||||
.content_box {
|
||||
background: linear-gradient(0deg, #170D03, #5E2300);
|
||||
border-radius: px2rem(30);
|
||||
border: px2rem(3) solid #FFE96E;
|
||||
padding: px2rem(40) px2rem(26) px2rem(20);
|
||||
margin-top: px2rem(30);
|
||||
|
||||
.felx_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
.time {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(36);
|
||||
}
|
||||
|
||||
.fortunate_number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF784;
|
||||
margin-top: px2rem(20);
|
||||
|
||||
.number {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(50);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.Receive_btn {
|
||||
background-image: url("../images/participate_btn.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(28);
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: px2rem(24) px2rem(32);
|
||||
}
|
||||
|
||||
.view_results {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
|
||||
img {
|
||||
width: px2rem(30);
|
||||
height: px2rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my_number {
|
||||
background: #000000;
|
||||
border-radius: px2rem(14);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: px2rem(28);
|
||||
color: #FFF783;
|
||||
line-height: px2rem(42);
|
||||
margin-top: px2rem(28);
|
||||
padding: px2rem(18) px2rem(22);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#myVideo {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 110%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background: #000000;
|
||||
}
|
||||
60
view/molistar/activity/luckyNumbers/css/resultsView.css
Normal file
60
view/molistar/activity/luckyNumbers/css/resultsView.css
Normal file
@@ -0,0 +1,60 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 0.56rem;
|
||||
line-height: 0.56rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: 1.4666666667rem;
|
||||
padding-bottom: 0.2933333333rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.5066666667rem;
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
}
|
||||
.back img {
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
position: absolute;
|
||||
left: 0.24rem;
|
||||
}
|
||||
.back p {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.4533333333rem;
|
||||
color: #FFF783;
|
||||
}
|
||||
|
||||
.top_img {
|
||||
position: relative;
|
||||
}
|
||||
.top_img img {
|
||||
width: 100%;
|
||||
}
|
||||
.top_img .conis_bg {
|
||||
background: url("../images/conis_bg.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.7466666667rem;
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.56rem 1.8666666667rem;
|
||||
margin: 0 1.3333333333rem;
|
||||
position: absolute;
|
||||
bottom: -3%;
|
||||
}
|
||||
.top_img .conis_bg img {
|
||||
width: 0.6933333333rem;
|
||||
height: 0.6933333333rem;
|
||||
margin-left: 0.1333333333rem;
|
||||
}
|
||||
71
view/molistar/activity/luckyNumbers/css/resultsView.scss
Normal file
71
view/molistar/activity/luckyNumbers/css/resultsView.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
background: #160900;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: px2rem(42);
|
||||
line-height: px2rem(42);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: px2rem(110);
|
||||
padding-bottom: px2rem(22);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(38);
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
// background: #160900;
|
||||
|
||||
img {
|
||||
width: px2rem(42);
|
||||
height: px2rem(42);
|
||||
position: absolute;
|
||||
left: px2rem(18);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(34);
|
||||
color: #FFF783;
|
||||
}
|
||||
}
|
||||
|
||||
.top_img {
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.conis_bg {
|
||||
background: url("../images/conis_bg.png");
|
||||
background-size: 100% 100%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(56);
|
||||
color: #5D2600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: px2rem(42) px2rem(140);
|
||||
margin: 0 px2rem(100);
|
||||
position: absolute;
|
||||
bottom: -3%;
|
||||
img {
|
||||
width: px2rem(52);
|
||||
height: px2rem(52);
|
||||
margin-left: px2rem(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
view/molistar/activity/luckyNumbers/images/jinbibx.png
Normal file
BIN
view/molistar/activity/luckyNumbers/images/jinbibx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
BIN
view/molistar/activity/luckyNumbers/images/num_jiqi.png
Normal file
BIN
view/molistar/activity/luckyNumbers/images/num_jiqi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
view/molistar/activity/luckyNumbers/images/participate_btn.png
Normal file
BIN
view/molistar/activity/luckyNumbers/images/participate_btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
view/molistar/activity/luckyNumbers/images/results_right.png
Normal file
BIN
view/molistar/activity/luckyNumbers/images/results_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1002 B |
BIN
view/molistar/activity/luckyNumbers/images/rules.png
Normal file
BIN
view/molistar/activity/luckyNumbers/images/rules.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
view/molistar/activity/luckyNumbers/images/xysz_bg1.png
Normal file
BIN
view/molistar/activity/luckyNumbers/images/xysz_bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
BIN
view/molistar/activity/luckyNumbers/images/xysz_bg2.png
Normal file
BIN
view/molistar/activity/luckyNumbers/images/xysz_bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -37,24 +37,52 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip_chang">
|
||||
<img src="./images/tip_chang.png" alt="">
|
||||
<img src="./images/tip_chang.png" alt="" />
|
||||
<div class="tip_txt">Number of participants today:1,000</div>
|
||||
</div>
|
||||
<div class="conis_bg">
|
||||
<img src="./images/conis_bg.png" alt="">
|
||||
<img src="./images/conis_bg.png" alt="" />
|
||||
<div class="conis_txt">
|
||||
Share <span class="num">19999</span>
|
||||
<img src="./images/coins.png" alt="">
|
||||
<img src="./images/coins.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rules">rules</div>
|
||||
</div>
|
||||
<div class="describe_box">
|
||||
<p class="txt">Enter a number between 01-99 and if it matches a Molistar number, you can share the coin pool!</p>
|
||||
<p class="txt">
|
||||
Enter a number between 01-99 and if it matches a Molistar number, you
|
||||
can share the coin pool!
|
||||
</p>
|
||||
</div>
|
||||
<div class="reward_wrap">
|
||||
<div class="title">Rewards</div>
|
||||
<div class="txt">Participate to share Coins and get Fortunate Medals.</div>
|
||||
<img src="./images/reward_content.png" alt="">
|
||||
<div class="txt">
|
||||
Participate to share Coins and get Fortunate Medals.
|
||||
</div>
|
||||
<img src="./images/reward_content.png" alt="" />
|
||||
</div>
|
||||
<div class="fortunate_number">
|
||||
<div class="tip_chang">
|
||||
<div class="tip_txt">Deadline for participation 06:09:00</div>
|
||||
</div>
|
||||
<div class="today_number">Today Fortunate Number</div>
|
||||
<div class="num_show">
|
||||
<div class="left_txt">*</div>
|
||||
<div class="right_txt">*</div>
|
||||
</div>
|
||||
<div class="history_btn">History</div>
|
||||
</div>
|
||||
<div class="fortunate_bottom">
|
||||
<div class="participate_btn">
|
||||
<span class="num">1000</span>
|
||||
<img src="./images/coins.png" alt="" />
|
||||
<span class="txt">Participate</span>
|
||||
</div>
|
||||
<div class="my_number">
|
||||
My Participate Number: 30、54、36、21、30、54、36、21
|
||||
</div>
|
||||
<div class="my_history">My history</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -143,3 +143,7 @@ function getData() {
|
||||
},
|
||||
})
|
||||
}
|
||||
$('.my_history').click(function () {
|
||||
window.location.href = `./myHistory.html`
|
||||
return
|
||||
})
|
||||
|
||||
67
view/molistar/activity/luckyNumbers/js/myHistory.js
Normal file
67
view/molistar/activity/luckyNumbers/js/myHistory.js
Normal file
@@ -0,0 +1,67 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
// 封裝layer消息提醒框
|
||||
let layerIndex
|
||||
var langReplace;
|
||||
var localLang;
|
||||
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
// 初始化函數
|
||||
$(function () {
|
||||
getInfoFromClient();
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
setTimeout(function () {
|
||||
// 頁面全屏
|
||||
if (browser.app) {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.initShowNav(false)
|
||||
} else {
|
||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||
}
|
||||
};
|
||||
// 頂部返回事件
|
||||
$('.back img').click(() => {
|
||||
window.history.back();
|
||||
})
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
langReplace = window.lang.replace;
|
||||
localLang = window.lang;
|
||||
translateFun();
|
||||
|
||||
}, 100)
|
||||
|
||||
})
|
||||
$('.Receive_btn').click(function () {
|
||||
$('#myVideo').show();
|
||||
$('#myVideo')[0].play()
|
||||
$('#myVideo').on('ended', function () {
|
||||
window.location.href = './resultsView.html'
|
||||
return
|
||||
})
|
||||
})
|
||||
$('.view_results').click(function () {
|
||||
window.location.href = './resultsView.html'
|
||||
return
|
||||
})
|
||||
55
view/molistar/activity/luckyNumbers/js/resultsView.js
Normal file
55
view/molistar/activity/luckyNumbers/js/resultsView.js
Normal file
@@ -0,0 +1,55 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
// 封裝layer消息提醒框
|
||||
let layerIndex
|
||||
var langReplace;
|
||||
var localLang;
|
||||
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
// 初始化函數
|
||||
$(function () {
|
||||
getInfoFromClient();
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
setTimeout(function () {
|
||||
// 頁面全屏
|
||||
if (browser.app) {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.initShowNav(false)
|
||||
} else {
|
||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||
}
|
||||
};
|
||||
// 頂部返回事件
|
||||
$('.back img').click(() => {
|
||||
window.history.back();
|
||||
})
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
langReplace = window.lang.replace;
|
||||
localLang = window.lang;
|
||||
translateFun();
|
||||
|
||||
}, 100)
|
||||
|
||||
})
|
||||
BIN
view/molistar/activity/luckyNumbers/mp4/Receive.mp4
Normal file
BIN
view/molistar/activity/luckyNumbers/mp4/Receive.mp4
Normal file
Binary file not shown.
71
view/molistar/activity/luckyNumbers/myHistory.html
Normal file
71
view/molistar/activity/luckyNumbers/myHistory.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css" />
|
||||
<link rel="stylesheet" href="css/myHistory.css?v=1.1" />
|
||||
<link rel="stylesheet" href="../../common/css/animate.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 頂部返回 -->
|
||||
<div class="back">
|
||||
<img src="./images/travel/yellow_back.png" alt="" />
|
||||
<p class="page_title">My history</p>
|
||||
</div>
|
||||
<div class="content_list">
|
||||
<div class="content_box">
|
||||
<div class="felx_box">
|
||||
<div class="left">
|
||||
<div class="time">2025-04-30 21:00</div>
|
||||
<div class="fortunate_number">
|
||||
Fortunate Number: <span class="number">99</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" Receive_btn">Receive Coins</div>
|
||||
</div>
|
||||
<div class="my_number">My Participate Number: 54、36、21、30、54、36、21</div>
|
||||
</div>
|
||||
|
||||
<div class="content_box">
|
||||
<div class="felx_box">
|
||||
<div class="left">
|
||||
<div class="time">2025-04-30 21:00</div>
|
||||
<div class="fortunate_number">
|
||||
Fortunate Number: <span class="number">99</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view_results">View Results <img src="./images/results_right.png" alt=""></div>
|
||||
</div>
|
||||
<div class="my_number">My Participate Number: 54、36、21、30、54、36、21</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<video id="myVideo" src="./mp4/Receive.mp4" controls style="display:none;">
|
||||
</video>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/route-constant.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./local/en.js"></script>
|
||||
<script src="./local/zh.js"></script>
|
||||
<script src="./local/ar.js"></script>
|
||||
<script src="./local/tr.js"></script>
|
||||
<script src="../../common/local/langHandler.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./js/myHistory.js?v=1.0"></script>
|
||||
47
view/molistar/activity/luckyNumbers/resultsView.html
Normal file
47
view/molistar/activity/luckyNumbers/resultsView.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css" />
|
||||
<link rel="stylesheet" href="css/resultsView.css?v=1.1" />
|
||||
<link rel="stylesheet" href="../../common/css/animate.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 頂部返回 -->
|
||||
<div class="back">
|
||||
<img src="./images/travel/yellow_back.png" alt="" />
|
||||
<p class="page_title">2025-04-30 Fortunate</p>
|
||||
</div>
|
||||
|
||||
<div class="top_img">
|
||||
<img src="./images/jinbibx.png" alt="">
|
||||
<div class="conis_bg">
|
||||
124,999
|
||||
<img src="./images/coins.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/route-constant.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./local/en.js"></script>
|
||||
<script src="./local/zh.js"></script>
|
||||
<script src="./local/ar.js"></script>
|
||||
<script src="./local/tr.js"></script>
|
||||
<script src="../../common/local/langHandler.js"></script>
|
||||
<script src="../../common/js/svga.min.js"></script>
|
||||
<script src="./js/resultsView.js?v=1.0"></script>
|
||||
Reference in New Issue
Block a user