diff --git a/demo/gch/v4.js b/demo/gch/v4.js index aacc094..1519ed0 100644 --- a/demo/gch/v4.js +++ b/demo/gch/v4.js @@ -187,5 +187,5 @@ } /* feed.js 首页默认不加载(index.html 只引了 topics.js),这里按需拉一次 */ if (window.GC_FEED) init(); - else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110211'; fs.onload = fs.onerror = init; document.body.appendChild(fs); } + else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110212'; fs.onload = fs.onerror = init; document.body.appendChild(fs); } })(); diff --git a/guangchang/index.html b/guangchang/index.html index 56bcf5c..ff7787f 100644 --- a/guangchang/index.html +++ b/guangchang/index.html @@ -40,14 +40,20 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin .nav h1 span{background:linear-gradient(transparent 60%,#FFD0DC 60%,#FFD0DC 92%,transparent 92%);padding:0 3px} .nav .sp{width:36px} -/* ---------- 一级分类:分段按钮(11-01 第三版:用户说「经验 / 家庭不够明显、有点乱」→ 一条底槽三段,选中段实底) ---------- */ -.cats{display:flex;gap:4px;margin:2px 12px 10px;padding:4px;border-radius:16px;background:#F0E4DE} -.cats button{flex:1;min-width:0;height:38px;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:12px; - font-size:14.5px;font-weight:800;color:#8A7570;letter-spacing:.3px;transition:background .18s,color .18s,box-shadow .18s} -.cats button .ic{width:15px;height:15px;color:var(--cf)} -.cats button.on{background:var(--cf);color:#fff;box-shadow:0 6px 14px -6px var(--cf)} -.cats button.on .ic{color:#fff} -.cats button:active{transform:scale(.97)} +/* ---------- 一级分类(11-02 第四版:用户「去掉图标、滑块缺设计感」→ 小红书式文字标签:选中字放大加粗 + 底下一条会滑动的分类色胶囊;左右滑页面也能切) ---------- */ +.cats{position:relative;display:flex;gap:8px;margin:0 6px;padding:2px 0 10px} +.cats button{position:relative;z-index:1;flex:none;padding:6px 12px 4px;font-size:15.5px;font-weight:700;color:#A08B85;letter-spacing:.3px;line-height:24px;transition:color .25s} +.cats button .ic{display:none} +.cats button.on{font-size:18px;font-weight:900;color:#2A1E1E} +.cats button i{position:absolute;left:calc(100% - 12px);top:2px;font-style:normal;font-size:10px;font-weight:800;line-height:12px;color:var(--cf);opacity:0;transition:opacity .25s} +.cats button.on i{opacity:1} +.cats .bar{position:absolute;z-index:0;left:0;bottom:12px;height:7px;width:28px;border-radius:7px;background:var(--cbar,#F4593C);opacity:.32; + transition:transform .32s cubic-bezier(.3,1.3,.5,1),width .32s cubic-bezier(.3,1.3,.5,1),background .25s;pointer-events:none} +.cats::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#EADAD3 20%,#EADAD3 80%,transparent)} +.cats button:active{transform:scale(.96)} +.wf.swl{animation:swl .32s ease-out}.wf.swr{animation:swr .32s ease-out} +@keyframes swl{from{opacity:.2;transform:translateX(36px)}to{opacity:1;transform:none}} +@keyframes swr{from{opacity:.2;transform:translateX(-36px)}to{opacity:1;transform:none}} .cats .c-all{--cf:#F4593C} /* 四块分类色(11-01 第四版:按用户选题清单分 家庭 / 婚姻 / 职场 / 母婴):kf 实色 · kt 深字 · kl/kl2 浅底两色 */ .k-family,.c-family{--kf:#E0566F;--kt:#C23A55;--kl:#FFF0F3;--kl2:#FFD9E0} @@ -450,9 +456,9 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin