17 lines
4.4 KiB
HTML
17 lines
4.4 KiB
HTML
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><!-- 11-04 首页头图左侧 5 个创意效果图（只给用户看稿，不是功能页；截图脚本 /work/.render/heromock/mocks.py）。定稿开发后可删掉本目录。 -->
|
||
<title>首页头图左侧 · 5 个创意效果图</title>
|
||
<style>*{box-sizing:border-box;margin:0;padding:0}body{background:#FFF6F1;font:15px/1.7 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#4E3A33;padding:20px 14px 40px}
|
||
h1{font-size:21px;color:#2B1A15}p.l{margin:4px 0 16px;font-size:13.5px;color:#9A7F74}
|
||
.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;max-width:1100px;margin:0 auto}
|
||
figure{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px -14px rgba(180,90,60,.5);cursor:zoom-in}
|
||
figure img{display:block;width:100%}figcaption{padding:12px 14px 14px}figcaption b{display:block;font-size:16px;color:#2B1A15}figcaption span{font-size:13.5px}
|
||
figure.cur{opacity:.85}figure.cur b::after{content:"对照";margin-left:6px;padding:0 6px;border-radius:6px;background:#EEE;color:#888;font-size:11px}
|
||
#z{position:fixed;inset:0;background:rgba(30,15,10,.88);display:none;flex-direction:column;align-items:center;justify-content:center;padding:16px;z-index:9}#z.on{display:flex}
|
||
#z img{max-width:100%;max-height:72vh;border-radius:14px}#z p{max-width:560px;margin-top:12px;color:#fff;font-size:14.5px;text-align:center}#z p b{display:block;font-size:18px}
|
||
#z .n{position:absolute;top:50%;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:24px;border:0}#z .pv{left:10px}#z .nx{right:10px}</style></head><body>
|
||
<h1>首页头图左侧 · 5 个创意效果图</h1><p class="l">都是在真实首页上替换左侧区域截的图（示例：孕 29 周、还有 77 天见面）。点图片放大，左右切换。只是效果图，还没开发。</p>
|
||
<div class="g"><figure class="c cur"><img src="0.jpg?v=1" alt="现在的样子"><figcaption><b>现在的样子</b><span>翻页倒计时 + 时分秒 + 孕周进度条，信息都对，但全是数字，看久了像个计时器。</span></figcaption></figure><figure class="c"><img src="a.jpg?v=1" alt="① 宝宝悄悄话"><figcaption><b>① 宝宝悄悄话</b><span>用宝宝的口吻说一句当周的变化（“我今天学会眨眼睛啦”），每天换一句，点「换一句」还能再看。最有情绪、最想截图分享；下面一行保留孕周和见面天数。</span></figcaption></figure><figure class="c"><img src="b.jpg?v=1" alt="② 撕页日历"><figcaption><b>② 撕页日历</b><span>做成一本倒计时日历，大字写剩几天和见面那天是周几。每天第一次打开，手指一划「撕掉一页」，有撕纸动效和声音，养成每天来撕一页的习惯。</span></figcaption></figure><figure class="c"><img src="c.jpg?v=1" alt="③ 星星罐"><figcaption><b>③ 星星罐</b><span>每陪宝宝一天攒一颗星，罐子越装越满（已攒 203 颗，再攒 77 颗见面）。进度一眼看得见，可以加「今天的星星」点亮动画。</span></figcaption></figure><figure class="c"><img src="d.jpg?v=1" alt="④ 宝宝心跳"><figcaption><b>④ 宝宝心跳</b><span>一颗会跳的心 + 心电线，跟着胎心节奏（约 140 次/分）轻轻跳动，配一句本周发育。安静、有陪伴感，孕早期没胎心的周数换成「心脏正在长」。</span></figcaption></figure><figure class="c"><img src="e.jpg?v=1" alt="⑤ 今天和宝宝的约定"><figcaption><b>⑤ 今天和宝宝的约定</b><span>每天 3 件小事（数胎动、喝水、读故事），做完打勾，右上角小圆环显示完成度。把首页从“看数字”变成“每天有事做”，还能连到数胎动等工具。</span></figcaption></figure></div>
|
||
<div id="z"><button class="n pv">‹</button><img><p></p><button class="n nx">›</button></div>
|
||
<script>var F=[].slice.call(document.querySelectorAll('figure')),z=document.getElementById('z'),i=0;
|
||
function sh(k){i=(k+F.length)%F.length;z.querySelector('img').src=F[i].querySelector('img').src;z.querySelector('p').innerHTML=F[i].querySelector('figcaption').innerHTML;z.classList.add('on')}
|
||
F.forEach(function(f,k){f.onclick=function(){sh(k)}});z.onclick=function(e){if(e.target.classList.contains('pv'))sh(i-1);else if(e.target.classList.contains('nx'))sh(i+1);else z.classList.remove('on')};</script></body></html> |