admin/hyapp-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

房间奖励UI

Browse Source
This commit is contained in:
zhx 2026-06-08 19:39:41 +08:00
parent e8c184641b
commit fe7ef809de
3 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
activity/room-reward/index.html
View File

@ -74,19 +74,7 @@
aria-label="Room reward tiers"
data-i18n-aria="roomReward.tiersLabel"
>
<div class="table-fill" aria-hidden="true">
<div class="table-row-bg row-dark"></div>
<div class="table-row-bg row-light"></div>
<div class="table-row-bg row-dark"></div>
<div class="table-row-bg row-light"></div>
<div class="table-row-bg row-dark"></div>
<div class="table-row-bg row-light"></div>
<div class="table-row-bg row-dark"></div>
<div class="table-row-bg row-light"></div>
<div class="table-row-bg row-dark"></div>
<div class="table-row-bg row-light"></div>
<div class="table-row-bg row-dark"></div>
</div>
<div class="table-fill" aria-hidden="true"></div>
<img
class="table-border table-border-side"
src="./assets/296_8350.png"

43
activity/room-reward/script.js
View File

@ -1,5 +1,13 @@
(function () {
var viewport = document.getElementById('appViewport');
var page = document.getElementById('page');
var stageWrap = document.getElementById('stageWrap');
var stage = stageWrap ? stageWrap.querySelector('.stage') : null;
var rewardTable = document.querySelector('.reward-table');
var tableFill = document.querySelector('.table-fill');
var tableSideBorder = document.querySelector('.table-border-side');
var tableBottomBorder = document.querySelector('.table-border-bottom');
var tableDivider = document.querySelector('.table-divider');
var table = document.getElementById('tierTable');
var currentData = null;
@ -25,6 +33,7 @@
{ turnover: '80M', reward: '8000000' },
{ turnover: '120M', reward: '12000000' },
{ turnover: '160M', reward: '16000000' },
{ turnover: '200M', reward: '20000000' },
],
};
@ -54,6 +63,7 @@
function renderTable(data) {
data = data || mockData;
var tiers = Array.isArray(data.tiers) ? data.tiers : [];
var rows = [
'<div class="tier-row is-head">',
'<div data-i18n="roomReward.turnover">',
@ -65,7 +75,7 @@
'</div>',
];
(data.tiers || []).forEach(function (item) {
tiers.forEach(function (item) {
rows.push(
[
'<div class="tier-row">',
@ -84,11 +94,42 @@
});
table.innerHTML = rows.join('');
syncDynamicTableLayout(tiers.length + 1);
if (window.HyAppI18n && window.HyAppI18n.apply) {
window.HyAppI18n.apply(table);
}
}
function syncDynamicTableLayout(rowCount) {
var safeRowCount = Math.max(Number(rowCount) || 1, 1);
var rowHeight = 103;
var tableInsetY = 15;
var bottomBorderHeight = 119;
var tableTop = 1241;
var stageBottomPadding = 66;
var visualScale = 375 / 1080;
var innerHeight = safeRowCount * rowHeight;
var tableHeight = innerHeight + tableInsetY * 2;
var stageHeight = tableTop + tableHeight + stageBottomPadding;
var wrapHeight = Math.ceil(stageHeight * visualScale);
if (rewardTable) rewardTable.style.height = tableHeight + 'px';
if (tableFill) tableFill.style.height = innerHeight + 'px';
if (table) table.style.height = innerHeight + 'px';
if (tableSideBorder) tableSideBorder.style.height = tableHeight + 'px';
if (tableBottomBorder) {
tableBottomBorder.style.top =
Math.max(tableHeight - bottomBorderHeight, 0) + 'px';
}
if (tableDivider) tableDivider.style.height = innerHeight + 'px';
if (stage) stage.style.height = stageHeight + 'px';
if (stageWrap) stageWrap.style.height = wrapHeight + 'px';
if (page) page.style.minHeight = wrapHeight + 'px';
if (viewport) viewport.style.minHeight = wrapHeight + 'px';
updateBodyHeight();
}
function renderUser(data) {
data = data || mockData;
document.getElementById('targetReward').textContent = data.targetReward;

2
activity/room-reward/style.css
View File

@ -245,7 +245,7 @@ button {
.table-border-bottom {
left: 0;
top: 1045px;
top: 1044px;
width: 1008px;
height: 119px;
}