From da84cf9eb6e29c8d61ab46dc3c8f4388a669621e Mon Sep 17 00:00:00 2001 From: dragon <3013557874@qq.com> Date: Fri, 21 Feb 2025 18:46:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=BC=B9=E5=B9=95=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view/molistar/activity/ramadan/css/index.css | 229 +++++++++++------ view/molistar/activity/ramadan/css/index.scss | 242 ++++++++++++------ view/molistar/activity/ramadan/index.html | 37 ++- view/molistar/activity/ramadan/js/index.js | 67 ++++- view/molistar/activity/ramadan/local/ar.js | 9 +- view/molistar/activity/ramadan/local/en.js | 9 +- view/molistar/activity/ramadan/local/tr.js | 9 +- view/molistar/activity/ramadan/local/zh.js | 9 +- 8 files changed, 425 insertions(+), 186 deletions(-) diff --git a/view/molistar/activity/ramadan/css/index.css b/view/molistar/activity/ramadan/css/index.css index b016cf75..6ff3213b 100644 --- a/view/molistar/activity/ramadan/css/index.css +++ b/view/molistar/activity/ramadan/css/index.css @@ -87,7 +87,7 @@ body { box-sizing: border-box; padding: 0 0.13333rem 0 0.04rem; overflow: hidden; - margin-bottom: 0.66667rem; + margin-bottom: 0.4rem; } .header .danmu #my_container .my_container_in img { @@ -108,11 +108,89 @@ body { font-weight: 500; } +.header .ramadanBlessings { + width: 10rem; + height: 3.73333rem; + background: url(../images/page2_dmBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: -0.8rem auto 0; +} + +.header .ramadanBlessings .title { + width: 5.33333rem; + height: 1.36rem; + line-height: 1.36rem; + text-align: center; + color: #FFED26; + font-size: 0.42667rem; + font-weight: 600; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -0.4rem; + background: url(../images/page2Title.png) no-repeat; + background-size: 100% 100%; +} + +.header .ramadanBlessings input { + width: 6.48rem; + height: 0.82667rem; + line-height: 0.82667rem; + border: 0.02667rem solid #2A823C; + border-radius: 0.17333rem; + outline: none; + background: #003A22; + color: #FFED26; + font-size: 0.37333rem; + font-weight: 600; + box-sizing: border-box; + padding: 0 0.26667rem; + position: absolute; + left: 0.93333rem; + top: 1.2rem; +} + +.header .ramadanBlessings input::placeholder { + color: #FFED26; + font-size: 0.37333rem; + font-weight: 400; +} + +.header .ramadanBlessings .send { + width: 1.6rem; + height: 0.8rem; + background: url(../images/send.png) no-repeat; + background-size: 100% 100%; + text-align: center; + line-height: 0.8rem; + font-size: 0.37333rem; + color: #140600; + font-weight: 600; + position: absolute; + top: 1.21333rem; + right: 0.8rem; +} + +.header .ramadanBlessings p { + width: 7.37333rem; + height: 0.69333rem; + line-height: 0.45333rem; + color: #FFED26; + font-size: 0.32rem; + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0.8rem; + text-align: center; +} + .header .tab { width: 9.62667rem; height: 1.22667rem; text-align: center; - margin: 9rem auto 0; + margin: 0.4rem auto 0; display: flex; justify-content: space-around; } @@ -149,7 +227,7 @@ body { .page1 { width: 100%; position: relative; - margin: -3.46667rem auto 0; + margin: 0 auto 0; } .page1 .lanternBox { @@ -1194,78 +1272,6 @@ body { margin: 0 auto 0rem; } -.page22 .tip { - display: none; - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - z-index: 99; - background: rgba(0, 0, 0, 0.5); -} - -.page22 .tip .tip_in { - width: 9.18667rem; - height: 4.85333rem; - background: linear-gradient(90deg, #066A43, #00482B); - border-radius: 0.4rem; - border: 0.02667rem solid #FFED26; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} - -.page22 .tip .tip_in .title { - width: 100%; - text-align: center; - color: #FFED26; - font-size: 0.42667rem; - font-weight: 600; - margin: 0.70667rem auto 0.42667rem; -} - -.page22 .tip .tip_in p { - width: 7.70667rem; - min-height: 0.81333rem; - margin: 0 auto; - color: #FFED26; - font-size: 0.37333rem; - font-weight: 600; - line-height: 0.45333rem; -} - -.page22 .tip .tip_in .close { - width: 3.54667rem; - height: 1.01333rem; - text-align: center; - line-height: 1.01333rem; - color: #140600; - font-size: 0.37333rem; - font-weight: 600; - background: url(../images/page2_pubBut.png) no-repeat; - background-size: 100% 100%; - position: absolute; - top: 3.2rem; - left: 0.57333rem; -} - -.page22 .tip .tip_in .ok { - width: 3.54667rem; - height: 1.01333rem; - text-align: center; - line-height: 1.01333rem; - color: #140600; - font-size: 0.37333rem; - font-weight: 600; - background: url(../images/page1PubBut.png) no-repeat; - background-size: 100% 100%; - position: absolute; - top: 3.2rem; - right: 0.57333rem; -} - .page22 .unfortunately { display: none; position: fixed; @@ -1474,6 +1480,7 @@ body { .page2 { display: none; + margin-top: 3.2rem; } .page2 .todayCoinsPool { @@ -2389,3 +2396,75 @@ body { .Turkiye .page1 .c .page1_2 .answering { width: 7.5rem; } + +.tip { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, 0.5); +} + +.tip .tip_in { + width: 9.18667rem; + height: 4.85333rem; + background: linear-gradient(90deg, #066A43, #00482B); + border-radius: 0.4rem; + border: 0.02667rem solid #FFED26; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.tip .tip_in .title { + width: 100%; + text-align: center; + color: #FFED26; + font-size: 0.42667rem; + font-weight: 600; + margin: 0.70667rem auto 0.42667rem; +} + +.tip .tip_in p { + width: 7.70667rem; + min-height: 0.81333rem; + margin: 0 auto; + color: #FFED26; + font-size: 0.37333rem; + font-weight: 600; + line-height: 0.45333rem; +} + +.tip .tip_in .close { + width: 3.54667rem; + height: 1.01333rem; + text-align: center; + line-height: 1.01333rem; + color: #140600; + font-size: 0.37333rem; + font-weight: 600; + background: url(../images/page2_pubBut.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: 3.2rem; + left: 0.57333rem; +} + +.tip .tip_in .ok { + width: 3.54667rem; + height: 1.01333rem; + text-align: center; + line-height: 1.01333rem; + color: #140600; + font-size: 0.37333rem; + font-weight: 600; + background: url(../images/page1PubBut.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: 3.2rem; + right: 0.57333rem; +} diff --git a/view/molistar/activity/ramadan/css/index.scss b/view/molistar/activity/ramadan/css/index.scss index 0d76e059..f16550a4 100644 --- a/view/molistar/activity/ramadan/css/index.scss +++ b/view/molistar/activity/ramadan/css/index.scss @@ -90,7 +90,7 @@ body { box-sizing: border-box; padding: 0 px2rem(10) 0 px2rem(3); overflow: hidden; - margin-bottom: px2rem(50); + margin-bottom: px2rem(30); img { display: block; @@ -113,11 +113,89 @@ body { } } + .ramadanBlessings { + width: px2rem(750); + height: px2rem(280); + background: url(../images/page2_dmBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: -0.8rem auto 0; + + .title { + width: px2rem(400); + height: px2rem(102); + line-height: px2rem(102); + text-align: center; + color: #FFED26; + font-size: px2rem(32); + font-weight: 600; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(-30); + background: url(../images/page2Title.png) no-repeat; + background-size: 100% 100%; + } + + input { + width: px2rem(486); + height: px2rem(62); + line-height: px2rem(62); + border: px2rem(2) solid #2A823C; + border-radius: px2rem(13); + outline: none; + background: #003A22; + color: #FFED26; + font-size: px2rem(28); + font-weight: 600; + box-sizing: border-box; + padding: 0 px2rem(20); + position: absolute; + left: px2rem(70); + top: px2rem(90); + + &::placeholder { + color: #FFED26; + font-size: px2rem(28); + font-weight: 400; + } + } + + .send { + width: px2rem(120); + height: px2rem(60); + background: url(../images/send.png) no-repeat; + background-size: 100% 100%; + text-align: center; + line-height: px2rem(60); + font-size: px2rem(28); + color: #140600; + font-weight: 600; + position: absolute; + top: px2rem(91); + right: px2rem(60); + } + + p { + width: px2rem(553); + height: px2rem(52); + line-height: px2rem(34); + color: #FFED26; + font-size: px2rem(24); + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(60); + text-align: center; + } + } + .tab { width: px2rem(722); height: px2rem(92); text-align: center; - margin: 9rem auto 0; + margin: 0.4rem auto 0; display: flex; justify-content: space-around; @@ -157,8 +235,8 @@ body { .page1 { width: 100%; position: relative; - margin: px2rem(-260) auto 0; - // display: none; + margin: 0 auto 0; + // display: none;px2rem(-260) .lanternBox { width: px2rem(750); @@ -1222,77 +1300,7 @@ body { } } - .tip { - display: none; - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; - z-index: 99; - background: rgba(0, 0, 0, .5); - .tip_in { - width: px2rem(689); - height: px2rem(364); - background: linear-gradient(90deg, #066A43, #00482B); - border-radius: px2rem(30); - border: px2rem(2) solid #FFED26; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - - .title { - width: 100%; - text-align: center; - color: #FFED26; - font-size: px2rem(32); - font-weight: 600; - margin: px2rem(53) auto px2rem(32); - } - - p { - width: px2rem(578); - min-height: px2rem(61); - margin: 0 auto; - color: #FFED26; - font-size: px2rem(28); - font-weight: 600; - line-height: px2rem(34); - } - - .close { - width: px2rem(266); - height: px2rem(76); - text-align: center; - line-height: px2rem(76); - color: #140600; - font-size: px2rem(28); - font-weight: 600; - background: url(../images/page2_pubBut.png) no-repeat; - background-size: 100% 100%; - position: absolute; - top: px2rem(240); - left: px2rem(43); - } - - .ok { - width: px2rem(266); - height: px2rem(76); - text-align: center; - line-height: px2rem(76); - color: #140600; - font-size: px2rem(28); - font-weight: 600; - background: url(../images/page1PubBut.png) no-repeat; - background-size: 100% 100%; - position: absolute; - top: px2rem(240); - right: px2rem(43); - } - } - } .unfortunately { display: none; @@ -1503,6 +1511,7 @@ body { .page2 { display: none; + margin-top: 3.2rem; .todayCoinsPool { width: px2rem(750); @@ -1713,6 +1722,7 @@ body { .page3_in1 { padding-top: px2rem(10); + .timeOutBox { width: px2rem(438); height: px2rem(90); @@ -2422,16 +2432,92 @@ body { background: url(../images/header-tr.png) no-repeat; background-size: 100% 100%; } - .header .tab div span{ + + .header .tab div span { width: 2.78667rem; } - .page2 .ramadanGifts .c .gifyBigBox .gift{ + + .page2 .ramadanGifts .c .gifyBigBox .gift { width: 21rem; - .giftBox{ + + .giftBox { margin-right: px2rem(90); } } - .page1 .c .page1_2 .answering{ + + .page1 .c .page1_2 .answering { width: 7.5rem; } +} + +.tip { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, .5); + + .tip_in { + width: px2rem(689); + height: px2rem(364); + background: linear-gradient(90deg, #066A43, #00482B); + border-radius: px2rem(30); + border: px2rem(2) solid #FFED26; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .title { + width: 100%; + text-align: center; + color: #FFED26; + font-size: px2rem(32); + font-weight: 600; + margin: px2rem(53) auto px2rem(32); + } + + p { + width: px2rem(578); + min-height: px2rem(61); + margin: 0 auto; + color: #FFED26; + font-size: px2rem(28); + font-weight: 600; + line-height: px2rem(34); + } + + .close { + width: px2rem(266); + height: px2rem(76); + text-align: center; + line-height: px2rem(76); + color: #140600; + font-size: px2rem(28); + font-weight: 600; + background: url(../images/page2_pubBut.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: px2rem(240); + left: px2rem(43); + } + + .ok { + width: px2rem(266); + height: px2rem(76); + text-align: center; + line-height: px2rem(76); + color: #140600; + font-size: px2rem(28); + font-weight: 600; + background: url(../images/page1PubBut.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: px2rem(240); + right: px2rem(43); + } + } } \ No newline at end of file diff --git a/view/molistar/activity/ramadan/index.html b/view/molistar/activity/ramadan/index.html index 7a388b22..48bcab57 100644 --- a/view/molistar/activity/ramadan/index.html +++ b/view/molistar/activity/ramadan/index.html @@ -20,7 +20,7 @@
- - + +
+
+
+

