44 lines
3.3 KiB
HTML
44 lines
3.3 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=N（首页里那块换成第 N 版并滚到它），带上 hash 身份 -->
|
||
<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:1000px;margin:0 auto}
|
||
@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:15px;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 = [
|
||
['广场头条', '左边一张大照片故事，右边「本期要目」3 条话题，像杂志封面'],
|
||
['广场人群', '一块空地上站着十几位妈妈，头上轮流冒出话题气泡；「你」的空位就是投稿'],
|
||
['话题弹幕', '「此刻最热」小卡 + 三行慢慢飘过的话题弹幕，按住暂停、点了进话题'],
|
||
['故事卡堆', '一叠真实照片故事卡，左右滑翻页，最后一张「轮到你了」投稿'],
|
||
['今日一问', '每天一道投票题，点完看比例；下面一排横滑的话题照片卡'],
|
||
['合并版（推荐）', '孕妈广场 + 其他妈妈也在搜合成一块：上面 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 '<div class="it"><div class="hd"><b>V' + (i + 1) + '</b><div><h2>' + v[0] + '</h2><small>' + v[1] + '</small></div></div>' +
|
||
'<a class="pic" href="' + u + '"><img src="v' + (i + 1) + '.jpg?2" alt="' + v[0] + '" loading="lazy"></a>' +
|
||
'<a class="go" href="' + u + '">在首页打开 V' + (i + 1) + ' ' + v[0] + '</a></div>';
|
||
}).join('');
|
||
</script>
|
||
</body></html>
|