优化:自动钓鱼卡剩余时间徽章移至分组标题旁

商品图标上去掉紫色时间徽章(避免每张卡都显示同值造成误解);
改为在「🎣 自动钓鱼卡」分组标题后方统一显示「 剩余 X 小时」紫色标签,
仅持有有效卡时出现。
This commit is contained in:
2026-03-01 16:52:59 +08:00
parent 759fb6deae
commit fc4c0c543e

View File

@@ -821,7 +821,16 @@
// 分组标题(独占一整行)
const header = document.createElement('div');
header.className = 'shop-group-header';
header.innerHTML = `${g.label}${g.desc ? ` <span>${g.desc}</span>` : ''}`;
// 自动钓鱼卡分组:若持有有效卡,在标题后附加剩余时间徽章
let groupSuffix = '';
if (g.type === 'auto_fishing' && (data.auto_fishing_minutes_left || 0) > 0) {
const left = data.auto_fishing_minutes_left;
const leftStr = left >= 60 ? Math.floor(left / 60) + ' 小时' : left + ' 分钟';
groupSuffix =
` <span style="display:inline-block;margin-left:8px;padding:1px 8px;background:#7c3aed;color:#fff;border-radius:10px;font-size:10px;font-weight:bold;vertical-align:middle;">⏳ 剩余 ${leftStr}</span>`;
}
header.innerHTML = `${g.label}${groupSuffix}${g.desc ? ` <span>${g.desc}</span>` : ''}`;
list.appendChild(header);
items.forEach(item => {
@@ -833,9 +842,8 @@
const card = document.createElement('div');
card.className = 'shop-card';
// 顶部:图标 + 名称(戒指/自动钓鱼卡加徽章
// 顶部:图标 + 名称(戒指加持有数徽章,其余正常显示
const isAutoFishing = item.type === 'auto_fishing';
const autoFishLeft = isAutoFishing ? (data.auto_fishing_minutes_left || 0) : 0;
let iconHtml;
if (isRing && ownedQty > 0) {
@@ -843,13 +851,6 @@
<span class="shop-card-icon">${item.icon}</span>
<span style="position:absolute;top:-4px;right:-6px;background:#f43f5e;color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:8px;text-align:center;line-height:15px;padding:0 2px;">${ownedQty}</span>
</span>`;
} else if (isAutoFishing && autoFishLeft > 0) {
const hLeft = autoFishLeft >= 60 ? Math.floor(autoFishLeft / 60) + 'h' :
autoFishLeft + 'm';
iconHtml = `<span style="position:relative;display:inline-block;">
<span class="shop-card-icon">${item.icon}</span>
<span style="position:absolute;top:-4px;right:-6px;background:#7c3aed;color:#fff;font-size:9px;font-weight:800;min-width:18px;height:15px;border-radius:8px;text-align:center;line-height:15px;padding:0 2px;">${hLeft}</span>
</span>`;
} else {
iconHtml = `<span class="shop-card-icon">${item.icon}</span>`;
}