41 lines
2.8 KiB
HTML
41 lines
2.8 KiB
HTML
<!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?3" alt="' + v[0] + '" loading="lazy"></a>' +
|
|
'<a class="go" href="' + u + '">在首页打开 第' + (i + 1) + '版 ' + v[0] + '</a></div>';
|
|
}).join('');
|
|
</script>
|
|
</body></html>
|