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-01 用户：「孕妈广场这个页面重新做一版…做五版，效果图给我带链接的，点击可以直接查看」。演示汇总页，图是各版首屏长截图，点图/按钮进对应演示页（带上 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:22px;font-weight:900}
|
|
header p{margin:6px 0 0;font-size:13px;color:#8A7570}
|
|
.list{display:grid;gap:22px;padding:14px 14px 40px;max-width:900px;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:#F4593C;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;height:560px;overflow:hidden;border-top:1px solid #F1E7E1;border-bottom:1px solid #F1E7E1;position:relative}
|
|
.pic img{width:100%;display:block}
|
|
.pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,#fff)}
|
|
.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 = '../gc-v' + (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>
|