问题:88 个 wxss 里散落大量硬编码颜色/字号/字重,无法统一调整; 部分正文对比度不达 WCAG AA(4.5:1);组件触摸目标偏小。 改动: - 硬编码颜色收敛到语义 token(颜色统一走 design token,不再散落字面值) - 修正全站字号阶梯:正文 ≥12px、角标 ≥11px;字重只用 400/500/600/700 - 组件触摸目标提升到 ≥44px,并补交互反馈 - 首页补氛围层次、强化排版层级 验证(本轮实测): - UI 契约门禁 18/18 PASS(含 wxml 结构、wxss 组件选择器、token 显式值断言) - 声明级体检 88/88 通过(全部 wxss 声明合法) 交付物:artifacts/miniapp-design-v2-preview.html
80 lines
1.5 KiB
Plaintext
80 lines
1.5 KiB
Plaintext
.page {
|
|
min-height:100vh;
|
|
background:var(--color-bg-page);
|
|
}
|
|
|
|
.messages-hero {
|
|
padding:env(safe-area-inset-top) 24rpx 34rpx;
|
|
border-radius:0 0 36rpx 36rpx;
|
|
background:linear-gradient(160deg, var(--mini-night-start), var(--mini-night-end));
|
|
box-shadow:var(--mini-shadow);
|
|
}
|
|
|
|
.messages-nav {
|
|
position:relative;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
height:88rpx;
|
|
}
|
|
|
|
.messages-title {
|
|
color:var(--color-text-inverse);
|
|
font-size:31rpx;
|
|
font-weight:700;
|
|
}
|
|
|
|
.messages-search {
|
|
position:absolute;
|
|
right:14rpx;
|
|
width:34rpx;
|
|
height:34rpx;
|
|
}
|
|
|
|
.message-shortcuts {
|
|
display:grid;
|
|
grid-template-columns:repeat(4, 1fr);
|
|
padding:22rpx 8rpx 4rpx;
|
|
}
|
|
|
|
.message-shortcut {
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:center;
|
|
color:rgba(255, 255, 255, .88);
|
|
font-size:24rpx;
|
|
}
|
|
|
|
.shortcut-icon {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:72rpx;
|
|
height:72rpx;
|
|
margin-bottom:12rpx;
|
|
border:1rpx solid rgba(255, 255, 255, .2);
|
|
border-radius:26rpx;
|
|
}
|
|
|
|
.shortcut-icon image {
|
|
width:45rpx;
|
|
height:45rpx;
|
|
}
|
|
|
|
.shortcut-icon--blue { background:rgba(79, 139, 255, .28); }
|
|
.shortcut-icon--pink { background:rgba(255, 92, 130, .28); }
|
|
.shortcut-icon--purple { background:rgba(154, 107, 255, .28); }
|
|
.shortcut-icon--coral { background:rgba(240, 106, 100, .28); }
|
|
|
|
.messages-content {
|
|
padding:16rpx 24rpx 40rpx;
|
|
}
|
|
|
|
.conversation-list {
|
|
overflow:hidden;
|
|
margin-top:8rpx;
|
|
border-radius:28rpx;
|
|
background:var(--color-bg-card);
|
|
box-shadow:0 10rpx 32rpx rgba(34, 35, 91, .08);
|
|
}
|