Files
WorkBuddy 269adf1fed 小程序端:设计系统收敛与排版层级修复
问题: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
2026-09-23 01:06:46 +08:00

143 lines
2.2 KiB
Plaintext

.page {
padding:32rpx;
background:var(--color-primary-lighter);
min-height:100vh;
}
.status-card {
display:flex;
align-items:center;
gap:16rpx;
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
margin-bottom:24rpx;
}
.status-dot {
width:20rpx;
height:20rpx;
border-radius:50%;
flex-shrink:0;
}
.status-text {
font-size:32rpx;
font-weight:bold;
color:var(--color-text-strong);
}
.info-card {
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
margin-bottom:24rpx;
}
.info-row {
display:flex;
justify-content:space-between;
padding:16rpx 0;
border-bottom:1rpx solid var(--color-divider);
}
.info-row:last-child {
border-bottom:none;
}
.info-label {
font-size:26rpx;
color:var(--color-text-tertiary);
}
.info-value {
font-size:26rpx;
color:var(--color-text-primary);
text-align:right;
max-width:55%;
}
.info-value.desc {
text-align:right;
line-height:1.6;
}
.notice {
background:var(--color-bg-card);
border-radius:24rpx;
padding:32rpx;
}
.notice-title {
font-size:28rpx;
font-weight:bold;
color:var(--color-text-primary);
margin-bottom:24rpx;
display:block;
}
.steps {
display:flex;
justify-content:space-between;
}
.step {
display:flex;
flex-direction:column;
align-items:center;
gap:8rpx;
}
.step-num {
width:48rpx;
height:48rpx;
border-radius:50%;
background:var(--color-bg-subtle);
color:var(--color-text-tertiary);
display:flex;
align-items:center;
justify-content:center;
font-size:24rpx;
}
.step.active .step-num, .step.done .step-num {
background:var(--color-primary-solid);
color:var(--color-text-inverse);
}
.step-text {
font-size:24rpx;
color:var(--color-text-tertiary);
}
.step.active .step-text, .step.done .step-text {
color:var(--color-text-primary);
}
.empty {
text-align:center;
padding:120rpx 40rpx;
}
.empty-desc {
display:block;
font-size:26rpx;
color:var(--color-text-tertiary);
margin:16rpx 0 40rpx;
}
.btn-apply {
background:var(--color-primary-solid);
color:var(--color-text-inverse);
border-radius:44rpx;
height:88rpx;
line-height:88rpx;
font-size:30rpx;
}
.loading {
text-align:center;
padding:120rpx;
color:var(--color-text-tertiary);
}