房间奖励UI

activity/room-reward/index.html

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

activity/room-reward/script.js

@@ -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;

activity/room-reward/style.css

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