diff --git a/h5/assets/da.png b/h5/assets/da.png new file mode 100644 index 0000000..3705cf9 Binary files /dev/null and b/h5/assets/da.png differ diff --git a/h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame1.png b/h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame1.png new file mode 100644 index 0000000..8818a9a Binary files /dev/null and b/h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame1.png differ diff --git a/h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame2.png b/h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame2.png new file mode 100644 index 0000000..9c4eaab Binary files /dev/null and b/h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame2.png differ diff --git a/h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame3.png b/h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame3.png new file mode 100644 index 0000000..5967dfb Binary files /dev/null and b/h5/assets/yumi-ranking/Ranking/Overall/rankAvatarFrame3.png differ diff --git a/h5/ranking/index.html b/h5/ranking/index.html index 46fe2d2..69475b7 100644 --- a/h5/ranking/index.html +++ b/h5/ranking/index.html @@ -23,8 +23,8 @@ } - - + +
diff --git a/h5/ranking/ranking.css b/h5/ranking/ranking.css index cff2fe1..fb7a5bb 100644 --- a/h5/ranking/ranking.css +++ b/h5/ranking/ranking.css @@ -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; diff --git a/h5/ranking/ranking.js b/h5/ranking/ranking.js index 9a3d100..29cf5bb 100644 --- a/h5/ranking/ranking.js +++ b/h5/ranking/ranking.js @@ -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 '
' + + return '
' + '
' + '' + '
' + @@ -614,7 +597,7 @@ '' + '
' + '
' + - '