SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结核病防治科普长图</title>
<style>
  :root{
    --ink:#1a2e35;
    --deep:#0f4c5c;
    --teal:#1b7a8a;
    --mint:#e8f4f2;
    --cream:#fdfaf3;
    --coral:#e76f51;
    --coral-light:#fbe9e4;
    --gold:#e9c46a;
    --line:#d4e3df;
    --white:#ffffff;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    background:#e5ece9;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    color:var(--ink);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  .poster{
    max-width:480px;
    margin:0 auto;
    background:var(--cream);
    overflow:hidden;
    box-shadow:0 0 60px rgba(15,76,92,.12);
  }

  /* ---------- 头部 ---------- */
  .hero{
    position:relative;
    background:linear-gradient(160deg, var(--deep) 0%, #0b3a47 100%);
    color:#fff;
    padding:40px 26px 34px;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    width:260px;height:260px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(233,196,106,.18) 0%, transparent 70%);
    top:-80px;right:-60px;
  }
  .hero::after{
    content:"";
    position:absolute;
    width:180px;height:180px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    bottom:-90px;left:-40px;
  }
  .hero-tag{
    display:inline-block;
    font-size:11px;
    letter-spacing:2px;
    color:var(--gold);
    border:1px solid rgba(233,196,106,.4);
    padding:5px 12px;
    border-radius:20px;
    margin-bottom:16px;
  }
  .hero h1{
    font-size:28px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:.5px;
    margin-bottom:10px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--gold);
  }
  .hero-sub{
    font-size:13px;
    color:rgba(255,255,255,.75);
    line-height:1.8;
  }
  .hero-sub strong{
    color:#fff;
    font-weight:600;
  }
  .hero-date{
    margin-top:22px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:rgba(255,255,255,.55);
  }
  .hero-date span{
    display:inline-block;
    width:32px;height:1px;
    background:var(--gold);
  }

  /* ---------- 通用区块 ---------- */
  .section{
    padding:32px 26px;
  }
  .section + .section{
    border-top:1px solid var(--line);
  }
  .sec-label{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .sec-num{
    font-size:11px;
    font-weight:800;
    color:var(--teal);
    letter-spacing:1px;
  }
  .sec-line{
    flex:1;
    height:1px;
    background:var(--line);
  }
  .sec-title{
    font-size:19px;
    font-weight:800;
    color:var(--deep);
    letter-spacing:.3px;
  }
  .sec-desc{
    font-size:13px;
    color:#5a6f73;
    margin-bottom:18px;
    line-height:1.8;
  }

  /* ---------- 定义卡 ---------- */
  .def-card{
    background:var(--white);
    border-radius:14px;
    padding:20px;
    border:1px solid var(--line);
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .def-icon{
    flex-shrink:0;
    width:52px;height:52px;
    border-radius:12px;
    background:var(--mint);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .def-body h3{
    font-size:15px;
    font-weight:700;
    color:var(--deep);
    margin-bottom:6px;
  }
  .def-body p{
    font-size:13px;
    color:#4a5f64;
    line-height:1.8;
  }
  .def-body .hl{
    color:var(--coral);
    font-weight:700;
  }

  /* ---------- 数据条 ---------- */
  .stat-row{
    display:flex;
    gap:10px;
    margin-top:16px;
  }
  .stat{
    flex:1;
    background:var(--mint);
    border-radius:10px;
    padding:14px 10px;
    text-align:center;
  }
  .stat-num{
    font-size:20px;
    font-weight:800;
    color:var(--deep);
    line-height:1.2;
    font-feature-settings:"tnum";
  }
  .stat-num small{
    font-size:11px;
    font-weight:600;
  }
  .stat-label{
    font-size:11px;
    color:#5a6f73;
    margin-top:4px;
  }

  /* ---------- 传播示意 ---------- */
  .transmit-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin:8px 0 16px;
  }
  .transmit-node{
    flex:1;
    text-align:center;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 6px;
  }
  .transmit-node .ico{
    width:36px;height:36px;
    margin:0 auto 8px;
    display:flex;align-items:center;justify-content:center;
    background:var(--mint);
    border-radius:50%;
  }
  .transmit-node p{
    font-size:11px;
    color:#4a5f64;
    line-height:1.5;
  }
  .transmit-arrow{
    flex-shrink:0;
    color:var(--coral);
    font-size:16px;
    font-weight:800;
  }
  .transmit-note{
    background:var(--coral-light);
    border-left:3px solid var(--coral);
    padding:10px 14px;
    border-radius:0 8px 8px 0;
    font-size:12px;
    color:#8a4a3a;
    line-height:1.7;
  }
  .transmit-note strong{color:var(--coral);}

  /* ---------- 症状清单 ---------- */
  .symptom-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .symptom-item{
    background:var(--white);
    border-radius:12px;
    padding:14px 12px;
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .symptom-item .dot{
    width:8px;height:8px;
    border-radius:50%;
    flex-shrink:0;
  }
  .symptom-item p{
    font-size:12.5px;
    color:#3d5358;
    line-height:1.5;
  }
  .symptom-item.alert{
    background:var(--coral-light);
    border-color:#f0c9bd;
  }
  .symptom-item.alert .dot{background:var(--coral);}
  .symptom-item.alert p{font-weight:700;color:var(--coral);}
  .symptom-item .dot{background:var(--teal);}

  /* ---------- 高危人群 ---------- */
  .risk-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:4px;
  }
  .risk-tag{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:20px;
    padding:6px 14px;
    font-size:12px;
    color:var(--deep);
    font-weight:600;
  }
  .risk-tag.warn{
    background:var(--coral-light);
    border-color:#f0c9bd;
    color:var(--coral);
  }

  /* ---------- 预防三件套 ---------- */
  .prevent-row{
    display:flex;
    gap:10px;
  }
  .prevent-card{
    flex:1;
    background:var(--white);
    border-radius:14px;
    padding:18px 12px 16px;
    text-align:center;
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }
  .prevent-card::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
  }
  .prevent-card:nth-child(1)::before{background:var(--teal);}
  .prevent-card:nth-child(2)::before{background:var(--gold);}
  .prevent-card:nth-child(3)::before{background:var(--coral);}
  .prevent-card .p-ico{
    width:44px;height:44px;
    margin:0 auto 10px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--mint);
  }
  .prevent-card h4{
    font-size:13px;
    font-weight:700;
    color:var(--deep);
    margin-bottom:5px;
  }
  .prevent-card p{
    font-size:11px;
    color:#5a6f73;
    line-height:1.6;
  }

  /* ---------- 治疗强调 ---------- */
  .treat-box{
    background:var(--deep);
    border-radius:16px;
    padding:24px 22px;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .treat-box::after{
    content:"";
    position:absolute;
    width:140px;height:140px;
    border-radius:50%;
    border:1px solid rgba(233,196,106,.2);
    right:-40px;bottom:-60px;
  }
  .treat-box h3{
    font-size:16px;
    font-weight:800;
    color:var(--gold);
    margin-bottom:14px;
    position:relative;
  }
  .treat-principles{
    display:flex;
    gap:6px;
    margin-bottom:16px;
    position:relative;
  }
  .treat-principles span{
    flex:1;
    text-align:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    padding:8px 0;
    font-size:13px;
    font-weight:700;
    color:#fff;
    letter-spacing:2px;
  }
  .treat-box p{
    font-size:12.5px;
    color:rgba(255,255,255,.8);
    line-height:1.9;
    position:relative;
  }
  .treat-box p strong{color:#fff;}
  .treat-box .warn-line{
    margin-top:12px;
    background:rgba(231,111,81,.2);
    border-left:3px solid var(--coral);
    padding:8px 12px;
    border-radius:0 8px 8px 0;
    font-size:12px;
    color:#ffd9d0;
    position:relative;
  }

  /* ---------- 免费政策 ---------- */
  .policy-card{
    background:linear-gradient(135deg, #fdf6e3 0%, #fcf0d4 100%);
    border:1px solid #f0dba8;
    border-radius:14px;
    padding:18px 20px;
  }
  .policy-card h3{
    font-size:14px;
    font-weight:800;
    color:#8a6d1f;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .policy-list{
    list-style:none;
  }
  .policy-list li{
    font-size:12.5px;
    color:#6b5518;
    padding:5px 0 5px 18px;
    position:relative;
    line-height:1.7;
  }
  .policy-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#b8942e;
    font-weight:800;
  }

  /* ---------- 谣言粉碎 ---------- */
  .myth-item{
    background:var(--white);
    border-radius:12px;
    padding:14px 16px;
    border:1px solid var(--line);
    margin-bottom:10px;
  }
  .myth-q{
    font-size:12.5px;
    font-weight:700;
    color:#8a4a3a;
    margin-bottom:6px;
    display:flex;
    gap:6px;
  }
  .myth-q .x{
    color:var(--coral);
    font-weight:900;
    flex-shrink:0;
  }
  .myth-a{
    font-size:12px;
    color:#4a5f64;
    line-height:1.7;
    padding-left:18px;
  }
  .myth-a strong{color:var(--teal);}

  /* ---------- 行动号召 ---------- */
  .cta{
    background:linear-gradient(160deg, var(--teal) 0%, var(--deep) 100%);
    padding:34px 26px;
    text-align:center;
    color:#fff;
  }
  .cta h3{
    font-size:18px;
    font-weight:800;
    margin-bottom:10px;
    letter-spacing:.5px;
  }
  .cta p{
    font-size:12.5px;
    color:rgba(255,255,255,.75);
    line-height:1.9;
    max-width:340px;
    margin:0 auto;
  }
  .cta .divider{
    width:40px;height:2px;
    background:var(--gold);
    margin:18px auto;
    border-radius:2px;
  }

  /* ---------- 页脚 ---------- */
  .footer{
    padding:16px 26px;
    background:var(--ink);
    text-align:center;
  }
  .footer p{
    font-size:10.5px;
    color:rgba(255,255,255,.4);
    line-height:1.8;
    letter-spacing:.3px;
  }

  @media (max-width:400px){
    .section{padding:26px 20px;}
    .hero{padding:32px 20px 28px;}
    .hero h1{font-size:24px;}
    .symptom-grid{grid-template-columns:1fr;}
    .prevent-row{flex-direction:column;}
    .treat-principles{flex-wrap:wrap;}
    .treat-principles span{flex:1 1 30%;}
  }
</style>
</head>
<body>
<div class="poster">

  <!-- ========== 头部 ========== -->
  <header class="hero">
    <div class="hero-tag">2026.03.24 · 第31个世界防治结核病日</div>
    <h1>咳嗽咳痰超过<em>2周</em>,<br>别只当感冒。</h1>
    <p class="hero-sub">
      结核病从未消失。它由<strong>结核分枝杆菌</strong>引起,通过空气传播,<br>
      是全球十大死因之一。但——<strong>可防、可控、可治</strong>。
    </p>
    <div class="hero-date">
      <span></span> 全面行动 · 全力投入 · 全民参与 · 终结结核
    </div>
  </header>

  <!-- ========== 01 认识结核病 ========== -->
  <section class="section">
    <div class="sec-label">
      <span class="sec-num">01</span>
      <div class="sec-line"></div>
      <span class="sec-title">它是什么</span>
    </div>
    <div class="def-card">
      <div class="def-icon">
        <svg width="30" height="30" viewBox="0 0 30 30" fill="none">
          <ellipse cx="15" cy="17" rx="7" ry="10" stroke="#1b7a8a" stroke-width="1.6"/>
          <path d="M15 7v20" stroke="#1b7a8a" stroke-width="1.6" stroke-linecap="round"/>
          <circle cx="15" cy="17" r="2.2" fill="#e76f51"/>
        </svg>
      </div>
      <div class="def-body">
        <h3>结核病 ≠ 只是肺部的事</h3>
        <p>
          结核病由<strong>结核分枝杆菌</strong>感染引起,主要侵犯肺部(肺结核),
          但也可累及骨骼、淋巴、脑膜等。<span class="hl">约10%—20%为肺外结核</span>,
          绝大多数结核病死亡仍由肺结核导致。
        </p>
      </div>
    </div>
    <div class="stat-row">
      <div class="stat">
        <div class="stat-num">1<small>个喷嚏</small></div>
        <div class="stat-label">可释放数千个含菌飞沫核</div>
      </div>
      <div class="stat">
        <div class="stat-num">2<small>周</small></div>
        <div class="stat-label">咳嗽咳痰超过即需警惕</div>
      </div>
      <div class="stat">
        <div class="stat-num">90<small>%+</small></div>
        <div class="stat-label">规范治疗可治愈</div>
      </div>
    </div>
  </section>

  <!-- ========== 02 怎么传播 ========== -->
  <section class="section">
    <div class="sec-label">
      <span class="sec-num">02</span>
      <div class="sec-line"></div>
      <span class="sec-title">它怎么找到你</span>
    </div>
    <p class="sec-desc">飞沫传播是唯一主要途径——不是分碗筷就能挡住的事。</p>

    <div class="transmit-row">
      <div class="transmit-node">
        <div class="ico">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <circle cx="10" cy="7" r="3.5" stroke="#1b7a8a" stroke-width="1.4"/>
            <path d="M4 18c0-3.5 2.7-5.5 6-5.5s6 2 6 5.5" stroke="#1b7a8a" stroke-width="1.4" stroke-linecap="round"/>
          </svg>
        </div>
        <p>患者咳嗽<br>打喷嚏</p>
      </div>
      <span class="transmit-arrow">→</span>
      <div class="transmit-node">
        <div class="ico">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <circle cx="6" cy="6" r="1.5" fill="#e76f51"/>
            <circle cx="12" cy="4" r="1.2" fill="#e76f51" opacity=".7"/>
            <circle cx="15" cy="9" r="1.5" fill="#e76f51" opacity=".5"/>
            <circle cx="9" cy="10" r="1.3" fill="#e76f51" opacity=".8"/>
            <circle cx="4" cy="13" r="1" fill="#e76f51" opacity=".6"/>
          </svg>
        </div>
        <p>含菌飞沫核<br>悬浮空气中</p>
      </div>
      <span class="transmit-arrow">→</span>
      <div class="transmit-node">
        <div class="ico">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <ellipse cx="10" cy="10" rx="6" ry="7" stroke="#1b7a8a" stroke-width="1.4"/>
            <path d="M10 3v14" stroke="#1b7a8a" stroke-width="1.4" stroke-linecap="round"/>
          </svg>
        </div>
        <p>健康人吸入<br>可能感染</p>
      </div>
    </div>

    <div class="transmit-note">
      <strong>关键认知:</strong>传染期患者一次咳嗽可排出数千个飞沫核,
      在密闭空间中悬浮数小时。分碗筷、分餐对飞沫传播<strong>无效</strong>——
      真正有效的是<strong>口罩、通风和咳嗽礼仪</strong>。
    </div>
  </section>

  <!-- ========== 03 识别信号 ========== -->
  <section class="section">
    <div class="sec-label">
      <span class="sec-num">03</span>
      <div class="sec-line"></div>
      <span class="sec-title">身体发出的信号</span>
    </div>
    <p class="sec-desc">早期症状像感冒,但有一条硬标准值得你记住。</p>

    <div class="symptom-grid">
      <div class="symptom-item alert">
        <span class="dot"></span>
        <p>咳嗽咳痰 <strong>≥ 2周</strong></p>
      </div>
      <div class="symptom-item">
        <span class="dot"></span>
        <p>痰中带血 / 咯血</p>
      </div>
      <div class="symptom-item">
        <span class="dot"></span>
        <p>午后低热</p>
      </div>
      <div class="symptom-item">
        <span class="dot"></span>
        <p>夜间盗汗</p>
      </div>
      <div class="symptom-item">
        <span class="dot"></span>
        <p>胸痛 / 呼吸困难</p>
      </div>
      <div class="symptom-item">
        <span class="dot"></span>
        <p>乏力 / 体重下降</p>
      </div>
    </div>
    <p style="font-size:11.5px;color:#8a9a9d;margin-top:12px;line-height:1.7;">
      出现上述任何一项,尤其是咳嗽咳痰持续两周以上,应尽快到
      <strong style="color:var(--teal);">结核病定点医疗机构</strong>进行胸片和痰液检查。
    </p>
  </section>

  <!-- ========== 04 谁更容易中招 ========== -->
  <section class="section">
    <div class="sec-label">
      <span class="sec-num">04</span>
      <div class="sec-line"></div>
      <span class="sec-title">谁需要格外留心</span>
    </div>
    <p class="sec-desc">人人都有可能感染,但免疫力低下者发病风险显著更高。</p>
    <div class="risk-list">
      <span class="risk-tag warn">肺结核密切接触者</span>
      <span class="risk-tag warn">糖尿病患者(风险约3倍)</span>
      <span class="risk-tag warn">HIV感染者(风险可达20倍)</span>
      <span class="risk-tag">老年人</span>
      <span class="risk-tag">儿童 / 学生</span>
      <span class="risk-tag">尘肺患者</span>
      <span class="risk-tag">长期使用免疫抑制剂者</span>
      <span class="risk-tag">营养不良 / 居住拥挤者</span>
    </div>
    <p style="font-size:11.5px;color:#8a9a9d;margin-top:14px;line-height:1.7;">
      高危人群应<strong style="color:var(--teal);">每年进行一次结核病检查</strong>;
      密切接触者可在医生评估后接受预防性治疗,保护效果可达60%—90%[reference:3]。
    </p>
  </section>

  <!-- ========== 05 预防 ========== -->
  <section class="section">
    <div class="sec-label">
      <span class="sec-num">05</span>
      <div class="sec-line"></div>
      <span class="sec-title">把风险挡在门外</span>
    </div>
    <p class="sec-desc">不需要复杂的装备,三件事做到位,就能显著降低传播风险。</p>
    <div class="prevent-row">
      <div class="prevent-card">
        <div class="p-ico">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <path d="M3 15V9a3 3 0 013-3h10a3 3 0 013 3v6" stroke="#1b7a8a" stroke-width="1.5" stroke-linecap="round"/>
            <path d="M3 12h16" stroke="#1b7a8a" stroke-width="1.5" stroke-linecap="round"/>
            <path d="M7 15v3M15 15v3" stroke="#1b7a8a" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
        </div>
        <h4>勤通风</h4>
        <p>每天 2—3 次<br>每次 ≥ 30 分钟<br>形成对流更有效</p>
      </div>
      <div class="prevent-card">
        <div class="p-ico">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <path d="M4 10a7 7 0 0114 0v3a7 7 0 01-14 0v-3z" stroke="#b8942e" stroke-width="1.5"/>
            <path d="M8 10v3M11 9v5M14 10v3" stroke="#b8942e" stroke-width="1.4" stroke-linecap="round"/>
          </svg>
        </div>
        <h4>戴口罩</h4>
        <p>人员密集场所<br>或接触咳嗽者时<br>规范佩戴</p>
      </div>
      <div class="prevent-card">
        <div class="p-ico">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <path d="M6 18V8a4 4 0 018 0v10" stroke="#e76f51" stroke-width="1.5" stroke-linecap="round"/>
            <path d="M10 4v4" stroke="#e76f51" stroke-width="1.5" stroke-linecap="round"/>
            <circle cx="14" cy="15" r="1.2" fill="#e76f51"/>
          </svg>
        </div>
        <h4>咳嗽礼仪</h4>
        <p>纸巾或肘内侧<br>遮掩口鼻<br>不随地吐痰</p>
      </div>
    </div>
    <div style="margin-top:14px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:12px;color:#4a5f64;line-height:1.7;">
      <strong style="color:var(--deep);">关于卡介苗:</strong>卡介苗是儿童重症结核的“第一道防线”,
      对儿童重症结核保护率约85%,但<strong style="color:var(--coral);">并非终身免疫</strong>,
      保护期通常为10—15年。
    </div>
  </section>

  <!-- ========== 06 治疗 ========== -->
  <section class="section" style="padding-top:0;border-top:none;">
    <div class="sec-label">
      <span class="sec-num">06</span>
      <div class="sec-line"></div>
      <span class="sec-title">治愈的关键,只有两个字</span>
    </div>
    <p class="sec-desc">规范。绝大多数肺结核可以治愈,前提是不打折扣地完成疗程。</p>

    <div class="treat-box">
      <h3>十字方针</h3>
      <div class="treat-principles">
        <span>早期</span>
        <span>联合</span>
        <span>适量</span>
        <span>规律</span>
        <span>全程</span>
      </div>
      <p>
        <strong>普通肺结核</strong>疗程通常为 <strong>6—8 个月</strong>;
        <strong>耐药肺结核</strong>可延长至 <strong>18—24 个月</strong>。
        即使症状消失,体内仍可能有残留菌,擅自停药会导致复发和耐药。
      </p>
      <div class="warn-line">
        自行停药者,耐药风险显著上升。一旦耐药,治愈率降低、治疗费用成倍增加,
        且可能传染他人耐药菌株。
      </div>
    </div>
  </section>

  <!-- ========== 07 国家政策 ========== -->
  <section class="section" style="padding-top:20px;">
    <div class="sec-label">
      <span class="sec-num">07</span>
      <div class="sec-line"></div>
      <span class="sec-title">这些是免费的</span>
    </div>
    <p class="sec-desc">在结核病定点医疗机构,国家为患者提供诊疗减免政策。</p>
    <div class="policy-card">
      <h3>
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">