56 lines
5.4 KiB
HTML
56 lines
5.4 KiB
HTML
<!doctype html><html><head><meta charset="utf-8"><style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{width:750px;height:600px;font-family:"Noto Sans CJK SC","Noto Sans CJK",sans-serif;background:#fff}
|
||
#c{position:relative;width:750px;height:600px;overflow:hidden;--c:#22A3A0}
|
||
.t{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 16%,#fff) 0%,#fff 52%,color-mix(in srgb,var(--c) 10%,#fff) 100%)}
|
||
.t::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--c) 22%,#fff) 2px,transparent 2.4px);background-size:26px 26px;opacity:.6}
|
||
.blob{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--c) 18%,#fff)}
|
||
.b1{width:360px;height:360px;right:-120px;top:-150px}.b2{width:220px;height:220px;left:-90px;bottom:-110px;background:color-mix(in srgb,var(--c) 12%,#fff)}
|
||
.logo{position:absolute;left:40px;top:34px;height:62px;padding:8px 18px;border-radius:20px;background:#fff;box-shadow:0 6px 18px -8px rgba(0,0,0,.18);display:flex;align-items:center}
|
||
.logo img{height:46px}
|
||
.chip{position:absolute;right:40px;top:44px;height:46px;padding:0 22px;border-radius:99px;background:var(--c);color:#fff;font-size:24px;font-weight:700;line-height:46px;letter-spacing:1px}
|
||
.big{position:absolute;left:46px;top:128px;width:480px;height:224px;display:flex;align-items:center}
|
||
.bt{width:100%;text-wrap:balance}
|
||
.big span{display:inline;font-weight:900;color:color-mix(in srgb,var(--c) 78%,#1b1b1b);letter-spacing:4px;line-height:1.12;background:linear-gradient(transparent 68%,color-mix(in srgb,var(--c) 26%,#fff) 68%,color-mix(in srgb,var(--c) 26%,#fff) 94%,transparent 94%);-webkit-box-decoration-break:clone}
|
||
.tile{position:absolute;right:52px;top:176px;width:150px;height:150px;border-radius:42px;background:var(--c);transform:rotate(-8deg);display:grid;place-items:center;box-shadow:0 18px 30px -14px var(--c)}
|
||
.tile svg{width:92px;height:92px}
|
||
.ttl{position:absolute;left:48px;top:372px;width:654px;font-size:34px;font-weight:700;color:#2B2320;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
.sub{display:none}
|
||
.cta{position:absolute;left:46px;bottom:40px;height:64px;padding:0 34px;border-radius:99px;background:var(--c);color:#fff;font-size:30px;font-weight:900;line-height:64px;letter-spacing:2px;box-shadow:0 12px 22px -12px var(--c)}
|
||
.slg{position:absolute;right:44px;bottom:58px;font-size:22px;color:#A89C96;letter-spacing:1px}
|
||
/* photo */
|
||
.p{background:linear-gradient(160deg,var(--l1),#fff 60%,var(--l2))}
|
||
.p .ph{position:absolute;right:0;top:0;width:330px;height:600px;object-fit:cover}
|
||
.p .pl{position:absolute;left:46px;top:122px;bottom:36px;width:350px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
|
||
.p .chip{position:static;height:40px;line-height:40px;font-size:21px;padding:0 18px}
|
||
.p .big{position:static;width:100%;height:auto;flex:1;min-height:0;align-items:center}
|
||
.p .big span{letter-spacing:1px;line-height:1.18}
|
||
.p .sub2{font-size:23px;color:#8A7F7A;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-4px}
|
||
.p .ttl{position:static;width:100%;font-size:23px;font-weight:500;color:#5B504B;-webkit-line-clamp:2;line-height:1.4}
|
||
.p .cta{position:static;height:58px;line-height:58px;font-size:27px;padding:0 28px;flex:none}
|
||
</style></head><body><div id="c"></div>
|
||
<script>
|
||
var LOGO='file:///work/mama-box/assets/img/brand-logo-c.png';
|
||
function esc(s){return String(s||'').replace(/[&<>"]/g,function(c){return {'&':'&','<':'<','>':'>','"':'"'}[c]})}
|
||
function fit(el,max,min,lines){var s=el.querySelector('span');for(var f=max;f>=min;f-=2){s.style.fontSize=f+'px';var n=0,r=s.getClientRects(),ys={};for(var i=0;i<r.length;i++)ys[Math.round(r[i].top)]=1;n=Object.keys(ys).length;
|
||
if(n<=lines&&el.scrollHeight<=el.clientHeight+2&&s.parentNode.scrollWidth<=s.parentNode.clientWidth+1)return f}return min}
|
||
window.draw=function(x,svg){
|
||
var c=document.getElementById('c');c.style.setProperty('--c',x.c);
|
||
if(x.type==='photo'){
|
||
var l1=(x.bg&&x.bg[0])||'#FFE6EB',l2=(x.bg&&x.bg[1])||'#FFC6D2';
|
||
c.className='p';c.style.setProperty('--l1',l1);c.style.setProperty('--l2',l2);c.style.setProperty('--l1x',l1);
|
||
c.innerHTML='<img class="ph" src="file://'+x.ph+'"><div class="phm" style="background:linear-gradient(90deg,'+l1+' 0%,transparent 100%);right:270px;width:60px;display:none"></div>'+
|
||
'<div class="logo"><img src="'+LOGO+'"></div><div class="pl"><div class="chip">'+esc(x.mod)+'</div><div class="big"><div class="bt"><span>'+esc(x.big)+'</span></div></div>'+
|
||
(x.sub?'<div class="sub2">'+esc(x.sub)+'</div>':'')+'<div class="ttl">'+esc(x.title)+'</div><div class="cta">'+esc(x.cta)+' ›</div></div>';
|
||
fit(c.querySelector('.big'),84,36,3);
|
||
}else{
|
||
c.className='t';
|
||
c.innerHTML='<i class="blob b1"></i><i class="blob b2"></i><div class="logo"><img src="'+LOGO+'"></div><div class="chip">'+esc(x.mod)+'</div>'+
|
||
'<div class="tile">'+svg+'</div><div class="big"><div class="bt"><span>'+esc(x.big)+'</span></div></div><div class="ttl">'+esc(x.title)+'</div>'+
|
||
(x.sub?'<div class="sub">'+esc(x.sub)+'</div>':'')+'<div class="cta">'+esc(x.cta)+' ›</div><div class="slg">陪你从孕期到育儿的每一天</div>';
|
||
fit(c.querySelector('.big'),150,56,1)>=96||fit(c.querySelector('.big'),110,50,2);
|
||
}
|
||
return Promise.all([].map.call(c.querySelectorAll('img'),function(i){return i.complete?1:new Promise(function(r){i.onload=i.onerror=r})}));
|
||
};
|
||
</script></body></html>
|