+
+
+
+
diff --git a/view/molistar/activity/ramadan/js/index.js b/view/molistar/activity/ramadan/js/index.js index 9d1ac74a..5966053b 100644 --- a/view/molistar/activity/ramadan/js/index.js +++ b/view/molistar/activity/ramadan/js/index.js @@ -105,7 +105,7 @@ $(function () { langReplace = window.lang.replace; localLang = window.lang; translateFun(); - // blessGetConfig(); + blessGetConfig(); questionConfig(); }, 100) }) @@ -154,6 +154,14 @@ function translateFun() { $('.text41').html(langReplace(localLang.demoModule.text41)); $('.text42').html(langReplace(localLang.demoModule.text42)); $('.text43').html(langReplace(localLang.demoModule.text43)); + $('.text60').html(langReplace(localLang.demoModule.text60)); + $('.text61').html(langReplace(localLang.demoModule.text61)); + $('.text62').html(langReplace(localLang.demoModule.text62)); + $('.text63').html(langReplace(localLang.demoModule.text63)); + $('.text64').html(langReplace(localLang.demoModule.text64)); + $('.header .ramadanBlessings input').attr('placeholder', langReplace(localLang.demoModule.text65)); + $('.text66').html(langReplace(localLang.demoModule.text66)); + $('.text67').html(langReplace(localLang.demoModule.text67)); $('.page2 .rewardsPub .rewardsPub_in .box img').attr("src", langReplace(localLang.demoModule.text45)) if (browser.ios) { $('.text33').html(langReplace(localLang.demoModule.text33)); @@ -409,8 +417,8 @@ function bless(bless) { }) } // 发送弹幕 -$('.page2 .ramadanBlessings .send').click(function () { - var text = $('.page2 .ramadanBlessings input').val(); +$('.ramadanBlessings .send').click(function () { + var text = $('.ramadanBlessings input').val(); if (text.length > 20 || text.length == 0) { toastMsg('内容不能为空，并且不能超过20个字符'); return; @@ -419,16 +427,16 @@ $('.page2 .ramadanBlessings .send').click(function () { bodyScroolFun(true); }) // 确认发送按钮 -$('.page2 .tip .tip_in .ok').click(function () { - var text = $('.page2 .ramadanBlessings input').val(); +$('.tip .tip_in .ok').click(function () { + var text = $('.ramadanBlessings input').val(); bodyScroolFun(false); - $('.page2 .tip').hide(); + $('.tip').hide(); bless(text) }) // 取消发送按钮 -$('.page2 .tip .tip_in .close').click(function () { +$('.tip .tip_in .close').click(function () { bodyScroolFun(false); - $('.page2 .tip').hide(); + $('.tip').hide(); }) // 转盘未获奖弹窗 $('.page2 .unfortunately .unfortunately_in .close,.page2 .unfortunately .unfortunately_in .but').click(function () { @@ -475,6 +483,7 @@ function animationFun() { // // ===============================================页面三=============================================== +var countupTime;//倒计时容器 //tab切换 $('.page2 .list .c .page3_in1 .page3TabBox div').click(function () { var i = $(this).index() + 1; @@ -502,4 +511,44 @@ $('.page2 .list .c .page3_in1 .no1 .rewards').click(function () { $('.page2 .rewardsPub .rewardsPub_in .close').click(function () { $('.page2 .rewardsPub').hide(); bodyScroolFun(false); -}) \ No newline at end of file +}) + +// 倒計時 +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 { + getConfig(); + } + 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/ramadan/local/ar.js b/view/molistar/activity/ramadan/local/ar.js index cbe33396..4acfc59b 100644 --- a/view/molistar/activity/ramadan/local/ar.js +++ b/view/molistar/activity/ramadan/local/ar.js @@ -50,7 +50,14 @@ langAr = { text43: `عشاء فاخر(3/30)`, text44: `لم يحن وقت الإجابة بعد`, text45: `./images/rewardsPage3-ar.png`, - text46: ``, + text60: `تنبيه`, + text61: `يتطلب إرسال تهنئة رمضان 77 ماسة. هل أنت متأكد أنك تريد إرسالها؟`, + text62: `إلغاء`, + text63: `تأكيد`, + text64: `تهنئة رمضان`, + text65: `رمضان مبارك`, + text66: `إرسال`, + text67: `في كل مرة ترسل فيها تهنئة، سيتم خصم 77 عملة`, } } \ No newline at end of file diff --git a/view/molistar/activity/ramadan/local/en.js b/view/molistar/activity/ramadan/local/en.js index aed46275..76c4bf5c 100644 --- a/view/molistar/activity/ramadan/local/en.js +++ b/view/molistar/activity/ramadan/local/en.js @@ -55,6 +55,13 @@ langEn = { text43: `Fancy Dinner(3/30)`, text44: `It is not yet time to answer`, text45: `./images/rewardsPage3.png`, - text46: ``, + text60: `Tip`, + text61: `It costs 77 diamonds to send a Ramadan Blessing. Are you sure you want to send it?`, + text62: `Cancel`, + text63: `Confirm`, + text64: `Ramadan Blessings`, + text65: `Happy Ramadan`, + text66: `Send`, + text67: `Each time you send a blessing, it will consume 77 coins`, } } \ No newline at end of file diff --git a/view/molistar/activity/ramadan/local/tr.js b/view/molistar/activity/ramadan/local/tr.js index 307b92bc..9d640b63 100644 --- a/view/molistar/activity/ramadan/local/tr.js +++ b/view/molistar/activity/ramadan/local/tr.js @@ -50,7 +50,14 @@ langTr = { text43: `Şık Akşam Yemeği(3/30)`, text44: `Yanıt verme zamanı henüz gelmedi`, text45: `./images/rewardsPage3-tr.png`, - text46: ``, + text60: `İpucu`, + text61: `Ramazan Bereketi göndermek 77 elmas gerektirir. Göndermek istediğinizden emin misiniz?`, + text62: `İptal`, + text63: `Onayla`, + text64: `Ramazan Kutlamaları`, + text65: `Mutlu Ramazanlar`, + text66: `Gönder`, + text67: `Her kutlama gönderdiğinizde 77 jeton harcanacaktır`, } } \ No newline at end of file diff --git a/view/molistar/activity/ramadan/local/zh.js b/view/molistar/activity/ramadan/local/zh.js index 382a1de3..55041afc 100644 --- a/view/molistar/activity/ramadan/local/zh.js +++ b/view/molistar/activity/ramadan/local/zh.js @@ -50,7 +50,14 @@ langZh = { text43: `丰盛晚餐(3/30)`, text44: `还未到答题时间`, text45: `./images/rewardsPage3.png`, - text46: ``, + text60: `提示`, + text61: `發送齋月祝福需要 77 顆鑽石。您確定要發送嗎？`, + text62: `取消`, + text63: `確認`, + text64: `齋月祝福`, + text65: `齋月快樂`, + text66: `發送`, + text67: `每次發送祝福都會消耗77枚硬幣`, }