|
|
@@ -0,0 +1,776 @@
|
|
|
+# HTML 海报可复用组件库
|
|
|
+
|
|
|
+## CSS 变量（配色方案）
|
|
|
+
|
|
|
+基础色板，根据论文或机构风格调整：
|
|
|
+
|
|
|
+```css
|
|
|
+:root {
|
|
|
+ --primary: #1B3A4B;
|
|
|
+ --secondary: #065A82;
|
|
|
+ --accent: #00A7E1;
|
|
|
+ --warm: #E8927C;
|
|
|
+ --gold: #D4A574;
|
|
|
+ --bg-light: #F4F7F9;
|
|
|
+ --bg-cream: #FAFBFC;
|
|
|
+ --text-dark: #1A1A2E;
|
|
|
+ --text-muted: #5A6B7D;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Result 独立 accent 色
|
|
|
+
|
|
|
+每个 Result 使用不同的 accent 色作为顶部边框和编号圆标背景，帮助读者区分不同发现。按论文主题选色，例如：
|
|
|
+
|
|
|
+```css
|
|
|
+:root {
|
|
|
+ --r1-color: #1B3A4B;
|
|
|
+ --r2-color: #065A82;
|
|
|
+ --r3-color: #2E8B57;
|
|
|
+ --r4-color: #00A7E1;
|
|
|
+ --r5-color: #D4A574;
|
|
|
+ --r6-color: #E8927C;
|
|
|
+}
|
|
|
+.result-1 { border-top-color: var(--r1-color); }
|
|
|
+.result-2 { border-top-color: var(--r2-color); }
|
|
|
+/* ... */
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 三列 Grid 布局
|
|
|
+
|
|
|
+```css
|
|
|
+.poster { width: 48in; background: var(--bg-cream); }
|
|
|
+
|
|
|
+.content {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
+ gap: 0.3in;
|
|
|
+ padding: 0.45in 0.55in;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 标准布局（6 个 Result 示例）
|
|
|
+
|
|
|
+第 1 列 = 叙事列，第 2–3 列 = Result + Conclusions。
|
|
|
+
|
|
|
+```css
|
|
|
+.background { grid-column: 1; grid-row: 1; }
|
|
|
+.study-design { grid-column: 1; grid-row: 2; }
|
|
|
+.methods { grid-column: 1; grid-row: 3; }
|
|
|
+
|
|
|
+.result-1 { grid-column: 2; grid-row: 1; }
|
|
|
+.result-2 { grid-column: 3; grid-row: 1; }
|
|
|
+.result-3 { grid-column: 2; grid-row: 2; }
|
|
|
+.result-4 { grid-column: 3; grid-row: 2; }
|
|
|
+.result-5 { grid-column: 2; grid-row: 3; }
|
|
|
+.result-6 { grid-column: 3; grid-row: 3; }
|
|
|
+
|
|
|
+.conclusions { grid-column: 2 / 4; grid-row: 4; }
|
|
|
+```
|
|
|
+
|
|
|
+Result 数量不同时调整行数，保持从左到右、从上到下排列：
|
|
|
+
|
|
|
+```css
|
|
|
+/* 4 个 Result */
|
|
|
+.result-1 { grid-column: 2; grid-row: 1; }
|
|
|
+.result-2 { grid-column: 3; grid-row: 1; }
|
|
|
+.result-3 { grid-column: 2; grid-row: 2; }
|
|
|
+.result-4 { grid-column: 3; grid-row: 2; }
|
|
|
+.conclusions { grid-column: 2 / 4; grid-row: 3; }
|
|
|
+
|
|
|
+/* 3 个 Result（最后行只占 1 格） */
|
|
|
+.result-1 { grid-column: 2; grid-row: 1; }
|
|
|
+.result-2 { grid-column: 3; grid-row: 1; }
|
|
|
+.result-3 { grid-column: 2; grid-row: 2; }
|
|
|
+.conclusions { grid-column: 2 / 4; grid-row: 3; }
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Section 基础样式
|
|
|
+
|
|
|
+```css
|
|
|
+.section {
|
|
|
+ background: white;
|
|
|
+ border-radius: 0.08in;
|
|
|
+ padding: 0.3in;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0 2px 10px rgba(0,0,0,0.04);
|
|
|
+ border: 1px solid rgba(0,0,0,0.05);
|
|
|
+ border-top: 4px solid var(--accent);
|
|
|
+}
|
|
|
+.section-title {
|
|
|
+ font-family: 'Playfair Display', serif;
|
|
|
+ font-size: 0.28in; font-weight: 700;
|
|
|
+ color: var(--primary);
|
|
|
+ margin-bottom: 0.18in; padding-bottom: 0.08in;
|
|
|
+ border-bottom: 3px solid var(--accent);
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.section p, .section li {
|
|
|
+ font-size: 0.17in; line-height: 1.6; color: var(--text-dark);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Result 编号圆标
|
|
|
+
|
|
|
+每个 Result section 带有绝对定位的编号圆标，引导阅读顺序：
|
|
|
+
|
|
|
+```css
|
|
|
+.result-number {
|
|
|
+ position: absolute;
|
|
|
+ top: -0.18in; left: 0.2in;
|
|
|
+ width: 0.4in; height: 0.4in;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
+ font-family: 'Playfair Display', serif;
|
|
|
+ font-size: 0.22in; font-weight: 900;
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+HTML：
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="section result-1" style="border-top-color: var(--r1-color)">
|
|
|
+ <div class="result-number" style="background: var(--r1-color)">1</div>
|
|
|
+ <h2 class="section-title">Result 标题</h2>
|
|
|
+ ...
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Conclusions 深色样式
|
|
|
+
|
|
|
+Conclusions 跨第 2–3 列，使用深色渐变背景作为视觉终点：
|
|
|
+
|
|
|
+```css
|
|
|
+.conclusions {
|
|
|
+ grid-column: 2 / 4;
|
|
|
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
|
|
+ color: white;
|
|
|
+ border-top: none;
|
|
|
+}
|
|
|
+.conclusions .section-title {
|
|
|
+ color: white;
|
|
|
+ border-bottom-color: var(--gold);
|
|
|
+}
|
|
|
+
|
|
|
+.concl-item {
|
|
|
+ display: flex; align-items: flex-start;
|
|
|
+ gap: 0.12in; margin-bottom: 0.12in;
|
|
|
+ padding: 0.1in;
|
|
|
+ background: rgba(255,255,255,0.06);
|
|
|
+ border-radius: 0.05in;
|
|
|
+ border-left: 3px solid var(--gold);
|
|
|
+}
|
|
|
+.concl-num {
|
|
|
+ font-family: 'Playfair Display', serif;
|
|
|
+ font-size: 0.28in; font-weight: 900;
|
|
|
+ color: var(--accent); flex-shrink: 0;
|
|
|
+ width: 0.35in; text-align: center;
|
|
|
+}
|
|
|
+.concl-text {
|
|
|
+ font-size: 0.16in; line-height: 1.55;
|
|
|
+ color: rgba(255,255,255,0.92);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+HTML：
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="section conclusions">
|
|
|
+ <h2 class="section-title">Conclusions</h2>
|
|
|
+ <div class="concl-item">
|
|
|
+ <div class="concl-num">1</div>
|
|
|
+ <div class="concl-text">结论内容...</div>
|
|
|
+ </div>
|
|
|
+ <div class="concl-item">
|
|
|
+ <div class="concl-num">2</div>
|
|
|
+ <div class="concl-text">结论内容...</div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Stat Box
|
|
|
+
|
|
|
+用于 Study Design 区域展示关键数字：
|
|
|
+
|
|
|
+```css
|
|
|
+.stat-row { display: flex; gap: 0.15in; flex-wrap: wrap; }
|
|
|
+.stat-box {
|
|
|
+ flex: 1; min-width: 1in;
|
|
|
+ background: var(--bg-light); border-radius: 0.06in;
|
|
|
+ padding: 0.14in; text-align: center;
|
|
|
+ border-left: 3px solid var(--accent);
|
|
|
+}
|
|
|
+.stat-box .number {
|
|
|
+ font-family: 'Playfair Display', serif;
|
|
|
+ font-size: 0.34in; font-weight: 900;
|
|
|
+ color: var(--secondary); display: block;
|
|
|
+}
|
|
|
+.stat-box .label {
|
|
|
+ font-size: 0.12in; color: var(--text-muted);
|
|
|
+ text-transform: uppercase; letter-spacing: 1px;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Finding Card
|
|
|
+
|
|
|
+```css
|
|
|
+.finding-card {
|
|
|
+ background: var(--bg-light); border-radius: 0.06in;
|
|
|
+ padding: 0.15in; margin: 0.1in 0;
|
|
|
+ border-left: 4px solid var(--accent);
|
|
|
+}
|
|
|
+.finding-card.important {
|
|
|
+ border-left-color: var(--warm);
|
|
|
+ background: #FFF8F5;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Cladogram（多物种系统发育树）
|
|
|
+
|
|
|
+仅用于涉及 ≥3 物种跨物种比较的论文。纯 CSS 实现，展示拓扑关系和类群分组，不标注分化时间。
|
|
|
+
|
|
|
+```css
|
|
|
+.cladogram {
|
|
|
+ padding: 0.15in;
|
|
|
+ background: var(--bg-light);
|
|
|
+ border-radius: 0.06in;
|
|
|
+ margin: 0.1in 0;
|
|
|
+ font-size: 0.12in;
|
|
|
+}
|
|
|
+.clade-group {
|
|
|
+ border-left: 2px solid var(--secondary);
|
|
|
+ margin-left: 0.15in;
|
|
|
+ padding-left: 0.15in;
|
|
|
+ padding-top: 0.04in;
|
|
|
+ padding-bottom: 0.04in;
|
|
|
+}
|
|
|
+.clade-label {
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--secondary);
|
|
|
+ font-size: 0.13in;
|
|
|
+ margin-bottom: 0.04in;
|
|
|
+}
|
|
|
+.clade-species {
|
|
|
+ display: flex; flex-wrap: wrap; gap: 0.06in;
|
|
|
+ margin: 0.04in 0;
|
|
|
+}
|
|
|
+.species-tag {
|
|
|
+ display: inline-flex; align-items: center; gap: 0.04in;
|
|
|
+ background: white; border-radius: 0.03in;
|
|
|
+ padding: 0.03in 0.08in;
|
|
|
+ font-size: 0.11in; font-weight: 600;
|
|
|
+ border: 1px solid #D8DEE4;
|
|
|
+}
|
|
|
+.species-tag .sp-dot {
|
|
|
+ width: 0.08in; height: 0.08in;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.outgroup-tag {
|
|
|
+ background: #FFF8F0;
|
|
|
+ border-color: var(--warm);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+HTML 示例（12 物种比较基因组学）：
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="cladogram">
|
|
|
+ <!-- 外群 -->
|
|
|
+ <div style="margin-bottom:0.06in">
|
|
|
+ <span class="species-tag outgroup-tag">
|
|
|
+ <span class="sp-dot" style="background:var(--green-a)"></span> Zebrafish
|
|
|
+ </span>
|
|
|
+ <span style="font-size:0.1in; color:var(--text-muted); margin-left:0.06in">distant outgroup</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom:0.08in">
|
|
|
+ <span class="species-tag outgroup-tag">
|
|
|
+ <span class="sp-dot" style="background:var(--warm)"></span> Chicken
|
|
|
+ </span>
|
|
|
+ <span style="font-size:0.1in; color:var(--text-muted); margin-left:0.06in">close outgroup</span>
|
|
|
+ </div>
|
|
|
+ <!-- 哺乳类 -->
|
|
|
+ <div class="clade-group">
|
|
|
+ <div class="clade-label">Mammals</div>
|
|
|
+ <div class="clade-group">
|
|
|
+ <div class="clade-label">Euarchontoglires</div>
|
|
|
+ <div class="clade-species">
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--secondary)"></span> Human</span>
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--secondary)"></span> Rhesus</span>
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--secondary)"></span> Mouse</span>
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--secondary)"></span> Rat</span>
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--secondary)"></span> Rabbit</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="clade-group">
|
|
|
+ <div class="clade-label">Laurasiatheria</div>
|
|
|
+ <div class="clade-species">
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--accent)"></span> Cow</span>
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--accent)"></span> Sheep</span>
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--accent)"></span> Pig</span>
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--accent)"></span> Cat</span>
|
|
|
+ <span class="species-tag"><span class="sp-dot" style="background:var(--accent)"></span> Dog</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+此组件的结构可适配各类物种分组：植物（单子叶/双子叶）、微生物（革兰氏阳性/阴性）等，只需调整 clade-label 和颜色。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 分阶段流程图（Pipeline）
|
|
|
+
|
|
|
+采用 3 阶段分层设计，避免反复的分支箭头。每个阶段有独立视觉风格：
|
|
|
+
|
|
|
+- **Stage 1（实验）**：深色渐变背景，用 `→` 串联实验步骤
|
|
|
+- **Stage 2（数据处理）**：浅灰背景，tool-tag 标签展示软件工具
|
|
|
+- **Stage 3（多维分析）**：白底蓝边分组框，内含 2×N 网格的分析卡片
|
|
|
+
|
|
|
+```
|
|
|
+┌─────────────────────────────┐
|
|
|
+│ Stage 1 — Experiment │ ← 深色渐变 (stage-exp)
|
|
|
+│ 实验步骤 → 用箭头串联 │
|
|
|
+└──────────────┬──────────────┘
|
|
|
+ ▼
|
|
|
+┌─────────────────────────────┐
|
|
|
+│ Stage 2 — Data Processing │ ← 浅灰背景 (stage-proc)
|
|
|
+│ 处理步骤 + tool-tag 标签 │
|
|
|
+└──────────────┬──────────────┘
|
|
|
+ ▼
|
|
|
+┌─ Stage 3 — Analysis ────────┐ ← 白底蓝边 (stage-analysis)
|
|
|
+│ ┌─────────┐ ┌─────────┐ │
|
|
|
+│ │ Card 1 │ │ Card 2 │ │ ← analysis-card 网格
|
|
|
+│ ├─────────┤ ├─────────┤ │ 每张卡片不同色彩左边框
|
|
|
+│ │ Card 3 │ │ Card 4 │ │
|
|
|
+│ ├─────────┤ ├─────────┤ │
|
|
|
+│ │ Card 5 │ │ Card 6 │ │
|
|
|
+│ └─────────┘ └─────────┘ │
|
|
|
+└──────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+### CSS
|
|
|
+
|
|
|
+```css
|
|
|
+.pipeline {
|
|
|
+ display: flex; flex-direction: column;
|
|
|
+ gap: 0; margin: 0.1in 0;
|
|
|
+}
|
|
|
+.pipeline-stage {
|
|
|
+ position: relative;
|
|
|
+ padding: 0.14in;
|
|
|
+ border-radius: 0.06in;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+.pipeline-stage.stage-exp {
|
|
|
+ background: linear-gradient(135deg, var(--secondary), var(--primary));
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+.pipeline-stage.stage-proc {
|
|
|
+ background: var(--bg-light);
|
|
|
+ border: 1.5px solid #D0D7DE;
|
|
|
+}
|
|
|
+.pipeline-stage.stage-analysis {
|
|
|
+ background: white;
|
|
|
+ border: 2px solid var(--secondary);
|
|
|
+}
|
|
|
+.stage-label {
|
|
|
+ font-size: 0.1in; font-weight: 700;
|
|
|
+ text-transform: uppercase; letter-spacing: 1.5px;
|
|
|
+ margin-bottom: 0.08in; opacity: 0.7;
|
|
|
+}
|
|
|
+.stage-exp .stage-label { color: rgba(255,255,255,0.7); }
|
|
|
+.stage-proc .stage-label { color: var(--text-muted); }
|
|
|
+.stage-analysis .stage-label { color: var(--secondary); }
|
|
|
+.stage-title {
|
|
|
+ font-family: 'Playfair Display', serif;
|
|
|
+ font-size: 0.2in; font-weight: 700;
|
|
|
+ margin-bottom: 0.04in;
|
|
|
+}
|
|
|
+.stage-exp .stage-title { color: white; }
|
|
|
+.stage-proc .stage-title { color: var(--primary); }
|
|
|
+.stage-detail {
|
|
|
+ font-size: 0.12in; opacity: 0.8; line-height: 1.5;
|
|
|
+}
|
|
|
+.stage-exp .stage-detail { color: rgba(255,255,255,0.8); }
|
|
|
+.stage-proc .stage-detail { color: var(--text-muted); }
|
|
|
+.stage-tools {
|
|
|
+ display: inline-flex; flex-wrap: wrap; gap: 0.04in;
|
|
|
+ margin-top: 0.05in;
|
|
|
+}
|
|
|
+.tool-tag {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 0.1in; font-weight: 600;
|
|
|
+ padding: 0.02in 0.07in;
|
|
|
+ border-radius: 3px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+}
|
|
|
+.stage-exp .tool-tag {
|
|
|
+ background: rgba(255,255,255,0.18); color: white;
|
|
|
+}
|
|
|
+.stage-proc .tool-tag {
|
|
|
+ background: white; color: var(--secondary);
|
|
|
+ border: 1px solid #D0D7DE;
|
|
|
+}
|
|
|
+
|
|
|
+/* 阶段间连接线 */
|
|
|
+.pipeline-connector {
|
|
|
+ display: flex; justify-content: center;
|
|
|
+ padding: 0.04in 0;
|
|
|
+}
|
|
|
+.pipeline-connector .conn-line {
|
|
|
+ width: 2px; height: 0.14in;
|
|
|
+ background: var(--secondary);
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.pipeline-connector .conn-line::after {
|
|
|
+ content: ''; position: absolute;
|
|
|
+ bottom: -4px; left: -3.5px;
|
|
|
+ border-left: 4.5px solid transparent;
|
|
|
+ border-right: 4.5px solid transparent;
|
|
|
+ border-top: 5px solid var(--secondary);
|
|
|
+}
|
|
|
+
|
|
|
+/* 分析卡片网格 */
|
|
|
+.analysis-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 0.08in;
|
|
|
+}
|
|
|
+.analysis-card {
|
|
|
+ background: var(--bg-light);
|
|
|
+ border-radius: 0.05in;
|
|
|
+ padding: 0.1in;
|
|
|
+ border-left: 3px solid var(--accent);
|
|
|
+}
|
|
|
+.analysis-card .ac-name {
|
|
|
+ font-size: 0.13in; font-weight: 700;
|
|
|
+ color: var(--primary); margin-bottom: 0.03in;
|
|
|
+}
|
|
|
+.analysis-card .ac-tools {
|
|
|
+ font-size: 0.1in; color: var(--text-muted);
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### HTML 示例
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="pipeline">
|
|
|
+ <!-- Stage 1: Experiment -->
|
|
|
+ <div class="pipeline-stage stage-exp">
|
|
|
+ <div class="stage-label">Stage 1 — Experiment</div>
|
|
|
+ <div class="stage-title">Dilution Hi-C + RNA-seq</div>
|
|
|
+ <div class="stage-detail">Formaldehyde crosslinking → HindIII digestion → Biotin ligation → Sequencing</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pipeline-connector"><div class="conn-line"></div></div>
|
|
|
+
|
|
|
+ <!-- Stage 2: Data Processing -->
|
|
|
+ <div class="pipeline-stage stage-proc">
|
|
|
+ <div class="stage-label">Stage 2 — Data Processing</div>
|
|
|
+ <div class="stage-title">Mapping → Filtering → Normalization</div>
|
|
|
+ <div class="stage-tools">
|
|
|
+ <span class="tool-tag">Bowtie2</span>
|
|
|
+ <span class="tool-tag">Hiclib</span>
|
|
|
+ <span class="tool-tag">ICE</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pipeline-connector"><div class="conn-line"></div></div>
|
|
|
+
|
|
|
+ <!-- Stage 3: Multi-dimensional Analysis -->
|
|
|
+ <div class="pipeline-stage stage-analysis">
|
|
|
+ <div class="stage-label">Stage 3 — Multi-dimensional Analysis</div>
|
|
|
+ <div class="analysis-grid">
|
|
|
+ <div class="analysis-card">
|
|
|
+ <div class="ac-name">A/B Compartments</div>
|
|
|
+ <div class="ac-tools">PCA, AB index, Phylo-HMGP</div>
|
|
|
+ </div>
|
|
|
+ <div class="analysis-card">
|
|
|
+ <div class="ac-name">TAD Calling</div>
|
|
|
+ <div class="ac-tools">DomainCaller (DI + HMM)</div>
|
|
|
+ </div>
|
|
|
+ <!-- 按需添加更多 analysis-card -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+分析卡片数量按论文实际分析维度调整（常见 4–6 张），每张卡片可通过 `border-left-color` 赋予独立色彩以区分不同分析类型。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 折叠图表
|
|
|
+
|
|
|
+海报使用 **原图**（`figures/fig{N}.png`）。关键 Figure 用 `<details open>` 默认展开，次要 Figure 折叠。
|
|
|
+
|
|
|
+```css
|
|
|
+details.fig-collapse {
|
|
|
+ margin-top: 0.12in;
|
|
|
+ border: 1px solid #D8DEE4;
|
|
|
+ border-radius: 0.06in;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+details.fig-collapse summary {
|
|
|
+ background: var(--bg-light);
|
|
|
+ padding: 0.1in 0.14in;
|
|
|
+ font-weight: 700; font-size: 0.14in;
|
|
|
+ color: var(--secondary);
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex; align-items: center; gap: 0.08in;
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+details.fig-collapse summary::-webkit-details-marker { display: none; }
|
|
|
+details.fig-collapse summary::before {
|
|
|
+ content: '\25B8'; font-size: 0.16in;
|
|
|
+ color: var(--accent);
|
|
|
+ transition: transform 0.2s;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+details.fig-collapse[open] summary::before {
|
|
|
+ transform: rotate(90deg);
|
|
|
+}
|
|
|
+
|
|
|
+.fig-image-container {
|
|
|
+ text-align: center; margin: 0.08in 0;
|
|
|
+ border: 1px solid #E0E4E8; border-radius: 0.04in;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.fig-image-container img {
|
|
|
+ max-width: 100%; height: auto;
|
|
|
+ display: block; margin: 0 auto;
|
|
|
+ cursor: zoom-in;
|
|
|
+ transition: opacity 0.2s;
|
|
|
+}
|
|
|
+.fig-image-container img:hover { opacity: 0.85; }
|
|
|
+.fig-caption {
|
|
|
+ font-size: 0.12in; color: var(--text-muted);
|
|
|
+ padding: 0.06in; background: var(--bg-light);
|
|
|
+ text-align: left; line-height: 1.5;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```html
|
|
|
+<!-- 关键 Figure：默认展开 -->
|
|
|
+<details class="fig-collapse" open>
|
|
|
+ <summary>Figure 1 — 标题</summary>
|
|
|
+ <div class="fig-content">
|
|
|
+ <div class="fig-image-container">
|
|
|
+ <img src="figures/fig1.png" alt="Figure 1">
|
|
|
+ <div class="fig-caption">图注</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</details>
|
|
|
+
|
|
|
+<!-- 次要 Figure：折叠 -->
|
|
|
+<details class="fig-collapse">
|
|
|
+ <summary>Figure 2 — 标题</summary>
|
|
|
+ ...
|
|
|
+</details>
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Lightbox 放大查看
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="lightbox-overlay" id="lightbox">
|
|
|
+ <img id="lightbox-img" src="" alt="">
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+```css
|
|
|
+.lightbox-overlay {
|
|
|
+ display: none; position: fixed;
|
|
|
+ top: 0; left: 0; width: 100%; height: 100%;
|
|
|
+ background: rgba(0,0,0,0.88);
|
|
|
+ z-index: 9999;
|
|
|
+ justify-content: center; align-items: center;
|
|
|
+ cursor: zoom-out;
|
|
|
+}
|
|
|
+.lightbox-overlay.active { display: flex; }
|
|
|
+.lightbox-overlay img {
|
|
|
+ max-width: 92%; max-height: 92%;
|
|
|
+ object-fit: contain; border-radius: 4px;
|
|
|
+ box-shadow: 0 8px 40px rgba(0,0,0,0.5);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```javascript
|
|
|
+(function(){
|
|
|
+ var overlay = document.getElementById('lightbox');
|
|
|
+ var lbImg = document.getElementById('lightbox-img');
|
|
|
+ document.querySelectorAll('.fig-image-container img').forEach(function(img){
|
|
|
+ img.addEventListener('click', function(){
|
|
|
+ lbImg.src = this.src;
|
|
|
+ lbImg.alt = this.alt;
|
|
|
+ overlay.classList.add('active');
|
|
|
+ });
|
|
|
+ });
|
|
|
+ overlay.addEventListener('click', function(){ overlay.classList.remove('active'); });
|
|
|
+ document.addEventListener('keydown', function(e){
|
|
|
+ if(e.key === 'Escape') overlay.classList.remove('active');
|
|
|
+ });
|
|
|
+})();
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Footer
|
|
|
+
|
|
|
+```css
|
|
|
+.footer {
|
|
|
+ background: var(--primary);
|
|
|
+ padding: 0.25in 0.55in;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1.5fr 1fr 1fr;
|
|
|
+ gap: 0.4in;
|
|
|
+ color: rgba(255,255,255,0.8);
|
|
|
+ font-size: 0.13in;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+.footer strong {
|
|
|
+ color: var(--gold);
|
|
|
+ font-size: 0.14in;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+.footer a { color: var(--accent); text-decoration: none; }
|
|
|
+```
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="footer">
|
|
|
+ <div>
|
|
|
+ <strong data-lang="en">Acknowledgments</strong>
|
|
|
+ <p data-lang="en">资助信息...</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <strong data-lang="en">Data Availability</strong>
|
|
|
+ <p data-lang="en">数据/代码链接...</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <strong data-lang="en">Contact</strong>
|
|
|
+ <p data-lang="en">通讯作者 email...</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 中英文双语切换
|
|
|
+
|
|
|
+### 按钮样式
|
|
|
+
|
|
|
+```css
|
|
|
+.lang-switch {
|
|
|
+ position: fixed;
|
|
|
+ top: 0.2in; right: 0.3in;
|
|
|
+ z-index: 100;
|
|
|
+ display: flex; gap: 0;
|
|
|
+ background: rgba(255,255,255,0.97);
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 0 2px 16px rgba(0,0,0,0.18);
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #D0D7DE;
|
|
|
+}
|
|
|
+.lang-btn {
|
|
|
+ border: none; background: transparent;
|
|
|
+ padding: 8px 18px;
|
|
|
+ font-size: 15px; font-weight: 700;
|
|
|
+ color: var(--text-muted);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+}
|
|
|
+.lang-btn:hover { color: var(--secondary); background: var(--bg-light); }
|
|
|
+.lang-btn.active {
|
|
|
+ background: var(--secondary);
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### HTML 标记
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="lang-switch">
|
|
|
+ <button class="lang-btn active" data-target="en">EN</button>
|
|
|
+ <button class="lang-btn" data-target="zh">中文</button>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- 需要翻译的元素加 data-lang -->
|
|
|
+<h2 data-lang="en">Introduction</h2>
|
|
|
+<h2 data-lang="zh">研究背景</h2>
|
|
|
+```
|
|
|
+
|
|
|
+无需双语标记的元素：数字/统计值、图片、DOI、作者姓名。
|
|
|
+
|
|
|
+### JS 切换逻辑
|
|
|
+
|
|
|
+```javascript
|
|
|
+(function(){
|
|
|
+ var btns = document.querySelectorAll('.lang-btn');
|
|
|
+ btns.forEach(function(btn){
|
|
|
+ btn.addEventListener('click', function(){
|
|
|
+ var lang = this.dataset.target;
|
|
|
+ document.querySelectorAll('[data-lang]').forEach(function(el){
|
|
|
+ el.style.display = el.dataset.lang === lang ? '' : 'none';
|
|
|
+ });
|
|
|
+ btns.forEach(function(b){ b.classList.remove('active'); });
|
|
|
+ this.classList.add('active');
|
|
|
+ });
|
|
|
+ });
|
|
|
+ document.querySelectorAll('[data-lang="zh"]').forEach(function(el){
|
|
|
+ el.style.display = 'none';
|
|
|
+ });
|
|
|
+})();
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 打印与预览
|
|
|
+
|
|
|
+```css
|
|
|
+@media print {
|
|
|
+ body { background: white; padding: 0; }
|
|
|
+ .poster { box-shadow: none; }
|
|
|
+ details.fig-collapse[open] { break-inside: avoid; }
|
|
|
+ .lang-switch { display: none; }
|
|
|
+ -webkit-print-color-adjust: exact;
|
|
|
+ print-color-adjust: exact;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```bash
|
|
|
+python3 -m http.server 8765
|
|
|
+# 访问 http://localhost:8765/papers/{Author}{Year}/poster.html
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 特殊字符速查
|
|
|
+
|
|
|
+| 字符 | HTML 实体 | CSS content | 用途 |
|
|
|
+|------|----------|-------------|------|
|
|
|
+| ▸ | `▸` | `\25B8` | 折叠箭头 |
|
|
|
+| → | `→` | `\2192` | 右箭头 |
|
|
|
+| — | `—` | `\2014` | 破折号 |
|
|
|
+| × | `×` | - | 乘号 |
|
|
|
+| ≥ | `≥` | - | 大于等于 |
|
|
|
+| ≤ | `≤` | - | 小于等于 |
|
