moliparty/moliparty-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善SVGA和MP4以及奖励

Browse Source
This commit is contained in:
dragon
2024-08-30 14:25:51 +08:00
parent 39c7108646
commit 1b99dc0a90
32 changed files with 590 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
view/molistar/activity/rechargeNew/css/index.css
View File

@@ -235,11 +235,43 @@ body {
background-size: 100% 100%;
}
.recharge10 .content img {
.recharge10 .content .rewardImg {
display: block;
width: 9.06667rem;
height: 3.38667rem;
height: 8.26667rem;
margin: 0 auto 0;
background: url(../images/recharge10.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.recharge10 .content .rewardImg .ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.8rem;
}
.recharge10 .content .rewardImg .ts canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge10 .content .rewardImg .zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.2rem;
}
.recharge10 .content .rewardImg .zj canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge100 {
@@ -306,11 +338,43 @@ body {
background-size: 100% 100%;
}
.recharge100 .content img {
.recharge100 .content .rewardImg {
display: block;
width: 9.06667rem;
height: 3.38667rem;
height: 8.26667rem;
margin: 0 auto 0;
background: url(../images/recharge100.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.recharge100 .content .rewardImg .ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.8rem;
}
.recharge100 .content .rewardImg .ts canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge100 .content .rewardImg .zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.2rem;
}
.recharge100 .content .rewardImg .zj canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge300 {
@@ -380,8 +444,40 @@ body {
.recharge300 .content .rewardImg {
display: block;
width: 9.06667rem;
height: 9.76rem;
height: 9.53333rem;
margin: 0 auto 0;
background: url(../images/recharge300.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.recharge300 .content .rewardImg .ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.2rem;
}
.recharge300 .content .rewardImg .ts canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge300 .content .rewardImg .zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.87rem;
}
.recharge300 .content .rewardImg .zj canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge300 .content .topTitle {
@@ -527,6 +623,38 @@ body {
width: 9.06667rem;
height: 9.76rem;
margin: 0 auto 0;
background: url(../images/recharge500.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.recharge500 .content .rewardImg .ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.2rem;
}
.recharge500 .content .rewardImg .ts canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge500 .content .rewardImg .zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.2rem;
}
.recharge500 .content .rewardImg .zj canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge500 .content .topTitle {
@@ -672,6 +800,38 @@ body {
width: 9.06667rem;
height: 9.76rem;
margin: 0 auto 0;
background: url(../images/recharge1000.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.recharge1000 .content .rewardImg .ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.2rem;
}
.recharge1000 .content .rewardImg .ts canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge1000 .content .rewardImg .zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.95rem;
}
.recharge1000 .content .rewardImg .zj canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge1000 .content .topTitle {
@@ -815,8 +975,35 @@ body {
.recharge3000 .content .rewardImg {
display: block;
width: 9.06667rem;
height: 14.66667rem;
height: 17.54667rem;
margin: 0 auto 0;
background: url(../images/recharge3000.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.recharge3000 .content .rewardImg .ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
left: 1.6rem;
top: 11.1rem;
}
.recharge3000 .content .rewardImg .ts canvas {
position: absolute;
left: 0;
top: 0;
}
.recharge3000 .content .rewardImg .bo {
width: 0.69333rem;
height: 0.69333rem;
position: absolute;
top: 6.53333rem;
right: 2rem;
z-index: 2;
}
.recharge3000 .content .topTitle {
@@ -986,6 +1173,34 @@ body {
font-weight: 400;
}
.video {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
display: none;
}
.video video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 65%;
}
.video .close {
width: 0.90667rem;
height: 0.90667rem;
position: absolute;
top: 10%;
right: 0.93333rem;
z-index: 9;
}
.arabic .back img {
left: auto;
right: 0.24rem;
@@ -1009,3 +1224,33 @@ body {
margin-right: 0;
margin-left: 0.62667rem;
}
.arabic .recharge10 .content .rewardImg {
background: url(../images/recharge10-ar.png) no-repeat;
background-size: 100% 100%;
}
.arabic .recharge100 .content .rewardImg {
background: url(../images/recharge100-ar.png) no-repeat;
background-size: 100% 100%;
}
.arabic .recharge300 .content .rewardImg {
background: url(../images/recharge300-ar.png) no-repeat;
background-size: 100% 100%;
}
.arabic .recharge500 .content .rewardImg {
background: url(../images/recharge500-ar.png) no-repeat;
background-size: 100% 100%;
}
.arabic .recharge1000 .content .rewardImg {
background: url(../images/recharge1000-ar.png) no-repeat;
background-size: 100% 100%;
}
.arabic .recharge3000 .content .rewardImg {
background: url(../images/recharge3000-ar.png) no-repeat;
background-size: 100% 100%;
}

257
view/molistar/activity/rechargeNew/css/index.scss
View File

@@ -237,11 +237,43 @@ body {
background: url(../images/bgCentent.png) no-repeat;
background-size: 100% 100%;
img {
.rewardImg {
display: block;
width: px2rem(680);
height: px2rem(254);
height: px2rem(620);
margin: 0 auto 0;
background: url(../images/recharge10.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
.ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.8rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
.zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.2rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
}
}
}
@@ -308,11 +340,43 @@ body {
background: url(../images/bgCentent.png) no-repeat;
background-size: 100% 100%;
img {
.rewardImg {
display: block;
width: px2rem(680);
height: px2rem(254);
height: px2rem(620);
margin: 0 auto 0;
background: url(../images/recharge100.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
.ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.8rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
.zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.2rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
}
}
}
@@ -382,8 +446,40 @@ body {
.rewardImg {
display: block;
width: px2rem(680);
height: px2rem(732);
height: px2rem(715);
margin: 0 auto 0;
background: url(../images/recharge300.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
.ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.2rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
.zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.87rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
}
.topTitle {
@@ -535,6 +631,38 @@ body {
width: px2rem(680);
height: px2rem(732);
margin: 0 auto 0;
background: url(../images/recharge500.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
.ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.2rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
.zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.2rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
}
.topTitle {
@@ -686,6 +814,38 @@ body {
width: px2rem(680);
height: px2rem(732);
margin: 0 auto 0;
background: url(../images/recharge1000.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
.ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
right: 1.1rem;
top: 0.2rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
.zj {
width: 3.75rem;
height: 7.37rem;
position: absolute;
left: 1.1rem;
top: 0.95rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
}
.topTitle {
@@ -835,8 +995,35 @@ body {
.rewardImg {
display: block;
width: px2rem(680);
height: px2rem(1100);
height: px2rem(1316);
margin: 0 auto 0;
background: url(../images/recharge3000.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
.ts {
width: 2.2rem;
height: 2.2rem;
position: absolute;
left: 1.6rem;
top: 11.1rem;
canvas {
position: absolute;
left: 0;
top: 0;
}
}
.bo {
width: px2rem(52);
height: px2rem(52);
position: absolute;
top: px2rem(490);
right: px2rem(150);
z-index: 2;
}
}
.topTitle {
@@ -1014,6 +1201,34 @@ body {
font-weight: 400;
}
.video {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .5);
z-index: 99;
display: none;
video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 65%;
}
.close {
width: px2rem(68);
height: px2rem(68);
position: absolute;
top: 10%;
right: px2rem(70);
z-index: 9;
}
}
.arabic {
.back img {
left: auto;
@@ -1038,4 +1253,34 @@ body {
margin-right: 0;
margin-left: 0.62667rem;
}
.recharge10 .content .rewardImg {
background: url(../images/recharge10-ar.png) no-repeat;
background-size: 100% 100%;
}
.recharge100 .content .rewardImg {
background: url(../images/recharge100-ar.png) no-repeat;
background-size: 100% 100%;
}
.recharge300 .content .rewardImg {
background: url(../images/recharge300-ar.png) no-repeat;
background-size: 100% 100%;
}
.recharge500 .content .rewardImg {
background: url(../images/recharge500-ar.png) no-repeat;
background-size: 100% 100%;
}
.recharge1000 .content .rewardImg {
background: url(../images/recharge1000-ar.png) no-repeat;
background-size: 100% 100%;
}
.recharge3000 .content .rewardImg {
background: url(../images/recharge3000-ar.png) no-repeat;
background-size: 100% 100%;
}
}

BIN
view/molistar/activity/rechargeNew/images/bo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge10-ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge10.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge100-ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge100.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge1000-ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge1000.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 458 KiB

After

Width:  |  Height:  |  Size: 81 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge300-ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge300.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 461 KiB

After

Width:  |  Height:  |  Size: 79 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge3000-ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 643 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge3000.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 376 KiB

After

Width:  |  Height:  |  Size: 641 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge500-ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
view/molistar/activity/rechargeNew/images/recharge500.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 458 KiB

After

Width:  |  Height:  |  Size: 77 KiB

40
view/molistar/activity/rechargeNew/index.html
View File

@@ -51,7 +51,10 @@
<div class="title text9"></div>
</div>
<div class="content">
<img src="./images/recharge10.png" alt="">
<div class="rewardImg">
<div class="ts" id="ts10"></div>
<div class="zj" id="zj10"></div>
</div>
</div>
<div class="bottom">
<div class="but text10"></div>
@@ -63,7 +66,10 @@
<div class="title text11"></div>
</div>
<div class="content">
<img src="./images/recharge10.png" alt="">
<div class="rewardImg">
<div class="ts" id="ts100"></div>
<div class="zj" id="zj100"></div>
</div>
</div>
<div class="bottom">
<div class="but text10"></div>
@@ -76,7 +82,10 @@
</div>
<div class="content">
<!-- 奖励图片 -->
<img src="./images/recharge300.png" alt="" class="rewardImg">
<div class="rewardImg">
<div class="ts" id="ts300"></div>
<div class="zj" id="zj300"></div>
</div>
<!-- 前三标题 -->
<div class="topTitle">
<img src="./images/left.png" alt="" class="left">
@@ -110,7 +119,10 @@
</div>
<div class="content">
<!-- 奖励图片 -->
<img src="./images/recharge500.png" alt="" class="rewardImg">
<div class="rewardImg">
<div class="ts" id="ts500"></div>
<div class="zj" id="zj500"></div>
</div>
<!-- 前三标题 -->
<div class="topTitle">
<img src="./images/left.png" alt="" class="left">
@@ -144,7 +156,10 @@
</div>
<div class="content">
<!-- 奖励图片 -->
<img src="./images/recharge1000.png" alt="" class="rewardImg">
<div class="rewardImg">
<div class="ts" id="ts1000"></div>
<div class="zj" id="zj1000"></div>
</div>
<!-- 前三标题 -->
<div class="topTitle">
<img src="./images/left.png" alt="" class="left">
@@ -178,11 +193,14 @@
</div>
<div class="content">
<!-- 奖励图片 -->
<img src="./images/recharge3000.png" alt="" class="rewardImg">
<div class="rewardImg">
<div class="ts" id="ts3000"></div>
<img src="./images/bo.png" alt="" class="bo">
</div>
<!-- 前三标题 -->
<div class="topTitle">
<img src="./images/left.png" alt="" class="left">
<b>Top 3 Winner</b>
<b class="text26"></b>
<img src="./images/right.png" alt="" class="right">
</div>
<!-- 前三信息 -->
@@ -223,6 +241,13 @@
<!-- 免责声明 -->
<div class="disclaimer text24"></div>
<div class="video">
<video id="zjVideo" controls>
<source src="./mp4/3000.mp4" type="video/mp4">
</video>
<img src="./images/close.png" alt="" class="close">
</div>
</body>
</html>
@@ -232,6 +257,7 @@
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="./local/en.js"></script>
<script src="./local/zh.js"></script>
<script src="./local/ar.js"></script>

56
view/molistar/activity/rechargeNew/js/index.js
View File

@@ -60,7 +60,33 @@ $(function () {
translateFun();
getConfig();
}, 100)
})
// 处理SVGA
document.addEventListener('DOMContentLoaded', function () {
function loadSVGA(containerId, svgaPath) {
var container = document.getElementById(containerId);
var player = new SVGA.Player(container);
var parser = new SVGA.Parser();
parser.load(svgaPath, function (videoItem) {
player.setVideoItem(videoItem);
player.startAnimation();
});
}
loadSVGA('ts10', './svga/10.svga');
loadSVGA('ts100', './svga/100.svga');
loadSVGA('ts300', './svga/300.svga');
loadSVGA('ts500', './svga/500.svga');
loadSVGA('ts1000', './svga/1000.svga');
loadSVGA('ts3000', './svga/3000.svga');
loadSVGA('zj10', './svga/zj10.svga');
loadSVGA('zj100', './svga/zj100.svga');
loadSVGA('zj300', './svga/zj300.svga');
loadSVGA('zj500', './svga/zj500.svga');
loadSVGA('zj1000', './svga/zj1000.svga');
});
function translateFun() {
var langReplace = window.lang.replace;
var localLang = window.lang;
@@ -80,9 +106,10 @@ function translateFun() {
$('.text14').text(langReplace(localLang.demoModule.text14));
$('.text15').text(langReplace(localLang.demoModule.text15));
$('.text16').text(langReplace(localLang.demoModule.text16));
if(browser.android){
$('.text26').text(langReplace(localLang.demoModule.text26));
if (browser.android) {
$('.text24').text(langReplace(localLang.demoModule.text25))
}else{
} else {
$('.text24').text(langReplace(localLang.demoModule.text24))
}
}
@@ -116,7 +143,7 @@ function getConfig() {
} else {
$(`.recharge${i + 1} .bottom .but`).attr('click', 0);
$(`.recharge${i + 1} .bottom .but`).removeClass('act');
$(`.recharge${i+1} .bottom .but`).text(langReplace(localLang.demoModule.text23));
$(`.recharge${i + 1} .bottom .but`).text(langReplace(localLang.demoModule.text23));
}
// 处理前三
if (wealth > limitWealth) {
@@ -251,4 +278,25 @@ $('.recharges .bottom .but').click(function () {
}
})
}
})
})
// 打开mp4弹窗
$('.recharge3000 .content .rewardImg .bo').click(function () {
var video = document.getElementById('zjVideo');
video.play();
bodyScroolFun(true);
$('.video').show();
})
// 关闭mp4弹窗
$('.video .close').click(function () {
var video = document.getElementById('zjVideo');
video.pause();
bodyScroolFun(false);
$('.video').hide();
})
// 监听播放完毕事件
var video = document.getElementById('zjVideo');
video.addEventListener('ended', function () {
video.pause();
bodyScroolFun(false);
$('.video').hide();
});

1
view/molistar/activity/rechargeNew/local/ar.js
View File

@@ -39,5 +39,6 @@ langAr = {
text23: `تم استلامه`,
text24: `هذا الحدث غير مرتبط بشركة أبل.`,
text25: `هذا الحدث غير مرتبط بشركة جوجل.`,
text26: `أفضل 3 فائزين`,
}
}

1
view/molistar/activity/rechargeNew/local/en.js
View File

@@ -37,5 +37,6 @@ langEn = {
text23: `Received`,
text24: `This event is not related to Apple.`,
text25: `This event is not related to Google.`,
text26: `Top 3 Winner`,
}
}

1
view/molistar/activity/rechargeNew/local/zh.js
View File

@@ -39,5 +39,6 @@ langZh = {
text23: `已领取`,
text24: `本活动与苹果无关`,
text25: `本活动与谷歌无关`,
text26: `前3名获奖者`,
}
}

BIN
view/molistar/activity/rechargeNew/mp4/3000.mp4 Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/10.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/100.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/1000.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/300.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/3000.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/500.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/zj10.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/zj100.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/zj1000.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/zj300.svga Normal file
View File

Binary file not shown.

BIN
view/molistar/activity/rechargeNew/svga/zj500.svga Normal file
View File

Binary file not shown.