小程序端：设计系统收敛与排版层级修复
问题：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:
WorkBuddy
+696
-10
@@ -1,10 +1,696 @@
|
||||
.page{min-height:100vh;background:#F4F5FA;padding-bottom:40rpx}.night-shell{padding:0 24rpx 28rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 42rpx 42rpx;box-shadow:var(--mini-shadow)}
|
||||
.brand-bar{height:112rpx;padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;color:var(--mini-text-on-night)}.brand-lockup{display:flex;align-items:center}.brand-logo{width:66rpx;height:66rpx}.brand-copy{display:flex;flex-direction:column;margin-left:12rpx}.brand-name{font-size:34rpx;font-weight:700;letter-spacing:2rpx}.brand-slogan{font-size:18rpx;letter-spacing:4rpx;color:var(--mini-text-on-night-muted)}.brand-actions{position:relative;min-width:76rpx;height:72rpx;display:flex;align-items:center;justify-content:center}.message-label{font-size:23rpx}.badge{position:absolute;right:0;top:4rpx;min-width:28rpx;height:28rpx;padding:0 4rpx;line-height:28rpx;text-align:center;font-size:18rpx;color:#fff;background:var(--mini-accent-pink);border-radius:20rpx}
|
||||
.status-strip{margin:4rpx 0 16rpx;padding:18rpx 20rpx;border:1rpx solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);border-radius:20rpx;color:#fff}.status-main{display:flex;align-items:center;gap:16rpx}.status-copy{flex:1;min-width:0;display:flex;flex-direction:column}.status-title{font-size:25rpx;font-weight:650}.status-desc{margin-top:5rpx;font-size:20rpx;color:var(--mini-text-on-night-muted);line-height:1.4}.status-action{flex:none;min-width:108rpx;min-height:56rpx;padding:0 18rpx;display:flex;align-items:center;justify-content:center;border-radius:28rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));font-size:22rpx;font-weight:650}.status-checks{display:flex;gap:10rpx;overflow:hidden}.status-check{padding:8rpx 12rpx;border-radius:20rpx;background:rgba(255,255,255,.08);font-size:19rpx;color:var(--mini-text-on-night-muted);white-space:nowrap}.status-check.done{background:rgba(90,226,184,.16);color:#A6F5D7}
|
||||
.banner-section{width:100%}.banner-swiper,.banner-card{height:272rpx;border-radius:26rpx;overflow:hidden}.banner-card{position:relative}.banner-img{width:100%;height:100%;display:block}.banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,22,86,.78) 0%,rgba(43,22,101,.25) 58%,rgba(255,79,145,.08) 100%)}.banner-copy{position:absolute;left:26rpx;bottom:26rpx;width:68%;display:flex;flex-direction:column;color:#fff}.banner-kicker{font-size:18rpx;letter-spacing:3rpx;color:rgba(255,255,255,.78)}.banner-title{margin-top:9rpx;font-size:35rpx;line-height:1.2;font-weight:750;text-shadow:0 3rpx 10rpx rgba(0,0,0,.2)}.banner-subtitle{margin-top:8rpx;font-size:22rpx;color:rgba(255,255,255,.84)}
|
||||
.entries-card{position:relative;z-index:2;margin:-14rpx 24rpx 0;padding:22rpx 10rpx 18rpx;background:var(--mini-card-bg);border-radius:30rpx;box-shadow:var(--mini-shadow)}.entries-grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:18rpx}.entry-item{min-height:104rpx;display:flex;flex-direction:column;align-items:center;justify-content:center}.entry-item.disabled{opacity:.4}.entry-icon{width:66rpx;height:66rpx;display:flex;align-items:center;justify-content:center;border-radius:20rpx;overflow:hidden}.entry-icon-image{width:45rpx;height:45rpx}.entry-label{margin-top:8rpx;font-size:21rpx;color:#283056;font-weight:550}.tone-rose{background:#FFF0F5}.tone-purple{background:#F0EAFE}.tone-blue{background:#EAF3FF}.tone-pink{background:#FFF0F7}.tone-amber{background:#FFF3E5}.tone-indigo{background:#ECEEFF}.tone-red{background:#FFEDEF}.tone-green{background:#EAF8F2}
|
||||
.preview-note{margin:16rpx 24rpx 0;text-align:center;color:#8B63BC;font-size:20rpx}.section{margin-top:34rpx;padding:0 24rpx}.recommendation-section{margin-top:30rpx}.recommend-list{margin-top:16rpx;border-radius:26rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.recommend-empty{margin-top:16rpx;padding:22rpx;display:flex;align-items:center;gap:18rpx;background:#fff;border-radius:26rpx;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.empty-logo{width:76rpx;height:76rpx;flex:none}.empty-copy{flex:1;min-width:0;display:flex;flex-direction:column}.empty-title{font-size:25rpx;font-weight:650;color:#222746}.empty-desc{margin-top:6rpx;font-size:20rpx;line-height:1.4;color:#7A7F98}.empty-actions{display:flex;flex-direction:column;gap:8rpx}.empty-btn{min-width:112rpx;height:48rpx;padding:0 12rpx;display:flex;align-items:center;justify-content:center;border-radius:24rpx;font-size:20rpx}.empty-btn.secondary{color:#7C60BC;background:#F1EEFB}.empty-btn.primary{color:#fff;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink))}
|
||||
.service-card{display:flex;align-items:stretch;margin-top:16rpx;background:#fff;border-radius:26rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.service-cover{width:210rpx;min-height:156rpx}.service-copy{flex:1;padding:20rpx;display:flex;flex-direction:column}.service-title{font-size:25rpx;font-weight:650;color:#222746}.service-desc{margin-top:7rpx;font-size:21rpx;color:#757B91;line-height:1.45}.text-link{margin-top:auto;padding-top:10rpx;font-size:21rpx;color:var(--mini-accent-pink);font-weight:650}
|
||||
.activity-scroll{white-space:nowrap;margin-top:16rpx}.activity-card{display:inline-flex;width:550rpx;margin-right:18rpx;background:#fff;border-radius:24rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07);white-space:normal}.activity-cover{width:210rpx;height:168rpx}.activity-info{flex:1;padding:18rpx;display:flex;flex-direction:column}.activity-tag{align-self:flex-start;padding:5rpx 12rpx;border-radius:18rpx;background:#FFF0F5;color:var(--mini-accent-pink);font-size:18rpx}.activity-title{margin-top:10rpx;font-size:25rpx;font-weight:650;color:#222746;line-height:1.35}.activity-meta{margin-top:auto;font-size:20rpx;color:#81869B}
|
||||
.station-card,.article-row,.safety-card{display:flex;align-items:center;background:#fff;border-radius:26rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.station-cover{width:190rpx;height:170rpx}.station-info{flex:1;min-width:0;padding:18rpx}.station-name{display:block;font-size:26rpx;font-weight:650;color:#222746}.station-desc{display:block;margin:7rpx 0 12rpx;font-size:20rpx;color:#7A7F98}.mini-tag{display:inline-block;margin:4rpx 7rpx 0 0;padding:4rpx 9rpx;border-radius:14rpx;background:#F0EEFB;color:#6857A2;font-size:17rpx}.arrow-icon{width:28rpx;height:28rpx;margin:16rpx;flex:none}.article-list{margin-top:16rpx;display:flex;flex-direction:column;gap:12rpx}.article-row{min-height:112rpx}.article-cover{width:146rpx;height:112rpx}.article-info,.safety-info{flex:1;min-width:0;padding:16rpx}.article-title{display:block;font-size:24rpx;font-weight:600;color:#222746;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article-meta{display:block;margin-top:6rpx;font-size:19rpx;color:#85899C}.section-empty{margin-top:16rpx;padding:30rpx 24rpx;text-align:center;color:#8A90A6;font-size:22rpx;background:#fff;border-radius:24rpx;box-shadow:0 8rpx 28rpx rgba(35,35,95,.05)}.safety-card{padding:0}.safety-cover{width:180rpx;align-self:stretch}.safety-title{display:block;font-size:25rpx;font-weight:650;color:#222746}.safety-body{display:block;margin-top:7rpx;font-size:20rpx;line-height:1.45;color:#74798E}.safety-link{display:block;margin-top:9rpx;font-size:20rpx;color:var(--mini-accent-pink);font-weight:650}
|
||||
@media (max-width:340px){.entry-label{font-size:19rpx}.entry-icon{width:60rpx;height:60rpx}.banner-title{font-size:31rpx}.status-checks{overflow-x:auto}.empty-actions{display:none}}
|
||||
/**
|
||||
* 首页 —— 全站设计系统样板页
|
||||
*
|
||||
* 2026-09-22 重做。这一版要证明 app.wxss v2 的底座是"能用"的：
|
||||
*
|
||||
* 1) 氛围层（参考图的关键差异项）
|
||||
* 旧版只有一条线性渐变，参考图里有明显的暖粉光晕、星点与玻璃质感。
|
||||
* 现用三层叠加：--mini-starfield（星点）+ --gradient-night（夜空）
|
||||
* + 两个定位光晕伪元素（左上粉 / 左下靛蓝），零图片、零额外请求。
|
||||
*
|
||||
* 2) 排版层级
|
||||
* 旧版 hero 标题 35rpx、区块标题 36rpx、卡片标题 25rpx、正文 24rpx ——
|
||||
* hero 与区块标题几乎同号，层级读不出来。现为：
|
||||
* hero 48rpx/700 > 区块标题 40rpx/600 > 卡片标题 28rpx/600 >
|
||||
* 正文 26rpx > 元信息 24rpx
|
||||
*
|
||||
* 3) 触摸目标
|
||||
* 所有可点元素以 --tap-min(88rpx=44px) 为下限；旧版 .empty-btn 只有 24px。
|
||||
* 并且删掉了 @media(max-width:340px) 里的 .empty-actions{display:none} ——
|
||||
* 那等于在小屏上把「调整条件 / 公益红娘」两个入口整块砍掉。
|
||||
*
|
||||
* 4) 交互反馈
|
||||
* 旧版全站 --motion-* 只被引用 5 次，点了没反应。现统一走 --ease-spring
|
||||
* + --press-scale，并给区块卡片加上按压缩放。
|
||||
*
|
||||
* 5) 对比度
|
||||
* 旧版 .text-link/.activity-tag/.safety-link 用 --mini-accent-pink(#FF4F91)
|
||||
* 作文字 = 3.10:1，不达标；CTA 白字压在珊瑚粉渐变上也只有 2.77:1。
|
||||
* 现分别改用 --color-primary-strong(5.33:1) 与 --gradient-brand-solid(≥4.7:1)。
|
||||
*
|
||||
* 单位：rpx（750rpx = 屏幕宽度，1rpx ≈ 0.5px）
|
||||
*/
|
||||
|
||||
/* ============================== 页面骨架 ============================== */
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: var(--spacing-5);
|
||||
}
|
||||
|
||||
/* ============================== 夜空头部 ============================== */
|
||||
|
||||
.night-shell {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0 var(--spacing-3) var(--spacing-4);
|
||||
background: var(--mini-starfield), var(--gradient-night);
|
||||
border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
|
||||
box-shadow: var(--shadow-night);
|
||||
}
|
||||
|
||||
/* 两个光晕：伪元素承担，避免为了装饰再嵌一层 view */
|
||||
.night-shell::before,
|
||||
.night-shell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: var(--z-ambient);
|
||||
}
|
||||
.night-shell::before {
|
||||
top: -200rpx;
|
||||
right: -140rpx;
|
||||
width: 560rpx;
|
||||
height: 560rpx;
|
||||
background: radial-gradient(circle, var(--mini-glow-coral) 0%, transparent 68%);
|
||||
}
|
||||
.night-shell::after {
|
||||
bottom: -220rpx;
|
||||
left: -160rpx;
|
||||
width: 620rpx;
|
||||
height: 620rpx;
|
||||
background: radial-gradient(circle, var(--mini-glow-indigo) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
/* 伪元素是定位元素，会盖住静态流内容；正文需要显式抬一层 */
|
||||
.night-shell > view {
|
||||
position: relative;
|
||||
z-index: var(--z-base);
|
||||
}
|
||||
|
||||
/* ============================== 品牌栏 ============================== */
|
||||
|
||||
.brand-bar {
|
||||
min-height: 112rpx;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--mini-text-on-night);
|
||||
}
|
||||
.brand-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
.brand-logo {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
flex: none;
|
||||
}
|
||||
.brand-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: var(--spacing-2);
|
||||
}
|
||||
.brand-name {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-wider);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
.brand-slogan {
|
||||
margin-top: 2rpx;
|
||||
font-size: var(--font-size-xs);
|
||||
letter-spacing: 3rpx;
|
||||
color: var(--mini-text-on-night-muted);
|
||||
}
|
||||
.brand-actions {
|
||||
position: relative;
|
||||
flex: none;
|
||||
min-width: var(--tap-min);
|
||||
min-height: var(--tap-min);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.message-label {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4rpx;
|
||||
min-width: 30rpx;
|
||||
height: 30rpx;
|
||||
padding: 0 5rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-micro);
|
||||
color: var(--color-text-inverse);
|
||||
/* 白字需 4.5:1：--mini-accent-pink 仅 3.10，改用 solid 变体 */
|
||||
background: var(--color-primary-solid);
|
||||
border-radius: var(--radius-full);
|
||||
/* 描一圈夜空底色，避免角标压在光晕上时边缘糊掉 */
|
||||
box-shadow: 0 0 0 3rpx var(--mini-night-start);
|
||||
}
|
||||
|
||||
/* ============================== 状态条 ============================== */
|
||||
|
||||
.status-strip {
|
||||
margin: var(--spacing-1) 0 var(--spacing-2);
|
||||
padding: var(--spacing-3);
|
||||
border: var(--border-width) solid var(--mini-hairline);
|
||||
background: var(--mini-glass);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
.status-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
.status-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status-title {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
.status-desc {
|
||||
margin-top: 6rpx;
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--mini-text-on-night-muted);
|
||||
}
|
||||
.status-action {
|
||||
flex: none;
|
||||
min-width: 116rpx;
|
||||
min-height: var(--tap-min);
|
||||
padding: 0 var(--spacing-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--gradient-brand-solid);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
.status-checks {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.status-check {
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--mini-glass);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--mini-text-on-night-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-check.done {
|
||||
background: var(--mini-glass-success);
|
||||
color: var(--color-success-on-night);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
/* ============================== 主视觉横幅 ============================== */
|
||||
|
||||
.banner-section {
|
||||
width: 100%;
|
||||
}
|
||||
.banner-swiper,
|
||||
.banner-card {
|
||||
height: 300rpx;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner-card {
|
||||
position: relative;
|
||||
}
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--mini-banner-scrim);
|
||||
}
|
||||
.banner-copy {
|
||||
position: absolute;
|
||||
left: var(--spacing-3);
|
||||
bottom: var(--spacing-5);
|
||||
width: 68%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
.banner-kicker {
|
||||
font-size: var(--font-size-xs);
|
||||
letter-spacing: 3rpx;
|
||||
color: var(--mini-text-on-night-muted);
|
||||
}
|
||||
.banner-title {
|
||||
margin-top: 10rpx;
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-wide);
|
||||
text-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
.banner-subtitle {
|
||||
margin-top: 10rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--mini-text-on-night-muted);
|
||||
}
|
||||
|
||||
/* ============================== 快捷入口 ============================== */
|
||||
|
||||
.entries-card {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: -18rpx var(--spacing-3) 0;
|
||||
padding: var(--spacing-3) var(--spacing-1) var(--spacing-2);
|
||||
background: var(--mini-card-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
/* 4 列宫格用 flex + 25% 宽实现。display:grid 在 Skyline 渲染引擎下不支持，
|
||||
统一避开以免将来切渲染引擎时整体错版。 */
|
||||
.entries-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: var(--spacing-2);
|
||||
}
|
||||
.entry-item {
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
min-height: 116rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.entry-item.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.entry-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
.entry-icon-image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.entry-label {
|
||||
margin-top: var(--spacing-1);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.tone-rose { background: var(--color-primary-light); }
|
||||
.tone-purple { background: var(--color-accent-purple-light); }
|
||||
.tone-blue { background: var(--color-info-light); }
|
||||
.tone-pink { background: var(--color-primary-light); }
|
||||
.tone-amber { background: var(--color-warning-light); }
|
||||
.tone-indigo { background: var(--color-info-light); }
|
||||
.tone-red { background: var(--color-danger-light); }
|
||||
.tone-green { background: var(--color-success-light); }
|
||||
|
||||
/* ============================== 区块容器 ============================== */
|
||||
|
||||
.preview-note {
|
||||
margin: var(--spacing-2) var(--spacing-3) 0;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-accent-purple-strong);
|
||||
}
|
||||
.section {
|
||||
margin-top: var(--spacing-5);
|
||||
padding: 0 var(--spacing-3);
|
||||
}
|
||||
.recommendation-section {
|
||||
margin-top: var(--spacing-5);
|
||||
}
|
||||
/* 标题与卡片左边缘必须对齐：.section 已提供 24rpx 内边距，
|
||||
而 ui-section 自带 --spacing-page-x(32rpx)，叠加会让标题比卡片多缩进 32rpx。 */
|
||||
.section .ui-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* ============================== 今日推荐 ============================== */
|
||||
|
||||
.recommend-list {
|
||||
margin-top: var(--spacing-2);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.recommend-empty {
|
||||
margin-top: var(--spacing-2);
|
||||
padding: var(--spacing-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.empty-logo {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
flex: none;
|
||||
}
|
||||
.empty-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.empty-title {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.empty-desc {
|
||||
margin-top: 6rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.empty-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1);
|
||||
}
|
||||
.empty-btn {
|
||||
min-width: 120rpx;
|
||||
min-height: var(--tap-min);
|
||||
padding: 0 var(--spacing-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.empty-btn.secondary {
|
||||
color: var(--color-accent-purple-strong);
|
||||
background: var(--color-accent-purple-light);
|
||||
}
|
||||
.empty-btn.primary {
|
||||
color: var(--color-text-inverse);
|
||||
background: var(--gradient-brand-solid);
|
||||
}
|
||||
|
||||
/* ============================== 公益服务 ============================== */
|
||||
|
||||
.service-card {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin-top: var(--spacing-2);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.service-cover {
|
||||
width: 210rpx;
|
||||
min-height: 160rpx;
|
||||
flex: none;
|
||||
}
|
||||
.service-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.service-title {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.service-desc {
|
||||
margin-top: 8rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.text-link {
|
||||
margin-top: auto;
|
||||
padding-top: var(--spacing-1);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-primary-strong);
|
||||
}
|
||||
|
||||
/* ============================== 近期活动 ============================== */
|
||||
|
||||
.activity-scroll {
|
||||
white-space: nowrap;
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
.activity-card {
|
||||
display: inline-flex;
|
||||
width: 550rpx;
|
||||
margin-right: var(--spacing-2);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
white-space: normal;
|
||||
}
|
||||
.activity-cover {
|
||||
width: 210rpx;
|
||||
height: 172rpx;
|
||||
flex: none;
|
||||
}
|
||||
.activity-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.activity-tag {
|
||||
align-self: flex-start;
|
||||
padding: 5rpx 14rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary-strong);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.activity-title {
|
||||
margin-top: 10rpx;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.activity-meta {
|
||||
margin-top: auto;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* ============================== 服务站 / 婚恋课堂 ============================== */
|
||||
|
||||
.station-card,
|
||||
.article-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.station-cover {
|
||||
width: 190rpx;
|
||||
height: 172rpx;
|
||||
flex: none;
|
||||
}
|
||||
.station-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
.station-name {
|
||||
display: block;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.station-desc {
|
||||
display: block;
|
||||
margin: 8rpx 0 12rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.mini-tag {
|
||||
display: inline-block;
|
||||
margin: 4rpx 8rpx 0 0;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-accent-purple-light);
|
||||
color: var(--color-accent-purple-strong);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
.arrow-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: var(--spacing-2);
|
||||
flex: none;
|
||||
}
|
||||
.article-list {
|
||||
margin-top: var(--spacing-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.article-row {
|
||||
min-height: 116rpx;
|
||||
}
|
||||
.article-cover {
|
||||
width: 146rpx;
|
||||
height: 116rpx;
|
||||
flex: none;
|
||||
}
|
||||
.article-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
.article-title {
|
||||
display: block;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.article-meta {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.section-empty {
|
||||
margin-top: var(--spacing-2);
|
||||
padding: var(--spacing-4) var(--spacing-3);
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* ============================== 安全提醒 ============================== */
|
||||
|
||||
/* 注意：旧版这里写了 padding:0，把 .section 的左右 24rpx 内边距覆盖掉了，
|
||||
于是这张卡比其它区块宽出 48rpx、直接贴到屏幕边缘。现已移除。 */
|
||||
.safety-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.safety-cover {
|
||||
width: 180rpx;
|
||||
align-self: stretch;
|
||||
flex: none;
|
||||
}
|
||||
.safety-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
.safety-title {
|
||||
display: block;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.safety-body {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.safety-link {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-primary-strong);
|
||||
}
|
||||
|
||||
/* ============================== 按压反馈 ==============================
|
||||
全站约定：可点元素必须有即时反馈（旧版 --motion-* 全站只被引用 5 次）。
|
||||
统一走 --ease-spring 的轻微回弹 + --press-scale，避免"点了没反应"。 */
|
||||
|
||||
.entry-item,
|
||||
.status-action,
|
||||
.empty-btn,
|
||||
.brand-actions,
|
||||
.service-card,
|
||||
.activity-card,
|
||||
.station-card,
|
||||
.article-row,
|
||||
.safety-card,
|
||||
.section-empty,
|
||||
.banner-card {
|
||||
transition: transform var(--motion-fast) var(--ease-spring),
|
||||
opacity var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.entry-item:active,
|
||||
.status-action:active,
|
||||
.empty-btn:active,
|
||||
.brand-actions:active,
|
||||
.service-card:active,
|
||||
.activity-card:active,
|
||||
.station-card:active,
|
||||
.article-row:active,
|
||||
.safety-card:active,
|
||||
.section-empty:active,
|
||||
.banner-card:active {
|
||||
transform: scale(var(--press-scale));
|
||||
opacity: var(--press-opacity);
|
||||
}
|
||||
|
||||
/* ============================== 小屏适配 ==============================
|
||||
旧版在这里写了 .empty-actions{display:none}：小于 340px 的机型上
|
||||
「调整条件 / 公益红娘」两个入口会整块消失，属于功能级缺陷，已删除。
|
||||
收紧的是尺寸，不是功能。 */
|
||||
|
||||
@media (max-width: 340px) {
|
||||
.entry-label {
|
||||
font-size: var(--font-size-micro);
|
||||
}
|
||||
.entry-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.banner-title {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
.status-checks {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.empty-btn {
|
||||
min-width: 108rpx;
|
||||
padding: 0 var(--spacing-1);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user