百宝箱:列表底部加查看更多三入口,三张卡按钮扫光提示可点

This commit is contained in:
deploy
2026-11-05 23:58:25 +00:00
parent ea641585ba
commit c43ba39a32
6 changed files with 49 additions and 26 deletions

View File

@@ -133,3 +133,21 @@ html.night #homeBody>section#kitHome.kit-home{background:linear-gradient(180deg,
html.night #homeBody>section#kitHome.kit-home{background:linear-gradient(180deg,rgba(52,44,54,.78),rgba(44,40,58,.74))!important}
/* 11-04 用户:三张大卡标题(孕期百问 / 孕期计算器 / 趣味小测试)大一号 14.5 → 16px */
.kit-e b{font-size:16px}
/* 11-05 用户:「不知道三个按钮能点;6 条看完以为有查看更多」→ 列表底部「查看更多」三颗胶囊(颜色同上面三张卡),三张卡的按钮轮流扫一道光 */
.kit-mo{display:flex;align-items:center;gap:6px;margin:4px 2px 6px;padding-top:10px;border-top:1px dashed #F1DDD6}
.kit-mo>span{flex:none;margin-right:auto;font-size:12px;font-weight:700;color:#A3958D;letter-spacing:.3px}
.kit-mb{flex:none;display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 9px 0 8px;border-radius:99px;border:1px solid var(--mc2);background:var(--mc1);color:var(--mc);font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:transform .14s}
.kit-mb:active{transform:scale(.94)}
.kit-mb svg{width:14px;height:14px;flex:none}
.kit-mb i{font-style:normal;font-size:14px;line-height:1;margin-left:1px}
.kit-mb.m-qa{--mc:#2E9B78;--mc1:#EAF8F3;--mc2:#C6EADD}
.kit-mb.m-js{--mc:#E86F22;--mc1:#FFF3EA;--mc2:#FAD6BC}
.kit-mb.m-qz{--mc:#7C5CFC;--mc1:#F3EEFF;--mc2:#DCD1FE}
html.night .kit-mo{border-top-color:rgba(255,255,255,.1)}
html.night .kit-mb{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.kit-e em{position:relative;overflow:hidden;box-shadow:0 4px 10px -5px var(--c)}
.kit-e em::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:kitShine 7.5s ease-in-out infinite}
.kit-e.e-js em::after{animation-delay:2.5s}
.kit-e.e-qz em::after{animation-delay:5s}
@keyframes kitShine{0%,82%{left:-60%}96%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.kit-e em::after{animation:none}}