ui(dashboard): 筛号器号码改为左右两列+中间生肖标签布局

每行号码按数量平分左右两列,生肖标签固定在中间分隔位置,
两侧各占flex:1宽度,保证排列整齐不受单行号码数量影响。
This commit is contained in:
2026-04-28 19:11:12 +08:00
parent 49eea49fa9
commit 2b4f0e171d
+27 -15
View File
@@ -841,26 +841,38 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
if (!zodiacNums[animal]) zodiacNums[animal] = []; if (!zodiacNums[animal]) zodiacNums[animal] = [];
zodiacNums[animal].push(num); zodiacNums[animal].push(num);
} }
var buildBall = function (num, zodiac) {
var colorHex = Controller.api.getColorByNum(num);
var colorRaw = colorMap[num] || '';
var colorLabel = '';
if (colorRaw.indexOf('红') !== -1) colorLabel = '红';
else if (colorRaw.indexOf('蓝') !== -1) colorLabel = '蓝';
else if (colorRaw.indexOf('绿') !== -1) colorLabel = '绿';
return '<div class="nf-number" data-num="' + num + '" data-color="' + colorLabel + '" data-animal="' + zodiac + '" data-tail="' + (num % 10) + '" style="text-align:center;background:#f9f9f9;padding:6px 4px;border-radius:6px;min-width:55px;transition:opacity 0.2s;">' +
'<span style="display:inline-block;width:36px;height:36px;line-height:36px;text-align:center;border-radius:50%;color:#fff;background-color:' + colorHex + ';font-weight:bold;">' + num + '</span>' +
'<div style="font-size:10px;color:#666;line-height:1.2;">' + zodiac + '</div>' +
'</div>';
};
var html = ''; var html = '';
for (var z = 0; z < zodiacOrder.length; z++) { for (var z = 0; z < zodiacOrder.length; z++) {
var zodiac = zodiacOrder[z]; var zodiac = zodiacOrder[z];
var nums = zodiacNums[zodiac]; var nums = zodiacNums[zodiac];
if (nums.length === 0) continue; if (nums.length === 0) continue;
html += '<div class="nf-zodiac-row" style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">'; var half = Math.ceil(nums.length / 2);
html += '<div style="font-weight:bold;font-size:14px;width:30px;text-align:center;">' + zodiac + '</div>'; var leftNums = nums.slice(0, half);
html += '<div style="display:flex;flex-wrap:wrap;gap:8px;flex:1;">'; var rightNums = nums.slice(half);
for (var i = 0; i < nums.length; i++) { html += '<div class="nf-zodiac-row" style="display:flex;align-items:center;gap:20px;margin-bottom:8px;">';
var num = nums[i]; html += '<div style="flex:1;display:flex;flex-wrap:wrap;gap:8px;">';
var colorHex = Controller.api.getColorByNum(num); for (var i = 0; i < leftNums.length; i++) {
var colorRaw = colorMap[num] || ''; html += buildBall(leftNums[i], zodiac);
var colorLabel = ''; }
if (colorRaw.indexOf('红') !== -1) colorLabel = '红'; html += '</div>';
else if (colorRaw.indexOf('蓝') !== -1) colorLabel = ''; html += '<div style="font-weight:bold;font-size:14px;width:30px;text-align:center;flex-shrink:0;">' + zodiac + '</div>';
else if (colorRaw.indexOf('绿') !== -1) colorLabel = '绿'; html += '<div style="flex:1;display:flex;flex-wrap:wrap;gap:8px;">';
html += '<div class="nf-number" data-num="' + num + '" data-color="' + colorLabel + '" data-animal="' + zodiac + '" data-tail="' + (num % 10) + '" style="text-align:center;background:#f9f9f9;padding:6px 4px;border-radius:6px;min-width:55px;transition:opacity 0.2s;">' + for (var i = 0; i < rightNums.length; i++) {
'<span style="display:inline-block;width:36px;height:36px;line-height:36px;text-align:center;border-radius:50%;color:#fff;background-color:' + colorHex + ';font-weight:bold;">' + num + '</span>' + html += buildBall(rightNums[i], zodiac);
'<div style="font-size:10px;color:#666;line-height:1.2;">' + zodiac + '</div>' +
'</div>';
} }
html += '</div></div>'; html += '</div></div>';
} }