feat: 身份卡改上下两张卡(正面/背面) + 手机号硬门槛

- canvas 重画成上下两张：正面(暖黄，头像/名字性别/性别品种毛色年龄/性格
  彩色标签/介绍/物ID+一起生活天数)、背面(蓝色照护信息条 + 主人/电话/疫苗/
  备注/发证机构/有效期 + 走失联系框&小程序码)
- 生成前查手机号：没有则唤起 getPhoneNumber 组件，验证成功才生成；
  拒绝则提示「无法生成」不出卡
- IDCard 增 age/days；ic-canvas 高度改 1480 否则导出被裁

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

pets-be/internal/service/idcard.go

@@ -3,6 +3,7 @@ package service
 import (
 	"log"
 	"strings"
+	"time"
 
 	"github.com/sundynix/pets-be/internal/model"
 )
@@ -14,6 +15,8 @@ type IDCard struct {
 	Gender    string `json:"gender"`
 	Breed     string `json:"breed"`
 	Birthday  string `json:"birthday"` // "2023 年 12 月 15 日"
+	Age       string `json:"age"`      // 年龄，如 "2岁7个月"
+	Days      int    `json:"days"`     // 一起生活的天数（按到家日）
 	Zodiac    string `json:"zodiac"`   // 星座，按生日算
 	Weight    string `json:"weight"`   // 体重，如 "13.5kg"
 	Intro     string `json:"intro"`
@@ -145,9 +148,15 @@ func (s *Service) GetIDCard(userID, petID string) (*IDCard, error) {
 		allergy = "无"
 	}
 
+	// 一起生活的天数：按到家日算，没填就 0
+	days := 0
+	if pet.ArrivedAt != nil && !pet.ArrivedAt.IsZero() {
+		days = int(time.Since(*pet.ArrivedAt).Hours()/24) + 1
+	}
+
 	card := &IDCard{
 		Name: pet.Name, Species: pet.Type, Gender: pet.Gender, Breed: pet.Breed,
-		Birthday: bd, Zodiac: zodiac, Weight: pet.Weight, Intro: intro,
+		Birthday: bd, Age: pet.Age, Days: days, Zodiac: zodiac, Weight: pet.Weight, Intro: intro,
 		Color: pet.Color, Personality: pet.Personality,
 		AvatarURL: pet.AvatarURL, IDNo: petIDNo(pet), Validity: validity,
 		Owner: owner, Phone: maskPhone(user.Phone), Allergy: allergy, Notes: pet.Notes,

pets-fe/pages/idcard/idcard.js

@@ -4,7 +4,7 @@ const { toastErr } = require('../../utils/ui.js');
 
 // 卡片画布尺寸（逻辑像素）。真实导出会按 dpr 放大
 const W = 620;
-const H = 1000;
+const H = 1480;
 
 // 在 canvas 2d 上加载一张图（远程或本地），resolve 出可直接 drawImage 的 image 对象。
 // 加载失败 resolve(null)——头像或小程序码缺一张不该让整张卡画不出来
@@ -25,6 +25,8 @@ Page({
     cardImg: '',
     qrReady: false,
     saving: false,
+    needPhone: false, // 没手机号：门槛，先验证才生成
+    phoneRefused: false, // 用户拒绝了授权
   },
   onLoad(q) {
     store
@@ -41,6 +43,11 @@ Page({
       .then((card) => {
         if (!card) return;
         this.setData({ card, qrReady: !!card.qr_ready });
+        // 门槛：没手机号不生成，先引导用微信验证
+        if (!card.phone) {
+          this.setData({ needPhone: true });
+          return;
+        }
         // 布局要等页面渲染完 canvas 节点才拿得到，放 nextTick
         wx.nextTick(() => this.draw());
       })
@@ -83,30 +90,50 @@ Page({
     const pad = 30;
     const cardW = W - pad * 2;
 
-    // ═══ 正面：资料区（暖粉渐变）═══
+    const fx = pad, cardW2 = cardW;
-    const s1Y = pad, s1H = 378;
+
-    const g1 = ctx.createLinearGradient(pad, s1Y, W - pad, s1Y + s1H);
+    // 顶部标题
-    g1.addColorStop(0, '#FFF0D6');
+    ctx.textAlign = 'center';
-    g1.addColorStop(0.5, '#FFE0EC');
+    ctx.fillStyle = '#8A5A18';
-    g1.addColorStop(1, '#E6EEFF');
+    ctx.font = '700 40px sans-serif';
-    this.roundRect(ctx, pad, s1Y, cardW, s1H, 28);
+    ctx.fillText('🐾 宠物身份卡 🐾', W / 2, 66);
-    ctx.fillStyle = g1;
+
+    // ══════════ 正面卡（暖黄）══════════
+    ctx.fillStyle = '#C7A36A';
+    ctx.font = '22px sans-serif';
+    ctx.fillText('· 正面 ·', W / 2, 116);
+    const fY = 140, fH = 700;
+    const gf = ctx.createLinearGradient(fx, fY, fx, fY + fH);
+    gf.addColorStop(0, '#FFF7E0');
+    gf.addColorStop(1, '#FFE7AE');
+    this.roundRect(ctx, fx, fY, cardW2, fH, 30);
+    ctx.fillStyle = gf;
     ctx.fill();
     // 爪印水印
     ctx.save();
-    this.roundRect(ctx, pad, s1Y, cardW, s1H, 28);
+    this.roundRect(ctx, fx, fY, cardW2, fH, 30);
     ctx.clip();
-    ctx.globalAlpha = 0.06;
+    ctx.globalAlpha = 0.07;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
-    ctx.font = '130px sans-serif';
+    ctx.font = '150px sans-serif';
-    ctx.fillText('🐾', W - pad - 80, s1Y + 100);
+    ctx.fillText('🐾', fx + cardW2 - 90, fY + fH - 80);
     ctx.restore();
     ctx.globalAlpha = 1;
     ctx.textBaseline = 'alphabetic';
 
+    // 卡头：左 logo，右 徽章
+    ctx.textAlign = 'left';
+    ctx.fillStyle = '#8A5A18';
+    ctx.font = '600 26px sans-serif';
+    ctx.fillText('🐱 宠星人', fx + 32, fY + 52);
+    ctx.textAlign = 'right';
+    ctx.fillStyle = '#B07A1E';
+    ctx.font = '600 22px sans-serif';
+    ctx.fillText('🛡 宠物身份卡', fx + cardW2 - 32, fY + 50);
+
     // 头像圆 + 白边
-    const avX = pad + 34, avY = s1Y + 34, avD = 118;
+    const avD = 150, avX = fx + 36, avY = fY + 90;
     ctx.save();
     ctx.beginPath();
     ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
@@ -118,7 +145,7 @@ Page({
       ctx.fillStyle = '#FFD9A3';
       ctx.fillRect(avX, avY, avD, avD);
       ctx.fillStyle = '#8A5A18';
-      ctx.font = '52px sans-serif';
+      ctx.font = '64px sans-serif';
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.fillText(c.species === '狗狗' ? '🐶' : '🐱', avX + avD / 2, avY + avD / 2);
@@ -127,121 +154,150 @@ Page({
     ctx.textBaseline = 'alphabetic';
     ctx.beginPath();
     ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
-    ctx.strokeStyle = 'rgba(255,255,255,.9)';
+    ctx.strokeStyle = '#fff';
-    ctx.lineWidth = 5;
+    ctx.lineWidth = 8;
     ctx.stroke();
 
-    // 名字大字 + 物种·性别（头像右侧）
+    // 名字 + 性别（头像右侧）
-    const nameX = avX + avD + 26;
+    const nx = avX + avD + 28;
     ctx.textAlign = 'left';
     ctx.fillStyle = '#2D2925';
-    ctx.font = '700 46px sans-serif';
+    ctx.font = '700 52px sans-serif';
-    ctx.fillText(c.name || '毛孩子', nameX, avY + 54);
+    ctx.fillText(c.name || '毛孩子', nx, avY + 44);
-    ctx.fillStyle = '#9A8F82';
+    if (c.gender) {
-    ctx.font = '24px sans-serif';
+      ctx.fillStyle = c.gender === '女孩' ? '#E86A9B' : '#5B9BE8';
-    ctx.fillText(c.species + (c.gender ? '  ·  ' + c.gender : ''), nameX, avY + 96);
+      ctx.font = '30px sans-serif';
-
+      ctx.fillText(c.gender === '女孩' ? '♀' : '♂', nx + ctx.measureText(c.name || '毛孩子').width + 12, avY + 44);
-    // 资料 pair 行（头像下方，全宽两列）
+    }
-    const infoX = pad + 40;
+    // 头像右的资料行
-    let y = s1Y + avD + 60;
+    const kvF = (label, value, yy) => {
-    const pair = (l1, v1, l2, v2) => {
       ctx.textAlign = 'left';
       ctx.font = '24px sans-serif';
-      ctx.fillStyle = '#9A8F82';
+      ctx.fillStyle = '#A98C5A';
-      ctx.fillText(l1, infoX, y);
+      ctx.fillText(label, nx, yy);
-      ctx.fillStyle = '#2D2925';
+      ctx.fillStyle = '#3D3427';
       ctx.font = '600 26px sans-serif';
-      ctx.fillText(v1 || '—', infoX + 66, y);
+      ctx.fillText(value || '—', nx + 78, yy);
-      if (l2) {
-        const x2 = infoX + 300;
-        ctx.fillStyle = '#9A8F82';
-        ctx.font = '24px sans-serif';
-        ctx.fillText(l2, x2, y);
-        ctx.fillStyle = '#2D2925';
-        ctx.font = '600 26px sans-serif';
-        ctx.fillText(v2 || '—', x2 + 66, y);
-      }
-      y += 44;
     };
-    pair('品种', c.breed, '毛色', c.color);
+    kvF('性别', c.gender, avY + 92);
-    pair('出生', c.birthday, '星座', c.zodiac);
+    kvF('品种', c.breed, avY + 130);
-    pair('体重', c.weight, '', '');
+    kvF('毛色', c.color, avY + 168);
+    kvF('年龄', c.age, avY + 206);
 
-    // 性格标签 chips
+    // 性格标签
+    let ty = avY + avD + 34;
+    ctx.textAlign = 'left';
+    ctx.fillStyle = '#8A5A18';
+    ctx.font = '600 24px sans-serif';
+    ctx.fillText('🐾 性格标签', fx + 34, ty);
     const tags = (c.personality || '').split(',').filter(Boolean);
-    if (tags.length) {
+    const tagColors = [['#FFE7A8', '#8A5A18'], ['#D6E9FF', '#2E6DA8'], ['#FFD9DE', '#C24A63']];
-      let tx = infoX;
+    let tx = fx + 34;
-      const ty = y + 8;
+    ty += 42;
-      tags.forEach((t) => {
+    tags.forEach((t, i) => {
-        ctx.font = '22px sans-serif';
+      ctx.font = '23px sans-serif';
-        const tw = ctx.measureText(t).width + 28;
+      const tw = ctx.measureText(t).width + 32;
-        ctx.fillStyle = 'rgba(245,169,71,.2)';
+      const col = tagColors[i % tagColors.length];
-        this.roundRect(ctx, tx, ty - 26, tw, 36, 18);
+      ctx.fillStyle = col[0];
-        ctx.fill();
+      this.roundRect(ctx, tx, ty - 28, tw, 40, 20);
-        ctx.fillStyle = '#A96500';
+      ctx.fill();
-        ctx.textAlign = 'left';
+      ctx.fillStyle = col[1];
-        ctx.fillText(t, tx + 14, ty);
+      ctx.textAlign = 'left';
-        tx += tw + 12;
+      ctx.fillText(t, tx + 16, ty);
-      });
+      tx += tw + 14;
+    });
+
+    // 介绍 quote
+    if (c.intro) {
+      const qy = ty + 30;
+      ctx.fillStyle = 'rgba(255,255,255,.6)';
+      this.roundRect(ctx, fx + 34, qy, cardW2 - 68, 60, 16);
+      ctx.fill();
+      ctx.fillStyle = '#7A5A2E';
+      ctx.font = '25px sans-serif';
+      ctx.textAlign = 'left';
+      ctx.fillText('“ ' + c.intro + ' ”', fx + 54, qy + 40);
     }
 
-    // ═══ 照护信息 ═══
+    // 底部：身份ID + 一起生活天数
-    const s2Y = s1Y + s1H + 14, s2H = 290;
+    ctx.textAlign = 'left';
-    this.roundRect(ctx, pad, s2Y, cardW, s2H, 28);
+    ctx.fillStyle = '#9C7A3E';
+    ctx.font = '22px sans-serif';
+    ctx.fillText('物ID  ' + (c.id_no || ''), fx + 34, fY + fH - 60);
+    if (c.days > 0) {
+      ctx.fillText('和主人一起生活的第 ' + c.days + ' 天', fx + 34, fY + fH - 26);
+    }
+
+    // ══════════ 背面卡（白 + 蓝）══════════
+    const bY = fY + fH + 46, bH = 620;
+    ctx.textAlign = 'center';
+    ctx.fillStyle = '#C7A36A';
+    ctx.font = '22px sans-serif';
+    ctx.fillText('· 背面 ·', W / 2, bY - 16);
+    this.roundRect(ctx, fx, bY, cardW2, bH, 30);
     ctx.fillStyle = '#FFFFFF';
     ctx.fill();
-    ctx.textAlign = 'left';
-    ctx.fillStyle = '#B4623F';
-    ctx.font = '700 30px sans-serif';
-    ctx.fillText('照护信息', pad + 40, s2Y + 56);
-    const kv = (label, value, yy) => {
-      ctx.textAlign = 'left';
-      ctx.font = '24px sans-serif';
-      ctx.fillStyle = '#9A8F82';
-      ctx.fillText(label, pad + 40, yy);
-      ctx.font = '600 26px sans-serif';
-      ctx.fillStyle = '#2D2925';
-      ctx.fillText(value || '—', pad + 190, yy);
-    };
-    kv('主人', c.owner, s2Y + 108);
-    kv('联系电话', c.phone || '未验证', s2Y + 152);
-    kv('疫苗情况', c.vaccine_state, s2Y + 196);
-    kv('备注', c.notes || '无', s2Y + 240);
 
-    // ═══ 证件区（蓝紫渐变）+ 小程序码 ═══
+    // 蓝色标题条
-    const s3Y = s2Y + s2H + 14, s3H = H - s3Y - pad;
+    const hb = 64;
-    const g3 = ctx.createLinearGradient(pad, s3Y, W - pad, s3Y + s3H);
+    const gb = ctx.createLinearGradient(fx, bY, fx + cardW2, bY);
-    g3.addColorStop(0, '#E8F0FF');
+    gb.addColorStop(0, '#5AA0E8');
-    g3.addColorStop(1, '#F0E8FF');
+    gb.addColorStop(1, '#7FB6F0');
-    this.roundRect(ctx, pad, s3Y, cardW, s3H, 28);
+    this.roundRect(ctx, fx + 24, bY + 24, cardW2 - 48, hb, 18);
-    ctx.fillStyle = g3;
+    ctx.fillStyle = gb;
+    ctx.fill();
+    ctx.textAlign = 'center';
+    ctx.fillStyle = '#fff';
+    ctx.font = '700 28px sans-serif';
+    ctx.fillText('🌿 照护信息', W / 2, bY + 24 + 42);
+
+    // 照护行（emoji 图标 + 标签 + 值）
+    const rowX = fx + 40;
+    const kvB = (icon, label, value, yy) => {
+      ctx.textAlign = 'left';
+      ctx.font = '26px sans-serif';
+      ctx.fillText(icon, rowX, yy);
+      ctx.font = '24px sans-serif';
+      ctx.fillStyle = '#8D8277';
+      ctx.fillText(label, rowX + 44, yy);
+      ctx.font = '600 25px sans-serif';
+      ctx.fillStyle = '#2D2925';
+      ctx.fillText(value || '—', rowX + 170, yy);
+    };
+    let ry = bY + 140;
+    kvB('👤', '主人', c.owner, ry); ry += 46;
+    kvB('📞', '联系电话', c.phone || '未验证', ry); ry += 46;
+    kvB('💉', '疫苗情况', c.vaccine_state, ry); ry += 46;
+    kvB('📝', '备注', c.notes || '无', ry); ry += 46;
+    kvB('🏛', '发证机构', c.org || '肉垫计划', ry); ry += 46;
+    kvB('📅', '有效期', c.validity || '永久有效', ry); ry += 40;
+
+    // 走失联系框 + 小程序码
+    const lostY = ry + 16, lostH = bY + bH - lostY - 30;
+    this.roundRect(ctx, fx + 24, lostY, cardW2 - 48, lostH, 18);
+    ctx.fillStyle = '#EAF3FE';
     ctx.fill();
     ctx.textAlign = 'left';
-    ctx.fillStyle = '#7D89A8';
+    ctx.fillStyle = '#2E6DA8';
-    ctx.font = '22px sans-serif';
+    ctx.font = '600 25px sans-serif';
-    ctx.fillText('宠 星 人 地 球 移 民', pad + 40, s3Y + 50);
+    ctx.fillText('🔔 走失时请联系主人', fx + 44, lostY + 44);
-    ctx.fillStyle = '#4A5878';
+    ctx.fillStyle = '#5B7A9C';
-    ctx.font = '700 48px sans-serif';
+    ctx.font = '21px sans-serif';
-    ctx.fillText('居民身份卡', pad + 40, s3Y + 112);
+    ctx.fillText('微信扫一扫，查看' + (c.name || '') + '的身份信息', fx + 44, lostY + 84);
-    ctx.fillStyle = '#8A93A8';
+    ctx.fillText('或联系主人', fx + 44, lostY + 114);
-    ctx.font = '22px sans-serif';
-    ctx.fillText('身份 ID　' + (c.id_no || ''), pad + 40, s3Y + 156);
-    ctx.fillText('签发机构　' + (c.org || '肉垫计划'), pad + 40, s3Y + 190);
-    ctx.fillText('有效期限　' + (c.validity || '永久有效'), pad + 40, s3Y + 224);
-
     // 小程序码
-    const qrD = 118, qrX = W - pad - 36 - qrD, qrY = s3Y + s3H - 36 - qrD;
+    const qrD = 118, qrX = fx + cardW2 - 24 - 20 - qrD, qrY = lostY + (lostH - qrD) / 2;
     ctx.fillStyle = '#fff';
     this.roundRect(ctx, qrX, qrY, qrD, qrD, 12);
     ctx.fill();
     if (qr) {
       ctx.drawImage(qr, qrX + 8, qrY + 8, qrD - 16, qrD - 16);
     } else {
-      ctx.fillStyle = '#B5A99D';
+      ctx.fillStyle = '#9CB4CC';
-      ctx.font = '20px sans-serif';
+      ctx.font = '18px sans-serif';
       ctx.textAlign = 'center';
-      ctx.fillText('小程序码', qrX + qrD / 2, qrY + qrD / 2 - 4);
+      ctx.fillText('小程序码', qrX + qrD / 2, qrY + qrD / 2 - 2);
-      ctx.fillText('待发布', qrX + qrD / 2, qrY + qrD / 2 + 26);
+      ctx.fillText('待发布', qrX + qrD / 2, qrY + qrD / 2 + 24);
     }
 
     wx.canvasToTempFilePath(
@@ -269,17 +325,20 @@ Page({
   // 拿回后重新取卡（此时电话就有了）并重画
   onGetPhone(e) {
     const d = e.detail || {};
-    if (!d.code) return; // 用户拒绝授权
+    if (!d.code) {
+      // 用户拒绝授权：不给生成，明确提示
+      this.setData({ phoneRefused: true });
+      return wx.showToast({ title: '没有手机号，无法生成身份卡', icon: 'none' });
+    }
     wx.showLoading({ title: '验证中…', mask: true });
     api
       .bindPhone(d.code)
       .then(() => api.petIDCard(this.data.petId))
       .then((card) => {
         wx.hideLoading();
-        if (card) {
+        if (!card) return;
-          this.setData({ card, qrReady: !!card.qr_ready });
+        this.setData({ card, qrReady: !!card.qr_ready, needPhone: false, phoneRefused: false });
-          this.draw();
+        wx.nextTick(() => this.draw());
-        }
         wx.showToast({ title: '手机号已验证', icon: 'success' });
       })
       .catch((err) => {

pets-fe/pages/idcard/idcard.wxml

@@ -2,32 +2,35 @@
 
 <scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
 <view class="page-body ic-body">
+  <!-- 手机号门槛：没验证不生成，先唤起微信取号 -->
+  <view wx:if="{{needPhone}}" class="ic-gate">
+    <view class="ic-gate-ic"><pt-icon name="user" size="{{72}}"></pt-icon></view>
+    <view class="ic-gate-t">生成身份卡需要手机号</view>
+    <view class="ic-gate-p">身份卡背面的「联系电话」用于走失时联系你，验证后才能生成</view>
+    <button wx:if="{{!phoneRefused}}" class="btn btn-primary btn-block ic-gate-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhone">用微信验证手机号</button>
+    <view wx:else class="ic-gate-refuse">没有手机号，无法生成身份卡</view>
+  </view>
+
   <!-- 画好的卡当成图片展示。canvas 本身是离屏的（挪到屏幕外），只用来生成图 -->
-  <view class="ic-stage">
+  <block wx:else>
-    <image wx:if="{{cardImg}}" class="ic-img" src="{{cardImg}}" mode="widthFix" show-menu-by-longpress="{{true}}"></image>
+    <view class="ic-stage">
-    <view wx:else class="ic-loading">正在生成身份卡…</view>
+      <image wx:if="{{cardImg}}" class="ic-img" src="{{cardImg}}" mode="widthFix" show-menu-by-longpress="{{true}}"></image>
-  </view>
+      <view wx:else class="ic-loading">正在生成身份卡…</view>
-
-  <!-- 手机号没验证时，引导用微信一键验证，用于背面「联系电话」和走失联系 -->
-  <view wx:if="{{card && !card.phone}}" class="ic-tip ic-phone-tip">
-    <text>背面「联系电话」还没验证，走失时联系不到你</text>
-    <button class="btn btn-soft ic-phone-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhone">
-      <pt-icon name="user" size="{{28}}"></pt-icon>用微信验证手机号
-    </button>
-  </view>
-
-  <view wx:if="{{!qrReady}}" class="ic-tip">
-    小程序码要在小程序发布后才会出现，现在先放一个占位。
-  </view>
-
-  <view class="ic-actions">
-    <view class="btn btn-soft ic-btn" bindtap="onSave">
-      <pt-icon name="photo" size="{{32}}"></pt-icon>下载到相册
     </view>
-    <button class="btn btn-dark ic-btn" open-type="share">
+
-      <pt-icon name="share" size="{{32}}"></pt-icon>分享给好友
+    <view wx:if="{{!qrReady}}" class="ic-tip">
-    </button>
+      小程序码要在小程序发布后才会出现，现在先放一个占位。
-  </view>
+    </view>
+
+    <view class="ic-actions">
+      <view class="btn btn-soft ic-btn" bindtap="onSave">
+        <pt-icon name="photo" size="{{32}}"></pt-icon>下载到相册
+      </view>
+      <button class="btn btn-dark ic-btn" open-type="share">
+        <pt-icon name="share" size="{{32}}"></pt-icon>分享给好友
+      </button>
+    </view>
+  </block>
 </view>
 </scroll-view>
 

pets-fe/pages/idcard/idcard.wxss

@@ -18,8 +18,19 @@ button.ic-btn{padding:0;line-height:normal}
 button.ic-btn::after{border:none}
 
 /* 离屏 canvas：挪出可视区，只用来生成图 */
-.ic-canvas{position:fixed;left:-9999rpx;top:0;width:620px;height:760px}
+.ic-canvas{position:fixed;left:-9999rpx;top:0;width:620px;height:1480px}
 
-/* 手机号验证提示 */
+/* 手机号门槛卡 */
-.ic-phone-tip{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);color:var(--red-ink)}
+.ic-gate{
-.ic-phone-btn{width:auto;padding:0 var(--sp-6)}
+  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd-1);
+  padding:var(--sp-6) var(--sp-5);margin-top:var(--sp-5);text-align:center;
+}
+.ic-gate-ic{
+  width:140rpx;height:140rpx;margin:0 auto var(--sp-4);border-radius:50%;
+  background:var(--primary-soft);color:var(--primary);
+  display:flex;align-items:center;justify-content:center;
+}
+.ic-gate-t{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text)}
+.ic-gate-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin:var(--sp-2) 0 var(--sp-5)}
+.ic-gate-refuse{color:var(--red-ink);font-weight:var(--fw-b);font-size:var(--fs-md)}
+.ic-gate-btn{margin-top:var(--sp-2)}