17 lines
3.7 KiB
HTML
17 lines
3.7 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 首页头图左侧精简版效果图（用户：「在现有基础上调整，内容有点多，精简一下」；截图脚本 /work/.render/heromock/simp.py）（只给用户看稿，不是功能页；截图脚本 /work/.render/heromock/mocks.py）。定稿开发后可删掉本目录。 -->
|
||
<title>首页头图左侧 · 精简版效果图</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>首页头图左侧 · 精简版效果图</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>翻页天数 + 时分秒 + 孕周和「+0天」+ 进度条 + 像椰子，一共 5 行信息。</span></figcaption></figure><figure class="c"><img src="1.jpg?v=1" alt="A · 只留天数和一句话"><figcaption><b>A · 只留天数和一句话</b><span>保留翻页天数；时分秒、进度条、「+0天」都去掉；下面一行「孕 29 周 · 宝宝像椰子」。</span></figcaption></figure><figure class="c"><img src="2.jpg?v=1" alt="B · 天数 + 进度条"><figcaption><b>B · 天数 + 进度条</b><span>保留翻页天数和进度条（能看到走了多远）；去掉时分秒和「+0天」。</span></figcaption></figure><figure class="c"><img src="3.jpg?v=1" alt="C · 大数字（推荐）"><figcaption><b>C · 大数字（推荐）</b><span>去掉翻页牌的方块，「77」直接用大号白字，上面一行「离见面还有」，下面「孕 29 周 · 宝宝像椰子」。最干净，天数最醒目。</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> |