235 lines
13 KiB
HTML
235 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>App 文章模块 · 4 种风格预览</title>
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:#f0f2f5; color:#1e293b; }
|
|
.page-title { text-align:center; padding:32px 16px 8px; }
|
|
.page-title h1 { font-size:22px; font-weight:800; }
|
|
.page-title p { color:#64748b; font-size:13px; margin-top:6px; }
|
|
|
|
.section { max-width:420px; margin:28px auto; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); }
|
|
.section-head { padding:16px 16px 12px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:8px; }
|
|
.section-head .tag { font-size:11px; font-weight:700; padding:3px 10px; border-radius:6px; color:#fff; }
|
|
.section-head h2 { font-size:16px; font-weight:700; }
|
|
|
|
/* 通用分类徽章 / 标签 / 统计 */
|
|
.cat { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; color:#fff; padding:2px 8px; border-radius:5px; }
|
|
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; color:#fff; padding:2px 8px; border-radius:5px; z-index:2; }
|
|
.badge.hot { background:linear-gradient(135deg,#ef4444,#f97316); }
|
|
.badge.new { background:linear-gradient(135deg,#10b981,#06b6d4); }
|
|
.stat { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:#94a3b8; }
|
|
.tagchip { font-size:10px; color:#667eea; background:#f0f4ff; padding:2px 8px; border-radius:5px; }
|
|
|
|
/* ============ 方案 A：信息流大图卡片 ============ */
|
|
.styleA { padding:16px; display:flex; flex-direction:column; gap:20px; background:#fff; }
|
|
.cardA { border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); }
|
|
.cardA .cover { position:relative; height:190px; }
|
|
.cardA .cover img { width:100%; height:100%; object-fit:cover; }
|
|
.cardA .body { padding:14px 16px 16px; }
|
|
.cardA h3 { font-size:17px; font-weight:700; line-height:1.4; margin:8px 0 6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
|
|
.cardA .excerpt { font-size:13px; color:#64748b; line-height:1.6; margin-bottom:10px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
|
|
.cardA .foot { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid #f1f5f9; }
|
|
|
|
/* ============ 方案 B：左图右文紧凑列表 ============ */
|
|
.styleB { padding:8px 16px; display:flex; flex-direction:column; background:#fff; }
|
|
.cardB { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid #f5f7fa; }
|
|
.cardB:last-child { border-bottom:none; }
|
|
.cardB .cover { position:relative; flex-shrink:0; width:110px; height:84px; border-radius:10px; overflow:hidden; }
|
|
.cardB .cover img { width:100%; height:100%; object-fit:cover; }
|
|
.cardB .info { flex:1; min-width:0; display:flex; flex-direction:column; }
|
|
.cardB h3 { font-size:15px; font-weight:600; line-height:1.35; margin-bottom:4px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
|
|
.cardB .meta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
|
|
.cardB .tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
|
|
|
|
/* ============ 方案 C：双列瀑布流 ============ */
|
|
.styleC { padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px; background:#fff; }
|
|
.cardC { border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); }
|
|
.cardC:nth-child(odd) { margin-top:18px; }
|
|
.cardC .cover { position:relative; }
|
|
.cardC .cover img { width:100%; display:block; }
|
|
.cardC .body { padding:10px 12px 12px; }
|
|
.cardC h3 { font-size:14px; font-weight:600; line-height:1.4; margin:6px 0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
|
|
.cardC .statrow { display:flex; gap:10px; margin-top:6px; }
|
|
|
|
/* ============ 方案 D：沉浸式无边框 ============ */
|
|
.styleD { padding:8px 20px; background:#fff; }
|
|
.cardD { padding:20px 0; border-bottom:1px solid #f1f5f9; }
|
|
.cardD:last-child { border-bottom:none; }
|
|
.cardD .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
|
|
.cardD h3 { font-size:18px; font-weight:700; line-height:1.45; margin-bottom:8px; }
|
|
.cardD .excerpt { font-size:14px; color:#64748b; line-height:1.7; margin-bottom:12px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
|
|
.cardD .foot { display:flex; align-items:center; justify-content:space-between; color:#94a3b8; font-size:12px; }
|
|
|
|
.navtip { max-width:420px; margin:0 auto; text-align:center; color:#94a3b8; font-size:12px; padding:8px 16px 32px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-title">
|
|
<h1>App 文章模块 · 4 种风格预览</h1>
|
|
<p>模拟 375px 手机宽度，基于真实文章数据</p>
|
|
</div>
|
|
|
|
<!-- ===== A 信息流大图卡片 ===== -->
|
|
<div class="section">
|
|
<div class="section-head"><span class="tag" style="background:linear-gradient(135deg,#667eea,#f093fb)">A</span><h2>信息流大图卡片</h2></div>
|
|
<div class="styleA">
|
|
<div class="cardA">
|
|
<div class="cover">
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=400&fit=crop">
|
|
<span class="badge hot">🔥 热门</span>
|
|
</div>
|
|
<div class="body">
|
|
<span class="cat" style="background:#667eea">技术教程</span> <span style="font-size:11px;color:#94a3b8;float:right">1 分钟</span>
|
|
<h3>CSS Grid 布局完全指南：从基础到高级，全面掌握响应式页面布局</h3>
|
|
<p class="excerpt">从基础到高级，全面掌握 CSS Grid 布局，创建复杂的响应式页面布局。</p>
|
|
<div class="foot">
|
|
<span class="stat">👁 1.2w</span><span class="stat">👍 356</span><span class="stat">💬 42</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cardA">
|
|
<div class="cover">
|
|
<img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=800&h=400&fit=crop">
|
|
<span class="badge new">✨ 新</span>
|
|
</div>
|
|
<div class="body">
|
|
<span class="cat" style="background:#667eea">技术教程</span> <span style="font-size:11px;color:#94a3b8;float:right">2 分钟</span>
|
|
<h3>Django REST Framework 最佳实践：构建健壮的 RESTful API</h3>
|
|
<p class="excerpt">掌握 Django REST Framework 的高级用法，构建健壮的 RESTful API。</p>
|
|
<div class="foot">
|
|
<span class="stat">👁 8.9k</span><span class="stat">👍 210</span><span class="stat">💬 18</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== B 左图右文紧凑列表 ===== -->
|
|
<div class="section">
|
|
<div class="section-head"><span class="tag" style="background:#4facfe">B</span><h2>左图右文紧凑列表</h2></div>
|
|
<div class="styleB">
|
|
<div class="cardB">
|
|
<div class="cover"><img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=200&h=150&fit=crop"><span class="badge new" style="left:4px;top:4px">新</span></div>
|
|
<div class="info">
|
|
<h3>2026 年前端技术趋势展望</h3>
|
|
<div class="tags"><span class="tagchip">前端</span><span class="tagchip">趋势</span></div>
|
|
<div class="meta">
|
|
<span class="cat" style="background:#43e97b;font-size:9px">行业洞察</span>
|
|
<span class="stat">👁 5.6k · 👍 189</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cardB">
|
|
<div class="cover"><img src="https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?w=200&h=150&fit=crop"><span class="badge hot" style="left:4px;top:4px">热门</span></div>
|
|
<div class="info">
|
|
<h3>高效开发者的 10 个工作习惯</h3>
|
|
<div class="tags"><span class="tagchip">效率</span><span class="tagchip">习惯</span></div>
|
|
<div class="meta">
|
|
<span class="cat" style="background:#4facfe;font-size:9px">效率方法</span>
|
|
<span class="stat">👁 3.2k · 👍 98</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cardB">
|
|
<div class="cover"><img src="https://images.unsplash.com/photo-1561070791-2526d30994b5?w=200&h=150&fit=crop"></div>
|
|
<div class="info">
|
|
<h3>UI 设计原则：打造用户友好的界面</h3>
|
|
<div class="meta">
|
|
<span class="cat" style="background:#f093fb;font-size:9px">设计前沿</span>
|
|
<span class="stat">👁 2.1k · 👍 156</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== C 双列瀑布流 ===== -->
|
|
<div class="section">
|
|
<div class="section-head"><span class="tag" style="background:#43e97b">C</span><h2>杂志式双列瀑布流</h2></div>
|
|
<div class="styleC">
|
|
<div class="cardC">
|
|
<div class="cover"><img src="https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=300&h=200&fit=crop"><span class="badge hot">热门</span></div>
|
|
<div class="body">
|
|
<span class="cat" style="background:#667eea;font-size:9px">技术教程</span>
|
|
<h3>深入理解 TypeScript 类型系统</h3>
|
|
<div class="statrow"><span class="stat">👁 4.5k</span><span class="stat">👍 320</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="cardC">
|
|
<div class="cover"><img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=300&h=150&fit=crop"></div>
|
|
<div class="body">
|
|
<span class="cat" style="background:#667eea;font-size:9px">技术教程</span>
|
|
<h3>Vue 3 组合式 API 最佳实践</h3>
|
|
<div class="statrow"><span class="stat">👁 2.8k</span><span class="stat">👍 145</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="cardC">
|
|
<div class="cover"><img src="https://images.unsplash.com/photo-1526379095098-d400fd0bf935?w=300&h=260&fit=crop"></div>
|
|
<div class="body">
|
|
<span class="cat" style="background:#667eea;font-size:9px">技术教程</span>
|
|
<h3>Python asyncio 异步编程入门</h3>
|
|
<div class="statrow"><span class="stat">👁 1.9k</span><span class="stat">👍 87</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="cardC">
|
|
<div class="cover"><img src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?w=300&h=180&fit=crop"></div>
|
|
<div class="body">
|
|
<span class="cat" style="background:#f093fb;font-size:9px">设计前沿</span>
|
|
<h3>设计系统：从规范到组件</h3>
|
|
<div class="statrow"><span class="stat">👁 3.4k</span><span class="stat">👍 210</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== D 沉浸式无边框 ===== -->
|
|
<div class="section">
|
|
<div class="section-head"><span class="tag" style="background:#94a3b8">D</span><h2>沉浸式无边框</h2></div>
|
|
<div class="styleD">
|
|
<div class="cardD">
|
|
<div class="top">
|
|
<span class="cat" style="background:#667eea">技术教程</span>
|
|
<span style="font-size:11px;color:#94a3b8">2026-08-02 · 1 分钟</span>
|
|
</div>
|
|
<h3>CSS Grid 布局完全指南：从基础到高级，全面掌握响应式页面布局</h3>
|
|
<p class="excerpt">从基础到高级，全面掌握 CSS Grid 布局，创建复杂的响应式页面布局。包括 Grid Container、Grid Track、Grid Area 等核心概念与实战技巧。</p>
|
|
<div class="foot">
|
|
<span>👁 1.2w 👍 356 💬 42</span>
|
|
<span style="color:#667eea;font-weight:600">阅读 →</span>
|
|
</div>
|
|
</div>
|
|
<div class="cardD">
|
|
<div class="top">
|
|
<span class="cat" style="background:#f093fb">设计前沿</span>
|
|
<span style="font-size:11px;color:#94a3b8">2026-08-01 · 2 分钟</span>
|
|
</div>
|
|
<h3>UI 设计原则：打造用户友好的界面，让产品更易用</h3>
|
|
<p class="excerpt">学习 UI 设计的核心原则，包括一致性、层次感、对比度等，创建美观且易用的产品界面。</p>
|
|
<div class="foot">
|
|
<span>👁 2.1k 👍 156 💬 12</span>
|
|
<span style="color:#667eea;font-weight:600">阅读 →</span>
|
|
</div>
|
|
</div>
|
|
<div class="cardD">
|
|
<div class="top">
|
|
<span class="cat" style="background:#43e97b">行业洞察</span>
|
|
<span style="font-size:11px;color:#94a3b8">2026-07-28 · 1 分钟</span>
|
|
</div>
|
|
<h3>2026 年前端技术趋势展望：框架演进与工具链变化</h3>
|
|
<p class="excerpt">分析 2026 年前端技术的发展趋势，包括框架演进、工具链变化、新兴技术等。</p>
|
|
<div class="foot">
|
|
<span>👁 5.6k 👍 189 💬 25</span>
|
|
<span style="color:#667eea;font-weight:600">阅读 →</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navtip">共 4 种风格：A 信息流大图 · B 紧凑列表 · C 双列瀑布 · D 沉浸式极简</div>
|
|
</body>
|
|
</html>
|