diff --git a/view/molistar/activity/adventureTreasureHunt/css/index.css b/view/molistar/activity/adventureTreasureHunt/css/index.css index c8f98c04..7964f96d 100644 --- a/view/molistar/activity/adventureTreasureHunt/css/index.css +++ b/view/molistar/activity/adventureTreasureHunt/css/index.css @@ -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%; } \ No newline at end of file diff --git a/view/molistar/activity/adventureTreasureHunt/css/index.scss b/view/molistar/activity/adventureTreasureHunt/css/index.scss index b3503dbb..753be116 100644 --- a/view/molistar/activity/adventureTreasureHunt/css/index.scss +++ b/view/molistar/activity/adventureTreasureHunt/css/index.scss @@ -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%; + } } \ No newline at end of file diff --git a/view/molistar/activity/adventureTreasureHunt/images/Adventure_btn_bg.png b/view/molistar/activity/adventureTreasureHunt/images/Adventure_btn_bg.png new file mode 100644 index 00000000..0f121929 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/Adventure_btn_bg.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/active_bg.png b/view/molistar/activity/adventureTreasureHunt/images/active_bg.png new file mode 100644 index 00000000..4ba8f517 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/active_bg.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/arrow_right.png b/view/molistar/activity/adventureTreasureHunt/images/arrow_right.png new file mode 100644 index 00000000..f0c24bf8 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/arrow_right.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/coins.png b/view/molistar/activity/adventureTreasureHunt/images/coins.png new file mode 100644 index 00000000..b8e7aa03 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/coins.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/content_bg.png b/view/molistar/activity/adventureTreasureHunt/images/content_bg.png new file mode 100644 index 00000000..3340b503 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/content_bg.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/content_bottom.png b/view/molistar/activity/adventureTreasureHunt/images/content_bottom.png new file mode 100644 index 00000000..db22ef7e Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/content_bottom.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/logo.png b/view/molistar/activity/adventureTreasureHunt/images/logo.png new file mode 100644 index 00000000..ae87e7d9 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/logo.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/once_btn.png b/view/molistar/activity/adventureTreasureHunt/images/once_btn.png new file mode 100644 index 00000000..ce1ff577 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/once_btn.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/task_top_bg.png b/view/molistar/activity/adventureTreasureHunt/images/task_top_bg.png new file mode 100644 index 00000000..728f0b99 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/task_top_bg.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/ten_btn.png b/view/molistar/activity/adventureTreasureHunt/images/ten_btn.png new file mode 100644 index 00000000..764dc874 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/ten_btn.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/top_bg.png b/view/molistar/activity/adventureTreasureHunt/images/top_bg.png new file mode 100644 index 00000000..fef8f523 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/top_bg.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/images/wrap_content_bg.png b/view/molistar/activity/adventureTreasureHunt/images/wrap_content_bg.png new file mode 100644 index 00000000..4495cc65 Binary files /dev/null and b/view/molistar/activity/adventureTreasureHunt/images/wrap_content_bg.png differ diff --git a/view/molistar/activity/adventureTreasureHunt/index.html b/view/molistar/activity/adventureTreasureHunt/index.html index d55819e3..373978c8 100644 --- a/view/molistar/activity/adventureTreasureHunt/index.html +++ b/view/molistar/activity/adventureTreasureHunt/index.html @@ -1,36 +1,118 @@ - - - - + + + - - - + + + - +
- +
-
Adventurers gather! Treasure hunt challenge is on!
-
Rules
-
My Record
-
-
-
-

1 Bet

-

Need 100 points

-
-
+
+ Adventurers gather! Treasure hunt challenge is on! +
+
Rules
+
My Record
+ +
+
+
+
+
+
+

1 Bet

+

Need 100 points

+
+

1 Bet

+

Need 100 points

+
+
+
+
+ Earn points by participating, treasures are waiting for you to + explore! +
+
+ Join this adventure full of unknowns, and accumulate adventure points + for each task you complete! +
+
- - - + +
+
Adventure Task
+
Adventure mission
+
+ +
+
+
+
+
+ +
+
+ + 800 + +
+
+ + 800 + +
+
+
+
+
+ 888 + +
+
+
+
+
+
+ + +30% +
+
+ + +30% +
+
+
+
+
First recharge per week
+
+
+
+
+
+
+
+100
+
Points
+
+
+
+
+
+
+
+ +
+
+
+
+ diff --git a/view/molistar/activity/adventureTreasureHunt/js/index.js b/view/molistar/activity/adventureTreasureHunt/js/index.js index af4e70ba..69617b65 100644 --- a/view/molistar/activity/adventureTreasureHunt/js/index.js +++ b/view/molistar/activity/adventureTreasureHunt/js/index.js @@ -58,7 +58,7 @@ const setDanmuData = () => { if (danmushoot) { renderDM(danmushoot); } - }, 500); + }, 1500); } } const renderDM = (item) => { @@ -71,6 +71,8 @@ const renderDM = (item) => {
${item.bless} + +
` 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 += ` -
- ${formattedDate(key)} - -
- ` - 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 += ` -
-
${formattedDate(key)}
- - -
- -
-
- ` - } - } - $('.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   ' + res.data.optionA); - $('.page1 .c .page1_1 .question .b span').html('B   ' + res.data.optionB); - $('.page1 .c .page1_1 .question .c span').html('C   ' + 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(`${res.name.length > 4 ? res.name.slice(0, 4) + '...' : res.name} `); - $(`.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 += ` -
  • -
    ${res.rank}
    - -
    -

    - ${res.name.length > 4 ? res.name.slice(0, 4) + '...' : res.name} - -

    - ID: ${res.erbanNo} -
    -
    - ${langReplace(localLang.demoModule.text30)}
    ${unitProcessingAr(res.diffExp, 1)}     -
    -
    • - `; - }); - $('.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(`

    ${my.name.length > 6 ? my.name.slice(0, 4) + '...' : my.name} ID:${my.erbanNo}

    `); - $('.page2 .my .score').html(`${langReplace(localLang.demoModule.text30)}
    ${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; -} \ No newline at end of file diff --git a/view/molistar/activity/adventureTreasureHunt/local/ar.js b/view/molistar/activity/adventureTreasureHunt/local/ar.js index 12fa1963..0e33e37c 100644 --- a/view/molistar/activity/adventureTreasureHunt/local/ar.js +++ b/view/molistar/activity/adventureTreasureHunt/local/ar.js @@ -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:'نقاط إعادة شحن الرابط', + } } \ No newline at end of file diff --git a/view/molistar/activity/adventureTreasureHunt/local/en.js b/view/molistar/activity/adventureTreasureHunt/local/en.js index 55bc2bb4..4eb66fae 100644 --- a/view/molistar/activity/adventureTreasureHunt/local/en.js +++ b/view/molistar/activity/adventureTreasureHunt/local/en.js @@ -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', } } \ No newline at end of file