diff --git a/demo/gch/qz.html b/demo/gch/qz.html new file mode 100644 index 0000000..dda5e4c --- /dev/null +++ b/demo/gch/qz.html @@ -0,0 +1,40 @@ + + + +孕妈广场「测一测」· 三版效果稿 + + +

孕妈广场「测一测」· 三版效果稿

点图片或按钮会打开真实首页,自动滚到孕妈广场,「测一测」在故事卡堆下面。

+
+ + diff --git a/demo/gch/qz1.jpg b/demo/gch/qz1.jpg new file mode 100644 index 0000000..e073134 Binary files /dev/null and b/demo/gch/qz1.jpg differ diff --git a/demo/gch/qz2.jpg b/demo/gch/qz2.jpg new file mode 100644 index 0000000..9700510 Binary files /dev/null and b/demo/gch/qz2.jpg differ diff --git a/demo/gch/qz3.jpg b/demo/gch/qz3.jpg new file mode 100644 index 0000000..45980dc Binary files /dev/null and b/demo/gch/qz3.jpg differ diff --git a/demo/gch/v6.css b/demo/gch/v6.css index 4d5580c..9817695 100644 --- a/demo/gch/v6.css +++ b/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} diff --git a/demo/gch/v6.js b/demo/gch/v6.js index 8696a9d..f566732 100644 --- a/demo/gch/v6.js +++ b/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 = '
测一测1 分钟,看看你和他
' + QZ.map(function (q) { - return '' + - '' + - '' + esc(q.t) + '' + q.n + ' 人测过开始测 ›'; - }).join('') + '
'; + /* 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 = '
测一测1 分钟,看看你和他
'; + if (QV === '1') { + qz.innerHTML = hd + '
' + QZ.map(function (q) { + return '' + + '' + + '' + esc(q.t) + '' + q.n + ' 人测过开始测 ›'; + }).join('') + '
'; + } else if (QV === '2') { + qz.innerHTML = hd + '
' + QZ.map(function (q) { + return '' + + '' + esc(q.t) + '' + q.n + ' 人测过›'; + }).join('') + '
'; + } else { + qz.innerHTML = hd + '
' + QZ.map(function (q, i) { + return (i ? '&' : '') + + '' + + '' + q.who + '' + esc(q.t) + '开始测 ›'; + }).join('') + '

两个都测完,看看你们是哪种组合 · 已有 23.9万 人测过

'; + } sec.insertBefore(qz, foot); sec.insertBefore(box, foot); var list = box.querySelector('.g6-list'), all = box.querySelector('.g6-all');