首页广场 V6「测一测」三版（&qz=1/2/3）+ 对比页 demo/gch/qz.html

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

demo/gch/qz.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="zh-CN"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
+<title>孕妈广场「测一测」· 三版效果稿</title>
+<!-- 11-02 用户：「测一测这个，给我出三版效果让我选择，点击链接可以去预览」。点图/按钮打开首页 ?gcv=6&qz=N -->
+<style>
+*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
+body{margin:0;background:#F6F1EC;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#2B2320}
+header{padding:calc(22px + env(safe-area-inset-top)) 18px 8px}
+h1{margin:0;font-size:21px;font-weight:900}
+header p{margin:6px 0 0;font-size:13px;color:#8A7570;line-height:1.55}
+.list{display:grid;gap:22px;padding:14px 14px 40px;max-width:1100px;margin:0 auto}
+@media(min-width:760px){.list{grid-template-columns:repeat(3,1fr)}}
+.it{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(120,70,50,.45)}
+.hd{display:flex;align-items:center;gap:10px;padding:14px 16px}
+.hd b{flex:none;width:34px;height:34px;border-radius:11px;background:#F2627E;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:900}
+.hd div{flex:1;min-width:0}
+.hd h2{margin:0;font-size:16px;font-weight:900}
+.hd small{display:block;font-size:12px;color:#8A7570;margin-top:2px;line-height:1.45}
+.pic{display:block;border-top:1px solid #F1E7E1;border-bottom:1px solid #F1E7E1}
+.pic img{width:100%;display:block}
+.go{display:flex;align-items:center;justify-content:center;height:46px;margin:12px 16px 16px;border-radius:14px;background:#2B2320;color:#fff;font-size:14.5px;font-weight:800;text-decoration:none}
+</style></head><body>
+<header><h1>孕妈广场「测一测」· 三版效果稿</h1><p>点图片或按钮会打开真实首页，自动滚到孕妈广场，「测一测」在故事卡堆下面。</p></header>
+<div class="list" id="list"></div>
+<script>
+var V = [
+  ['插画白卡', '两张并排白卡，上半插画横幅，下半标题 + 人数 + 「开始测」；最直观'],
+  ['小胶囊', '两颗矮胶囊，圆形小插画 + 两行字，浅米底；最省地方、最安静'],
+  ['你 & 他', '一张合体卡，左边测你、右边测他，中间 & 连起来；最有话题感']
+];
+var h = location.hash;
+document.getElementById('list').innerHTML = V.map(function (v, i) {
+  var u = '../../?gcv=6&qz=' + (i + 1) + h;
+  return '<div class="it"><div class="hd"><b>' + (i + 1) + '</b><div><h2>' + v[0] + '</h2><small>' + v[1] + '</small></div></div>' +
+    '<a class="pic" href="' + u + '"><img src="qz' + (i + 1) + '.jpg?1" alt="' + v[0] + '" loading="lazy"></a>' +
+    '<a class="go" href="' + u + '">在首页打开 第' + (i + 1) + '版 ' + v[0] + '</a></div>';
+}).join('');
+</script>
+</body></html>

demo/gch/v6.css

@@ -42,3 +42,22 @@ html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0}
 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}
+/* 测一测 · 第 2 版「小胶囊」：并排两颗矮胶囊，圆形插画 + 两行字，浅米底无边框，只有一个灰色箭头 */
+#gcHome.gv4.gv6 .qv2 .g6-c{display:flex;align-items:center;gap:9px;padding:9px 8px 9px 9px;border-radius:18px;background:#FBF3EF;text-decoration:none;color:#2A1E1E}
+#gcHome.gv4.gv6 .qv2 .g6-c img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 8px -4px rgba(150,90,80,.45)}
+#gcHome.gv4.gv6 .qv2 .g6-cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
+#gcHome.gv4.gv6 .qv2 .g6-cb b{font-size:13.5px;font-weight:800;line-height:1.35;text-wrap:balance}
+#gcHome.gv4.gv6 .qv2 .g6-cb small{font-size:11px;color:#A8928C}
+#gcHome.gv4.gv6 .qv2 .g6-c i{flex:none;font-style:normal;font-size:16px;color:#D3B9B2}
+/* 测一测 · 第 3 版「你 & 他」：一张合体卡，左右各一个圆头像，中间 & 连起来，底部一句组合文案 */
+#gcHome.gv4.gv6 .qv3 .g6-v{border-radius:20px;background:linear-gradient(180deg,#FFF8F4,#fff);border:1px solid #F3E6E0;padding:14px 10px 10px;box-shadow:0 6px 16px -14px rgba(150,90,80,.5)}
+#gcHome.gv4.gv6 .qv3 .g6-vr{display:flex;align-items:flex-start}
+#gcHome.gv4.gv6 .qv3 .g6-vc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;text-decoration:none;color:#2A1E1E}
+#gcHome.gv4.gv6 .qv3 .g6-vc img{width:66px;height:66px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 5px 12px -6px rgba(150,90,80,.5);margin-bottom:4px}
+#gcHome.gv4.gv6 .qv3 .g6-vc small{font-size:11px;color:#A8928C;letter-spacing:1px}
+#gcHome.gv4.gv6 .qv3 .g6-vc b{font-size:14px;font-weight:800;line-height:1.35}
+#gcHome.gv4.gv6 .qv3 .g6-vc em{margin-top:3px;font-style:normal;font-size:12px;font-weight:800;color:#E0566F}
+#gcHome.gv4.gv6 .qv3 .g6-amp{flex:none;align-self:center;margin-top:-34px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #F3E6E0;font-size:14px;font-weight:900;color:#D9A79B}
+#gcHome.gv4.gv6 .qv3 .g6-vf{margin:10px 0 0;padding-top:9px;border-top:1px dashed #F1DED6;text-align:center;font-size:11.5px;color:#A8928C}
+html.night #gcHome.gv4.gv6 .qv2 .g6-c,html.night #gcHome.gv4.gv6 .qv3 .g6-v{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#F3E8F0}
+html.night #gcHome.gv4.gv6 .qv3 .g6-vc{color:#F3E8F0}

demo/gch/v6.js

@@ -31,16 +31,32 @@
     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', pos: '42% 22%', who: '测你', 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', pos: '58% 24%', who: '测他', c: '#F07A2E', q1: '#FFF3E6', q2: '#FFE2C8', qs: 'rgba(240,122,46,.6)' }
     ];
-    var qz = document.createElement('div');
-    qz.className = 'g6-qz';
-    qz.innerHTML = '<div class="g6-qh">测一测<small>1 分钟，看看你和他</small></div><div class="g6-qr">' + QZ.map(function (q) {
-      return '<a class="g6-q ripple" href="' + esc(q.href + location.search + location.hash) + '">' +
-        '<img src="' + esc(q.img) + '" alt="" loading="lazy">' +
-        '<span class="g6-qb"><b class="g6-qt">' + esc(q.t) + '</b><span class="g6-qf"><span>' + q.n + ' 人测过</span><span class="g6-qg">开始测 ›</span></span></span></a>';
-    }).join('') + '</div>';
+    /* 11-02 用户：「测一测出三版让我选」→ 地址 &qz=1/2/3 切换：1 插画白卡（默认）/ 2 小胶囊 / 3 你&他合体卡 */
+    var QV = (location.search.match(/[?&]qz=([1-3])/) || [])[1] || '1';
+    var qz = document.createElement('div'), lk = function (q) { return esc(q.href + location.search + location.hash); };
+    qz.className = 'g6-qz qv' + QV;
+    var hd = '<div class="g6-qh">测一测<small>1 分钟，看看你和他</small></div>';
+    if (QV === '1') {
+      qz.innerHTML = hd + '<div class="g6-qr">' + QZ.map(function (q) {
+        return '<a class="g6-q ripple" href="' + lk(q) + '">' +
+          '<img src="' + esc(q.img) + '" alt="" loading="lazy">' +
+          '<span class="g6-qb"><b class="g6-qt">' + esc(q.t) + '</b><span class="g6-qf"><span>' + q.n + ' 人测过</span><span class="g6-qg">开始测 ›</span></span></span></a>';
+      }).join('') + '</div>';
+    } else if (QV === '2') {
+      qz.innerHTML = hd + '<div class="g6-qr">' + QZ.map(function (q) {
+        return '<a class="g6-c ripple" href="' + lk(q) + '"><img src="' + esc(q.img) + '" alt="" loading="lazy" style="object-position:' + q.pos + '">' +
+          '<span class="g6-cb"><b>' + esc(q.t) + '</b><small>' + q.n + ' 人测过</small></span><i>›</i></a>';
+      }).join('') + '</div>';
+    } else {
+      qz.innerHTML = hd + '<div class="g6-v"><div class="g6-vr">' + QZ.map(function (q, i) {
+        return (i ? '<span class="g6-amp">&amp;</span>' : '') +
+          '<a class="g6-vc ripple" href="' + lk(q) + '"><img src="' + esc(q.img) + '" alt="" loading="lazy" style="object-position:' + q.pos + '">' +
+          '<small>' + q.who + '</small><b>' + esc(q.t) + '</b><em>开始测 ›</em></a>';
+      }).join('') + '</div><p class="g6-vf">两个都测完，看看你们是哪种组合 · 已有 23.9万 人测过</p></div>';
+    }
     sec.insertBefore(qz, foot);
     sec.insertBefore(box, foot);
     var list = box.querySelector('.g6-list'), all = box.querySelector('.g6-all');