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

修改样式

Browse Source
This commit is contained in:
dragon
2025-01-10 16:23:18 +08:00
parent 340964fd65
commit 3239ed337c
20 changed files with 173 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
view/molistar/modules/newRank/css/index.css
View File

@@ -131,7 +131,7 @@ body {
}
.header .monthlyRewards {
width: 2.81333rem;
width: 3.46667rem;
height: 3.86667rem;
z-index: 3;
position: absolute;
@@ -188,7 +188,7 @@ body {
.header .top .top1 .tx {
width: 2.77333rem;
height: 2.77333rem;
height: 2.74667rem;
position: absolute;
top: 1.89333rem;
left: 50%;
@@ -291,7 +291,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.04rem;
top: 3.01333rem;
z-index: 3;
}
@@ -305,7 +305,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.36rem;
top: 3.38667rem;
text-align: center;
display: flex;
justify-content: center;
@@ -359,7 +359,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.04rem;
top: 3.01333rem;
z-index: 3;
}
@@ -373,7 +373,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.36rem;
top: 3.38667rem;
text-align: center;
display: flex;
justify-content: center;
@@ -401,11 +401,23 @@ body {
background-size: 100% 14.26667rem;
}
.header3 .top .top1 .tx,
.header3 .top .top2 .tx,
.header3 .top .top3 .tx {
border-radius: 0;
}
.header4 {
background: url(../images/header4.png) no-repeat;
background-size: 100% 14.26667rem;
}
.header4 .top .top1 .tx,
.header4 .top .top2 .tx,
.header4 .top .top3 .tx {
border-radius: 0;
}
ul {
width: 10rem;
position: relative;
@@ -452,6 +464,7 @@ ul li .tx {
margin-left: 1.94667rem;
margin-right: 0.24rem;
margin-top: 0.41333rem;
border: 0.02667rem solid #FFF8C2;
}
ul li .nick {
@@ -489,6 +502,11 @@ ul li .score b {
vertical-align: middle;
}
.ul3 li .tx,
.ul4 li .tx {
border-radius: 0.24rem;
}
.my {
width: 10rem;
height: 2rem;

51
view/molistar/modules/newRank/css/index.scss
View File

@@ -136,7 +136,7 @@ body {
}
.monthlyRewards {
width: px2rem(211);
width: px2rem(260);
height: px2rem(290);
z-index: 3;
position: absolute;
@@ -194,7 +194,7 @@ body {
.tx {
width: px2rem(208);
height: px2rem(208);
height: px2rem(206);
position: absolute;
top: px2rem(142);
left: 50%;
@@ -298,7 +298,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(228);
top: px2rem(226);
z-index: 3;
}
@@ -312,7 +312,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(252);
top: px2rem(254);
text-align: center;
display: flex;
justify-content: center;
@@ -367,7 +367,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(228);
top: px2rem(226);
z-index: 3;
}
@@ -381,7 +381,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(252);
top: px2rem(254);
text-align: center;
display: flex;
justify-content: center;
@@ -430,11 +430,33 @@ body {
.header3 {
background: url(../images/header3.png) no-repeat;
background-size: 100% px2rem(1070);
.top {
.top1,
.top2,
.top3 {
.tx {
border-radius: 0;
}
}
}
}
.header4 {
background: url(../images/header4.png) no-repeat;
background-size: 100% px2rem(1070);
.top {
.top1,
.top2,
.top3 {
.tx {
border-radius: 0;
}
}
}
}
ul {
@@ -482,6 +504,7 @@ ul {
margin-left: px2rem(146);
margin-right: px2rem(18);
margin-top: px2rem(31);
border: px2rem(2) solid #FFF8C2;
}
.nick {
@@ -530,14 +553,14 @@ ul {
// background: linear-gradient(180deg, #B6CDFF -57%, #FEFEFE 90%);
// }
// .ul3 {
// background: linear-gradient(180deg, #FABBBB -57%, #FEF9F9 90%);
// }
// .ul4 {
// background: linear-gradient(180deg, #FFC6F5 -57%, #F9F7F9 90%);
// margin-bottom: 0;
// }
.ul3,
.ul4 {
li {
.tx {
border-radius: px2rem(18);
}
}
}
.my {
width: px2rem(750);

24
view/molistar/modules/newRank/css/monthlyRewards.css
View File

@@ -162,7 +162,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 4.44rem;
top: 4.61333rem;
z-index: 3;
font-weight: 500;
}
@@ -246,7 +246,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.04rem;
top: 3.01333rem;
z-index: 3;
}
@@ -260,7 +260,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.36rem;
top: 3.38667rem;
text-align: center;
display: flex;
justify-content: center;
@@ -314,7 +314,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.04rem;
top: 3.01333rem;
z-index: 3;
}
@@ -328,7 +328,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.36rem;
top: 3.38667rem;
text-align: center;
display: flex;
justify-content: center;
@@ -352,11 +352,23 @@ body {
}
.header3 {
background: url(../images/header4.png) no-repeat;
background: url(../images/header3.png) no-repeat;
background-size: 100% 14.26667rem;
}
.header3 .top .top1 .tx,
.header3 .top .top2 .tx,
.header3 .top .top3 .tx {
border-radius: 0;
}
.header4 {
background: url(../images/header4.png) no-repeat;
background-size: 100% 14.26667rem;
}
.header4 .top .top1 .tx,
.header4 .top .top2 .tx,
.header4 .top .top3 .tx {
border-radius: 0;
}

36
view/molistar/modules/newRank/css/monthlyRewards.scss
View File

@@ -109,7 +109,7 @@ body {
text-align: center;
padding: 0 px2rem(24);
background: url(../images/lastMonth.png) no-repeat;
background-size:100% 100%;
background-size: 100% 100%;
color: #000;
font-size: px2rem(28);
font-weight: 500;
@@ -166,7 +166,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(333);
top: px2rem(346);
z-index: 3;
font-weight: 500;
}
@@ -251,7 +251,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(228);
top: px2rem(226);
z-index: 3;
}
@@ -265,7 +265,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(252);
top: px2rem(254);
text-align: center;
display: flex;
justify-content: center;
@@ -320,7 +320,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(228);
top: px2rem(226);
z-index: 3;
}
@@ -334,7 +334,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(252);
top: px2rem(254);
text-align: center;
display: flex;
justify-content: center;
@@ -362,11 +362,33 @@ body {
}
.header3 {
background: url(../images/header4.png) no-repeat;
background: url(../images/header3.png) no-repeat;
background-size: 100% px2rem(1070);
.top {
.top1,
.top2,
.top3 {
.tx {
border-radius: 0;
}
}
}
}
.header4 {
background: url(../images/header4.png) no-repeat;
background-size: 100% px2rem(1070);
.top {
.top1,
.top2,
.top3 {
.tx {
border-radius: 0;
}
}
}
}

0
view/molistar/modules/newRank/images/gold.png → view/molistar/modules/newRank/images/1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
view/molistar/modules/newRank/images/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
view/molistar/modules/newRank/images/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
view/molistar/modules/newRank/images/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
view/molistar/modules/newRank/images/Rewards_icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 393 KiB

BIN
view/molistar/modules/newRank/images/no11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
view/molistar/modules/newRank/images/no22.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 806 KiB

BIN
view/molistar/modules/newRank/images/no33.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 815 KiB

16
view/molistar/modules/newRank/index.html
View File

@@ -39,9 +39,9 @@
<img src="./images/no1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<img src="./images/fist.png" alt="" class="fist">
<!-- <img src="./images/fist.png" alt="" class="fist"> -->
<!-- <div class="score">
<img src="./images/gold.png" alt="">
<img src="./images/1.png" alt="">
<span>0</span>
</div> -->
</div>
@@ -49,10 +49,10 @@
<img src="./images/no2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<img src="./images/fist.png" alt="" class="fist">
<!-- <img src="./images/fist.png" alt="" class="fist"> -->
<div class="score">
<b class="newText3"></b>
<img src="./images/gold.png" alt="">
<img src="./images/1.png" alt="">
<span></span>
</div>
</div>
@@ -60,10 +60,10 @@
<img src="./images/no3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<img src="./images/fist.png" alt="" class="fist">
<!-- <img src="./images/fist.png" alt="" class="fist"> -->
<div class="score">
<b class="newText3"></b>
<img src="./images/gold.png" alt="">
<img src="./images/1.png" alt="">
<span></span>
</div>
</div>
@@ -76,7 +76,7 @@
<img src="./images/logo.png" alt="" class="tx">
<div class="nick">虚位以待</div>
<div class="score">
<img src="./images/gold.png" alt="">
<img src="./images/1.png" alt="">
<span>0</span>
</div>
</li> -->
@@ -89,7 +89,7 @@
<div class="nick"></div>
<div class="score">
<b class="newText3"></b>
<img src="./images/gold.png" alt="">
<img src="./images/1.png" alt="">
<span></span>
</div>
</div>

28
view/molistar/modules/newRank/js/index.js
View File

@@ -28,6 +28,7 @@ const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time
}
var listType = 2;//2爱意榜 1魅力榜 3房间榜
var timeType = 1;//1日 2周
var type = 1;
// 初始化函數
$(function () {
getInfoFromClient();
@@ -123,7 +124,7 @@ function geth5() {
<div class="nick">${res.nick}</div>
<div class="score">
<b>${langReplace(localLang.demoModule.newText3)}</b>
<img src="./images/gold.png" alt="">
<img src="./images/${type}.png" alt="">
<span>${unitProcessingAr(res.totalNum, 1)}</span>
</div> -->
</li>
@@ -133,7 +134,7 @@ function geth5() {
// 处理自己
$('.my .box .tx').attr('src', my.avatar);
$('.my .box .nick').text(my.nick);
$('.my .box .seqNo').text(my.totalNum <= 0 ? '-' : my.totalNum);
$('.my .box .seqNo').text(my.totalNum <= 0 ? '-' : my.seqNo);
$('.my .box .score span').text(my.totalNum <= 0 ? '-' : unitProcessingAr(my.totalNum, 1));
if (my.totalNum <= 0) {
$('.my .box .score b').hide();
@@ -150,7 +151,7 @@ function geth5() {
})
}
// 公会接口
function listRank() {
function listRank(type) {
$('ul li').remove();
$('.header .sTab').hide();
$('.my').hide()
@@ -194,7 +195,7 @@ function listRank() {
<div class="nick">${res.name}</div>
<div class="score">
<b>${langReplace(localLang.demoModule.newText3)}</b>
<img src="./images/gold.png" alt="">
<img src="./images/${type}.png" alt="">
<span>${unitProcessingAr(res.income, 1)}</span>
</div>-->
</li>
@@ -215,6 +216,7 @@ function listRank() {
// 榜单切换tab
$('.header .tabBox div').click(function () {
var i = $(this).index() + 1;
type = i;
$(this).addClass('act').siblings().removeClass('act');
$('ul').removeClass('ul1').removeClass('ul2').removeClass('ul3').removeClass('ul4');
$(`ul`).addClass(`ul${i}`);
@@ -222,10 +224,16 @@ $('.header .tabBox div').click(function () {
$(`.header`).addClass(`header${i}`);
$('.top').removeClass('tops1').removeClass('tops2').removeClass('tops3').removeClass('tops4');
$(`.top`).addClass(`tops${i}`);
$('ul li .tx').removeClass('actTx');
// $('.header .monthlyRewards').hide();
$(`.header .top .top1 .ts`).attr('src', './images/no1.png')
$(`.header .top .top2 .ts`).attr('src', './images/no2.png')
$(`.header .top .top3 .ts`).attr('src', './images/no3.png')
timeType = 1;
$('.header .sTab div').removeClass('act');
$('.header .sTab div').eq(0).addClass('act');
$('.header .top .score img').attr('src', `./images/${type}.png`);
$('.my .box .score img').attr('src', `./images/${type}.png`);
if (i == 1) {
listType = 2;
geth5();
@@ -233,10 +241,18 @@ $('.header .tabBox div').click(function () {
listType = 1;
geth5();
} else if (i == 3) {
$(`.header .top .top1 .ts`).attr('src', './images/no11.png')
$(`.header .top .top2 .ts`).attr('src', './images/no22.png')
$(`.header .top .top3 .ts`).attr('src', './images/no33.png')
listType = 3;
geth5();
$('ul li .tx').addClass('actTx');
} else if (i == 4) {
listRank();
$(`.header .top .top1 .ts`).attr('src', './images/no11.png')
$(`.header .top .top2 .ts`).attr('src', './images/no22.png')
$(`.header .top .top3 .ts`).attr('src', './images/no33.png')
listRank(4);
$('ul li .tx').addClass('actTx');
}
})
// 日榜周榜切换tab
@@ -275,6 +291,6 @@ $('ul').on('click', 'li .tx', function () {
})
// 跳转奖励页面
$('.header .monthlyRewards').click(function(){
$('.header .monthlyRewards').click(function () {
window.location.href = './monthlyRewards.html'
})

21
view/molistar/modules/newRank/js/monthlyRewards.js
View File

@@ -48,8 +48,8 @@ $(function () {
langReplace = window.lang.replace;
localLang = window.lang;
translateFun();
showLoading()
geth5()
// showLoading()
// geth5()
}, 100)
})
function translateFun() {
@@ -67,6 +67,7 @@ function translateFun() {
$('.newText4').html(langReplace(localLang.demoModule.newText4));
$('.newText5').html(langReplace(localLang.demoModule.newText5));
$('.newText6').html(langReplace(localLang.demoModule.newText6));
$('.newText7').html(langReplace(localLang.demoModule.newText7));
}
// 榜单接口
@@ -220,20 +221,28 @@ $('.header .tabBox div').click(function () {
$('.top').removeClass('tops1').removeClass('tops2').removeClass('tops3').removeClass('tops4');
$(`.top`).addClass(`tops${i}`);
$('.header .monthlyRewards').hide();
$(`.header .top .top1 .ts`).attr('src', './images/no1.png')
$(`.header .top .top2 .ts`).attr('src', './images/no2.png')
$(`.header .top .top3 .ts`).attr('src', './images/no3.png')
timeType = 1;
$('.header .sTab div').removeClass('act');
$('.header .sTab div').eq(0).addClass('act');
$('.header .top .score img').attr('src', `./images/${i}.png`);
if (i == 1) {
listType = 2;
geth5();
// geth5();
} else if (i == 2) {
listType = 1;
geth5();
// geth5();
} else if (i == 3) {
listType = 3;
geth5();
// geth5();
$('.header .top .score img').attr('src', `./images/${4}.png`);
$(`.header .top .top1 .ts`).attr('src', './images/no11.png')
$(`.header .top .top2 .ts`).attr('src', './images/no22.png')
$(`.header .top .top3 .ts`).attr('src', './images/no33.png')
} else if (i == 4) {
listRank();
// listRank();
}
})
// 前三跳转个人页

3
view/molistar/modules/newRank/local/ar.js
View File

@@ -17,6 +17,7 @@ langAr = {
newText3: 'خلف',
newText4: 'شهري',
newText5: 'المكافآت',
newText6: 'أفضل 3 ثروة في الشهر الماضي',
newText6: 'أفضل 3 في الشهر الماضي',
newText7: 'شاغر',
}
}

3
view/molistar/modules/newRank/local/en.js
View File

@@ -17,6 +17,7 @@ langEn = {
newText3:`Behind`,
newText4:`Monthly`,
newText5:`Rewards`,
newText6:`Last Month Wealth TOP3`,
newText6:`Last Month TOP3`,
newText7: 'Vacant',
}
}

3
view/molistar/modules/newRank/local/tr.js
View File

@@ -17,6 +17,7 @@ langTr = {
newText3: 'Geride',
newText4: 'Aylık',
newText5: 'Ödüller',
newText6: 'Geçen Ay Servet İlk 3',
newText6: 'Geçen Ay İlk 3',
newText7: 'Boş',
}
}

3
view/molistar/modules/newRank/local/zh.js
View File

@@ -17,6 +17,7 @@ langZh = {
newText3: '落後',
newText4: '每月',
newText5: '獎勵',
newText6: '上月財富前三名',
newText6: '上月前三名',
newText7: '虛位以待',
}
}

24
view/molistar/modules/newRank/monthlyRewards.html
View File

@@ -22,39 +22,39 @@
<div class="text2"><span></span></div>
<div class="text4"><span></span></div>
</div>
<div class="lastMonthWealthTOP3">Last Month Wealth TOP3</div>
<div class="lastMonthWealthTOP3 newText6"></div>
<!-- 前三 -->
<div class="top tops1">
<div class="top1">
<img src="./images/no1.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<img src="./images/fist.png" alt="" class="fist">
<div class="score">
<img src="./images/gold.png" alt="">
<div class="nick newText7"></div>
<!-- <img src="./images/fist.png" alt="" class="fist"> -->
<!-- <div class="score">
<img src="./images/1.png" alt="">
<span>0</span>
</div>
</div> -->
</div>
<div class="top2">
<img src="./images/no2.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<div class="nick newText7"></div>
<img src="./images/fist.png" alt="" class="fist">
<div class="score">
<b class="newText3"></b>
<img src="./images/gold.png" alt="">
<span></span>
<img src="./images/1.png" alt="">
<span>0</span>
</div>
</div>
<div class="top3">
<img src="./images/no3.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="tx">
<div class="nick"></div>
<div class="nick newText7"></div>
<img src="./images/fist.png" alt="" class="fist">
<div class="score">
<b class="newText3"></b>
<img src="./images/gold.png" alt="">
<span></span>
<img src="./images/1.png" alt="">
<span>0</span>
</div>
</div>
</div>