完成ss公会活动

This commit is contained in:
dragon
2024-09-03 18:56:37 +08:00
parent 6371686a08
commit 3d47b18f9d
34 changed files with 364 additions and 34 deletions

View File

@@ -44,6 +44,23 @@ body::-webkit-scrollbar {
padding-top: 8.46667rem;
}
.header .actTime {
width: 7.06667rem;
height: 0.77333rem;
line-height: 0.77333rem;
text-align: center;
color: #FFEDC1;
font-size: 0.37333rem;
font-weight: 500;
background: linear-gradient(0deg, #152738, #0F5881);
border-radius: 0.77333rem;
border: 0.04rem solid #FFDFB2;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5.21333rem;
}
.header .time {
width: 7.6rem;
height: 1.89333rem;
@@ -92,6 +109,8 @@ body::-webkit-scrollbar {
font-size: 0.34667rem;
font-weight: 400;
line-height: 0.49rem;
position: relative;
z-index: 2;
}
.header .tab {
@@ -558,3 +577,53 @@ body::-webkit-scrollbar {
.bootomTextPage1 {
margin-bottom: 2.8rem;
}
.english {
background: url(../images/header-en.png) no-repeat;
background-size: 100% 100%;
}
.arabic {
background: url(../images/header-ar.png) no-repeat;
background-size: 100% 100%;
}
.arabic .page1 .my .grade {
float: left;
}
.arabic .page1 .my .num {
float: right;
margin-right: 0;
margin-left: 0.50667rem;
}
.arabic .page1 .my .tx {
float: right;
margin-left: 0.42667rem;
margin-right: 0;
}
.arabic .page1 .my .user {
float: right;
}
.arabic .page1 ul li .grade {
float: left;
}
.arabic .page1 ul li .num {
float: right;
margin-right: 0;
margin-left: 0.50667rem;
}
.arabic .page1 ul li .tx {
float: right;
margin-left: 0.42667rem;
margin-right: 0;
}
.arabic .page1 ul li .user {
float: right;
}

View File

@@ -46,6 +46,23 @@ body {
box-sizing: border-box;
padding-top: px2rem(635);
.actTime {
width: px2rem(530);
height: px2rem(58);
line-height: px2rem(58);
text-align: center;
color: #FFEDC1;
font-size: px2rem(28);
font-weight: 500;
background: linear-gradient(0deg, #152738, #0F5881);
border-radius: px2rem(58);
border: px2rem(3) solid #FFDFB2;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(391);
}
.time {
width: px2rem(570);
height: px2rem(142);
@@ -94,6 +111,8 @@ body {
font-size: px2rem(26);
font-weight: 400;
line-height: 0.49rem;
position: relative;
z-index: 2;
}
.tab {
@@ -565,4 +584,58 @@ body {
.bootomTextPage1 {
margin-bottom: px2rem(210);
}
.english {
background: url(../images/header-en.png) no-repeat;
background-size: 100% 100%;
}
.arabic {
background: url(../images/header-ar.png) no-repeat;
background-size: 100% 100%;
.page1 .my {
.grade {
float: left;
}
.num {
float: right;
margin-right: 0;
margin-left: 0.50667rem;
}
.tx {
float: right;
margin-left: 0.42667rem;
margin-right: 0;
}
.user {
float: right;
}
}
.page1 ul li {
.grade {
float: left;
}
.num {
float: right;
margin-right: 0;
margin-left: 0.50667rem;
}
.tx {
float: right;
margin-left: 0.42667rem;
margin-right: 0;
}
.user {
float: right;
}
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 339 KiB

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 549 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 554 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 554 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 180 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 181 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 262 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 996 KiB

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 237 KiB

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="text1">SS Guild Conpetition</title>
<title class="text1"></title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
@@ -16,34 +16,34 @@
</div>
<!-- 头部 -->
<div class="header">
<!-- 活动时间 -->
<div class="actTime"><span class="text2"></span><b></b></div>
<!-- 倒计时 -->
<div class="time">
<div class="day">
<b>00</b>
<span>Day</span>
<span class="text3"></span>
</div>
<div class="hour">
<b>00</b>
<span>Hour</span>
<span class="text4"></span>
</div>
<div class="min">
<b>00</b>
<span>Min</span>
<span class="text5"></span>
</div>
<div class="sec">
<b>00</b>
<span>Sec</span>
<span class="text6"></span>
</div>
</div>
<!-- 文字内容 -->
<div class="content">Each guild will compete for guild honors by completing specific tasks and challenges to
receive a specified ability value for hosting an event within 30 days to earn entries. These honors will be
displayed in the ranking list and on the anchor's homepage.
<div class="content text7">
</div>
<!-- tab切换 -->
<div class="tab">
<div class="act">Guild</div>
<div>Mine</div>
<div class="act text8"></div>
<div class="text9"></div>
</div>
</div>
<!-- 页面1 -->
@@ -53,28 +53,28 @@
<div class="no1">
<img src="./images/tsBig.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<div class="name">虚位以待</div>
<div class="id">ID:0</div>
<div class="name"></div>
<div class="id"></div>
<img src="./images/SS.png" alt="" class="grade">
</div>
<div class="no2">
<img src="./images/ts.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<div class="name">虚位以待</div>
<div class="id">ID:0</div>
<div class="name"></div>
<div class="id"></div>
<img src="./images/SS.png" alt="" class="grade">
</div>
<div class="no3">
<img src="./images/ts.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<div class="name">虚位以待</div>
<div class="id">ID:0</div>
<div class="name"></div>
<div class="id"></div>
<img src="./images/SS.png" alt="" class="grade">
</div>
</div>
<!-- 非前三 -->
<ul>
<li>
<!-- <li>
<div class="num">04</div>
<img src="./images/null.png" alt="" class="tx">
<div class="user">
@@ -82,17 +82,17 @@
<b>ID:0</b>
</div>
<img src="./images/SS.png" alt="" class="grade">
</li>
</li> -->
</ul>
<!-- 规则 -->
<img src="./images/page1Rule.png" alt="" class="rule">
<img src="./images/page1Rule.png" alt="" class="rule img1">
<!-- 自己 -->
<div class="my">
<div class="num">04</div>
<img src="./images/null.png" alt="" class="tx">
<div class="user">
<p>虚位以待</p>
<b>ID:0</b>
<p></p>
<b></b>
</div>
<img src="./images/SS.png" alt="" class="grade">
</div>
@@ -103,17 +103,17 @@
<img src="./images/page2Ts.png" alt="" class="ts">
<img src="./images/null.png" alt="" class="tx">
<img src="./images/SS.png" alt="" class="leve">
<p><span>Guild Nickname:</span><b>名字</b></p>
<p><span>Guild ID:</span><b>0</b></p>
<p><span>Anchor Nickname:</span><b>名字</b></p>
<p><span>Anchor ID:</span><b>0</b></p>
<p><span>My Diamond Flow:</span><b>0</b></p>
<p><span>Available Reward Gold:</span><b>0</b></p>
<p class="p1"><span class=" text10"></span><b>名字</b></p>
<p class="p2"><span class=" text11"></span><b>0</b></p>
<p class="p3"><span class=" text12"></span><b>名字</b></p>
<p class="p4"><span class=" text13"></span><b>0</b></p>
<p class="p5"><span class=" text14"></span><b>0</b></p>
<p class="p6"><span class=" text15"></span><b>0</b></p>
</div>
<img src="./images/page2Rule.png" alt="" class="rule">
<img src="./images/page2Rule.png" alt="" class="rule img2">
</div>
<!-- 免责声明 -->
<div class="bootomText bootomTextPage1">This activity has nothing to do with apple</div>
<div class="bootomText bootomTextPage1 text16"></div>
</body>
</html>

View File

@@ -65,7 +65,24 @@ $(function () {
function translateFun() {
var langReplace = window.lang.replace;
var localLang = window.lang;
// $('.text1').text(langReplace(localLang.demoModule.text1));
$('.text1').text(langReplace(localLang.demoModule.text1));
$('.text2').text(langReplace(localLang.demoModule.text2));
$('.text3').text(langReplace(localLang.demoModule.text3));
$('.text4').text(langReplace(localLang.demoModule.text4));
$('.text5').text(langReplace(localLang.demoModule.text5));
$('.text6').text(langReplace(localLang.demoModule.text6));
$('.text7').text(langReplace(localLang.demoModule.text7));
$('.text8').text(langReplace(localLang.demoModule.text8));
$('.text9').text(langReplace(localLang.demoModule.text9));
$('.text10').text(langReplace(localLang.demoModule.text10));
$('.text11').text(langReplace(localLang.demoModule.text11));
$('.text12').text(langReplace(localLang.demoModule.text12));
$('.text13').text(langReplace(localLang.demoModule.text13));
$('.text14').text(langReplace(localLang.demoModule.text14));
$('.text15').text(langReplace(localLang.demoModule.text15));
$('.text16').text(langReplace(localLang.demoModule.text16));
$('.img1').attr('src', langReplace(localLang.demoModule.img1));
$('.img2').attr('src', langReplace(localLang.demoModule.img2));
}
// 配置接口
function getConfig() {
@@ -76,6 +93,79 @@ function getConfig() {
data: { uid: pubInfo.uid },
success(res) {
if (res.code === 200) {
// 倒计时
countup(res.data.monthEndTime - res.timestamp);
// 处理时间
$('.header .actTime b').text(`${res.data.startDate}-${res.data.startDate}`);
// 渲染排名
var listTo3 = res.data.rankList.slice(0, 3);
var notListTo3 = res.data.rankList.slice(3);
if (listTo3.length < 3) {
let arr = new Array(3 - listTo3.length).fill({
avatar: './images/null.png',
guildName: '虚位以待',
ownerErbanNo: '0',
markScore: null
})
listTo3.push(...arr)
}
// 前三
listTo3.forEach((res, i) => {
$(`.page1 .cloud .no${i + 1} .tx`).attr('src', res.avatar);
if (res.markScore == null) {
$(`.page1 .cloud .no${i + 1} .grade`).hide();
} else {
$(`.page1 .cloud .no${i + 1} .grade`).attr('src', `./images/${res.markScore}.png`);
}
$(`.page1 .cloud .no${i + 1} .name`).text(res.guildName);
$(`.page1 .cloud .no${i + 1} .id`).text(res.ownerErbanNo == 0 ? '' : 'ID:' + res.ownerErbanNo);
})
// 非前三
var str = '';
notListTo3.forEach(res => {
str += `
<li>
<div class="num">${res.rank}</div>
<img src="${res.avatar}" alt="" class="tx">
<div class="user">
<p>${res.guildName}</p>
<b>ID:${res.ownerErbanNo}</b>
</div>
<img style="display:${res.ssLevel == 0 ? 'none' : 'block'}" src="./images/${res.markScore}.png" alt="" class="grade">
</li>
`
})
$('.page1 ul').append(str);
// 处理自己
var me = res.data.selfRank;
$('.page1 .my .num').text(me.rank == 0 ? '30+' : me.rank);
$('.page1 .my .tx').attr('src', me.avatar);
if (me.ssLevel == 0) {
$('.page1 .my .grade').hide();
} else {
$('.page1 .my .grade').attr('src', `./images/${me.markScore}.png`);
}
$('.page1 .my .user p').text(me.guildName);
$('.page1 .my .user b').text(me.guildName.ownerErbanNo);
// 判断是否是主播
if (res.data.selfRank) {
var memberVo = res.data.memberVo;
$('.page2 .my .tx').text('src', memberVo.avatar);
if (memberVo.ssLevel == 0) {
$('.page2 .my .live').hide();
} else {
$('.page2 .my .live').text('src', `./images/${memberVo.avatar}.png`);
}
$('.page2 .my .p1 b').text(memberVo.guildName);
$('.page2 .my .p2 b').text(memberVo.ownerErbanNo);
$('.page2 .my .p3 b').text(memberVo.nick);
$('.page2 .my .p4 b').text(memberVo.erbanNo);
$('.page2 .my .p5 b').text(memberVo.diamondNum);
$('.page2 .my .p6 b').text(memberVo.goldNum);
} else {
$('.header .tab').hide();
$('.page1 .cloud').css('margin', '-19.2rem auto -2.6rem');
}
} else {
toastMsg(res.message)
}
@@ -87,3 +177,49 @@ function getConfig() {
}
})
}
// 切换tab
$('.header .tab div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('act').siblings().removeClass('act')
$('.page1,.page2').hide();
$(`.page${i}`).show();
})
// 倒計時
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中
$('.time .day b').text(d);
$('.time .hour b').text(h);
$('.time .min b').text(m);
$('.time .sec b').text(s);
} else {
location.reload();
}
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

@@ -5,6 +5,23 @@ langAr = {
layerIndex1: `جار التحميل...`,
layerIndex2: `نجاح`,
layerIndex3: `خطأ في الشبكة`,
text1: `مسابقة نقابة SS`,
text2: `وقت النشاط:`,
text3: `يوم`,
text4: `ساعة`,
text5: `دقيقة`,
text6: `ثانية`,
text7: `ستتنافس كل نقابة على شرف النقابة من خلال إتمام مهام وتحديات محددة للحصول على قيمة قدرة معينة لاستضافة حدث خلال 30 يومًا لكسب المشاركات. سيتم عرض هذه الأوسمة في قائمة الترتيب وعلى الصفحة الرئيسية للمضيف.`,
text8: `نقابة`,
text9: `خاصتي`,
text10: `لقب النقابة:`,
text11: `معرف النقابة:`,
text12: `لقب المضيف:`,
text13: `معرف المضيف:`,
text14: `تدفق الماس الخاص بي:`,
text15: `ذهب المكافآت المتاح:`,
text16: `هذا النشاط ليس له علاقة بالتفاح`,
img1: `./images/page1Rule-ar.png`,
img2: `./images/page2Rule-ar.png`,
}
}
}

View File

@@ -3,6 +3,24 @@ langEn = {
layerIndex1: `Loading...`,
layerIndex2: `Success`,
layerIndex3: `Network error`,
text1: `SS Guild Conpetition`,
text2: `Activity Time:`,
text3: `Day`,
text4: `Hour`,
text5: `Min`,
text6: `Sec`,
text7: `Each guild will compete for guild honors by completing specific tasks and challenges to receive a specified ability value for hosting an event within 30 days to earn entries. These honors will be
displayed in the ranking list and on the anchor's homepage.`,
text8: `Guild`,
text9: `Mine`,
text10: `Guild Nick:`,
text11: `Guild ID:`,
text12: `Anchor Nick:`,
text13: `Anchor ID:`,
text14: `My Diamond Flow:`,
text15: `Available Reward Gold:`,
text16: `This activity has nothing to do with apple`,
img1: `./images/page1Rule-en.png`,
img2: `./images/page2Rule-en.png`,
}
}

View File

@@ -5,6 +5,23 @@ langZh = {
layerIndex1: `加載中...`,
layerIndex2: `成功`,
layerIndex3: `網絡錯誤`,
text1: `SS公会比赛`,
text2: `活动时间:`,
text3: ``,
text4: `小时`,
text5: `分钟`,
text6: ``,
text7: `每个公会将通过完成特定任务和挑战来争夺公会荣誉以获得在30天内举办活动的指定能力值从而获得参赛资格。这些荣誉将显示在排名列表和主播的主页上。`,
text8: `公会`,
text9: `我的`,
text10: `公会昵称:`,
text11: `公会ID`,
text12: `主播昵称:`,
text13: `主播ID`,
text14: `我的钻石流量:`,
text15: `可用奖励金币:`,
text16: `此活动与苹果无关`,
img1: `./images/page1Rule.png`,
img2: `./images/page2Rule.png`,
}
}