diff --git a/demo/gch/index.html b/demo/gch/index.html index 4a06506..3ceef04 100644 --- a/demo/gch/index.html +++ b/demo/gch/index.html @@ -30,13 +30,13 @@ var V = [ ['话题弹幕', '「此刻最热」小卡 + 三行慢慢飘过的话题弹幕,按住暂停、点了进话题'], ['故事卡堆', '一叠真实照片故事卡,左右滑翻页,最后一张「轮到你了」投稿'], ['今日一问', '每天一道投票题,点完看比例;下面一排横滑的话题照片卡'], - ['合并版(推荐)', '孕妈广场 + 其他妈妈也在搜合成一块:上面 V4 故事卡堆(压矮、字更清楚,左右手滑或点箭头翻),中间两个测一测,下面 6 个热搜问题'] + ['合并版(推荐)', '孕妈广场 + 其他妈妈也在搜合成一块:上面 V4 故事卡堆(压矮、字更清楚,左右手滑或点箭头翻),中间两个测一测(素色卡),下面 6 个热搜问题'] ]; var h = location.hash; document.getElementById('list').innerHTML = V.slice().reverse().map(function (v, j) { var i = V.length - 1 - j; var u = '../../?gcv=' + (i + 1) + h; return '
V' + (i + 1) + '

' + v[0] + '

' + v[1] + '
' + - '' + v[0] + '' + + '' + v[0] + '' + '在首页打开 V' + (i + 1) + ' ' + v[0] + '
'; }).join(''); diff --git a/demo/gch/v6.css b/demo/gch/v6.css index e57b57f..4d5580c 100644 --- a/demo/gch/v6.css +++ b/demo/gch/v6.css @@ -24,15 +24,21 @@ html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0} #gcHome.gv4.gv6 .g4-by i{background:rgba(255,255,255,.28);font-size:11.5px} #gcHome.gv4.gv6 .g4-k{font-size:12px;height:24px} -/* 11-02 用户:孕妈广场里放两个测试 —— 两张并排卡,在卡堆和「其他妈妈也在搜」之间 */ -#gcHome.gv4.gv6 .g6-qz{margin-top:18px} -#gcHome.gv4.gv6 .g6-qh{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:15px;font-weight:900;color:#2A1E1E} -#gcHome.gv4.gv6 .g6-qh small{font-size:11.5px;font-weight:500;color:#A8928C} +/* 11-02 用户:孕妈广场里放两个测试 —— 两张并排卡,在卡堆和「其他妈妈也在搜」之间 + 11-02 用户:「颜色有点太多、和下面雷同、显得乱」→ 去掉紫/橙底和彩色标签:白卡 + 细边,上半是插画横幅, + 下半深色标题 + 灰色信息,只留一个品牌粉「开始测 ›」;两块小标题统一成同一种样式,不再用黄色荧光笔 */ +#gcHome.gv4.gv6 .g6-qz{margin-top:20px} +#gcHome.gv4.gv6 .g6-qh,#gcHome.gv4.gv6 .g6-mt{display:flex;align-items:baseline;gap:6px;margin:0 0 10px;font-size:16px;font-weight:900;letter-spacing:.3px;color:#2A1E1E} +#gcHome.gv4.gv6 .g6-mt{margin:0} +#gcHome.gv4.gv6 .g6-mt span{background:none;padding:0} +#gcHome.gv4.gv6 .g6-qh small{font-size:12px;font-weight:500;color:#A8928C} #gcHome.gv4.gv6 .g6-qr{display:grid;grid-template-columns:1fr 1fr;gap:10px} -#gcHome.gv4.gv6 .g6-q{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:150px;padding:12px 12px 11px;border-radius:18px;text-decoration:none;color:#2A1E1E;background:linear-gradient(160deg,var(--q1),var(--q2));box-shadow:0 8px 18px -12px var(--qs)} -#gcHome.gv4.gv6 .g6-q img{position:absolute;right:-12px;bottom:-14px;width:78px;height:78px;border-radius:50%;object-fit:cover;opacity:.95;border:3px solid rgba(255,255,255,.75)} -#gcHome.gv4.gv6 .g6-qk{align-self:flex-start;height:20px;padding:0 8px;border-radius:99px;display:flex;align-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--qc)} -#gcHome.gv4.gv6 .g6-qt{position:relative;margin-top:8px;font-size:15px;font-weight:900;line-height:1.35;max-width:9.5em} -#gcHome.gv4.gv6 .g6-qn{position:relative;margin-top:5px;font-size:11.5px;color:var(--qc);font-weight:700} -#gcHome.gv4.gv6 .g6-qg{position:relative;margin-top:auto;align-self:flex-start;height:26px;padding:0 11px;border-radius:99px;display:flex;align-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--qc)} -html.night #gcHome.gv4.gv6 .g6-qh{color:#F3E8F0} +#gcHome.gv4.gv6 .g6-q{display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;border:1px solid #F3E6E0;text-decoration:none;color:#2A1E1E;box-shadow:0 6px 16px -14px rgba(150,90,80,.5)} +#gcHome.gv4.gv6 .g6-q img{display:block;width:100%;height:84px;object-fit:cover;object-position:60% 45%;background:#FBF3EF} +#gcHome.gv4.gv6 .g6-qb{display:flex;flex-direction:column;gap:4px;padding:9px 11px 11px} +#gcHome.gv4.gv6 .g6-qt{font-size:14.5px;font-weight:800;line-height:1.38} +#gcHome.gv4.gv6 .g6-qf{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:11.5px;color:#A8928C} +#gcHome.gv4.gv6 .g6-qg{flex:none;font-weight:800;color:#E0566F} +html.night #gcHome.gv4.gv6 .g6-qh,html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0} +html.night #gcHome.gv4.gv6 .g6-q{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#F3E8F0} +#gcHome.gv4.gv6 .g6-qt{text-wrap:balance} diff --git a/demo/gch/v6.jpg b/demo/gch/v6.jpg index 32e1780..5045480 100644 Binary files a/demo/gch/v6.jpg and b/demo/gch/v6.jpg differ diff --git a/demo/gch/v6.js b/demo/gch/v6.js index 78689a8..8696a9d 100644 --- a/demo/gch/v6.js +++ b/demo/gch/v6.js @@ -31,15 +31,15 @@ var foot = sec.querySelector('.g4-foot'); /* 两个测试:你是什么样的妈妈(已有 topic/ceshi)+ 你家准爸爸是哪种队友(新做 topic/duiyou) */ var QZ = [ - { href: 'topic/ceshi/', k: '妈妈类型', t: '测一测你是什么样的妈妈', n: '15.6万', img: 'topic/ceshi/img/hero.webp', c: '#7C5CFC', q1: '#F1ECFF', q2: '#E4DBFF', qs: 'rgba(124,92,252,.6)' }, - { href: 'topic/duiyou/', k: '队友类型', t: '你家准爸爸是哪种队友', n: '8.3万', img: 'topic/duiyou/img/hero.webp', c: '#F07A2E', q1: '#FFF3E6', q2: '#FFE2C8', qs: 'rgba(240,122,46,.6)' } + { href: 'topic/ceshi/', k: '妈妈类型', t: '你是什么样的妈妈?', n: '15.6万', img: 'topic/ceshi/img/hero.webp', c: '#7C5CFC', q1: '#F1ECFF', q2: '#E4DBFF', qs: 'rgba(124,92,252,.6)' }, + { href: 'topic/duiyou/', k: '队友类型', t: '准爸爸是哪种队友?', n: '8.3万', img: 'topic/duiyou/img/hero.webp', c: '#F07A2E', q1: '#FFF3E6', q2: '#FFE2C8', qs: 'rgba(240,122,46,.6)' } ]; var qz = document.createElement('div'); qz.className = 'g6-qz'; - qz.innerHTML = '
测一测· 1 分钟,看看你和他
' + QZ.map(function (q) { - return '' + - '' + - '' + esc(q.k) + '' + esc(q.t) + '' + q.n + ' 人测过去测试 ›'; + qz.innerHTML = '
测一测1 分钟,看看你和他
' + QZ.map(function (q) { + return '' + + '' + + '' + esc(q.t) + '' + q.n + ' 人测过开始测 ›'; }).join('') + '
'; sec.insertBefore(qz, foot); sec.insertBefore(box, foot); @@ -47,7 +47,9 @@ var tot = (window.__mbPulse && window.__mbPulse.total && +window.__mbPulse.total.value) || 1510000; fetch('assets/data/qa/hot.json?' + Date.now()).then(function (r) { return r.ok ? r.json() : []; }).catch(function () { return []; }).then(function (bank) { if (!bank || !bank.length) { box.style.display = 'none'; return; } - list.innerHTML = bank.slice(0, 6).map(function (x, i) { + /* 上面「测一测」已经放了的测试,列表里不再重复,往后顺延 */ + var QH = QZ.map(function (q) { return q.href; }); + list.innerHTML = bank.filter(function (x) { return QH.indexOf(x.href) < 0; }).slice(0, 6).map(function (x, i) { var n = tot * (+x.heat || 0), heat = x.heat ? '' + FIRE + '' + (n >= 1e4 ? Math.round(n / 1e3) / 10 + '万' : Math.round(n)) + ' 人看过' : ''; var bd = x.badge ? '' + (x.badge === '爆' ? FIRE_W : '') + esc(x.badge) + '' : ''; return '' + (i + 1) + '' +