小程序端:设计系统收敛与排版层级修复
问题: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
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
.container { padding: 40rpx 24rpx; min-height: 100vh; background: #f5f5f5; display: flex; flex-direction: column; align-items: center; }
|
||||
.header { text-align: center; margin-bottom: 40rpx; }
|
||||
.avatar { width: 120rpx; height: 120rpx; border-radius: 60rpx; background: #eee; }
|
||||
.partner-name { font-size: 36rpx; font-weight: bold; color: #333; display: block; margin-top: 16rpx; }
|
||||
.status-section { background: #fff; border-radius: 20rpx; padding: 48rpx 40rpx; width: 100%; text-align: center; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
||||
.success-icon, .waiting-icon, .pending-icon { font-size: 72rpx; margin-bottom: 20rpx; }
|
||||
.success-title, .waiting-title, .pending-title { font-size: 34rpx; font-weight: bold; color: #333; display: block; margin-bottom: 12rpx; }
|
||||
.success-hint, .waiting-hint, .pending-hint { font-size: 26rpx; color: #888; display: block; margin-bottom: 32rpx; }
|
||||
.chat-btn, .confirm-btn { background: linear-gradient(135deg, #FF6B6B, #EE5A24); color: #fff; border: none; border-radius: 44rpx; font-size: 30rpx; padding: 16rpx 60rpx; }
|
||||
.decline-btn { background: #f5f5f5; color: #999; border: none; border-radius: 44rpx; font-size: 28rpx; padding: 16rpx 60rpx; margin-top: 20rpx; }
|
||||
.container { padding:40rpx 24rpx; min-height:100vh; background:var(--color-bg-subtle); display:flex; flex-direction:column; align-items:center; }
|
||||
.header { text-align:center; margin-bottom:40rpx; }
|
||||
.avatar { width:120rpx; height:120rpx; border-radius:60rpx; background:var(--color-bg-subtle); }
|
||||
.partner-name { font-size:36rpx; font-weight:bold; color:var(--color-text-primary); display:block; margin-top:16rpx; }
|
||||
.status-section { background:var(--color-bg-card); border-radius:20rpx; padding:48rpx 40rpx; width:100%; text-align:center; box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06); }
|
||||
.success-icon, .waiting-icon, .pending-icon { font-size:72rpx; margin-bottom:20rpx; }
|
||||
.success-title, .waiting-title, .pending-title { font-size:34rpx; font-weight:bold; color:var(--color-text-primary); display:block; margin-bottom:12rpx; }
|
||||
.success-hint, .waiting-hint, .pending-hint { font-size:26rpx; color:var(--color-text-tertiary); display:block; margin-bottom:32rpx; }
|
||||
.chat-btn, .confirm-btn { background:var(--gradient-brand-solid); color:var(--color-text-inverse); border:none; border-radius:44rpx; font-size:30rpx; padding:16rpx 60rpx; }
|
||||
.decline-btn { background:var(--color-bg-subtle); color:var(--color-text-tertiary); border:none; border-radius:44rpx; font-size:28rpx; padding:16rpx 60rpx; margin-top:20rpx; }
|
||||
|
||||
Reference in New Issue
Block a user