hy/chatapp-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update ranking top avatar frames

Browse Source
This commit is contained in:
170-carry 2026-04-24 19:24:51 +08:00
parent 41b5e8e095
commit 55dfe75a30
7 changed files with 64 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
h5/assets/da.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

BIN
h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 552 KiB

BIN
h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 467 KiB

BIN
h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 462 KiB

4
h5/ranking/index.html
View File

@ -23,8 +23,8 @@
}
</style>
<link rel="stylesheet" crossorigin href="/css/index-VRlNQ74k-1776148661679.css">
<link rel="stylesheet" href="/ranking/ranking.css?v=20260424h">
<script defer src="/ranking/ranking.js?v=20260424h"></script>
<link rel="stylesheet" href="/ranking/ranking.css?v=20260424i">
<script defer src="/ranking/ranking.js?v=20260424i"></script>
</head>
<body>
<div id="app"></div>

49
h5/ranking/ranking.css
View File

@ -8,6 +8,9 @@ body,
max-width: none;
}
main{
background: #081415!important;
}
body {
display: block;
background: #000;
@ -111,11 +114,11 @@ body {
height: 35vw;
}
.sticky-header.stuck {
/* .sticky-header.stuck {
background-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
}
} */
.sticky-spacer {
height: 13vw;
@ -138,14 +141,14 @@ body {
padding: 0;
font: inherit;
font-weight: 700;
font-size: 1em;
font-size: 1.5em;
line-height: 1.4;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.type-tab.active {
color: #ff9500;
color: #2fce2c;
}
.back-btn {
@ -171,12 +174,10 @@ body {
margin: 1vw 6vw 4vw;
padding: 4px;
border-radius: 32px;
border: 1px solid #b2a67d;
background: linear-gradient(90deg, #0d0d0d 0%, #232323 100%);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
display: grid;
grid-template-columns: repeat(3, 1fr);
background:none;
font-size: 1em;
}
.period-item {
@ -186,7 +187,6 @@ body {
}
.period-item.active {
background-image: url("/assets/yumi-ranking/Ranking/Overall/tabSelectedBg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
@ -205,7 +205,7 @@ body {
}
.period-item.active .period-tab {
color: #000;
color: #57db38;
display: flex;
justify-content: center;
align-items: center;
@ -226,7 +226,7 @@ body {
.top-pair-wrap {
display: flex;
justify-content: space-between;
justify-content: space-around;
margin-top: 0;
}
@ -257,6 +257,11 @@ body {
align-items: center;
}
.top-avatar-box {
overflow: hidden;
border-radius: 50%;
}
.top-avatar-box img {
display: block;
width: 100%;
@ -436,22 +441,38 @@ body {
height: 26vw;
}
.my-ranking {
min-height: 25vw;
.item-center.my-ranking {
min-height: 19vw;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
padding: 0 1px;
overflow: hidden;
background: rgb(121 238 169 / 23%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.58);
border-bottom: 0;
border-radius: 16px 16px 0 0;
box-shadow:
0 -10px 28px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.my-ranking .item-content {
padding: 4vw 4vw 0;
padding: 0 4vw 0;
justify-content: space-between;
gap: 8px;
}
.my-ranking .mine-rank div,
.my-ranking .mine-name {
/* color: rgba(14, 23, 36, 0.92); */
color:#fff;
}
.mine-left {
flex: 1;
min-width: 0;

72
h5/ranking/ranking.js
View File

@ -4,7 +4,7 @@
var API_BASE_URL = "https://jvapi.haiyihy.com";
var ASSET_BASE = "/assets/yumi-ranking/Ranking/Overall/";
var BG_VERSION = "20260424c";
var DEFAULT_AVATAR = "/assets/defaultAvatar-CdxWBK1k-1776148661448.png";
var DEFAULT_AVATAR = "/assets/da.png";
var COIN_ICON = "/assets/coin-lz3Tp0nX-1776148661447.png";
var LOADING_GIF = "/assets/loading-ranking.gif";
var BACK_ICON =
@ -34,21 +34,21 @@
var TYPE_ASSETS = {
Wealth: {
bg: "bgWealth",
top1: "top1-wealth",
top2: "top2",
top3: "top3"
top1: "rankAvatarFrame1",
top2: "rankAvatarFrame2",
top3: "rankAvatarFrame3"
},
Charm: {
bg: "bgCharm",
top1: "top1-charm",
top2: "top2",
top3: "top3"
top1: "rankAvatarFrame1",
top2: "rankAvatarFrame2",
top3: "rankAvatarFrame3"
},
Room: {
bg: "bgRoom",
top1: "top1-room",
top2: "top2-room",
top3: "top3-room"
top1: "rankAvatarFrame1",
top2: "rankAvatarFrame2",
top3: "rankAvatarFrame3"
}
};
var I18N = {
@ -365,13 +365,9 @@
backgroundAsset("Wealth"),
backgroundAsset("Charm"),
backgroundAsset("Room"),
asset("top1-wealth"),
asset("top1-charm"),
asset("top1-room"),
asset("top2"),
asset("top3"),
asset("top2-room"),
asset("top3-room")
asset("rankAvatarFrame1"),
asset("rankAvatarFrame2"),
asset("rankAvatarFrame3")
]);
}
@ -490,28 +486,16 @@
}).slice(0, state.visibleCount);
}
function topLayout(type, isTopOne) {
var result = {};
if (type === "Wealth") {
result.minHeight = isTopOne ? "76.5vw" : "44vw";
result.avatarLayer = isTopOne ? "height:110%" : "height:72%";
result.avatarWidth = isTopOne ? "31%" : "45%";
result.nameBox = isTopOne ? "height:8vw;width:30%" : "height:5vw;width:50%";
result.pillWidth = isTopOne ? "30%" : "50%";
} else if (type === "Charm") {
result.minHeight = isTopOne ? "80vw" : "44vw";
result.avatarLayer = isTopOne ? "height:98%" : "height:74%";
result.avatarWidth = isTopOne ? "30%" : "45%";
result.nameBox = isTopOne ? "height:10vw;width:40%" : "height:5vw;width:40%";
result.pillWidth = isTopOne ? "35%" : "50%";
} else {
result.minHeight = isTopOne ? "76vw" : "52vw";
result.avatarLayer = isTopOne ? "height:110%" : "height:80%";
result.avatarWidth = isTopOne ? "30%" : "50%";
result.nameBox = isTopOne ? "height:7vw;width:28%" : "height:4.5vw;width:40%";
result.pillWidth = isTopOne ? "30%" : "50%";
}
return result;
function topLayout(isTopOne) {
return {
width: isTopOne ? "52%" : "34%",
minHeight: isTopOne ? "82vw" : "55vw",
avatarLayer: "height:55%",
avatarWidth: isTopOne ? "45%" : "47%",
nameBox: isTopOne ? "height:6vw;width:55%" : "height:4.5vw;width:65%",
pillWidth: isTopOne ? "55%" : "70%",
infoStyle: isTopOne ? "bottom:12%" : "bottom:11%"
};
}
function render() {
@ -600,13 +584,12 @@
function renderTopUser(user, index, isTopOne) {
var assets = TYPE_ASSETS[state.rankingType];
var frame = isTopOne ? assets.top1 : index === 1 ? assets.top2 : assets.top3;
var layout = topLayout(state.rankingType, isTopOne);
var width = isTopOne ? "85%" : "43%";
var layout = topLayout(isTopOne);
var name = user && user.nickname ? user.nickname : "";
var avatar = user && user.avatar ? user.avatar : "";
var quantity = user && user.quantityFormat ? user.quantityFormat : "";
var id = user && user.id ? user.id : "";
return '<div class="top-user" style="width:' + width + '" data-user-id="' + escapeAttribute(id) + '">' +
return '<div class="top-user rank-' + (index + 1) + '" style="width:' + layout.width + '" data-user-id="' + escapeAttribute(id) + '">' +
'<div class="top-user-inner" style="min-height:' + layout.minHeight + '">' +
'<img class="top-frame" src="' + asset(frame) + '" alt="">' +
'<div class="top-avatar-layer" style="' + layout.avatarLayer + '">' +
@ -614,7 +597,7 @@
'<img src="' + escapeAttribute(avatar) + '" alt="" data-avatar>' +
'</div>' +
'</div>' +
'<div class="top-user-info">' +
'<div class="top-user-info" style="' + layout.infoStyle + '">' +
'<div class="top-name-box" style="' + layout.nameBox + '">' +
'<div class="show-text ' + (isTopOne ? "top1-text" : "top-text") + '" style="font-weight:860">' + escapeHtml(name) + '</div>' +
'</div>' +
@ -647,7 +630,6 @@
function renderItemCenter(classes, minHeight, image, content, attrs) {
return '<div class="item-center ' + classes + '"' + (attrs || "") + ' style="min-height:' + minHeight + '">' +
'<img class="item-bg" src="' + image + '" alt="">' +
'<div class="item-content">' + content + '</div>' +
'</div>';
}
@ -690,7 +672,7 @@
'<img class="coin-icon" src="' + COIN_ICON + '" alt="">' +
'<div class="mine-value-text">' + escapeHtml(String(quantity)) + '</div>' +
'</div>';
return renderItemCenter("my-ranking", "25vw", asset("myRankingBg"), content);
return renderItemCenter("my-ranking", "", asset("myRankingBg"), content);
}
function bindEvents() {