寻宝活动静态页面

This commit is contained in:
chenruiye
2025-05-21 18:26:26 +08:00
parent 1195118023
commit fb3d9fd7f4
18 changed files with 916 additions and 492 deletions

View File

@@ -1,3 +1,4 @@
@charset "UTF-8";
html,
body {
width: 100%;
@@ -60,7 +61,7 @@ body {
background-size: 100% 100%;
position: absolute;
right: 0;
top: 6.6666666667rem;
top: 7.8666666667rem;
padding: 0 0.0933333333rem 0 0.4rem;
}
.header .Record {
@@ -75,7 +76,7 @@ body {
background-size: 100% 100%;
position: absolute;
right: 0;
top: 8rem;
top: 8.9333333333rem;
padding: 0 0.0933333333rem 0 0.4rem;
}
.header .bx_img {
@@ -83,10 +84,342 @@ body {
height: 8rem;
padding-top: 5.7333333333rem;
}
.header .danmu {
width: 10rem;
height: 2.6666666667rem;
overflow: hidden;
box-sizing: border-box;
direction: ltr;
position: absolute;
top: 6rem;
}
.header .danmu #my_container {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.header .danmu #my_container .my_container_in {
line-height: 0.5866666667rem;
border-radius: 0.5866666667rem;
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
padding: 0.04rem 0.2133333333rem 0 0.08rem;
overflow: hidden;
margin-bottom: 0.4rem;
}
.header .danmu #my_container .my_container_in img {
display: block;
float: left;
width: 0.5866666667rem;
height: 0.5866666667rem;
margin-top: 0.0293333333rem;
border-radius: 50%;
}
.header .danmu #my_container .my_container_in span {
display: block;
float: left;
color: #FFFFFF;
font-size: 0.3466666667rem;
font-weight: 500;
margin: 0 0.1333333333rem;
}
.header .Lottery_button {
display: flex;
justify-content: space-between;
margin: 0 0.1866666667rem;
}
.header .Lottery_button .once {
background-image: url("../images/once_btn.png");
background-size: 100% 100%;
width: 4.6933333333rem;
height: 1.8933333333rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.header .Lottery_button .once .title {
font-family: PingFang SC;
font-weight: 600;
font-size: 0.4533333333rem;
color: #2F1300;
line-height: 0.48rem;
}
.header .Lottery_button .once .txt {
font-family: PingFang SC;
font-weight: 600;
font-size: 0.3466666667rem;
color: #2F1300;
line-height: 0.48rem;
}
.header .Lottery_button .Ten_times {
background-image: url("../images/ten_btn.png");
background-size: 100% 100%;
width: 4.6933333333rem;
height: 1.8933333333rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.header .Lottery_button .Ten_times .title {
font-family: PingFang SC;
font-weight: 600;
font-size: 0.4533333333rem;
color: #2F1300;
line-height: 0.48rem;
}
.header .Lottery_button .Ten_times .txt {
font-family: PingFang SC;
font-weight: 600;
font-size: 0.3466666667rem;
color: #2F1300;
line-height: 0.48rem;
}
.header .tip_title {
background: rgba(0, 0, 0, 0.5);
border-radius: 0.24rem;
border: 0.0266666667rem solid #FFEFB0;
margin: 0.3733333333rem 0.1866666667rem;
padding: 0.36rem 0.8rem;
text-align: center;
}
.header .tip_title .title {
font-family: PingFang SC;
font-weight: 600;
font-size: 0.4rem;
color: #FFFCD0;
line-height: 0.48rem;
}
.header .tip_title .txt {
font-family: PingFang SC;
font-weight: 400;
font-size: 0.3733333333rem;
color: #FFFCD0;
line-height: 0.48rem;
margin-top: 0.3733333333rem;
}
.tab_list {
display: flex;
align-items: center;
justify-content: space-between;
}
.tab_list .Adventure_btn {
flex: 1;
background-image: url("../images/Adventure_btn_bg.png");
background-size: 100% 100%;
font-family: PingFang SC;
font-weight: 600;
font-size: 0.4266666667rem;
color: #FFABAB;
display: flex;
align-items: center;
justify-content: center;
padding: 0.6133333333rem 0.4rem;
}
.tab_list .acitve {
background-image: url("../images/active_bg.png");
color: #FFFCD0;
}
.adventureTask .top {
background-image: url("../images/top_bg.png");
background-size: 100% 100%;
height: 2.0666666667rem;
width: 100%;
}
.adventureTask .content {
background-image: url("../images/content_bg.png");
background-size: 100% 100%;
}
.adventureTask .content .time_box {
background: rgba(0, 0, 0, 0.5);
border-radius: 0.3466666667rem;
font-family: PingFang SC;
font-weight: 500;
font-size: 0.3733333333rem;
color: #FFFCD0;
padding: 0.1866666667rem 0.3466666667rem;
margin: 0 2.2666666667rem;
text-align: center;
}
.adventureTask .content .recharge {
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.4rem;
}
.adventureTask .content .recharge .avatar {
width: 1.3333333333rem;
height: 1.3333333333rem;
border-radius: 50%;
}
.adventureTask .content .recharge .data_box {
margin-left: 0.24rem;
}
.adventureTask .content .recharge .data_box .txt {
font-family: PingFang SC;
font-weight: 400;
font-size: 0.3733333333rem;
color: #FFFCD0;
display: flex;
align-items: center;
}
.adventureTask .content .recharge .data_box .txt .Today_num,
.adventureTask .content .recharge .data_box .txt .Weekly_num {
color: #FFFFFF;
font-weight: 600;
}
.adventureTask .content .recharge .data_box .txt img {
width: 0.36rem;
height: 0.36rem;
margin: 0 0.08rem;
}
.adventureTask .content .recharge .data_box .txt:last-child {
margin-top: 0.2933333333rem;
}
.adventureTask .content .tip_box {
background: rgba(0, 0, 0, 0.5);
border-radius: 0.3466666667rem;
border: 0.0266666667rem solid #FFD435;
padding: 0.2666666667rem;
margin: 0.3733333333rem 0.5333333333rem;
}
.adventureTask .content .tip_box .txt {
font-family: PingFang SC;
font-weight: 400;
font-size: 0.3733333333rem;
color: #FFFCD0;
display: flex;
align-items: center;
}
.adventureTask .content .tip_box .txt .num {
color: #FFFFFF;
font-weight: 600;
}
.adventureTask .content .tip_box .txt img {
width: 0.2933333333rem;
height: 0.2933333333rem;
}
.adventureTask .content .tip_box .Points_mission {
font-family: PingFang SC;
font-weight: 400;
font-size: 0.32rem;
color: #FFFCD0;
opacity: 0.6;
margin-top: 0.2666666667rem;
}
.adventureTask .content .task_list {
background: rgba(0, 0, 0, 0.5);
border-radius: 0.3466666667rem;
border: 0.0266666667rem solid #FFD435;
margin: 1.0666666667rem 0.5333333333rem 0;
padding: 0.64rem 0 0.5333333333rem;
position: relative;
}
.adventureTask .content .task_list .top_img {
background-image: url("../images/task_top_bg.png");
background-size: 100% 100%;
width: 4.6933333333rem;
height: 1.3866666667rem;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
font-weight: 600;
font-size: 0.4266666667rem;
color: #FFFCD0;
position: absolute;
top: -0.7733333333rem;
left: 50%;
transform: translateX(-50%);
}
.adventureTask .content .task_list .title {
font-family: PingFang SC;
font-weight: 400;
font-size: 0.32rem;
color: #FFFCD0;
text-align: center;
margin-top: 0.1333333333rem;
}
.adventureTask .content .task_list .title .num {
color: #FFFFFF;
font-weight: 600;
font-size: 0.4266666667rem;
}
.adventureTask .content .task_list .wrap .wrap_box {
background-image: url("../images/wrap_content_bg.png");
background-size: 100% 100%;
display: flex;
align-items: center;
height: 1.92rem;
padding: 0 0.6666666667rem;
margin: 0.3466666667rem 0.1333333333rem 0;
}
.adventureTask .content .task_list .wrap .wrap_box .left .title {
font-family: PingFang SC;
font-weight: 600;
font-size: 0.3733333333rem;
color: #FFFCD0;
margin-top: 0;
}
.adventureTask .content .task_list .wrap .wrap_box .left .progress_container {
width: 100%;
height: 0.2133333333rem;
background-color: #610017;
/* 背景颜色 */
border-radius: 0.1066666667rem;
/* 圆角 */
overflow: hidden;
border: 0.0266666667rem solid #FFEF4C;
margin-top: 0.2133333333rem;
/* 隐藏溢出部分 */
/* 进度条本身 */
}
.adventureTask .content .task_list .wrap .wrap_box .left .progress_container .progress_bar {
height: 100%;
width: 0;
/* 初始宽度为0 */
background-image: linear-gradient(90deg, #FBF392, #FCB41B);
/* 进度条颜色 */
transition: width 0.5s;
/* 平滑过渡效果 */
}
.adventureTask .content .task_list .wrap .wrap_box .right {
margin-left: auto;
text-align: center;
}
.adventureTask .content .task_list .wrap .wrap_box .right .num {
font-family: PingFang SC;
font-weight: 600;
font-size: 0.6666666667rem;
color: #FFFFFF;
}
.adventureTask .content .task_list .wrap .wrap_box .right .Points {
font-family: PingFang SC;
font-weight: 400;
font-size: 0.32rem;
color: #FFFFFF;
margin-top: 0.1333333333rem;
}
.adventureTask .bottom {
background-image: url("../images/content_bottom.png");
background-size: 100% 100%;
height: 1.4666666667rem;
width: 100%;
}
.adventureRanking {
display: none;
}
.adventureRanking .top {
background-image: url("../images/top_bg.png");
background-size: 100% 100%;
height: 2.0666666667rem;
width: 100%;
}
.adventureRanking .content {
background-image: url("../images/content_bg.png");
background-size: 100% 100%;
}

View File

@@ -68,7 +68,7 @@ body {
background-size: 100% 100%;
position: absolute;
right: 0;
top: px2rem(500);
top: px2rem(590);
padding: 0 px2rem(7) 0 px2rem(30);
}
@@ -85,7 +85,7 @@ body {
background-size: 100% 100%;
position: absolute;
right: 0;
top: px2rem(600);
top: px2rem(670);
padding: 0 px2rem(7) 0 px2rem(30);
}
@@ -95,8 +95,76 @@ body {
padding-top: px2rem(430);
}
.danmu {
width: px2rem(750);
height: px2rem(200);
overflow: hidden;
// margin: px2rem(10) auto 0;
// position: relative;
box-sizing: border-box;
direction: ltr;
// background: pink;
position: absolute;
top: px2rem(450);
#my_container {
width: 100%;
height: 100%;
box-sizing: border-box;
// position: absolute;
// left: 50%;
// top: 50%;
// transform: translate(-50%, -50%);
.my_container_in {
// max-width: 7.3rem;
// min-width: px2rem(358);
// height: px2rem(44);
line-height: px2rem(44);
border-radius: px2rem(44);
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
padding: px2rem(3) px2rem(16) 0 px2rem(6);
overflow: hidden;
margin-bottom: px2rem(30);
img {
display: block;
float: left;
width: px2rem(44);
height: px2rem(44);
margin-top: px2rem(2.2);
// margin-right: px2rem(5);
border-radius: 50%;
}
span {
display: block;
float: left;
color: #FFFFFF;
font-size: px2rem(26);
font-weight: 500;
margin: 0 px2rem(10);
}
}
}
}
.Lottery_button {
display: flex;
justify-content: space-between;
margin: 0 px2rem(14);
.once {
background-image: url('../images/once_btn.png');
background-size: 100% 100%;
width: px2rem(352);
height: px2rem(142);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.title {
font-family: PingFang SC;
font-weight: 600;
@@ -104,6 +172,331 @@ body {
color: #2F1300;
line-height: px2rem(36)
}
.txt {
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(26);
color: #2F1300;
line-height: px2rem(36)
}
}
.Ten_times {
background-image: url('../images/ten_btn.png');
background-size: 100% 100%;
width: px2rem(352);
height: px2rem(142);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.title {
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(34);
color: #2F1300;
line-height: px2rem(36)
}
.txt {
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(26);
color: #2F1300;
line-height: px2rem(36)
}
}
}
.tip_title {
background: rgba(0, 0, 0, 0.5);
border-radius: px2rem(18);
border: px2rem(2) solid #FFEFB0;
margin: px2rem(28) px2rem(14);
padding: px2rem(27) px2rem(60);
text-align: center;
.title {
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(30);
color: #FFFCD0;
line-height: px2rem(36);
}
.txt {
font-family: PingFang SC;
font-weight: 400;
font-size: px2rem(28);
color: #FFFCD0;
line-height: px2rem(36);
margin-top: px2rem(28);
}
}
}
.tab_list {
display: flex;
align-items: center;
justify-content: space-between;
.Adventure_btn {
flex: 1;
background-image: url('../images/Adventure_btn_bg.png');
background-size: 100% 100%;
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(32);
color: #FFABAB;
display: flex;
align-items: center;
justify-content: center;
padding: px2rem(46) px2rem(30);
}
.acitve {
background-image: url('../images/active_bg.png');
color: #FFFCD0;
}
}
.adventureTask {
.top {
background-image: url('../images/top_bg.png');
background-size: 100% 100%;
height: px2rem(155);
width: 100%;
}
.content {
background-image: url('../images/content_bg.png');
background-size: 100% 100%;
.time_box {
background: rgba(0, 0, 0, 0.5);
border-radius: px2rem(26);
font-family: PingFang SC;
font-weight: 500;
font-size: px2rem(28);
color: #FFFCD0;
padding: px2rem(14) px2rem(26);
margin: 0 px2rem(170);
text-align: center;
}
.recharge {
display: flex;
align-items: center;
justify-content: center;
margin-top: px2rem(30);
.avatar {
width: px2rem(100);
height: px2rem(100);
border-radius: 50%;
}
.data_box {
margin-left: px2rem(18);
.txt {
font-family: PingFang SC;
font-weight: 400;
font-size: px2rem(28);
color: #FFFCD0;
display: flex;
align-items: center;
.Today_num,
.Weekly_num {
color: #FFFFFF;
font-weight: 600;
}
img {
width: px2rem(27);
height: px2rem(27);
margin: 0 px2rem(6);
}
}
.txt:last-child {
margin-top: px2rem(22);
}
}
}
.tip_box {
background: rgba(0, 0, 0, 0.5);
border-radius: px2rem(26);
border: px2rem(2) solid #FFD435;
padding: px2rem(20);
margin: px2rem(28) px2rem(40);
.txt {
font-family: PingFang SC;
font-weight: 400;
font-size: px2rem(28);
color: #FFFCD0;
display: flex;
align-items: center;
.num {
color: #FFFFFF;
font-weight: 600;
}
img {
width: px2rem(22);
height: px2rem(22);
}
}
.Points_mission {
font-family: PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #FFFCD0;
opacity: 0.6;
margin-top: px2rem(20);
}
}
.task_list {
background: rgba(0, 0, 0, 0.5);
border-radius: px2rem(26);
border: px2rem(2) solid #FFD435;
margin: px2rem(80) px2rem(40) 0;
padding: px2rem(48) 0 px2rem(40);
position: relative;
.top_img {
background-image: url('../images/task_top_bg.png');
background-size: 100% 100%;
width: px2rem(352);
height: px2rem(104);
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(32);
color: #FFFCD0;
position: absolute;
top: px2rem(-58);
left: 50%;
transform: translateX(-50%);
}
.title {
font-family: PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #FFFCD0;
text-align: center;
margin-top: px2rem(10);
.num {
color: #FFFFFF;
font-weight: 600;
font-size: px2rem(32);
}
}
.wrap {
.wrap_box {
background-image: url('../images/wrap_content_bg.png');
background-size: 100% 100%;
display: flex;
align-items: center;
height: px2rem(144);
padding: 0 px2rem(50);
margin: px2rem(26) px2rem(10) 0;
.left {
.title {
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(28);
color: #FFFCD0;
margin-top: 0;
}
.progress_container {
width: 100%;
height: px2rem(16);
background-color: #610017;
/* 背景颜色 */
border-radius: px2rem(8);
/* 圆角 */
overflow: hidden;
border: px2rem(2) solid #FFEF4C;
margin-top: px2rem(16);
/* 隐藏溢出部分 */
/* 进度条本身 */
.progress_bar {
height: 100%;
width: 0;
/* 初始宽度为0 */
background-image: linear-gradient(90deg, #FBF392, #FCB41B);
/* 进度条颜色 */
transition: width 0.5s;
/* 平滑过渡效果 */
}
}
}
.right {
margin-left: auto;
text-align: center;
.num {
font-family: PingFang SC;
font-weight: 600;
font-size: px2rem(50);
color: #FFFFFF;
}
.Points {
font-family: PingFang SC;
font-weight: 400;
font-size: px2rem(24);
color: #FFFFFF;
margin-top: px2rem(10);
}
}
}
}
}
}
.bottom {
background-image: url('../images/content_bottom.png');
background-size: 100% 100%;
height: px2rem(110);
width: 100%;
}
}
.adventureRanking {
display: none;
.top {
background-image: url('../images/top_bg.png');
background-size: 100% 100%;
height: px2rem(155);
width: 100%;
}
.content {
background-image: url('../images/content_bg.png');
background-size: 100% 100%;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 898 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

View File

@@ -1,36 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title class="page_title"></title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<link rel="stylesheet" href="../../common/css/reset.css" />
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<body>
<!-- 頂部返回 -->
<div class="back">
<img src="./images/travel/back.png" alt="">
<img src="./images/travel/back.png" alt="" />
</div>
<!-- 头部 -->
<div class="header">
<div class="Adventurers_gather">Adventurers gather! Treasure hunt challenge is on!</div>
<div class="rule Rules">Rules</div>
<div class="Record My_Record">My Record</div>
<div class="bx_img"><img src="./images/baoxiang.png" alt=""></div>
<div class="Lottery_button">
<div class="once">
<p class="title">1 Bet</p>
<p class="txt">Need 100 points</p>
</div>
<div class="Ten_times"></div>
<div class="date Adventurers_gather">
Adventurers gather! Treasure hunt challenge is on!
</div>
<div class="rule Rules">Rules</div>
<div class="Record My_Record">My Record</div>
<!-- 弹幕 -->
<div class="danmu">
<div id="my_container"></div>
</div>
<div class="bx_img"><img src="./images/baoxiang.png" alt="" /></div>
<div class="Lottery_button">
<div class="once">
<p class="title Bet1">1 Bet</p>
<p class="txt Need100">Need 100 points</p>
</div>
<div class="Ten_times">
<p class="title Bet10">1 Bet</p>
<p class="txt Need1000">Need 100 points</p>
</div>
</div>
<div class="tip_title">
<div class="title">
Earn points by participating, treasures are waiting for you to
explore!
</div>
<div class="txt">
Join this adventure full of unknowns, and accumulate adventure points
for each task you complete!
</div>
</div>
</div>
</body>
<!-- tab -->
<div class="tab_list">
<div class="Adventure_btn Adventure_Task acitve">Adventure Task</div>
<div class="Adventure_btn Adventure_Ranking">Adventure mission</div>
</div>
<!-- 冒险任务 -->
<div class="adventureTask">
<div class="top"></div>
<div class="content">
<div class="time_box Reset_time"></div>
<div class="recharge">
<img src="./images/logo.png" alt="" class="avatar" />
<div class="data_box">
<div class="txt">
<span class="Today_recharge"></span>
<span class="Today_num">800</span>
<img src="./images/coins.png" alt="" />
</div>
<div class="txt">
<span class="Weekly_recharge"></span>
<span class="Weekly_num">800</span>
<img src="./images/coins.png" alt="" />
</div>
</div>
</div>
<div class="tip_box">
<div class="txt">
<span class="Points_week"></span><span class="num">888</span>
<img src="./images/arrow_right.png" alt="" />
</div>
<div class="Points_mission"></div>
</div>
<div class="task_list">
<div class="top_img Adventure_Task"></div>
<div class="title">
<span class="Recharge_recharge"></span>
<span class="num">+30%</span>
</div>
<div class="title">
<span class="Link_Points"></span>
<span class="num">+30%</span>
</div>
<div class="wrap">
<div class="wrap_box">
<div class="left">
<div class="title">First recharge per week</div>
<div class="progress_container">
<div class="progress_bar"></div>
</div>
<div class=""></div>
</div>
<div class="right">
<div class="num">+100</div>
<div class="Points">Points</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom"></div>
</div>
<!-- 冒险排行 -->
<div class="adventureRanking">
<div class="top"></div>
<div class="content"></div>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>

View File

@@ -58,7 +58,7 @@ const setDanmuData = () => {
if (danmushoot) {
renderDM(danmushoot);
}
}, 500);
}, 1500);
}
}
const renderDM = (item) => {
@@ -71,6 +71,8 @@ const renderDM = (item) => {
<div class="my_container_in">
<img src="${item.avatar}" alt="" class="tx">
<span>${item.bless}</span>
<img src="${item.avatar}" alt="" class="tx">
</div>`
return $div;
},
@@ -107,6 +109,8 @@ $(function () {
langReplace = window.lang.replace;
localLang = window.lang;
translateFun();
initDanmu();
updateProgress(1,2)
// blessGetConfig();
// questionConfig();
}, 100)
@@ -117,8 +121,49 @@ function translateFun() {
$('.page_title').html(langReplace(localLang.demoModule.page_title));
$('.rule').html(langReplace(localLang.demoModule.Rules));
$('.My_Record').html(langReplace(localLang.demoModule.My_Record));
$('.Bet1').html(langReplace(localLang.demoModule.Bet1));
$('.Bet10').html(langReplace(localLang.demoModule.Bet10));
$('.Need1000').html(langReplace(localLang.demoModule.Need1000));
$('.Need100').html(langReplace(localLang.demoModule.Need100));
$('.Adventure_Task').html(langReplace(localLang.demoModule.Adventure_Task));
$('.Adventure_Ranking').html(langReplace(localLang.demoModule.Adventure_Ranking));
$('.Reset_time').html(langReplace(localLang.demoModule.Reset_time));
$('.Today_recharge').html(langReplace(localLang.demoModule.Today_recharge));
$('.Weekly_recharge').html(langReplace(localLang.demoModule.Weekly_recharge));
$('.Points_week').html(langReplace(localLang.demoModule.Points_week));
$('.Points_mission').html(langReplace(localLang.demoModule.Points_mission));
$('.Points').html(langReplace(localLang.demoModule.Points));
$('.Recharge_recharge').html(langReplace(localLang.demoModule.Recharge_recharge));
$('.Link_Points').html(langReplace(localLang.demoModule.Link_Points));
}
// 页面1tab切换
$('.tab_list div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('acitve').siblings().removeClass('acitve');
$(`.adventureTask,.adventureRanking`).hide();
if (i == 1) {
$(`.adventureTask`).show();
} else {
$(`.adventureRanking`).show();
}
})
// 更新进度条函数
function updateProgress(value,maxValue) {
// 计算进度百分比
const percentage = (value / maxValue) * 100;
// 更新进度条宽度
// $('.progress-bar').style.width = `${percentage}%`;
$('.progress_bar').css('width', `${percentage}%`);
// = `${percentage}%`;
// 更新文本内容
// progressText.textContent = `${value}/${maxValue}`;
}
// 弹幕接口
function blessGetConfig() {
showLoading()
@@ -140,466 +185,3 @@ function blessGetConfig() {
}
})
}
// 主tab切换
$('.header .tab div').click(function () {
var i = $(this).index() + 1;
$('.page1,.page2,.page3').hide();
$(this).addClass('act').siblings().removeClass('act');
$(`.page${i}`).show();
if (i == 2) {
ramadanRank();
}
})
// ===============================================页面一===============================================
// 问题列表接口
function questionConfig(dates) {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2025Ramadan/question/getConfig',
success(res) {
if (res.code === 200) {
// 进度
var num = res.data.cumulativeNum / 38 * 100
$('.page1 .c .page1_1 .medal .line .line_in').css('width', num + "%")
$('.page1 .c .page1_1 .medal .line span').text(`${res.data.cumulativeNum}/38`);
var myMap = res.data.questionStatusMap;
// 渲染日期
$('.page1 .c .page1_2 .calendar .calendar_in div').remove();
var calendarStr = '';
for (let key in myMap) {
if (myMap.hasOwnProperty(key)) {
calendarStr += `
<div class="${myMap[key] == 3 || myMap[key] == 2 ? 'act' : ''}">
<span>${formattedDate(key)}</span>
<img src="${myMap[key] == 3 ? './images/corrects.png' : myMap[key] == 2 ? './images/incorrect.png' : ''}" alt="">
</div>
`
if (key == '2025-03-03' && myMap[key] == 3) {
$('.page1 .c .page1_2 .rewars1 div .doneBut').show();
}
if (key == '2025-03-07' && myMap[key] == 3) {
$('.page1 .c .page1_2 .rewars2 div .doneBut').show();
}
if (key == '2025-03-15' && myMap[key] == 3) {
$('.page1 .c .page1_2 .rewars3 div .doneBut').show();
}
if (key == '2025-03-30' && myMap[key] == 3) {
$('.page1 .c .page1_2 .rewars4 div .doneBut').show();
}
}
}
$('.page1 .c .page1_2 .calendar .calendar_in').append(calendarStr);
// 渲染灯笼
$('.page1 .lanternBox div').remove();
var lantern = ''
var bool = false;
for (let key in myMap) {
if (myMap.hasOwnProperty(key)) {
bool = !bool;
lantern += `
<div status="${myMap[key]}" date="${key}" class="buts ${key == '2025-03-03' || key == '2025-03-07' || key == '2025-03-15' || key == '2025-03-30' ? 'special' : ''} ${bool ? 'singular' : ''} ${myMap[key] == 0 ? 'hangInTheAir' : myMap[key] == 1 ? 'beCompleted' : myMap[key] == 2 || myMap[key] == 3 ? 'completed' : ''}">
<div class="lanternDate">${formattedDate(key)}</div>
<img src="./images/ok.png" alt="" class="ok">
<img src="./images/notOk.png" alt="" class="notOk">
<div class="gift" style="display:${key == '2025-03-03' || key == '2025-03-07' || key == '2025-03-15' || key == '2025-03-30' ? 'block' : 'none'}">
<img src="./images/${key == '2025-03-03' ? 'questionSheet1' : key == '2025-03-07' ? 'questionSheet2' : key == '2025-03-15' ? 'questionSheet3' : key == '2025-03-30' ? 'questionSheet4' : ''}.png" alt="">
</div>
</div>
`
}
}
$('.page1 .lanternBox').append(lantern);
getQuestion(dates ? dates : res.data.curDate);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
function formattedDate(dateStr) {
const parts = dateStr.split("-");
const month = parseInt(parts[1], 10);
const day = parseInt(parts[2], 10);
return `${month}/${day}`
}
// 获取问题接口
function getQuestion(date) {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2025Ramadan/question/getQuestion',
data: { date },
success(res) {
if (res.code === 200) {
$('.questionLists').attr('date', date);
$('.page1 .c .page1_1 .question .answersNum b').text(res.data.rightAnswerNum);
$('.page1 .c .page1_1 .question .questionText').text(res.data.question);
$('.page1 .c .page1_1 .question .a span').html('A &nbsp;&nbsp;' + res.data.optionA);
$('.page1 .c .page1_1 .question .b span').html('B &nbsp;&nbsp;' + res.data.optionB);
$('.page1 .c .page1_1 .question .c span').html('C &nbsp;&nbsp;' + res.data.optionC);
// 判断是否答题
if (res.data.answer) {
// 已答题
$(`.page1 .c .page1_1 .question .${res.data.answer}`).addClass('borders');
$('.questionLists').attr('answer', 0);
$(`.page1 .c .page1_1 .question .questionLists img`).hide();
if (res.data.result) {
// 正确
$(`.page1 .c .page1_1 .question .${res.data.answer} img`).attr('src', './images/corrects.png')
} else {
// 不正确
$(`.page1 .c .page1_1 .question .${res.data.answer} img`).attr('src', './images/incorrect.png')
}
$(`.page1 .c .page1_1 .question .${res.data.answer} img`).show();
} else {
// 未答题
$(`.page1 .c .page1_1 .question .questionLists `).removeClass('borders');
$(`.page1 .c .page1_1 .question .questionLists img`).hide();
$('.questionLists').attr('answer', 1);
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
// 回答按钮
$('.questionLists').click(function () {
var option = $(this).attr('option');
var date = $(this).attr('date');
var answer = $(this).attr('answer');
if (answer == 1) {
questionAsk(date, option);
}
})
// 回答接口
function questionAsk(date, option) {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2025Ramadan/question/ask',
data: { date, option },
success(res) {
if (res.code === 200) {
bodyScroolFun(false);
if (res.data.result) {
if (res.data.reward) {
$('.page1 .congratulations .congratulations_in .gift .gift_in').attr('src', res.data.reward.pic);
$('.page1 .congratulations .congratulations_in .gift .giftName').text(res.data.reward.name);
$('.page1 .congratulations .congratulations_in .gift .num').text(`${res.data.reward.num} ${res.data.reward.unit}`);
$('.page1 .congratulations').show();
}
} else {
$('.page1 .unfortunately').show();
}
questionConfig(date);
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
// 监听切换题目
$('.page1 .lanternBox').on('click', '.buts', function () {
var date = $(this).attr('date');
var status = $(this).attr('status');
if (status == 0) {
toastMsg(langReplace(localLang.demoModule.text44));
} else {
getQuestion(date)
}
})
// 页面1tab切换
$('.page1 .c .page1_tabBox div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('act').siblings().removeClass('act');
$(`.page1_1,.page1_2`).hide();
$(`.page1_${i}`).show();
})
// 关闭答题错误弹窗
$('.page1 .unfortunately .unfortunately_in .close,.page1 .unfortunately .unfortunately_in .but').click(function () {
bodyScroolFun(false);
$('.page1 .unfortunately').hide();
})
// 关闭答题正确弹窗
$('.page1 .congratulations .congratulations_in .close,.page1 .congratulations .congratulations_in .but').click(function () {
bodyScroolFun(false);
$('.page1 .congratulations').hide();
})
// ===============================================页面二===============================================
// 发射弹幕接口
function bless(bless) {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/act/2025Ramadan/bless/bless',
data: { bless },
success(res) {
if (res.code === 200) {
danmaku.destroy();
blessGetConfig();
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
// 发送弹幕
$('.ramadanBlessings .send').click(function () {
var text = $('.ramadanBlessings input').val();
if (text.length > 20 || text.length == 0) {
toastMsg(langReplace(localLang.demoModule.text70));
return;
}
$('.tip').show();
bodyScroolFun(true);
})
// 确认发送按钮
$('.tip .tip_in .ok').click(function () {
var text = $('.ramadanBlessings input').val();
bodyScroolFun(false);
$('.tip').hide();
bless(text)
})
// 取消发送按钮
$('.tip .tip_in .close').click(function () {
bodyScroolFun(false);
$('.tip').hide();
})
// 转盘未获奖弹窗
$('.page2 .unfortunately .unfortunately_in .close,.page2 .unfortunately .unfortunately_in .but').click(function () {
bodyScroolFun(false);
$('.page2 .unfortunately').hide();
})
// 转盘获奖弹窗
$('.page2 .congratulations .congratulations_in .close,.page2 .congratulations .congratulations_in .but').click(function () {
bodyScroolFun(false);
$('.page2 .congratulations').hide();
})
// 转盘相关的
var arr = [20, 60, 100, 140, 180, 220, 260, 300];
var i = null;
var sec = 3;
var animationFunLock = true;
$('.page2 .turntable .c .pointerBut').click(function () {
i = Math.floor(Math.random() * arr.length);
console.log(Math.floor(Math.random() * arr.length));
if (animationFunLock) {
animationFunLock = false;
animationFun();
}
})
function animationFun() {
// 设置为立即从0默认值
$('.page2 .turntable .c .turntableBox .turntable_in img').css({
'transition': `all 0s`,
'transform': `rotate(0deg)`
});
// 在稍后的时间应用旋转效果
setTimeout(function () {
$('.page2 .turntable .c .turntableBox .turntable_in img').css({
'transition': `all ${sec}s`,
'transform': `rotate(${3 * 360 + arr[i]}deg)`,
});
}, 0);
setTimeout(function () {
animationFunLock = true;
}, sec * 1000)
}
// // ===============================================页面三===============================================
var countupTime;//倒计时容器
//tab切换
$('.page2 .list .c .page3_in1 .page3TabBox div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('act').siblings().removeClass();
listType = $(this).attr('type');
$('.page2 .list .c .page3_in1 .timeOutBox').css('display', 'none');
$('.page2 .list .c .page3_in1 .yesterdayCoinsPool').hide();
$('.page2 .list .c .page3_in1 .no1 .rewards').hide();
if (i == 1) {
$('.page2 .list .c .page3_in1 .yesterdayCoinsPool').show();
} else if (i == 2) {
$('.page2 .list .c .page3_in1 .timeOutBox').css('display', 'flex');
} else {
$('.page2 .list .c .page3_in1 .timeOutBox').css('display', 'flex');
$('.page2 .list .c .page3_in1 .no1 .rewards').show();
}
ramadanRank();
})
// 榜单接口
function ramadanRank() {
showLoading()
networkRequest({
type: 'get',
url: urlPrefix + '/activity/h5/ramadan/rank',
data: { type: listType },
success(res) {
if (res.code === 200) {
$('.page2 .todayCoinsPool .num b').text(res.data.poolGoldNum);
var val = res.data.activityH5RankVo
if (listType == 1) {
console.log(val);
$('.page2 .list .c .page3_in1 .yesterdayCoinsPool .num b').text(val.totalGoldNum);
} else {
var endtime = new Date(res.data.activityH5RankVo.endTimeStr.replace(/\-/g, '/')).getTime();
countup(endtime - res.timestamp);
}
var listTo3 = val.rankList.slice(0, 3);
var notListTo3 = val.rankList.slice(3);
// 处理前三
if (listTo3.length < 3) {
let arr = new Array(3 - listTo3.length).fill({
avatar: './images/logo.png',
name: langReplace(localLang.demoModule.text68),
erbanNo: "",
diffExp: '',
userLevelVo: {
experUrl: null
}
})
listTo3.push(...arr)
}
$('.page2 .list .c .page3_in1 .no1 .score').hide();
listTo3.forEach((res, i) => {
$(`.page2 .list .c .page3_in1 .no${i + 1} .tx`).attr('src', res.avatar);
$(`.page2 .list .c .page3_in1 .no${i + 1} .name `).html(`<b>${res.name.length > 4 ? res.name.slice(0, 4) + '...' : res.name}</b> <img src="${res.userLevelVo.experUrl}" alt="">`);
$(`.page2 .list .c .page3_in1 .no${i + 1} .id`).text("ID: " + res.erbanNo);
$(`.page2 .list .c .page3_in1 .no${i + 1} .score b`).text(unitProcessingAr(res.diffExp, 1));
if (res.userLevelVo.experUrl == null) {
$(`.page2 .list .c .page3_in1 .no23 .no${i + 1} .name img`).hide()
$(`.page2 .list .c .page3_in1 .no23 .no${i + 1} .score`).hide()
$(`.page2 .list .c .page3_in1 .no23 .no${i + 1} .id`).hide()
} else {
$(`.page2 .list .c .page3_in1 .no23 .no${i + 1} .name img`).show()
$(`.page2 .list .c .page3_in1 .no23 .no${i + 1} .score`).show()
$(`.page2 .list .c .page3_in1 .no23 .no${i + 1} .id`).show()
}
})
// 处理非前三
var str = '';
$('.page2 .list .c .page3_in1 ul li').remove();
notListTo3.forEach((res, i) => {
str += `
<li>
<div class="num">${res.rank}</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="user">
<p>
<b>${res.name.length > 4 ? res.name.slice(0, 4) + '...' : res.name}</b>
<img src="${res.userLevelVo.experUrl}" alt="">
</p>
<span>ID: ${res.erbanNo}</span>
</div>
<div class="score">
<span class="text30">${langReplace(localLang.demoModule.text30)}<br/>${unitProcessingAr(res.diffExp, 1)}</span>
</div>
</li>
`;
});
$('.page2 .list .c .page3_in1 ul').append(str);
// 处理自己
var my = res.data.activityH5RankVo.myRank;
if (my.rank == 1) {
$('.page2 .my .score').hide();
}
if (my.rank == 0) {
$('.page2 .my .num').css({ "font-size": "0.3rem", "width": '1rem', "text-indent": "-0.2rem" });
}
$('.page2 .my .num').text(my.rank == 0 ? langReplace(localLang.demoModule.text69) : my.rank);
$('.page2 .my .tx').attr('src', my.avatar);
$('.page2 .my .user').html(`<p><b>${my.name.length > 6 ? my.name.slice(0, 4) + '...' : my.name}</b> <img src="${my.userLevelVo.experUrl}" alt=""><span>ID:${my.erbanNo}</span></p>`);
$('.page2 .my .score').html(`<span class="text30">${langReplace(localLang.demoModule.text30)}</span><br/>${unitProcessingAr(my.diffExp, 1)}`)
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error(err) {
hideLoading(layerIndex)
toastMsg(langReplace(localLang.demoModule.layerIndex3))
}
})
}
// 打开弹窗奖励
$('.page2 .list .c .page3_in1 .no1 .rewards').click(function () {
$('.page2 .rewardsPub').show();
bodyScroolFun(true);
})
// 关闭弹窗奖励
$('.page2 .rewardsPub .rewardsPub_in .close').click(function () {
$('.page2 .rewardsPub').hide();
bodyScroolFun(false);
})
// 倒計時
function countup(leftTime) {
clearTimeout(countupTime)
//獲取當前時間
// var now = nowTime;
var d = 0;
var h = 0;
var m = 0;
var s = 0;
//定義變數 d,h,m,s保存倒計時的時間
var d, h, m, s;
//遞歸每秒調⽤countTime⽅法顯⽰動態時間效果
if (leftTime > 0) {
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
s = getzf(Math.floor(leftTime / 1000 % 60));
//將倒計時賦值到div中
$('.page2 .list .c .page3_in1 .timeOutBox .days b').text(d);
$('.page2 .list .c .page3_in1 .timeOutBox .hours b').text(h);
$('.page2 .list .c .page3_in1 .timeOutBox .mins b').text(m);
$('.page2 .list .c .page3_in1 .timeOutBox .secs b').text(s);
} else {
ramadanRank();
}
if (leftTime > 0) {
leftTime = leftTime - 1000;
}
countupTime = setTimeout(function () {
countup(leftTime);
}, 1000);
}
//补0操作
function getzf(num) {
if (parseInt(num) < 10) {
num = '0' + num;
}
return num;
}

View File

@@ -9,6 +9,24 @@ langAr = {
Adventurers_gather:'يا مغامرين، انطلقوا! تحدي البحث عن الكنز',
Rules:'القواعد',
My_Record:'سجلي',
Bet1:'رهان واحد',
Bet10:'10 رهانات',
Need1000:'مطلوب 1000 نقطة',
Need100:'مطلوب 100 نقطة',
Won:'فزت',
Adventure_Task:'مهمة المغامرة',
Adventure_Ranking:'تصنيف المغامرة',
Reset_time:function(Days,times){
return ':مدة الاسترداد'+Days+'أيام'+times
},
Today_recharge:'شحن اليوم:',
Weekly_recharge:'شحن أسبوعي:',
Points_week:'النقاط المكتسبة هذا الأسبوع:',
Points_mission:'سيتم إعادة تعيين النقاط بنهاية مهمة هذا الأسبوع.',
Recharge_recharge:'نقاط إعادة شحن وكيل إعادة الشحن',
Points:'النقاط',
Link_Points:'نقاط إعادة شحن الرابط',
}
}

View File

@@ -9,6 +9,22 @@ langEn = {
Adventurers_gather:'Adventurers gather! Treasure hunt challenge is on!',
Rules:'Rules',
My_Record:'My Record',
Bet1:'1 Bet',
Bet10:'10 Bet',
Need1000:'Need 1000 points',
Need100:'Need 100 points',
Won:'Won',
Adventure_Task:'Adventure Task',
Adventure_Ranking:'Adventure Ranking',
Reset_time:function(Days,times){
return 'Reset time: '+Days+'Days'+times
},
Today_recharge:'Today recharge:',
Weekly_recharge:'Weekly recharge:',
Points_week:'Points earned this week:',
Points_mission:`Points will be reset at the end of this week's mission.`,
Recharge_recharge:'Recharge agent recharge points',
Points:'Points',
Link_Points:'Link recharge Points',
}
}