diff --git a/guangchang/ceshi/index.html b/guangchang/ceshi/index.html index daa81cb..a0f6ba6 100644 --- a/guangchang/ceshi/index.html +++ b/guangchang/ceshi/index.html @@ -320,8 +320,8 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
- - + + - - - + + + + + @@ -2559,17 +2559,17 @@ - + - - + + - + diff --git a/js/app.js b/js/app.js index 3758479..1240436 100644 --- a/js/app.js +++ b/js/app.js @@ -3,7 +3,7 @@ (function () { 'use strict'; /* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */ - var VER = '26110275'; + var VER = '26110276'; const $ = (s, c) => (c || document).querySelector(s); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); diff --git a/js/gch/v4.js b/js/gch/v4.js index c66c40d..163f494 100644 --- a/js/gch/v4.js +++ b/js/gch/v4.js @@ -231,5 +231,5 @@ } /* feed.js 首页默认不加载(index.html 只引了 topics.js),这里按需拉一次 */ if (window.GC_FEED) init(); - else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110275'; fs.onload = fs.onerror = init; document.body.appendChild(fs); } + else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110276'; fs.onload = fs.onerror = init; document.body.appendChild(fs); } })(); diff --git a/js/gch/v6.css b/js/gch/v6.css index 9bfcd7a..98552ac 100644 --- a/js/gch/v6.css +++ b/js/gch/v6.css @@ -95,13 +95,11 @@ html.night #gcHome.gv4.gv6 .g6-all{background:none;color:#B9A6B1} #gcHome.gv4.gv6 .g6-avs{display:inline-flex;align-items:center;margin-right:5px;vertical-align:middle} #gcHome.gv4.gv6 .g6-avs img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;background:#FFE3D3;margin-left:-6px;box-sizing:border-box} #gcHome.gv4.gv6 .g6-avs img:first-child{margin-left:0} -#gcHome.gv4.gv6 .g6-avs img.in{animation:g6AvIn .42s cubic-bezier(.3,1.5,.5,1) both} -#gcHome.gv4.gv6 .g6-avs img.out{animation:g6AvOut .42s ease both} -@keyframes g6AvIn{from{transform:scale(0);margin-left:-18px}to{transform:scale(1);margin-left:0}} -@keyframes g6AvOut{to{opacity:0;transform:scale(.4);width:0;margin-left:-6px;border-width:0}} -#gcHome.gv4.gv6 .ms-h b.bump{animation:g6Bump .5s ease} -@keyframes g6Bump{40%{transform:scale(1.15);color:#FF4D2E}} +#gcHome.gv4.gv6 .g6-avs img{position:relative;transition:transform .22s ease,opacity .22s ease} +#gcHome.gv4.gv6 .g6-avs img.sw-o{transform:scale(.2);opacity:0} +#gcHome.gv4.gv6 .g6-avs img.sw-i{animation:g6AvIn .4s cubic-bezier(.3,1.6,.5,1) both;z-index:1} +@keyframes g6AvIn{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}} #gcHome.gv4.gv6 .ms-h b{display:inline-block} html.night #gcHome.gv4.gv6 .g6-avs img{border-color:#2F2737} -@media (prefers-reduced-motion:reduce){#gcHome.gv4.gv6 .g6-avs img.in,#gcHome.gv4.gv6 .g6-avs img.out,#gcHome.gv4.gv6 .ms-h b.bump{animation:none}} +@media (prefers-reduced-motion:reduce){#gcHome.gv4.gv6 .g6-avs img.sw-i{animation:none}#gcHome.gv4.gv6 .g6-avs img{transition:none}} #gcHome.gv4.gv6 .g6-nt .ms-h{flex-wrap:nowrap;white-space:nowrap} diff --git a/js/gch/v6.js b/js/gch/v6.js index 78fac4e..02f6a9d 100644 --- a/js/gch/v6.js +++ b/js/gch/v6.js @@ -6,9 +6,9 @@ (function () { var sec = document.getElementById('gcHome'); if (!sec) return; - var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110275'; + var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110276'; document.head.appendChild(l); - var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110275'; + var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110276'; s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); }; /* v4 要先拉 feed.js 才渲染 */ document.body.appendChild(s); @@ -98,7 +98,7 @@ likeTick(); } /* 11-03 用户:「点赞数前面放几个小头像,偶尔换一个,相当于有人新点赞进来」 - → 火苗换成 3~6 个叠放小头像;每 4~7 秒随机挑一行:新头像从左边弹进来、最右边那个淡出,点赞数 +1(只在本次浏览里涨,刷新回到原数)。 + → 火苗换成 3~6 个叠放小头像;每 4~7 秒随机挑一行:其中一个头像原地换成别人(点赞数不动)。 头像池用首页滚动动态同一批虚构照片(assets/img/mom/,非真实用户);页面在后台时不换。 */ /* 11-03 用户:「这 6 条的头像一定要都不相同」→ 池子扩到 assets/img/mom/ 全部 59 张,按 宝宝 / 妈妈 / 全身合照 / 风景 交错排,相邻不扎堆近脸; 换头像时只从「当前 6 行都没在显示」的里面挑,任何时刻页面上这些头像都互不重复。 */ @@ -126,19 +126,14 @@ likeT = setTimeout(function () { var rows = list.querySelectorAll('.g6-nt'); if (!document.hidden && rows.length && list.offsetParent) { - var r = rows[Math.floor(Math.random() * rows.length)], st = r.querySelector('.g6-avs'), b = r.querySelector('.ms-h b'); - if (st && b) { - var w = document.createElement('span'); - var on = {}, nx, t = 0; + /* 11-03 用户:「头像在变,比如 3 个里突然有一个变了;后面点赞数不变」→ 原地换掉其中一个(缩小→换图→弹回),个数、点赞数都不动 */ + var r = rows[Math.floor(Math.random() * rows.length)], ims = r.querySelectorAll('.g6-avs img'); + if (ims.length) { + var im = ims[Math.floor(Math.random() * ims.length)], on = {}, nx, t = 0; list.querySelectorAll('.g6-avs img').forEach(function (m) { on[m.getAttribute('src')] = 1; }); do { nx = LIKE_AVA[avaAt++ % LIKE_AVA.length]; } while (on['assets/img/mom/' + nx + '.jpg'] && ++t < LIKE_AVA.length); - w.innerHTML = avaEl(nx); - var im = w.firstChild; im.className = 'in'; - st.insertBefore(im, st.firstChild); - var last = st.lastElementChild; last.className = 'out'; - setTimeout(function () { if (last.parentNode) last.parentNode.removeChild(last); }, 420); - var m = b.textContent.match(/^(\d+)( 人点赞)$/); - if (m) { b.textContent = (+m[1] + 1) + m[2]; b.classList.remove('bump'); void b.offsetWidth; b.classList.add('bump'); } + im.className = 'sw-o'; + setTimeout(function () { im.src = 'assets/img/mom/' + nx + '.jpg'; im.className = 'sw-i'; }, 220); } } likeTick(); diff --git a/js/kit.css b/js/kit.css index 6ca075b..71f868d 100644 --- a/js/kit.css +++ b/js/kit.css @@ -38,21 +38,27 @@ html.night .kit-e span{color:#B9A9B2} html.night .kit-e{background:rgba(255,255,255,.06);box-shadow:none} html.night .kit-e img{mix-blend-mode:normal} html.night .kit-lh{border-color:rgba(255,255,255,.1)} -/* 11-03 下方 6 条:一行一条(类型图标块 + 问题 + 去测/去看/去算),和孕妈广场的名次+配图列表区分开(见 kit.js paint 注释) */ -.kit-rows{display:flex;flex-direction:column;gap:10px;padding:12px 0 4px} -.kr{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 10px;border-radius:16px;background:#fff;box-shadow:0 4px 14px -8px rgba(160,100,80,.35);text-decoration:none;color:inherit;border-left:3px solid var(--kc)} -.kr:active{transform:scale(.985)} +/* 11-03 下方 6 条:一行一条(类型图标块 + 问题 + 类型·人数 + ›),和孕妈广场的名次+配图列表区分开(见 kit.js paint 注释) + 11-03 用户:「这种排版还可以,就是有点乱」→ 6 张独立卡 + 彩色左边框 + 彩色胶囊 改成:一张白底卡里 6 行细分隔线; + 颜色只留在左边图标块,下面一行统一灰字,右边只留一个浅灰 ›,问题尽量一行放下。 */ +.kit-rows{margin:12px 0 4px;padding:2px 14px;border-radius:18px;background:#fff;box-shadow:0 6px 18px -12px rgba(160,100,80,.4)} +.kr{display:flex;align-items:center;gap:12px;padding:13px 0;text-decoration:none;color:inherit;border-bottom:1px solid #F5ECE8} +.kr:last-child{border-bottom:0} +.kr:active{opacity:.7} .kr.t-qz{--kc:#7C5CFC;--kb:#F1ECFF} .kr.t-qa{--kc:#2E9B78;--kb:#E3F5EE} .kr.t-js{--kc:#E86F22;--kb:#FFEEDF} -.kr-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--kb);color:var(--kc)} -.kr-ic svg{width:20px;height:20px} -.kr-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} -.kr-q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;font-weight:700;line-height:1.4;color:#2A1E1E} -.kr-n{display:flex;align-items:center;gap:2px;font-size:11px;color:#A3958D} -.kr-n em{margin-right:6px;font-style:normal;font-weight:800;color:var(--kc)} -.kr-n svg{width:11px;height:11px;color:#FF6A3D} -.kr-n b{font-size:11.5px;font-weight:800;color:#F2533A;font-variant-numeric:tabular-nums} -.kr-go{flex:none;height:28px;padding:0 12px;border-radius:99px;background:var(--kb);color:var(--kc);font-size:12.5px;font-weight:800;line-height:28px} -html.night .kr{background:#2F2737;box-shadow:none} +.kr-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--kb);color:var(--kc)} +.kr-ic svg{width:19px;height:19px} +.kr-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} +.kr-q{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14.5px;font-weight:700;line-height:1.4;color:#2A1E1E} +.kr-n{display:flex;align-items:center;gap:2px;font-size:11.5px;color:#A89A93} +.kr-n em{font-style:normal} +.kr-n em::after{content:'·';margin:0 4px} +.kr-n svg{display:none} +.kr-n b{font-weight:600;color:inherit;font-variant-numeric:tabular-nums} +.kr-go{flex:none;font-size:0;color:#CDBEB8} +.kr-go::after{content:'›';font-size:20px;line-height:1} +html.night .kit-rows{background:#2F2737;box-shadow:none} +html.night .kr{border-color:#3C3345} html.night .kr-q{color:#F1E6EE} diff --git a/js/kit.js b/js/kit.js index 41e7170..d542ff5 100644 --- a/js/kit.js +++ b/js/kit.js @@ -9,7 +9,7 @@ if (/[?&]kit=0(?:&|$)/.test(location.search)) return; var box = document.getElementById('kit'), sec = document.getElementById('kitHome'); if (!box || !sec) return; - var V = '26110275'; + var V = '26110276'; var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/kit.css?v=' + V; document.head.appendChild(l); document.documentElement.classList.add('has-kit'); @@ -104,7 +104,7 @@ var d = rows(), L = box.querySelector('.kit-list'); box.querySelector('.kit-wk').textContent = d.wk ? '孕 ' + d.wk + ' 周' : ''; /* 11-03 用户:「这 6 条跟下面孕妈广场那 6 条太像,换个形式」→(便签墙试过,用户要回到一行一条的排列,只换样式) - 一行一条,但不用名次数字和配图:左边按类型的彩色图标块(测试紫 / 百问绿 / 计算器橙),中间问题 + 类型·人数,右边「去测 / 去看 / 去算」小胶囊。 */ + 一行一条,但不用名次数字和配图:左边按类型的彩色图标块(测试紫 / 百问绿 / 计算器橙),中间问题 + 类型·人数,右边 ›(11-03 用户嫌乱,样式收成一张白卡,见 kit.css)。 */ L.className = 'kit-list kit-rows'; L.innerHTML = d.r.map(function (x) { return '' + KN_IC[x.c] + '' + diff --git a/topic/_shared/tools.js b/topic/_shared/tools.js index 76093ac..2f28a0d 100644 --- a/topic/_shared/tools.js +++ b/topic/_shared/tools.js @@ -68,7 +68,7 @@ function getJSON(u) { return fetch(u, { cache: 'no-cache' }).then(function (r) { if (!r.ok) throw r.status; return r.json(); }); } function related(box) { - getJSON('../_shared/idx.json?v=26110275').then(function (idx) { + getJSON('../_shared/idx.json?v=26110276').then(function (idx) { var me = null; idx.forEach(function (x) { if (x[0] === SLUG) me = x; }); var tag = me ? me[2] : '', h = 0; for (var i = 0; i < SLUG.length; i++) h = (h * 31 + SLUG.charCodeAt(i)) >>> 0; var rest = idx.filter(function (x) { return x[0] !== SLUG; }); @@ -175,7 +175,7 @@ } fetch(API + '/comments?kind=topic&target=' + encodeURIComponent(SLUG) + (OID ? '&openid=' + encodeURIComponent(OID) : '')) .then(function (r) { return r.json(); }).then(function (j) { if (j && j.code === 200) { RC = j.result; paint(); } }).catch(function () {}); - getJSON('../_shared/cm/' + SLUG + '.json?v=26110275').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); }); + getJSON('../_shared/cm/' + SLUG + '.json?v=26110276').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); }); } function extras(el) {