jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

预览首页默认启用孕妈广场合并版（测一测第 1 版）；测一测加第 4 版彩色卡（&qz=4）

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-02 04:34:40 +00:00
parent 60ee41bb9d
commit ecbb8db15a
5 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
demo/gch/qz.html
View File

@@ -1,7 +1,7 @@
<!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>
<title>孕妈广场「测一测」· 四版效果稿</title>
<!-- 11-02 用户：「测一测这个，给我出三版效果让我选择，点击链接可以去预览」。点图/按钮打开首页 ?gcv=6&qz=N -->
<style>
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
@@ -10,7 +10,7 @@ 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)}}
@media(min-width:760px){.list{grid-template-columns:repeat(2,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}
@@ -21,13 +21,14 @@ header p{margin:6px 0 0;font-size:13px;color:#8A7570;line-height:1.55}
.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>
<header><h1>孕妈广场「测一测」· 四版效果稿</h1><p>预览首页（不带参数）现在默认就是第 1 版。点图片或按钮会打开真实首页，自动滚到孕妈广场，「测一测」两个测试，放在「其他妈妈也在搜」下面（模块最底部）。</p></header>
<div class="list" id="list"></div>
<script>
var V = [
['插画白卡', '两张并排白卡，上半插画横幅，下半标题 + 人数 + 「开始测」；最直观'],
['小胶囊', '两颗矮胶囊，圆形小插画 + 两行字，浅米底；最省地方、最安静'],
['你 & 他', '一张合体卡，左边测你、右边测他，中间 & 连起来；最有话题感']
['你 & 他', '一张合体卡，左边测你、右边测他，中间 & 连起来；最有话题感'],
['彩色卡（更明显）', '紫 / 橙彩色底 + 类型小标签 + 实心「去测试」按钮 + 右下圆形插画；最醒目']
];
var h = location.hash;
document.getElementById('list').innerHTML = V.map(function (v, i) {

BIN
demo/gch/qz4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

7
demo/gch/v6.css
View File

@@ -74,3 +74,10 @@ html.night #gcHome.gv4.gv6 .g6-ql{background:rgba(255,255,255,.05)}
html.night #gcHome.gv4.gv6 .g6-li{color:#F3E8F0;border-color:rgba(255,255,255,.1)}
/* 11-02 测一测挪到「其他妈妈也在搜」下面：上面加一道同样的虚线分隔 */
#gcHome.gv4.gv6 .g6-qz{margin-top:18px;padding-top:16px;border-top:1px dashed #F1DED6}
/* 测一测 · 第 4 版「彩色卡」（11-02 用户要更明显，拿回最早那版紫/橙底试试） */
#gcHome.gv4.gv6 .qv4 .g6-k{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:146px;padding:12px 12px 12px;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 .qv4 .g6-k img{position:absolute;right:-12px;bottom:-14px;width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.8)}
#gcHome.gv4.gv6 .qv4 .g6-kk{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 .qv4 .g6-kt{position:relative;margin-top:8px;font-size:15px;font-weight:900;line-height:1.35;text-wrap:balance}
#gcHome.gv4.gv6 .qv4 .g6-kn{position:relative;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--qc)}
#gcHome.gv4.gv6 .qv4 .g6-kg{position:relative;margin-top:auto;align-self:flex-start;height:28px;padding:0 12px;border-radius:99px;display:flex;align-items:center;font-size:12.5px;font-weight:800;color:#fff;background:var(--qc);box-shadow:0 4px 10px -4px var(--qs)}

13
demo/gch/v6.js
View File

@@ -17,7 +17,7 @@
function merge() {
sec.classList.add('gv6');
var mk = sec.querySelector('.g4-mark'); if (mk) mk.textContent = '效果稿 V6';
var mk = sec.querySelector('.g4-mark'); if (mk) { if (window.__gcDefault) mk.remove(); else mk.textContent = '效果稿 V6'; }
var old = document.getElementById('pregTips'); if (old) old.style.display = 'none';
var wk = document.getElementById('msWk'), wkT = wk && wk.textContent.trim();
var box = document.createElement('div');
@@ -35,11 +35,18 @@
{ 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)' }
];
/* 11-02 用户：「测一测出三版让我选」→ 地址 &qz=1/2/3 切换：1 插画白卡（默认）/ 2 小胶囊 / 3 你&他合体卡 */
var QV = (location.search.match(/[?&]qz=([1-3])/) || [])[1] || '1';
var QV = (location.search.match(/[?&]qz=([1-4])/) || [])[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') {
if (QV === '4') {
/* 第 4 版：用户说「测一测要明显一点，把之前那版（紫/橙底）拿来试试」→ 彩色底 + 类型小标签 + 实心按钮 + 右下圆形插画；标题用短的，避免单字掉行 */
qz.innerHTML = hd + '<div class="g6-qr">' + QZ.map(function (q) {
return '<a class="g6-k ripple" href="' + lk(q) + '" style="--qc:' + q.c + ';--q1:' + q.q1 + ';--q2:' + q.q2 + ';--qs:' + q.qs + '">' +
'<img src="' + esc(q.img) + '" alt="" loading="lazy">' +
'<span class="g6-kk">' + esc(q.k) + '</span><b class="g6-kt">' + esc(q.t) + '</b><span class="g6-kn">' + q.n + ' 人测过</span><span class="g6-kg">去测试 ›</span></a>';
}).join('') + '</div>';
} else 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">' +