ux: 动作收藏按钮从顶部浮窗移到底部,与加入计划并排 + 图标美化

- detail 顶部 favbtn 浮窗(需避让胶囊、丑)移除,改为底部 addbar 内与 CTA 并排的方形按钮
- fc-icon 新增 filled 属性:收藏态实心心形(Lucide 描边图标默认 fill=none,filled=true 时 fill=stroke 变实心)
- 收藏按钮美化:圆角 24rpx 方形 + 发丝边框,未收藏描边(text-2)、已收藏实心(accent)+ accent-soft 底色 + accent-ring 边框 + 点按 scale 反馈
- detail.js 清理 favRight/favTop 胶囊避让逻辑(不再需要)
This commit is contained in:
2026-07-22 23:25:17 +08:00
parent 4dba91a16e
commit a0894837bd
4 changed files with 31 additions and 35 deletions

View File

@@ -45,24 +45,27 @@
border-top: 1rpx solid var(--line);
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
.addbar__inner { display: flex; align-items: center; gap: 20rpx; }
.cta {
flex: 1;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
color: var(--accent-on); font-weight: 700; font-size: 32rpx;
border-radius: 999rpx; padding: 26rpx;
border-radius: 999rpx; height: 92rpx; box-sizing: border-box; padding: 0 24rpx;
}
.fav {
flex: 0 0 auto;
width: 92rpx; height: 92rpx; box-sizing: border-box;
border-radius: 24rpx;
background: var(--surface);
border: 1rpx solid var(--line);
display: flex; align-items: center; justify-content: center;
transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 120ms var(--ease);
}
.fav--on { background: var(--accent-soft); border-color: var(--accent-ring); }
.fav--hover { transform: scale(0.94); }
.empty-page { min-height: 100vh; background: var(--bg-grad); }
.topbar { height: 88rpx; display: flex; align-items: center; padding: 0 24rpx; }
.topbar__back { font-size: 56rpx; color: var(--gold); width: 60rpx; line-height: 1; }
.empty { color: var(--text-3); font-size: 28rpx; text-align: center; padding: 120rpx 0; }
.favbtn {
position: fixed; right: 28rpx; z-index: 60;
width: 72rpx; height: 72rpx; border-radius: 999rpx;
background: var(--float-bg);
backdrop-filter: blur(8px);
border: 1rpx solid var(--gold-line);
display: flex; align-items: center; justify-content: center;
font-size: 44rpx; color: var(--gold-2); line-height: 1;
}