sundynix/sundynix-pets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(fe): 身份卡只留截图字段 — 去掉性格标签，高度压到 cardH=510

Browse Source 
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-31 18:41:38 +08:00
parent 1544151e5c
commit 51ead8f411
1 changed files with 11 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pets-fe/pages/idcard/idcard.js
+11 -38
View File
@@ -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();