108 lines
3.4 KiB
HTML
108 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>小红书爆款封面模板 · Playground</title>
|
||
|
|
<style>
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
body {
|
||
|
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 24px 16px 48px;
|
||
|
|
background: #f5f5f5;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
.sub {
|
||
|
|
text-align: center;
|
||
|
|
color: #666;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
}
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
|
|
}
|
||
|
|
.card img {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
aspect-ratio: 3/4;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
.card .name {
|
||
|
|
padding: 12px 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
.card a {
|
||
|
|
display: block;
|
||
|
|
padding: 8px 16px 12px;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: #2266FF;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.card a:hover { text-decoration: underline; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>小红书爆款封面模板</h1>
|
||
|
|
<p class="sub">共 21 套模板（可直接实现 + 部分实现），点击「大图 / 自定义文案」可打开 API 链接并传 ?text=行1|行2 自定义文案</p>
|
||
|
|
<div class="grid" id="list"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var templates = [
|
||
|
|
{ id: 'grid-card', name: '网格卡片' },
|
||
|
|
{ id: 'minimal-white', name: '极简白底' },
|
||
|
|
{ id: 'gradient-soft', name: '渐变柔粉' },
|
||
|
|
{ id: 'memo-note', name: '苹果备忘录' },
|
||
|
|
{ id: 'dark-mode', name: '深色暗黑' },
|
||
|
|
{ id: 'pastel-cute', name: '奶油胶可爱' },
|
||
|
|
{ id: 'magazine', name: '杂志分栏' },
|
||
|
|
{ id: 'retro-study', name: '复古学习' },
|
||
|
|
{ id: 'fresh-melon', name: '青提甜瓜' },
|
||
|
|
{ id: 'sunset', name: '日落黄昏' },
|
||
|
|
{ id: 'gradient-blue', name: '渐变蓝' },
|
||
|
|
{ id: 'quote-card', name: '引用卡片' },
|
||
|
|
{ id: 'quality-solitude', name: '低质量社交不如高质量独处' },
|
||
|
|
{ id: 'text-note-orange', name: '橙色便签 Text Note' },
|
||
|
|
{ id: 'quote-pink', name: '粉色引号' },
|
||
|
|
{ id: 'pixel-note', name: '像素风 note' },
|
||
|
|
{ id: 'keyword-style', name: '关键词型 纯干货保姆级' },
|
||
|
|
{ id: 'literary-quote', name: '文艺书摘' },
|
||
|
|
{ id: 'fresh-oxygen', name: '清新氧气感' },
|
||
|
|
{ id: 'fashion-trendy', name: '时尚潮酷' },
|
||
|
|
{ id: 'cute-cartoon', name: '可爱卡通' },
|
||
|
|
];
|
||
|
|
|
||
|
|
var list = document.getElementById('list');
|
||
|
|
templates.forEach(function (t) {
|
||
|
|
var imgUrl = '/xhs-covers/' + t.id + '.png';
|
||
|
|
var bigUrl = '/api/playground/xhs-cover/' + encodeURIComponent(t.id);
|
||
|
|
var card = document.createElement('div');
|
||
|
|
card.className = 'card';
|
||
|
|
card.innerHTML =
|
||
|
|
'<img src="' + imgUrl + '" alt="' + t.name + '" loading="lazy" onerror="this.src=\'' + bigUrl + '\'" />' +
|
||
|
|
'<div class="name">' + t.name + '</div>' +
|
||
|
|
'<a href="' + bigUrl + '" target="_blank" rel="noopener">大图 / 自定义文案</a>';
|
||
|
|
list.appendChild(card);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|