save
This commit is contained in:
@@ -0,0 +1,681 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>李运菊 · 乳腺癌治疗与随访手册(详细版)</title>
|
||||
<style>
|
||||
:root{
|
||||
--pink:#e11d63; --pink-2:#f43f5e; --pink-soft:#fdf0f5;
|
||||
--teal:#0d9488; --teal-soft:#ecfdf8;
|
||||
--amber:#d97706; --amber-soft:#fffbeb;
|
||||
--blue:#2563eb; --blue-soft:#eff6ff;
|
||||
--ink:#3f2d3a; --muted:#8a7483; --line:#f0dce4; --card:#fff;
|
||||
}
|
||||
*{box-sizing:border-box;}
|
||||
html{scroll-behavior:smooth;}
|
||||
html,body{margin:0;padding:0;}
|
||||
body{
|
||||
font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI",sans-serif;
|
||||
color:var(--ink);
|
||||
background:linear-gradient(180deg,#fff5f8 0%,#fffafc 340px,#fdf6f9 100%);
|
||||
line-height:1.8;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
font-size:16px;
|
||||
}
|
||||
.page{max-width:880px;margin:0 auto;padding:0 16px 90px;}
|
||||
|
||||
/* ===== 吸顶导航 ===== */
|
||||
.nav{
|
||||
position:sticky;top:0;z-index:100;
|
||||
background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
|
||||
-webkit-backdrop-filter:blur(10px);
|
||||
border-bottom:1px solid var(--line);
|
||||
padding:9px 10px;margin:0 -16px;
|
||||
display:flex;gap:7px;overflow-x:auto;white-space:nowrap;
|
||||
-webkit-overflow-scrolling:touch;scrollbar-width:none;
|
||||
}
|
||||
.nav::-webkit-scrollbar{display:none;}
|
||||
.nav a{
|
||||
flex:0 0 auto;text-decoration:none;color:var(--ink);
|
||||
background:#fff;border:1px solid var(--line);border-radius:999px;
|
||||
padding:6px 13px;font-size:13px;line-height:1.5;transition:.15s;
|
||||
}
|
||||
.nav a:active{background:var(--pink);color:#fff;border-color:var(--pink);}
|
||||
|
||||
/* ===== Header ===== */
|
||||
.hero{
|
||||
margin-top:16px;
|
||||
background:linear-gradient(135deg,#e11d63 0%,#f43f5e 55%,#fb7185 100%);
|
||||
border-radius:20px;padding:26px 20px 22px;color:#fff;
|
||||
box-shadow:0 14px 34px rgba(225,29,99,.28);position:relative;overflow:hidden;
|
||||
}
|
||||
.hero::after{content:"";position:absolute;right:-55px;top:-55px;width:200px;height:200px;
|
||||
background:rgba(255,255,255,.12);border-radius:50%;}
|
||||
.hero h1{margin:0;font-size:26px;letter-spacing:.5px;line-height:1.35;padding-right:60px;}
|
||||
.hero .sub{font-size:14px;opacity:.96;margin-top:8px;padding-right:40px;}
|
||||
.hero .badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;}
|
||||
.hero .badge{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);
|
||||
border-radius:999px;padding:4px 12px;font-size:12.5px;line-height:1.6;}
|
||||
.hero .ribbon{position:absolute;right:16px;top:18px;opacity:.95;}
|
||||
|
||||
/* ===== Section ===== */
|
||||
section{margin-top:34px;scroll-margin-top:64px;}
|
||||
.section-title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;margin:0 0 6px;line-height:1.4;}
|
||||
.section-title .num{display:inline-flex;align-items:center;justify-content:center;
|
||||
width:30px;height:30px;border-radius:9px;background:var(--pink);color:#fff;font-size:16px;flex:0 0 auto;}
|
||||
.section-desc{color:var(--muted);font-size:13.5px;margin:0 0 14px;}
|
||||
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
|
||||
box-shadow:0 6px 18px rgba(225,29,99,.06);}
|
||||
.callout{background:var(--pink-soft);border-left:5px solid var(--pink);border-radius:12px;
|
||||
padding:15px 16px;margin-top:12px;font-size:15px;}
|
||||
.callout b{color:var(--pink);}
|
||||
|
||||
/* ===== Profile grid ===== */
|
||||
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px;}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 8px;text-align:center;}
|
||||
.stat .ico{font-size:22px;display:block;margin-bottom:3px;}
|
||||
.stat .v{font-size:15.5px;font-weight:700;}
|
||||
.stat .k{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4;}
|
||||
.stat.ok{background:var(--teal-soft);border-color:#bae6dd;}
|
||||
.stat.warn{background:var(--amber-soft);border-color:#fde3b3;}
|
||||
|
||||
/* ===== Two-col ===== */
|
||||
.two{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
|
||||
.explain{border-radius:16px;padding:17px;border:1px solid var(--line);background:#fff;}
|
||||
.explain h3{margin:0 0 8px;font-size:16.5px;display:flex;align-items:center;gap:8px;line-height:1.4;}
|
||||
.explain p{margin:6px 0;font-size:14.5px;}
|
||||
.tag-up{color:var(--pink);font-weight:700;}
|
||||
.tag-good{color:var(--teal);font-weight:700;}
|
||||
|
||||
/* ===== Timeline ===== */
|
||||
.timeline{position:relative;margin:6px 0 0 4px;padding-left:24px;}
|
||||
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:3px;
|
||||
background:linear-gradient(var(--pink),#fb7185);border-radius:3px;}
|
||||
.t-item{position:relative;padding:0 0 17px 8px;}
|
||||
.t-item:last-child{padding-bottom:0;}
|
||||
.t-item .dot{position:absolute;left:-24px;top:5px;width:18px;height:18px;border-radius:50%;
|
||||
background:#fff;border:4px solid var(--pink);}
|
||||
.t-item.done .dot{background:var(--pink);}
|
||||
.t-item.next .dot{border-color:var(--teal);}
|
||||
.t-item .tt{font-weight:700;font-size:15px;line-height:1.5;}
|
||||
.t-item.next .tt{color:var(--teal);}
|
||||
.t-item .td{font-size:13.5px;color:var(--muted);}
|
||||
.tag{display:inline-block;font-size:11px;border-radius:999px;padding:1px 8px;margin-left:5px;vertical-align:1px;}
|
||||
.tag.done{background:#e6f7ec;color:#15803d;}
|
||||
.tag.now{background:var(--amber-soft);color:var(--amber);}
|
||||
|
||||
/* ===== Big 3 ===== */
|
||||
.big{display:flex;gap:14px;align-items:flex-start;border-radius:16px;padding:17px;margin-bottom:13px;
|
||||
background:#fff;border:1px solid var(--line);}
|
||||
.big .n{flex:0 0 auto;width:42px;height:42px;border-radius:12px;color:#fff;font-size:21px;
|
||||
display:flex;align-items:center;justify-content:center;font-weight:700;}
|
||||
.big.one .n{background:linear-gradient(135deg,#e11d63,#f43f5e);}
|
||||
.big.two .n{background:linear-gradient(135deg,#d97706,#f59e0b);}
|
||||
.big.three .n{background:linear-gradient(135deg,#0d9488,#14b8a6);}
|
||||
.big .bd{flex:1;min-width:0;}
|
||||
.big h4{margin:0 0 5px;font-size:16.5px;line-height:1.45;}
|
||||
.big p{margin:6px 0;font-size:14.5px;}
|
||||
.progress{margin:12px 0 3px;}
|
||||
.progress .bar{height:18px;background:#f4e6ec;border-radius:999px;overflow:hidden;}
|
||||
.progress .fill{height:100%;background:linear-gradient(90deg,#e11d63,#fb7185);border-radius:999px;
|
||||
display:flex;align-items:center;justify-content:flex-end;padding-right:9px;color:#fff;font-size:12px;font-weight:700;}
|
||||
.progress .lbl{font-size:12.5px;color:var(--muted);margin-top:5px;}
|
||||
|
||||
/* ===== 药物卡 ===== */
|
||||
.drug{display:flex;gap:12px;align-items:flex-start;border-radius:15px;padding:15px;margin-bottom:12px;
|
||||
background:var(--blue-soft);border:1px solid #d6e4ff;}
|
||||
.drug .ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--blue);color:#fff;
|
||||
display:flex;align-items:center;justify-content:center;font-size:19px;}
|
||||
.drug h4{margin:0 0 4px;font-size:15.5px;}
|
||||
.drug p{margin:4px 0;font-size:14px;color:#33507a;}
|
||||
|
||||
/* ===== 流程步骤 ===== */
|
||||
.steps{counter-reset:s;margin:4px 0;}
|
||||
.step{position:relative;padding:0 0 14px 40px;}
|
||||
.step:last-child{padding-bottom:2px;}
|
||||
.step::before{counter-increment:s;content:counter(s);
|
||||
position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;
|
||||
background:var(--pink-soft);border:2px solid var(--pink);color:var(--pink);
|
||||
display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
|
||||
.step::after{content:"";position:absolute;left:12px;top:28px;bottom:2px;width:2px;background:var(--line);}
|
||||
.step:last-child::after{display:none;}
|
||||
.step b{font-size:15px;}
|
||||
.step p{margin:2px 0 0;font-size:13.5px;color:#5b4652;}
|
||||
|
||||
/* ===== 护理卡 ===== */
|
||||
.care{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:13px;
|
||||
background:#fff;border:1px solid var(--line);margin-bottom:10px;}
|
||||
.care .ic{flex:0 0 auto;font-size:21px;margin-top:1px;}
|
||||
.care b{display:block;font-size:15px;}
|
||||
.care p{margin:3px 0 0;font-size:13.5px;color:#5b4652;}
|
||||
|
||||
/* ===== 不用做 ===== */
|
||||
.skip{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:12px;
|
||||
background:var(--teal-soft);border:1px solid #bae6dd;margin-bottom:10px;}
|
||||
.skip .chk{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;
|
||||
display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-top:2px;}
|
||||
.skip b{display:block;font-size:14.5px;}
|
||||
.skip span{font-size:13px;color:#3f6f67;}
|
||||
|
||||
/* ===== FAQ ===== */
|
||||
details{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px;overflow:hidden;}
|
||||
summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:15px;list-style:none;
|
||||
display:flex;align-items:center;gap:10px;-webkit-tap-highlight-color:transparent;}
|
||||
summary::-webkit-details-marker{display:none;}
|
||||
summary .q{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--pink-soft);color:var(--pink);
|
||||
display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;}
|
||||
summary::after{content:"+";margin-left:auto;color:var(--pink);font-size:18px;transition:.2s;}
|
||||
details[open] summary::after{content:"-";}
|
||||
.faq-body{padding:2px 16px 15px 48px;font-size:14px;color:#5b4652;}
|
||||
.faq-body p{margin:8px 0;}
|
||||
|
||||
/* ===== 表格 ===== */
|
||||
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0;}
|
||||
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px;}
|
||||
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;line-height:1.6;}
|
||||
th{background:var(--pink-soft);color:var(--pink);white-space:nowrap;}
|
||||
td b{color:var(--pink);}
|
||||
|
||||
/* ===== 清单 ===== */
|
||||
.check{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:11px;
|
||||
background:#fff;border:1px dashed var(--line);margin-bottom:9px;}
|
||||
.check .box{flex:0 0 auto;width:19px;height:19px;border:2px solid var(--pink);border-radius:6px;margin-top:3px;}
|
||||
.check p{margin:0;font-size:14.5px;}
|
||||
|
||||
/* ===== 术语表 ===== */
|
||||
.term{border-bottom:1px dashed var(--line);padding:11px 2px;}
|
||||
.term:last-child{border-bottom:none;}
|
||||
.term b{color:var(--pink);font-size:15px;}
|
||||
.term p{margin:3px 0 0;font-size:14px;color:#5b4652;}
|
||||
|
||||
/* ===== 图例/示意图 ===== */
|
||||
.figure{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:8px;}
|
||||
.figure svg{width:100%;height:auto;display:block;}
|
||||
.figure .cap{text-align:center;color:var(--muted);font-size:12.5px;margin-top:8px;}
|
||||
.legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px;font-size:13px;color:#5b4652;}
|
||||
.legend span{display:inline-flex;align-items:center;gap:6px;}
|
||||
.swatch{width:13px;height:13px;border-radius:50%;display:inline-block;}
|
||||
|
||||
/* ===== footer ===== */
|
||||
.disclaimer{margin-top:32px;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;
|
||||
padding:15px 17px;font-size:13.5px;color:#92400e;line-height:1.7;}
|
||||
.foot{margin-top:18px;text-align:center;color:var(--muted);font-size:13px;}
|
||||
|
||||
/* ===== 手机端适配 ===== */
|
||||
@media(max-width:640px){
|
||||
body{font-size:15.5px;}
|
||||
.hero h1{font-size:22px;}
|
||||
.hero .ribbon{width:44px;height:56px;right:14px;top:14px;}
|
||||
.section-title{font-size:18.5px;}
|
||||
.grid{grid-template-columns:repeat(2,1fr);}
|
||||
.two{grid-template-columns:1fr;}
|
||||
.big{flex-direction:column;gap:11px;}
|
||||
.big .n{width:38px;height:38px;font-size:18px;}
|
||||
.faq-body{padding-left:16px;}
|
||||
.card{padding:15px;}
|
||||
summary{font-size:14.5px;}
|
||||
}
|
||||
@media print{
|
||||
body{background:#fff;}
|
||||
.nav{display:none;}
|
||||
.hero{box-shadow:none;}
|
||||
details{open:true;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
<!-- 吸顶导航 -->
|
||||
<nav class="nav">
|
||||
<a href="#s1">读懂病情</a>
|
||||
<a href="#s2">档案卡</a>
|
||||
<a href="#s3">癌症型号</a>
|
||||
<a href="#s4">淋巴结转移</a>
|
||||
<a href="#s5">治疗路线</a>
|
||||
<a href="#s6">三件大事</a>
|
||||
<a href="#s7">双靶药</a>
|
||||
<a href="#s8">放疗过程</a>
|
||||
<a href="#s9">副作用护理</a>
|
||||
<a href="#s10">饮食</a>
|
||||
<a href="#s11">复查时间</a>
|
||||
<a href="#s12">不用做</a>
|
||||
<a href="#s13">问答</a>
|
||||
<a href="#s14">问医生</a>
|
||||
<a href="#s15">术语表</a>
|
||||
</nav>
|
||||
|
||||
<!-- 头部 -->
|
||||
<header class="hero">
|
||||
<svg class="ribbon" width="56" height="70" viewBox="0 0 60 76" fill="none" aria-label="粉红丝带">
|
||||
<path d="M30 12 C22 6 12 8 8 16 C4 24 12 32 20 34 L30 40 L40 34 C48 32 56 24 52 16 C48 8 38 6 30 12 Z" fill="#fff" opacity="0.92"/>
|
||||
<path d="M30 12 C24 8 18 10 15 15 C12 20 16 26 20 28 L30 33 Z" fill="#fbcfe8"/>
|
||||
<path d="M30 12 C36 8 42 10 45 15 C48 20 44 26 40 28 L30 33 Z" fill="#fbcfe8"/>
|
||||
<path d="M30 40 L22 52 L26 68 L30 60 L34 68 L38 52 Z" fill="#fff" opacity="0.92"/>
|
||||
</svg>
|
||||
<h1>李运菊 阿姨的<br>乳腺癌治疗与随访手册</h1>
|
||||
<div class="sub">HER2 阳性 · 淋巴结转移 4 颗 · 详细通俗版</div>
|
||||
<div class="badge-row">
|
||||
<span class="badge">🎀 乳腺癌</span>
|
||||
<span class="badge">🧬 HER2 阳性</span>
|
||||
<span class="badge">🚫 无远处转移</span>
|
||||
<span class="badge">✅ 已全切手术</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 1 读懂病情 -->
|
||||
<section id="s1">
|
||||
<h2 class="section-title"><span class="num">1</span>一句话读懂病情</h2>
|
||||
<p class="section-desc">先记住这一句,后面都好理解</p>
|
||||
<div class="callout">
|
||||
68 岁的李运菊阿姨,<b>乳腺癌已做了全切手术</b>,术后发现 <b>4 颗淋巴结有转移</b>,好在<b>没有远处转移</b>;分型是 <b>“HER2 阳性、激素受体(ER/PR)阴性”</b>。这属于<b>“认真做完辅助治疗、目标是治愈”</b>的类型,前景是积极的。
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2 档案卡 -->
|
||||
<section id="s2">
|
||||
<h2 class="section-title"><span class="num">2</span>病情档案卡</h2>
|
||||
<p class="section-desc">您的“基本资料”,一眼看全</p>
|
||||
<div class="grid">
|
||||
<div class="stat"><span class="ico">👵</span><div class="v">68 岁</div><div class="k">年龄</div></div>
|
||||
<div class="stat"><span class="ico">🔪</span><div class="v">全切手术</div><div class="k">已完成</div></div>
|
||||
<div class="stat warn"><span class="ico">🦠</span><div class="v">4 颗</div><div class="k">淋巴结转移</div></div>
|
||||
<div class="stat ok"><span class="ico">🛡️</span><div class="v">无</div><div class="k">远处转移</div></div>
|
||||
<div class="stat"><span class="ico">🧬</span><div class="v">HER2+</div><div class="k">HER2 阳性</div></div>
|
||||
<div class="stat"><span class="ico">🚫</span><div class="v">ER/PR−</div><div class="k">激素受体阴性</div></div>
|
||||
<div class="stat"><span class="ico">💊</span><div class="v">化疗 7 次</div><div class="k">已完成</div></div>
|
||||
<div class="stat"><span class="ico">🎯</span><div class="v">双靶 7 次</div><div class="k">进行中</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 癌症型号 -->
|
||||
<section id="s3">
|
||||
<h2 class="section-title"><span class="num">3</span>您的癌症“型号”是什么意思?</h2>
|
||||
<p class="section-desc">用开车来打比方,一听就懂</p>
|
||||
<div class="two">
|
||||
<div class="explain">
|
||||
<h3><span>🧬</span>HER2 阳性 = 癌细胞“油门”太猛</h3>
|
||||
<p>癌细胞表面多了一个叫 <b>HER2</b> 的“开关”,让癌细胞长得又快又凶。</p>
|
||||
<p class="tag-up">✔ 这是好消息:</p>
|
||||
<p>有一种<b>靶向药(曲妥珠单抗 + 帕妥珠单抗,就是您打的“双靶”)能精准踩这个“刹车”</b>,专门对付它。有“特效药”可打,治疗方向很明确。</p>
|
||||
</div>
|
||||
<div class="explain">
|
||||
<h3><span>🚫</span>ER/PR 阴性 = 癌细胞“不吃雌激素”</h3>
|
||||
<p>正常乳腺细胞靠雌激素“喂”;您的癌细胞<b>不靠雌激素生长</b>。</p>
|
||||
<p class="tag-good">✔ 省心的地方:</p>
|
||||
<p>所以<b>不需要吃内分泌药</b>(他莫昔芬、来曲唑那类)。少一条长期吃药的路,也少一份副作用。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4 淋巴结转移 -->
|
||||
<section id="s4">
|
||||
<h2 class="section-title"><span class="num">4</span>“淋巴结转移 4 颗”是什么意思?</h2>
|
||||
<p class="section-desc">淋巴结是身体的“哨兵站”,这里要重点说明</p>
|
||||
|
||||
<div class="callout">
|
||||
<b>通俗解释:</b>癌细胞想往身体别处跑时,往往会先经过腋窝下的<b>淋巴结(像一个个“哨兵站”)</b>。手术时把腋窝淋巴结取出来化验,发现<b>有 4 颗里面查到了癌细胞</b>。这说明癌细胞“往外走的意愿”较强,所以手术后<b>需要更积极地补上放疗和做满靶向治疗</b>。好在<b>没有远处转移</b>——也就是还没跑到肝、肺、骨头等远处器官,<b>仍属于“局部/区域”问题,可以争取治愈</b>。
|
||||
</div>
|
||||
|
||||
<div class="figure">
|
||||
<svg viewBox="0 0 380 250" role="img" aria-label="淋巴结转移示意图">
|
||||
<!-- 锁骨上淋巴结 -->
|
||||
<text x="24" y="30" font-size="13" fill="#8a7483">锁骨上淋巴结(正常)</text>
|
||||
<circle cx="70" cy="48" r="11" fill="#f3eef0" stroke="#d9c9d0"/>
|
||||
<circle cx="105" cy="42" r="11" fill="#f3eef0" stroke="#d9c9d0"/>
|
||||
<circle cx="140" cy="47" r="11" fill="#f3eef0" stroke="#d9c9d0"/>
|
||||
<!-- 腋窝淋巴结 -->
|
||||
<text x="24" y="92" font-size="13" fill="#8a7483">腋窝淋巴结(4 颗有转移)</text>
|
||||
<circle cx="70" cy="116" r="13" fill="#f3eef0" stroke="#d9c9d0"/>
|
||||
<circle cx="112" cy="110" r="14" fill="#e11d63" stroke="#fff" stroke-width="2"/>
|
||||
<text x="107" y="115" font-size="12" fill="#fff" font-weight="700" text-anchor="middle">1</text>
|
||||
<circle cx="154" cy="117" r="13" fill="#f3eef0" stroke="#d9c9d0"/>
|
||||
<circle cx="70" cy="150" r="14" fill="#e11d63" stroke="#fff" stroke-width="2"/>
|
||||
<text x="65" y="155" font-size="12" fill="#fff" font-weight="700" text-anchor="middle">2</text>
|
||||
<circle cx="112" cy="152" r="13" fill="#f3eef0" stroke="#d9c9d0"/>
|
||||
<circle cx="154" cy="151" r="14" fill="#e11d63" stroke="#fff" stroke-width="2"/>
|
||||
<text x="149" y="156" font-size="12" fill="#fff" font-weight="700" text-anchor="middle">3</text>
|
||||
<circle cx="112" cy="188" r="14" fill="#e11d63" stroke="#fff" stroke-width="2"/>
|
||||
<text x="107" y="193" font-size="12" fill="#fff" font-weight="700" text-anchor="middle">4</text>
|
||||
<circle cx="154" cy="186" r="13" fill="#f3eef0" stroke="#d9c9d0"/>
|
||||
<!-- 胸壁 -->
|
||||
<rect x="225" y="70" width="120" height="120" rx="18" fill="#fdf0f5" stroke="#f0b7c9"/>
|
||||
<text x="285" y="120" font-size="14" fill="#3f2d3a" text-anchor="middle" font-weight="700">患侧胸壁</text>
|
||||
<text x="285" y="142" font-size="12" fill="#8a7483" text-anchor="middle">(已全切)</text>
|
||||
<!-- 连线 -->
|
||||
<path d="M190 130 L225 120" stroke="#f0b7c9" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<path d="M190 155 L225 150" stroke="#f0b7c9" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
</svg>
|
||||
<div class="legend">
|
||||
<span><i class="swatch" style="background:#e11d63"></i>有癌细胞的淋巴结(4 颗)</span>
|
||||
<span><i class="swatch" style="background:#f3eef0;border:1px solid #d9c9d0"></i>正常淋巴结</span>
|
||||
</div>
|
||||
<div class="cap">▲ 示意图(非精确解剖图):癌细胞经淋巴管跑向腋窝淋巴结,4 颗被“攻占”</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5 路线图 -->
|
||||
<section id="s5">
|
||||
<h2 class="section-title"><span class="num">5</span>治疗路线图</h2>
|
||||
<p class="section-desc">已经走到哪一步,接下来往哪走</p>
|
||||
<div class="card">
|
||||
<div class="timeline">
|
||||
<div class="t-item done">
|
||||
<div class="dot"></div>
|
||||
<div class="tt">① 手术全切 <span class="tag done">已完成</span></div>
|
||||
<div class="td">把肿瘤和患侧乳腺整体切除</div>
|
||||
</div>
|
||||
<div class="t-item done">
|
||||
<div class="dot"></div>
|
||||
<div class="tt">② 化疗 7 次 <span class="tag done">已完成</span></div>
|
||||
<div class="td">全身“清扫”可能残留的癌细胞</div>
|
||||
</div>
|
||||
<div class="t-item done">
|
||||
<div class="dot"></div>
|
||||
<div class="tt">③ 双靶 7 次 <span class="tag now">进行中</span></div>
|
||||
<div class="td">曲妥珠单抗 + 帕妥珠单抗,精准打击 HER2</div>
|
||||
</div>
|
||||
<div class="t-item next">
|
||||
<div class="dot"></div>
|
||||
<div class="tt">④ 继续双靶,做到满 1 年 <span class="tag now">接下来</span></div>
|
||||
<div class="td">这是降低复发的“主心骨”,不要提前停</div>
|
||||
</div>
|
||||
<div class="t-item next">
|
||||
<div class="dot"></div>
|
||||
<div class="tt">⑤ 术后放疗(约 3 周)<span class="tag now">接下来</span></div>
|
||||
<div class="td">胸壁 + 区域淋巴结,进一步防局部复发</div>
|
||||
</div>
|
||||
<div class="t-item next">
|
||||
<div class="dot"></div>
|
||||
<div class="tt">⑥ 长期定期随访 <span class="tag now">长期</span></div>
|
||||
<div class="td">护心脏、定期复查,安心生活</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 三件大事 -->
|
||||
<section id="s6">
|
||||
<h2 class="section-title"><span class="num">6</span>接下来要做的 3 件大事</h2>
|
||||
<p class="section-desc">按重要程度排好,照着做就行</p>
|
||||
|
||||
<div class="big one">
|
||||
<div class="n">1</div>
|
||||
<div class="bd">
|
||||
<h4>🎯 双靶做完满 1 年(最重要)</h4>
|
||||
<p>早期 HER2 阳性的标准是<b>“双靶做满 1 年”</b>。您已经打了 <b>7 次</b>,请<b>继续打,直到满 1 年(约 17~18 次)</b>,千万不要提前停——这是降低复发风险的核心。</p>
|
||||
<div class="progress">
|
||||
<div class="bar"><div class="fill" style="width:39%;">7 次</div></div>
|
||||
<div class="lbl">已完成 7 次 / 目标约 17~18 次(满 1 年)· 进度约 40%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="big two">
|
||||
<div class="n">2</div>
|
||||
<div class="bd">
|
||||
<h4>☢️ 术后放疗(约 3 周)</h4>
|
||||
<p>因为<b>有 4 颗淋巴结转移</b>,属于放疗的<b>明确指征</b>。建议做<b>胸壁 + 锁骨上/腋窝区域</b>放疗,能<b>同时降低局部复发、改善长期生存</b>。</p>
|
||||
<p>现代常用方案是<b>大分割,约 15~16 次 / 3 周</b>(每天十几分钟,周末休息)。通常在化疗结束后进行,可以和双靶同时做。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="big three">
|
||||
<div class="n">3</div>
|
||||
<div class="bd">
|
||||
<h4>❤️ 定期随访 + 护好心脏</h4>
|
||||
<p>靶向治疗期间,建议<b>每 3 个月左右查一次心脏彩超(LVEF)</b>,监测心脏;同时按医生安排<b>定期复查</b>:体格检查、对侧乳腺钼靶/超声、必要时影像。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7 双靶药 -->
|
||||
<section id="s7">
|
||||
<h2 class="section-title"><span class="num">7</span>“双靶”是什么药?怎么用?</h2>
|
||||
<p class="section-desc">两个药“一前一后”夹击癌细胞</p>
|
||||
|
||||
<div class="drug">
|
||||
<div class="ic">💉</div>
|
||||
<div>
|
||||
<h4>曲妥珠单抗(赫赛汀)</h4>
|
||||
<p>最早的 HER2 靶向“明星药”,像一把<b>钥匙把 HER2 开关堵住</b>,让癌细胞收不到“加油”信号。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drug">
|
||||
<div class="ic">💉</div>
|
||||
<div>
|
||||
<h4>帕妥珠单抗(帕捷特)</h4>
|
||||
<p>从<b>另一个位置</b>再堵住 HER2,两个药<b>“双保险、夹击”</b>,比单用一个更强(这就是“双靶”)。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="callout">
|
||||
<b>怎么用:</b>一般是<b>静脉输液(打针)</b>,每 3 周打 1 次;现在也有<b>皮下注射剂型</b>,几分钟打完,更方便。您的<b>疗程目标是做满 1 年</b>,目前已完成 7 次,需继续到约 17~18 次。
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8 放疗过程 -->
|
||||
<section id="s8">
|
||||
<h2 class="section-title"><span class="num">8</span>放疗全过程(从第一天到结束)</h2>
|
||||
<p class="section-desc">放疗不可怕,就是“每天躺几分钟照一照”</p>
|
||||
<div class="card">
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<b>第 1 步:定位(模拟)</b>
|
||||
<p>做一次 <b>CT 定位</b>,医生在身上<b>画标记线</b>,有时做个小模具帮助固定体位。全程不痛,约半小时。</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<b>第 2 步:制定放疗计划</b>
|
||||
<p>放疗医生勾画要照的范围(胸壁、淋巴结),<b>避开心脏和肺</b>;物理师用电脑精确计算剂量。您在家等通知即可。</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<b>第 3 步:开始每天治疗</b>
|
||||
<p>每天去医院,<b>躺好 → 拍片核对位置 → 照射几分钟</b>。每次总共约 10~20 分钟,<b>不痛、没感觉</b>。</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<b>第 4 步:完成疗程</b>
|
||||
<p>按计划做<b>约 15~16 次(3 周左右)</b>后结束,之后定期复查。期间可以和双靶治疗同时进行。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 9 副作用护理 -->
|
||||
<section id="s9">
|
||||
<h2 class="section-title"><span class="num">9</span>放疗 / 化疗期间怎么护理自己</h2>
|
||||
<p class="section-desc">提前知道,心里有底</p>
|
||||
|
||||
<h3 style="font-size:16px;margin:14px 0 10px;color:var(--amber);">☢️ 放疗期间常见反应与护理</h3>
|
||||
<div class="care">
|
||||
<span class="ic">🧴</span>
|
||||
<div><b>皮肤发红、干燥(照射区)</b><p>用温水轻柔清洗,穿宽松棉质衣物,按医生指导涂无刺激的保湿/防辐射护肤品;不要抓挠、不要用酒精或热敷。</p></div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<span class="ic">😴</span>
|
||||
<div><b>疲劳、没精神</b><p>正常现象,注意多休息,量力而行做点散步;规律作息比硬撑更重要。</p></div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<span class="ic">💪</span>
|
||||
<div><b>患侧手臂肿胀(淋巴水肿)</b><p>尽量避免在患侧手臂<b>抽血、打针、量血压</b>;不提重物、避免长时间下垂;皮肤有小伤口及时处理防感染。发现手臂变粗、发紧要及时告诉医生。</p></div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<span class="ic">🫀</span>
|
||||
<div><b>心肺影响</b><p>现代技术已大幅降低对心肺的照射;配合医生做好心脏彩超监测即可。</p></div>
|
||||
</div>
|
||||
|
||||
<h3 style="font-size:16px;margin:18px 0 10px;color:var(--pink);">💊 化疗后的遗留调理</h3>
|
||||
<div class="care">
|
||||
<span class="ic">🖐️</span>
|
||||
<div><b>手脚发麻(周围神经)</b><p>可能持续一段时间;注意保暖、防磕碰,走路防摔;明显影响生活要告诉医生。</p></div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<span class="ic">🍚</span>
|
||||
<div><b>胃口差、乏力</b><p>少食多餐、吃易消化食物,慢慢恢复体力;白细胞低时避免去人多拥挤处、注意防感染。</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 10 饮食 -->
|
||||
<section id="s10">
|
||||
<h2 class="section-title"><span class="num">10</span>饮食与营养建议</h2>
|
||||
<p class="section-desc">吃好、吃对,助力恢复</p>
|
||||
<div class="card">
|
||||
<div class="care">
|
||||
<span class="ic">🥚</span>
|
||||
<div><b>优质蛋白要够</b><p>鸡蛋、牛奶、鱼、瘦肉、豆制品,帮助身体修复和恢复体力。</p></div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<span class="ic">🥦</span>
|
||||
<div><b>新鲜蔬果多样化</b><p>蔬菜、水果每天吃,补充维生素和纤维,保持大便通畅。</p></div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<span class="ic">💧</span>
|
||||
<div><b>多喝水</b><p>每天 1500~2000ml 左右,尤其放疗期间,帮助代谢和缓解口干。</p></div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<span class="ic">🌶️</span>
|
||||
<div><b>少辛辣刺激</b><p>放疗照射皮肤反应期间,少吃辛辣、过烫食物,减轻不适。</p></div>
|
||||
</div>
|
||||
<div class="care">
|
||||
<span class="ic">⚠️</span>
|
||||
<div><b>不盲目进补</b><p>不要乱吃不明来源的“偏方”“保健品”;是否需要补充剂请先问医生。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 11 复查时间 -->
|
||||
<section id="s11">
|
||||
<h2 class="section-title"><span class="num">11</span>以后怎么复查?</h2>
|
||||
<p class="section-desc">记住大原则,具体听医生的</p>
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<tr><th>项目</th><th>时间 / 频率</th><th>说明</th></tr>
|
||||
<tr><td><b>心脏彩超(LVEF)</b></td><td>靶向治疗期间约每 3 个月</td><td>监测心脏,尤其您 68 岁更要注意</td></tr>
|
||||
<tr><td><b>体格检查</b></td><td>前 3 年每 3~6 个月;之后拉长</td><td>医生检查术区、对侧乳腺、腋窝等</td></tr>
|
||||
<tr><td><b>对侧乳腺钼靶 / 超声</b></td><td>每年 1 次</td><td>检查另一侧乳腺有无新问题</td></tr>
|
||||
<tr><td><b>CT / 骨扫描</b></td><td>不常规做</td><td>没有症状一般不必频繁做,以免过度检查</td></tr>
|
||||
<tr><td><b>肿瘤标志物</b></td><td>不常规依赖</td><td>仅供参考,不能单凭它判断复发</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<p style="font-size:13.5px;color:var(--muted);">出现<b>持续骨痛、咳嗽气短、头痛、新发肿块</b>等异常症状时,及时就诊,不必等复查周期。</p>
|
||||
</section>
|
||||
|
||||
<!-- 12 不用做 -->
|
||||
<section id="s12">
|
||||
<h2 class="section-title"><span class="num">12</span>这几样“不用做”(省心清单)</h2>
|
||||
<p class="section-desc">不是做得越多越好,这几样对您不合适</p>
|
||||
|
||||
<div class="skip">
|
||||
<div class="chk">✓</div>
|
||||
<div><b>不用内分泌治疗</b><span>因为 ER/PR 阴性,癌细胞不靠雌激素生长,不需要吃他莫昔芬、来曲唑这类药。</span></div>
|
||||
</div>
|
||||
<div class="skip">
|
||||
<div class="chk">✓</div>
|
||||
<div><b>不用换成 T-DM1(恩美曲妥珠单抗)</b><span>T-DM1 是给“术前新辅助化疗后仍有残留”的人用的;您是直接手术,按标准继续双靶即可。</span></div>
|
||||
</div>
|
||||
<div class="skip">
|
||||
<div class="chk">✓</div>
|
||||
<div><b>一般不用奈拉替尼</b><span>奈拉替尼主要对“激素受体阳性(HR+)”的人获益明显;您是 HR 阴性,获益很小,一般不加。</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 13 问答 -->
|
||||
<section id="s13">
|
||||
<h2 class="section-title"><span class="num">13</span>常见问题速答</h2>
|
||||
<p class="section-desc">点开就能看答案</p>
|
||||
|
||||
<details open>
|
||||
<summary><span class="q">Q</span>放疗要治疗多长时间?</summary>
|
||||
<div class="faq-body">
|
||||
<p><b>每次</b>:实际照射几分钟,加摆位约 <b>10~20 分钟</b>;周一至周五(周末休)。</p>
|
||||
<div class="table-scroll"><table style="min-width:460px;">
|
||||
<tr><th>方案</th><th>次数</th><th>总时长</th></tr>
|
||||
<tr><td>常规分割</td><td>25~28 次</td><td>约 5.5 周</td></tr>
|
||||
<tr><td><b>大分割(现代常用)</b></td><td><b>15~16 次</b></td><td><b>约 3 周</b></td></tr>
|
||||
<tr><td>超低分割</td><td>5 次</td><td>1 周</td></tr>
|
||||
</table></div>
|
||||
<p>您多数情况按 <b>15~16 次 / 约 3 周</b> 来做,具体由放疗科医生定。</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><span class="q">Q</span>放疗是必须做的吗?</summary>
|
||||
<div class="faq-body">
|
||||
<p>以您的病情(<b>4 颗淋巴结转移、全切术后</b>),放疗属于<b>“强烈推荐的标准治疗”</b>。</p>
|
||||
<p>多项大型研究证实:≥4 颗淋巴结转移者做胸壁 + 区域淋巴结放疗,能<b>同时降低局部复发率、改善总生存</b>,是少数能带来“生存获益”的放疗之一。</p>
|
||||
<p>是否做最终由您和医生共同决定,但如无特殊禁忌,<b>按标准完成放疗对长期预后最有利</b>。</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><span class="q">Q</span>马来酸奈拉替尼是什么药?对我有用吗?</summary>
|
||||
<div class="faq-body">
|
||||
<p><b>它是什么</b>:一种<b>口服小分子靶向药</b>,专门抑制 HER2 等“开关”,还能进入大脑(对预防脑转移有一定作用)。</p>
|
||||
<p><b>它给谁用</b>:在完成 1 年靶向治疗后,再口服 1 年“加固”,主要让 <b>HR+(激素受体阳性)</b>的高危人群获益。</p>
|
||||
<p><b>对您有没有用</b>:您是 <b>ER/PR 阴性</b>,获益很小,<b>一般不用</b>;把双靶做满 1 年就够了。</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><span class="q">Q</span>放疗对设备和医生要求高吗?县城和省会差别大吗?</summary>
|
||||
<div class="faq-body">
|
||||
<p>放疗要求<b>“规范达标”</b>而非“顶级”。关键看三项硬指标:</p>
|
||||
<p>① 设备能做<b>调强(IMRT)+图像引导(IGRT/CBCT)</b>吗?</p>
|
||||
<p>② 有没有<b>专职物理师</b>做质控?(这是很多基层的短板)</p>
|
||||
<p>③ 一年做多少例<b>乳腺癌术后放疗</b>?</p>
|
||||
<p>三项都达标(哪怕在市级三甲)就能放心做;不达标(老式设备、无物理师)就去省会肿瘤专科做,为这 3 周跑一趟也值得。</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><span class="q">Q</span>靶向药会伤心脏吗?怎么监测?</summary>
|
||||
<div class="faq-body">
|
||||
<p>曲妥珠单抗等靶向药<b>可能影响心脏泵血功能</b>,但多数是<b>可逆、可监测</b>的,绝大多数人可顺利完成。</p>
|
||||
<p>做法:治疗前查一次<b>心脏彩超(看 LVEF 数值)</b>,治疗期间<b>约每 3 个月复查一次</b>;如出现胸闷、心慌、气短要及时告诉医生。</p>
|
||||
<p>您 68 岁,心脏监测尤其要<b>规律做、不偷懒</b>。</p>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- 14 问医生 -->
|
||||
<section id="s14">
|
||||
<h2 class="section-title"><span class="num">14</span>就诊时想问医生的问题清单</h2>
|
||||
<p class="section-desc">打印出来,打勾问医生</p>
|
||||
<div class="card">
|
||||
<div class="check"><div class="box"></div><p>双靶还要继续打几次?是不是总共满 1 年?</p></div>
|
||||
<div class="check"><div class="box"></div><p>放疗具体做多少次?照哪些部位?能边打双靶边放疗吗?</p></div>
|
||||
<div class="check"><div class="box"></div><p>放疗怎么保护心脏、皮肤?怎么预防胳膊肿(淋巴水肿)?</p></div>
|
||||
<div class="check"><div class="box"></div><p>心脏彩超多久查一次?化疗后手脚麻、累怎么调理?</p></div>
|
||||
<div class="check"><div class="box"></div><p>我这种情况,需不需要额外加奈拉替尼?(通常不需要)</p></div>
|
||||
<div class="check"><div class="box"></div><p>以后多久复查一次?都要查哪些项目?</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 15 术语表 -->
|
||||
<section id="s15">
|
||||
<h2 class="section-title"><span class="num">15</span>医学术语小词典</h2>
|
||||
<p class="section-desc">遇到不懂的词,来这里查</p>
|
||||
<div class="card">
|
||||
<div class="term"><b>HER2 阳性</b><p>癌细胞表面的一种“生长开关”过多,导致癌细胞长得快;但有专门的靶向药可对付,是明确可治的分型。</p></div>
|
||||
<div class="term"><b>ER / PR 阴性</b><p>癌细胞不依赖雌激素/孕激素生长,所以不需要内分泌治疗。</p></div>
|
||||
<div class="term"><b>淋巴结转移</b><p>癌细胞跑到了腋窝等处的小“哨兵站”里,说明需要更积极的辅助治疗。</p></div>
|
||||
<div class="term"><b>远处转移</b><p>癌细胞跑到肝、肺、骨头等远处器官;您没有,这是好消息。</p></div>
|
||||
<div class="term"><b>辅助治疗</b><p>手术后为了“清除残余、防复发”而做的化疗、靶向、放疗等。</p></div>
|
||||
<div class="term"><b>双靶</b><p>两种 HER2 靶向药(曲妥珠单抗 + 帕妥珠单抗)联用,效果更强。</p></div>
|
||||
<div class="term"><b>LVEF(心脏彩超)</b><p>衡量心脏泵血能力的指标,用来监测靶向药是否影响心脏。</p></div>
|
||||
<div class="term"><b>淋巴水肿</b><p>患侧手臂因淋巴回流不畅而肿胀,需日常预防和护理。</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 免责 -->
|
||||
<div class="disclaimer">
|
||||
<b>⚠️ 重要提醒:</b>本手册是根据公开临床指南整理的<b>科普参考</b>,用于帮助您和家人理解病情、更好地与医生沟通,<b>不能替代主治医生的个体化诊疗决策</b>。所有用药、放疗方案和复查安排,请务必以肿瘤科、放疗科医生的意见为准。
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
祝李运菊阿姨治疗顺利,早日康复 🌸
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user