|
|
@@ -1,776 +0,0 @@
|
|
|
-# 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` | 破折号 |
|
|
|
-| × | `×` | - | 乘号 |
|
|
|
-| ≥ | `≥` | - | 大于等于 |
|
|
|
-| ≤ | `≤` | - | 小于等于 |
|
