156 lines
3.8 KiB
HTML
156 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<!--
|
||
Template: wechat-cover-split
|
||
Ratio: 335:100 (left 2.35:1 + right 1:1)
|
||
用途: 公众号文章封面长条图，左文案右 icon，可裁成两张
|
||
Parameters:
|
||
{{MAIN_TEXT_LINE1}} — 第一行文字
|
||
{{MAIN_TEXT_LINE2}} — 第二行文字
|
||
{{MAIN_TEXT_LINE3}} — 预留，不显示
|
||
{{LINE1_CLASS}} — "highlight" 或 ""
|
||
{{LINE2_CLASS}} — "highlight" 或 ""
|
||
{{LINE3_CLASS}} — "highlight" 或 ""
|
||
{{HIGHLIGHT_COLOR}} — 高亮色
|
||
{{BG_COLOR}} — 背景色
|
||
{{FOOTER_TEXT}} — 底部文字
|
||
{{ICON_PATH}} — 右侧 icon 绝对路径
|
||
{{FONT_PATH}} — 字体绝对路径
|
||
-->
|
||
<style>
|
||
@font-face {
|
||
font-family: "AlimamaShuHeiTi";
|
||
src: url("{{FONT_PATH}}") format("truetype");
|
||
}
|
||
html, body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
background: {{BG_COLOR}};
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
color: #111;
|
||
font-family: "AlimamaShuHeiTi", "PingFang SC", sans-serif;
|
||
}
|
||
.canvas {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: flex;
|
||
background: {{BG_COLOR}};
|
||
}
|
||
.left {
|
||
width: 940px;
|
||
height: 400px;
|
||
padding: 34px 48px 28px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
background:
|
||
radial-gradient(circle at top right, rgba(255,255,255,0.38), transparent 30%),
|
||
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)),
|
||
{{BG_COLOR}};
|
||
}
|
||
.eyebrow {
|
||
font-size: 18px;
|
||
letter-spacing: 0.5px;
|
||
color: rgba(0,0,0,0.38);
|
||
}
|
||
.text-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
max-width: 820px;
|
||
}
|
||
.line {
|
||
font-size: 72px;
|
||
line-height: 1.02;
|
||
letter-spacing: -1.5px;
|
||
color: #111;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: clip;
|
||
}
|
||
.line.highlight { color: {{HIGHLIGHT_COLOR}}; }
|
||
.highlight { color: {{HIGHLIGHT_COLOR}}; }
|
||
.line.empty {
|
||
display: none;
|
||
}
|
||
.footer {
|
||
position: absolute;
|
||
left: 48px;
|
||
bottom: 24px;
|
||
font-size: 16px;
|
||
color: rgba(0,0,0,0.42);
|
||
letter-spacing: 1px;
|
||
}
|
||
.right {
|
||
width: 400px;
|
||
height: 400px;
|
||
border-left: 1px solid rgba(0,0,0,0.08);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background:
|
||
linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06)),
|
||
color-mix(in srgb, {{HIGHLIGHT_COLOR}} 7%, white);
|
||
position: relative;
|
||
}
|
||
.icon-shell {
|
||
width: 232px;
|
||
height: 232px;
|
||
border-radius: 56px;
|
||
background: rgba(255,255,255,0.82);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 22px 50px rgba(0,0,0,0.08);
|
||
padding: 24px;
|
||
}
|
||
.icon-shell img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
border-radius: 28px;
|
||
}
|
||
.grid-mark {
|
||
position: absolute;
|
||
inset: 20px;
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
border-radius: 28px;
|
||
pointer-events: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="canvas">
|
||
<section class="left">
|
||
<div class="eyebrow">{{FOOTER_TEXT}}</div>
|
||
<div class="text-block">
|
||
<div class="line {{LINE1_CLASS}}" id="l1">{{MAIN_TEXT_LINE1}}</div>
|
||
<div class="line {{LINE2_CLASS}}" id="l2">{{MAIN_TEXT_LINE2}}</div>
|
||
</div>
|
||
<div class="footer"></div>
|
||
</section>
|
||
|
||
<aside class="right">
|
||
<div class="grid-mark"></div>
|
||
<div class="icon-shell">
|
||
<img src="{{ICON_PATH}}" alt="icon">
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<script>
|
||
['l1', 'l2'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (!el.textContent.trim()) el.classList.add('empty');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|