From 51ead8f411d92da17e68814771cbabf15d3ccd95 Mon Sep 17 00:00:00 2001 From: Blizzard Date: Fri, 31 Jul 2026 18:41:38 +0800 Subject: [PATCH] =?UTF-8?q?style(fe):=20=E8=BA=AB=E4=BB=BD=E5=8D=A1?= =?UTF-8?q?=E5=8F=AA=E7=95=99=E6=88=AA=E5=9B=BE=E5=AD=97=E6=AE=B5=20?= =?UTF-8?q?=E2=80=94=20=E5=8E=BB=E6=8E=89=E6=80=A7=E6=A0=BC=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=EF=BC=8C=E9=AB=98=E5=BA=A6=E5=8E=8B=E5=88=B0=20cardH?= =?UTF-8?q?=3D510?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5 --- pets-fe/pages/idcard/idcard.js | 49 ++++++++-------------------------- 1 file changed, 11 insertions(+), 38 deletions(-) diff --git a/pets-fe/pages/idcard/idcard.js b/pets-fe/pages/idcard/idcard.js index 6f43e6b..d3bae6c 100644 --- a/pets-fe/pages/idcard/idcard.js +++ b/pets-fe/pages/idcard/idcard.js @@ -94,11 +94,10 @@ Page({ const cardW = W - pad * 2; const fx = pad, cardW2 = cardW; - const tags = (c.personality || '').split(',').filter(Boolean); // ══════════ 正面卡（暖黄）══════════ // 正反两张卡等高（都用 cardH），中间内容垂直居中，避免正面留空 - const cardH = 540; + const cardH = 510; const fH = cardH; const fY = pad; const gf = ctx.createLinearGradient(fx, fY, fx, fY + fH); @@ -164,35 +163,9 @@ Page({ kvF('毛色', c.color, avY + 168); kvF('年龄', c.age, avY + 206); - // 性格标签（没有就不画，避免留空行）；性格+介绍整体在 info 和底栏之间垂直居中 - const midTop = fY + 300, midBot = fY + fH - 92; - const blockH = (tags.length ? 90 : 0) + (c.intro ? 70 : 0); - let ty = midTop + Math.max(0, Math.floor((midBot - midTop - blockH) / 2)); - if (tags.length) { - ctx.textAlign = 'left'; - ctx.fillStyle = '#8A5A18'; - ctx.font = '600 24px sans-serif'; - ctx.fillText('🐾 性格标签', fx + 34, ty); - ty += 44; - const tagColors = [['#FFE7A8', '#8A5A18'], ['#D6E9FF', '#2E6DA8'], ['#FFD9DE', '#C24A63']]; - let tx = fx + 34; - tags.forEach((t, i) => { - ctx.font = '23px sans-serif'; - const tw = ctx.measureText(t).width + 32; - const col = tagColors[i % tagColors.length]; - ctx.fillStyle = col[0]; - this.roundRect(ctx, tx, ty - 28, tw, 40, 20); - ctx.fill(); - ctx.fillStyle = col[1]; - ctx.textAlign = 'left'; - ctx.fillText(t, tx + 16, ty); - tx += tw + 14; - }); - ty += 46; - } - - // 介绍 quote + // 介绍 quote（在 info 和底栏之间垂直居中） if (c.intro) { + const ty = fY + 300 + Math.max(0, Math.floor(((fY + fH - 92) - (fY + 300) - 60) / 2)); ctx.fillStyle = 'rgba(255,255,255,.6)'; this.roundRect(ctx, fx + 34, ty, cardW2 - 68, 60, 16); ctx.fill(); @@ -229,10 +202,10 @@ Page({ ctx.textAlign = 'left'; ctx.fillStyle = '#8A90AE'; ctx.font = '600 27px sans-serif'; - this.spacedText(ctx, star + '星人地球移民', fx + 44, bY + 70, 8); + this.spacedText(ctx, star + '星人地球移民', fx + 44, bY + 64, 8); ctx.fillStyle = '#3E4A63'; - ctx.font = '800 60px sans-serif'; - ctx.fillText('居民身份卡', fx + 44, bY + 150); + ctx.font = '800 58px sans-serif'; + ctx.fillText('居民身份卡', fx + 44, bY + 140); // 资料行（标签 + 值） const rowX = fx + 44; @@ -245,14 +218,14 @@ Page({ ctx.fillStyle = '#3E4A63'; ctx.fillText(value || '—', rowX + 160, yy); }; - let ry = bY + 210; - kvB('主人', c.owner, ry); ry += 48; - kvB('联系电话', c.phone || '未验证', ry); ry += 48; - kvB('签发机构', c.org || '肉垫计划', ry); ry += 48; + let ry = bY + 198; + kvB('主人', c.owner, ry); ry += 46; + kvB('联系电话', c.phone || '未验证', ry); ry += 46; + kvB('签发机构', c.org || '肉垫计划', ry); ry += 46; kvB('有效期限', c.validity || '永久有效', ry); // 小程序码（右下角，直接落在淡紫底上） - const qrD = 120, qrX = fx + cardW2 - 44 - qrD, qrY = bY + bH - 34 - qrD; + const qrD = 114, qrX = fx + cardW2 - 44 - qrD, qrY = bY + bH - 30 - qrD; ctx.fillStyle = '#fff'; this.roundRect(ctx, qrX, qrY, qrD, qrD, 14); ctx.fill();