feat(miniapp): 首页 4×2 入口宫格图标改版为参考图 2 的渐变砖 + 白色图形
参考图 2 的视觉语言是「高饱和渐变圆角砖 + 白色描画图形 + 主标题/副标题双层文字」, 原实现是「浅色底砖 + 彩色线性 PNG + 单行标题」,两者差异较大,本轮按参考图重做。 - app.wxss:新增 8 个 --gradient-entry-* 渐变 token 与 --mini-entry-shadow。 白图形的判据取**非文本图形 3:1**(WCAG 1.4.11);渐变是斜向的、图形又跨在两色之间, 故以「较亮端」为准逐色实算(3.00~3.02:1,较暗端 3.54~4.08:1),实算值写在 token 注释里。 - index.wxss:.entry-icon 由 72rpx 浅色砖改为 96rpx 渐变砖(radius 28rpx + 落影); 图形改用 data-uri SVG 背景层(几何图形统一 24×24 viewBox),砖面走 --gradient-entry-*; 新增 .entry-sub(12px muted 副标题);删除已无用的 .entry-icon-image。 小屏 @media(≤340px) 同步收紧,副标题不降到 micro —— micro 在本项目是「仅角标/装饰」档位, 这行字承载语义,不属于装饰。 - index.wxml:宫格项去掉 <image>,图标改为纯 CSS 砖;补 aria-label 承接图形语义。 - index.ts:tone 名与色相语义对齐(rose/orange/violet/blue/purple/pink/green/amber), 并补 subtitle;entry 不再持有 iconAsset(图标不再是图片资源)。 - preview-miniapp.mjs:首页 mock 同步 tone/subtitle,预览才能看到真实砖面与副标题。 渲染态实测(无头浏览器 + CDP,非真机渲染): - 8 个 .entry-item 均渲染出 label + subtitle;.entry-icon 计算样式 48×48px / radius 14px / background-image 含 svg 且为两层(图形 26px + 渐变铺满);label 14px/600;sub 12px #7D839B。 - 证据截图:artifacts/ui-redesign/miniapp/home-entries-page.png 与 home-entries-grid-zoom.png。 门禁:UI 契约 23/23;语种审计 0 命中;tsc --noEmit 通过;wcc/wcsc 真编译 88 WXSS + 86 WXML / 0 失败。 未改(需产品确认):第 8 项业务名仍是「善缘服务站」(参考图 2 写作「万善缘地」), 副标题自拟为「就在身边」;渐变整体比参考图略深,以保证白图形对比度达标。
This commit is contained in:
@@ -51,15 +51,18 @@ const MOCK = {
|
||||
],
|
||||
banners: [{ id: 'b1', title: '在丹阳,遇见认真的彼此', subtitle: '公益 · 本地 · 真实 · 安全' }],
|
||||
currentBannerIndex: 0,
|
||||
// 与 pages/index/index.ts 的 ENTRY_VISUALS 保持一致(tone + subtitle)。
|
||||
// 图标已改为 CSS 渐变砖 + data-uri 白色图形,故此处不再有 iconAsset ——
|
||||
// 预览要看到的是真实砖面与副标题,而不是一张假的图片路径。
|
||||
quickEntries: [
|
||||
{ code: 'find_object', label: '找对象', enabled: true, tone: 'rose', iconAsset: '/assets/icons/home/find-object.png' },
|
||||
{ code: 'matchmaker', label: '公益红娘', enabled: true, tone: 'purple', iconAsset: '/assets/icons/home/matchmaker.png' },
|
||||
{ code: 'activities', label: '公益活动', enabled: true, tone: 'blue', iconAsset: '/assets/icons/home/activity.png' },
|
||||
{ code: 'counseling', label: '婚恋咨询', enabled: true, tone: 'pink', iconAsset: '/assets/icons/home/counseling.png' },
|
||||
{ code: 'classroom', label: '婚恋课堂', enabled: true, tone: 'amber', iconAsset: '/assets/icons/home/classroom.png' },
|
||||
{ code: 'premarital', label: '婚前辅导', enabled: true, tone: 'indigo', iconAsset: '/assets/icons/home/premarital.png' },
|
||||
{ code: 'anti_fraud', label: '婚恋反诈', enabled: true, tone: 'red', iconAsset: '/assets/icons/home/anti-fraud.png' },
|
||||
{ code: 'service_station', label: '善缘服务站', enabled: true, tone: 'green', iconAsset: '/assets/icons/home/service-station.png' },
|
||||
{ code: 'find_object', label: '找对象', enabled: true, tone: 'rose', subtitle: '真实邂逅' },
|
||||
{ code: 'matchmaker', label: '公益红娘', enabled: true, tone: 'orange', subtitle: '官方牵线' },
|
||||
{ code: 'activities', label: '公益活动', enabled: true, tone: 'violet', subtitle: '线下联谊' },
|
||||
{ code: 'counseling', label: '婚恋咨询', enabled: true, tone: 'blue', subtitle: '专业指导' },
|
||||
{ code: 'classroom', label: '婚恋课堂', enabled: true, tone: 'purple', subtitle: '提升自我' },
|
||||
{ code: 'premarital', label: '婚前辅导', enabled: true, tone: 'pink', subtitle: '幸福起航' },
|
||||
{ code: 'anti_fraud', label: '婚恋反诈', enabled: true, tone: 'green', subtitle: '守护真爱' },
|
||||
{ code: 'service_station', label: '善缘服务站', enabled: true, tone: 'amber', subtitle: '就在身边' },
|
||||
],
|
||||
recommendations: [
|
||||
{ userId: 'u1', displayName: '王女士', age: 28, heightCm: 163, regionName: '丹阳', educationCode: '本科', occupationCode: '教育', verified: true, reviewed: true, recommendationReasons: ['同城', '年龄相近', '兴趣重合'] },
|
||||
|
||||
Reference in New Issue
Block a user