plastic-health.html 82 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="微塑料科普 — 桶装水瓶装水中隐藏的健康隐患,权威研究证据与科学防护方案">
  7. <meta name="keywords" content="微塑料,桶装水,瓶装水,办公室饮水,健康,微塑料危害,纳米塑料,饮水安全">
  8. <meta property="og:title" content="看不见的入侵者 — 微塑料与饮水健康">
  9. <meta property="og:description" content="你每天喝的桶装水/瓶装水中,可能藏着几十万个塑料颗粒。综合 WHO/NEJM/PNAS 等权威研究,告诉你真相和防护方案。">
  10. <meta property="og:type" content="article">
  11. <meta property="og:image" content="https://www.etotem.com.cn/img/plastic-hero.jpg">
  12. <meta name="theme-color" content="#0A2463">
  13. <title>看不见的入侵者 — 微塑料与办公室饮水健康 · 浠艾福</title>
  14. <style>
  15. /* ===== Design Tokens ===== */
  16. :root {
  17. --bg-dark: #0A1628;
  18. --bg-card: #FFFFFF;
  19. --bg-alt: #F0F5FA;
  20. --text-primary: #1A1A2E;
  21. --text-secondary: #4A5568;
  22. --text-muted: #718096;
  23. --accent: #E53E3E;
  24. --accent-light: #FFF5F5;
  25. --blue: #3182CE;
  26. --blue-light: #EBF8FF;
  27. --green: #38A169;
  28. --green-light: #F0FFF4;
  29. --orange: #DD6B20;
  30. --orange-light: #FFFAF0;
  31. --purple: #805AD5;
  32. --purple-light: #FAF5FF;
  33. --teal: #319795;
  34. --teal-light: #E6FFFA;
  35. --font: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  36. --max-width: 1080px;
  37. --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  38. --shadow-hover: 0 8px 40px rgba(0,0,0,0.12);
  39. --radius: 16px;
  40. }
  41. * { margin: 0; padding: 0; box-sizing: border-box; }
  42. html { scroll-behavior: smooth; }
  43. body {
  44. font-family: var(--font);
  45. font-size: 1rem;
  46. line-height: 1.8;
  47. color: var(--text-primary);
  48. background: #fff;
  49. -webkit-font-smoothing: antialiased;
  50. }
  51. /* ===== Hero ===== */
  52. .hero {
  53. position: relative;
  54. background: linear-gradient(135deg, #0A1628 0%, #1A365D 40%, #2A4365 100%);
  55. color: white;
  56. padding: 6rem 1.5rem 4rem;
  57. overflow: hidden;
  58. min-height: 60vh;
  59. display: flex;
  60. align-items: center;
  61. }
  62. .hero::before {
  63. content: '';
  64. position: absolute;
  65. inset: 0;
  66. background:
  67. radial-gradient(circle at 20% 30%, rgba(49,130,206,0.15) 0%, transparent 50%),
  68. radial-gradient(circle at 80% 70%, rgba(229,62,62,0.1) 0%, transparent 50%),
  69. radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
  70. }
  71. .hero-particles {
  72. position: absolute;
  73. inset: 0;
  74. overflow: hidden;
  75. pointer-events: none;
  76. }
  77. .particle {
  78. position: absolute;
  79. width: 6px; height: 6px;
  80. background: rgba(255,255,255,0.15);
  81. border-radius: 50%;
  82. animation: float 8s ease-in-out infinite;
  83. }
  84. .particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; width: 4px; height: 4px; }
  85. .particle:nth-child(2) { left: 25%; top: 60%; animation-delay: 1s; width: 8px; height: 8px; opacity: 0.1; }
  86. .particle:nth-child(3) { left: 45%; top: 15%; animation-delay: 2s; width: 5px; height: 5px; }
  87. .particle:nth-child(4) { left: 65%; top: 70%; animation-delay: 0.5s; width: 3px; height: 3px; }
  88. .particle:nth-child(5) { left: 80%; top: 30%; animation-delay: 3s; width: 7px; height: 7px; opacity: 0.08; }
  89. .particle:nth-child(6) { left: 15%; top: 85%; animation-delay: 1.5s; width: 4px; height: 4px; }
  90. .particle:nth-child(7) { left: 55%; top: 45%; animation-delay: 2.5s; width: 9px; height: 9px; opacity: 0.12; }
  91. .particle:nth-child(8) { left: 90%; top: 55%; animation-delay: 3.5s; width: 5px; height: 5px; }
  92. @keyframes float {
  93. 0%, 100% { transform: translateY(0) scale(1); opacity: 0.15; }
  94. 50% { transform: translateY(-30px) scale(1.5); opacity: 0.3; }
  95. }
  96. .hero-content {
  97. position: relative;
  98. z-index: 1;
  99. max-width: var(--max-width);
  100. margin: 0 auto;
  101. text-align: center;
  102. }
  103. .hero-badge {
  104. display: inline-block;
  105. background: rgba(229,62,62,0.2);
  106. color: #FC8181;
  107. font-size: 0.75rem;
  108. font-weight: 600;
  109. letter-spacing: 0.08em;
  110. padding: 0.35rem 1rem;
  111. border-radius: 999px;
  112. border: 1px solid rgba(229,62,62,0.3);
  113. margin-bottom: 1.5rem;
  114. text-transform: uppercase;
  115. }
  116. .hero h1 {
  117. font-size: clamp(2rem, 5vw, 3.5rem);
  118. font-weight: 800;
  119. line-height: 1.2;
  120. margin-bottom: 1rem;
  121. background: linear-gradient(135deg, #fff 40%, #90CDF4 100%);
  122. -webkit-background-clip: text;
  123. -webkit-text-fill-color: transparent;
  124. background-clip: text;
  125. }
  126. .hero p {
  127. font-size: clamp(1rem, 2vw, 1.2rem);
  128. color: rgba(255,255,255,0.8);
  129. max-width: 700px;
  130. margin: 0 auto 2rem;
  131. line-height: 1.7;
  132. }
  133. .hero-stats {
  134. display: flex;
  135. gap: 1.5rem;
  136. justify-content: center;
  137. flex-wrap: wrap;
  138. margin-top: 2rem;
  139. }
  140. .hero-stat {
  141. background: rgba(255,255,255,0.08);
  142. backdrop-filter: blur(8px);
  143. border: 1px solid rgba(255,255,255,0.1);
  144. border-radius: 12px;
  145. padding: 1rem 1.5rem;
  146. text-align: center;
  147. min-width: 130px;
  148. }
  149. .hero-stat .num {
  150. font-size: 1.75rem;
  151. font-weight: 800;
  152. color: #FC8181;
  153. display: block;
  154. }
  155. .hero-stat .label {
  156. font-size: 0.8rem;
  157. color: rgba(255,255,255,0.6);
  158. margin-top: 0.2rem;
  159. }
  160. /* ===== Navigation ===== */
  161. .toc {
  162. background: white;
  163. border-bottom: 1px solid #E2E8F0;
  164. position: sticky;
  165. top: 0;
  166. z-index: 100;
  167. box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  168. }
  169. .toc-inner {
  170. max-width: var(--max-width);
  171. margin: 0 auto;
  172. padding: 0.75rem 1.5rem;
  173. display: flex;
  174. gap: 0.25rem;
  175. overflow-x: auto;
  176. -webkit-overflow-scrolling: touch;
  177. }
  178. .toc-inner a {
  179. flex-shrink: 0;
  180. text-decoration: none;
  181. font-size: 0.85rem;
  182. color: var(--text-muted);
  183. padding: 0.4rem 0.8rem;
  184. border-radius: 6px;
  185. transition: all 0.2s;
  186. white-space: nowrap;
  187. }
  188. .toc-inner a:hover { background: var(--bg-alt); color: var(--text-primary); }
  189. /* ===== Container ===== */
  190. .container {
  191. max-width: var(--max-width);
  192. margin: 0 auto;
  193. padding: 0 1.5rem;
  194. }
  195. /* ===== Section ===== */
  196. section {
  197. padding: 4rem 0;
  198. }
  199. section.alt { background: var(--bg-alt); }
  200. section.dark { background: var(--bg-dark); color: white; }
  201. h2 {
  202. font-size: 1.75rem;
  203. font-weight: 700;
  204. margin-bottom: 1.5rem;
  205. line-height: 1.3;
  206. }
  207. h2 .emoji { margin-right: 0.5rem; }
  208. h3 {
  209. font-size: 1.2rem;
  210. font-weight: 600;
  211. margin-bottom: 0.75rem;
  212. margin-top: 2rem;
  213. }
  214. h3:first-child { margin-top: 0; }
  215. p { margin-bottom: 1rem; color: var(--text-secondary); }
  216. .alt p { color: var(--text-secondary); }
  217. /* ===== Highlight Box ===== */
  218. .highlight-box {
  219. border-radius: var(--radius);
  220. padding: 1.5rem 2rem;
  221. margin: 1.5rem 0;
  222. border-left: 4px solid;
  223. }
  224. .highlight-box.red { background: var(--accent-light); border-color: var(--accent); }
  225. .highlight-box.blue { background: var(--blue-light); border-color: var(--blue); }
  226. .highlight-box.green { background: var(--green-light); border-color: var(--green); }
  227. .highlight-box.orange { background: var(--orange-light); border-color: var(--orange); }
  228. .highlight-box.purple { background: var(--purple-light); border-color: var(--purple); }
  229. .highlight-box.teal { background: var(--teal-light); border-color: var(--teal); }
  230. .highlight-box p:last-child { margin-bottom: 0; }
  231. /* ===== Citation Cards ===== */
  232. .citation-grid {
  233. display: grid;
  234. gap: 1rem;
  235. margin: 1.5rem 0;
  236. }
  237. .citation-card {
  238. background: white;
  239. border: 1px solid #E2E8F0;
  240. border-radius: var(--radius);
  241. padding: 1.25rem 1.5rem;
  242. box-shadow: var(--shadow-card);
  243. transition: box-shadow 0.2s;
  244. }
  245. .citation-card:hover { box-shadow: var(--shadow-hover); }
  246. .citation-card .source {
  247. font-size: 0.75rem;
  248. color: var(--blue);
  249. font-weight: 600;
  250. text-transform: uppercase;
  251. letter-spacing: 0.05em;
  252. }
  253. .citation-card .title {
  254. font-weight: 600;
  255. font-size: 0.95rem;
  256. margin: 0.3rem 0 0.4rem;
  257. line-height: 1.4;
  258. }
  259. .citation-card .findings {
  260. font-size: 0.85rem;
  261. color: var(--text-muted);
  262. line-height: 1.6;
  263. }
  264. .citation-card .link {
  265. display: inline-block;
  266. margin-top: 0.5rem;
  267. font-size: 0.8rem;
  268. color: var(--blue);
  269. text-decoration: none;
  270. }
  271. .citation-card .link:hover { text-decoration: underline; }
  272. /* ===== Data Card ===== */
  273. .data-card {
  274. background: white;
  275. border-radius: var(--radius);
  276. padding: 2rem;
  277. text-align: center;
  278. box-shadow: var(--shadow-card);
  279. }
  280. .data-card .big-number {
  281. font-size: 3rem;
  282. font-weight: 800;
  283. line-height: 1;
  284. }
  285. .data-card .big-number.red { color: var(--accent); }
  286. .data-card .big-number.blue { color: var(--blue); }
  287. .data-card .big-number.green { color: var(--green); }
  288. .data-card .unit {
  289. font-size: 1rem;
  290. color: var(--text-muted);
  291. font-weight: 400;
  292. }
  293. .data-card .desc {
  294. font-size: 0.9rem;
  295. color: var(--text-secondary);
  296. margin-top: 0.5rem;
  297. }
  298. .data-grid {
  299. display: grid;
  300. grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  301. gap: 1.5rem;
  302. margin: 1.5rem 0;
  303. }
  304. /* ===== Risk Path ===== */
  305. .risk-path {
  306. display: flex;
  307. align-items: flex-start;
  308. gap: 1rem;
  309. padding: 1.25rem;
  310. background: white;
  311. border-radius: var(--radius);
  312. border: 1px solid #E2E8F0;
  313. margin-bottom: 0.75rem;
  314. }
  315. .risk-path .step-num {
  316. flex-shrink: 0;
  317. width: 36px; height: 36px;
  318. background: var(--accent);
  319. color: white;
  320. border-radius: 50%;
  321. display: flex;
  322. align-items: center;
  323. justify-content: center;
  324. font-weight: 700;
  325. font-size: 0.9rem;
  326. }
  327. .risk-path .content { flex: 1; }
  328. .risk-path .content p { margin-bottom: 0.3rem; }
  329. .risk-path .content .cite { font-size: 0.8rem; color: var(--blue); }
  330. /* ===== Timeline ===== */
  331. .timeline { position: relative; padding-left: 2rem; }
  332. .timeline::before {
  333. content: '';
  334. position: absolute;
  335. left: 8px;
  336. top: 0; bottom: 0;
  337. width: 2px;
  338. background: linear-gradient(to bottom, var(--accent), var(--blue));
  339. }
  340. .timeline-item {
  341. position: relative;
  342. margin-bottom: 1.5rem;
  343. padding: 1.25rem;
  344. background: white;
  345. border-radius: var(--radius);
  346. border: 1px solid #E2E8F0;
  347. }
  348. .timeline-item::before {
  349. content: '';
  350. position: absolute;
  351. left: -1.65rem;
  352. top: 1.5rem;
  353. width: 12px; height: 12px;
  354. background: var(--accent);
  355. border-radius: 50%;
  356. border: 3px solid white;
  357. box-shadow: 0 0 0 2px var(--accent);
  358. }
  359. .timeline-item .year {
  360. font-size: 0.8rem;
  361. font-weight: 700;
  362. color: var(--accent);
  363. text-transform: uppercase;
  364. }
  365. .timeline-item h4 { font-size: 1rem; margin: 0.25rem 0 0.5rem; }
  366. .timeline-item .detail { font-size: 0.9rem; color: var(--text-muted); }
  367. .timeline-item .detail a { color: var(--blue); }
  368. /* ===== Tip Cards ===== */
  369. .tip-grid {
  370. display: grid;
  371. grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  372. gap: 1rem;
  373. }
  374. .two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  375. .tip-card {
  376. background: white;
  377. border-radius: var(--radius);
  378. padding: 1.5rem;
  379. box-shadow: var(--shadow-card);
  380. border-top: 3px solid;
  381. }
  382. .tip-card.green { border-color: var(--green); }
  383. .tip-card.blue { border-color: var(--blue); }
  384. .tip-card.orange { border-color: var(--orange); }
  385. .tip-card.red { border-color: var(--accent); }
  386. .tip-card .tip-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
  387. .tip-card h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; }
  388. .tip-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0; }
  389. /* Footer */
  390. .site-footer {
  391. background: var(--bg-dark, #1a1a3a);
  392. color: #fff;
  393. padding: 3rem 0 0;
  394. }
  395. .footer-inner {
  396. display: flex;
  397. justify-content: space-between;
  398. gap: 3rem;
  399. padding-bottom: 2rem;
  400. border-bottom: 1px solid rgba(255,255,255,.1);
  401. flex-wrap: wrap;
  402. }
  403. .footer-brand .logo-text {
  404. color: #fff;
  405. font-size: 1.25rem;
  406. font-weight: 700;
  407. }
  408. .footer-brand .logo-tag {
  409. color: var(--accent, #27ae60);
  410. font-weight: 600;
  411. }
  412. .footer-brand p {
  413. color: rgba(255,255,255,.6);
  414. font-size: 0.85rem;
  415. margin-top: 0.5rem;
  416. max-width: 300px;
  417. line-height: 1.7;
  418. }
  419. .footer-links {
  420. display: flex;
  421. gap: 3rem;
  422. flex-wrap: wrap;
  423. }
  424. .footer-col h4 {
  425. font-size: 0.75rem;
  426. font-weight: 600;
  427. text-transform: uppercase;
  428. letter-spacing: .06em;
  429. color: rgba(255,255,255,.5);
  430. margin-bottom: 1rem;
  431. }
  432. .footer-col ul { list-style: none; }
  433. .footer-col ul li { margin-bottom: 0.5rem; }
  434. .footer-col ul li a {
  435. font-size: 0.85rem;
  436. color: rgba(255,255,255,.7);
  437. transition: color 0.2s;
  438. text-decoration: none;
  439. }
  440. .footer-col ul li a:hover { color: var(--accent, #27ae60); }
  441. .footer-contact li {
  442. font-size: 0.85rem;
  443. color: rgba(255,255,255,.6);
  444. line-height: 1.8;
  445. }
  446. .footer-contact li a { color: rgba(255,255,255,.7); }
  447. .footer-bottom {
  448. text-align: center;
  449. padding: 1.5rem 0;
  450. }
  451. .footer-bottom p {
  452. font-size: 0.75rem;
  453. color: rgba(255,255,255,.4);
  454. }
  455. .footer-logo-img {
  456. display: block;
  457. flex-shrink: 0;
  458. border-radius: 10px;
  459. margin-bottom: 0.5rem;
  460. object-fit: contain;
  461. }
  462. .footer-legal {
  463. margin-top: 0.3rem;
  464. font-size: 0.75rem;
  465. color: rgba(255,255,255,.4);
  466. display: flex;
  467. gap: 1rem;
  468. justify-content: center;
  469. flex-wrap: wrap;
  470. }
  471. .footer-legal a {
  472. color: rgba(255,255,255,.4);
  473. text-decoration: underline;
  474. }
  475. .footer-legal a:hover { color: var(--accent, #27ae60); }
  476. /* ===== Infographic ===== */
  477. .infographic {
  478. display: grid;
  479. grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  480. gap: 1rem;
  481. margin: 1.5rem 0;
  482. }
  483. .info-item {
  484. text-align: center;
  485. padding: 1.5rem 1rem;
  486. background: white;
  487. border-radius: var(--radius);
  488. border: 1px solid #E2E8F0;
  489. }
  490. .info-item .icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
  491. .info-item h4 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; }
  492. .info-item p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
  493. /* ===== Comparison Table ===== */
  494. .compare-table {
  495. width: 100%;
  496. border-collapse: collapse;
  497. margin: 1.5rem 0;
  498. font-size: 0.9rem;
  499. background: white;
  500. border-radius: var(--radius);
  501. overflow: hidden;
  502. box-shadow: var(--shadow-card);
  503. }
  504. .compare-table th {
  505. background: var(--bg-dark);
  506. color: white;
  507. padding: 0.75rem 1rem;
  508. text-align: left;
  509. font-weight: 600;
  510. }
  511. .compare-table td {
  512. padding: 0.75rem 1rem;
  513. border-bottom: 1px solid #E2E8F0;
  514. }
  515. .compare-table tr:last-child td { border-bottom: none; }
  516. .compare-table .highlight-cell { background: var(--green-light); font-weight: 600; }
  517. /* ===== Comparison Carousel (Mobile) ===== */
  518. .compare-carousel { display: none; }
  519. .carousel-track {
  520. display: flex;
  521. gap: 1rem;
  522. overflow-x: auto;
  523. scroll-snap-type: x mandatory;
  524. -webkit-overflow-scrolling: touch;
  525. scrollbar-width: none;
  526. padding: 0.5rem 0 1rem;
  527. }
  528. .carousel-track::-webkit-scrollbar { display: none; }
  529. .carousel-card {
  530. flex: 0 0 calc(100% - 2rem);
  531. scroll-snap-align: start;
  532. background: white;
  533. border-radius: var(--radius);
  534. box-shadow: var(--shadow-card);
  535. padding: 1.5rem;
  536. border-top: 4px solid #CBD5E0;
  537. position: relative;
  538. }
  539. .carousel-card .card-badge {
  540. display: inline-block;
  541. font-size: 0.7rem;
  542. font-weight: 700;
  543. padding: 0.25rem 0.75rem;
  544. border-radius: 999px;
  545. margin-bottom: 0.75rem;
  546. letter-spacing: 0.02em;
  547. }
  548. .carousel-card .card-badge.danger { background: #FFF5F5; color: #C53030; }
  549. .carousel-card .card-badge.success { background: #F0FFF4; color: #276749; }
  550. .carousel-card .card-badge.warning { background: #FFFFF0; color: #975A16; }
  551. .carousel-card .card-badge.primary { background: #EBF8FF; color: #2B6CB0; }
  552. .carousel-card.border-danger { border-top-color: #E53E3E; }
  553. .carousel-card.border-success { border-top-color: #38A169; }
  554. .carousel-card.border-warning { border-top-color: #DD6B20; }
  555. .carousel-card.border-primary { border-top-color: #3182CE; }
  556. .carousel-card .card-title {
  557. font-size: 1.1rem;
  558. font-weight: 700;
  559. margin-bottom: 1rem;
  560. padding-bottom: 0.75rem;
  561. border-bottom: 1px solid #E2E8F0;
  562. }
  563. .carousel-card .criteria-list { list-style: none; }
  564. .carousel-card .criteria-list li {
  565. display: flex;
  566. justify-content: space-between;
  567. align-items: flex-start;
  568. padding: 0.6rem 0;
  569. border-bottom: 1px dashed #EDF2F7;
  570. gap: 0.5rem;
  571. }
  572. .carousel-card .criteria-list li:last-child { border-bottom: none; }
  573. .carousel-card .criterion-label {
  574. flex-shrink: 0;
  575. font-size: 0.8rem;
  576. font-weight: 600;
  577. color: var(--text-primary);
  578. width: 5.5rem;
  579. }
  580. .carousel-card .criterion-value {
  581. font-size: 0.8rem;
  582. color: var(--text-secondary);
  583. text-align: right;
  584. line-height: 1.5;
  585. }
  586. .carousel-card .criterion-value .highlight-cell { background: transparent; font-weight: 600; }
  587. .carousel-card .card-footer {
  588. margin-top: 0.75rem;
  589. padding-top: 0.75rem;
  590. border-top: 1px solid #E2E8F0;
  591. font-size: 0.85rem;
  592. font-weight: 700;
  593. text-align: center;
  594. }
  595. .carousel-card .card-footer.danger { color: #C53030; }
  596. .carousel-card .card-footer.success { color: #276749; }
  597. .carousel-card .card-footer.warning { color: #975A16; }
  598. .carousel-card .card-footer.primary { color: #2B6CB0; }
  599. .carousel-nav {
  600. display: flex;
  601. align-items: center;
  602. justify-content: center;
  603. gap: 1rem;
  604. margin-top: 0.75rem;
  605. }
  606. .carousel-arrow {
  607. width: 36px; height: 36px;
  608. border-radius: 50%;
  609. border: 1px solid #E2E8F0;
  610. background: white;
  611. color: var(--text-secondary);
  612. font-size: 1.3rem;
  613. cursor: pointer;
  614. display: flex;
  615. align-items: center;
  616. justify-content: center;
  617. transition: all 0.2s;
  618. box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  619. }
  620. .carousel-arrow:hover { background: var(--bg-alt); color: var(--text-primary); }
  621. .carousel-dots {
  622. display: flex;
  623. gap: 0.5rem;
  624. }
  625. .carousel-dot {
  626. width: 8px; height: 8px;
  627. border-radius: 50%;
  628. background: #CBD5E0;
  629. cursor: pointer;
  630. transition: all 0.2s;
  631. }
  632. .carousel-dot.active {
  633. background: var(--blue);
  634. width: 24px;
  635. border-radius: 4px;
  636. }
  637. /* ===== Responsive ===== */
  638. @media (max-width: 640px) {
  639. .hero { padding: 4rem 1rem 3rem; min-height: auto; }
  640. .hero-stats { gap: 0.75rem; }
  641. .hero-stat { min-width: 100px; padding: 0.75rem 1rem; }
  642. .hero-stat .num { font-size: 1.3rem; }
  643. .data-grid { grid-template-columns: 1fr; }
  644. .citation-grid { grid-template-columns: 1fr; }
  645. .tip-grid { grid-template-columns: 1fr; }
  646. .two-col-grid { grid-template-columns: 1fr; }
  647. .infographic { grid-template-columns: repeat(2, 1fr); }
  648. section { padding: 2.5rem 0; }
  649. h2 { font-size: 1.4rem; }
  650. .highlight-box { padding: 1.25rem; }
  651. .compare-table-wrapper { display: none; }
  652. .compare-carousel { display: block; }
  653. .compare-table { font-size: 0.8rem; }
  654. .compare-table th, .compare-table td { padding: 0.5rem 0.75rem; }
  655. }
  656. /* ===== Screenshot placeholder ===== */
  657. .screenshot-placeholder {
  658. background: #F7FAFC;
  659. border: 2px dashed #CBD5E0;
  660. border-radius: var(--radius);
  661. padding: 2rem;
  662. text-align: center;
  663. margin: 1rem 0;
  664. position: relative;
  665. }
  666. .screenshot-placeholder .ref-link {
  667. display: block;
  668. font-size: 0.8rem;
  669. color: var(--blue);
  670. margin-top: 0.5rem;
  671. }
  672. .screenshot-placeholder .hint {
  673. font-size: 0.75rem;
  674. color: var(--text-muted);
  675. }
  676. .ref-link-icon {
  677. display: inline-flex;
  678. align-items: center;
  679. gap: 0.3rem;
  680. font-size: 0.8rem;
  681. color: var(--blue);
  682. text-decoration: none;
  683. margin-top: 0.5rem;
  684. }
  685. .ref-link-icon:hover { text-decoration: underline; }
  686. </style>
  687. <script type="text/javascript">
  688. (function(c,l,a,r,i,t,y){
  689. c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
  690. t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
  691. y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  692. })(window, document, "clarity", "script", "xj4p74ra9m");
  693. </script>
  694. <link rel="stylesheet" href="../css/mobile.css">
  695. </head>
  696. <body>
  697. <!-- ===== HERO ===== -->
  698. <header class="hero">
  699. <div class="hero-particles">
  700. <div class="particle"></div><div class="particle"></div><div class="particle"></div>
  701. <div class="particle"></div><div class="particle"></div><div class="particle"></div>
  702. <div class="particle"></div><div class="particle"></div>
  703. </div>
  704. <div class="hero-content">
  705. <div class="hero-badge">⚠️ 权威科普 · 2026 最新研究</div>
  706. <h1>看不见的入侵者</h1>
  707. <p>你每天喝的桶装水、瓶装水中,可能藏着几十万个塑料颗粒。<br>它们正穿过你的肠道屏障,进入血液、心脏甚至大脑。</p>
  708. <div class="hero-stats">
  709. <div class="hero-stat">
  710. <span class="num">24万</span>
  711. <span class="label">每升瓶装水的塑料微粒数</span>
  712. </div>
  713. <div class="hero-stat">
  714. <span class="num">4.5×</span>
  715. <span class="label">心血管风险增幅</span>
  716. </div>
  717. <div class="hero-stat">
  718. <span class="num">5g</span>
  719. <span class="label">每周摄入量≈一张银行卡<sup><a href="#ref-22">[22]</a></sup></span>
  720. </div>
  721. <div class="hero-stat">
  722. <span class="num">84%</span>
  723. <span class="label">烧开水可去除的微塑料</span>
  724. </div>
  725. </div>
  726. </div>
  727. </header>
  728. <!-- ===== TOC ===== -->
  729. <nav class="toc">
  730. <div class="toc-inner">
  731. <a href="#intro">概述</a>
  732. <a href="#what">什么是微塑料</a>
  733. <a href="#sources">桶装水瓶装水</a>
  734. <a href="#path">进入人体路径</a>
  735. <a href="#harm">身体危害</a>
  736. <a href="#timeline">研究时间线</a>
  737. <a href="#compare">自来水 vs 瓶装水</a>
  738. <a href="#protect">防护方案</a>
  739. <a href="#references">科学循证</a>
  740. </div>
  741. </nav>
  742. <!-- ===== SECTION: INTRO ===== -->
  743. <section id="intro">
  744. <div class="container">
  745. <h2>📋 概述:我们正在被塑料包围</h2>
  746. <p>2024年,美国哥伦比亚大学研究团队在《PNAS》(美国国家科学院院刊)上发表了一项里程碑式研究:首次用全新的光学成像技术直接观测到,<strong>每升瓶装水中竟含有约24万个塑料微粒</strong>,其中90%是尺寸更小、危害更大的纳米塑料<sup><a href="#ref-1">[1]</a></sup>。</p>
  747. <p>2025年,加拿大康考迪亚大学综合140余篇研究后在《Journal of Hazardous Materials》发表综述:瓶装水饮用者比自来水用户<strong>每年多摄入约9万个微塑料颗粒</strong><sup><a href="#ref-2">[2]</a></sup>。</p>
  748. <p>而这些塑料微粒一旦进入人体,会做什么?</p>
  749. <div class="data-grid">
  750. <div class="data-card">
  751. <div class="big-number red">24<span class="unit">万/升</span></div>
  752. <div class="desc">瓶装水中塑料微粒数量<br><span style="font-size:0.8rem;color:var(--blue);">PNAS 2024<sup><a href="#ref-1">[1]</a></sup></span></div>
  753. </div>
  754. <div class="data-card">
  755. <div class="big-number blue">600<span class="unit">万/升</span></div>
  756. <div class="desc">2026年最新检测数据<br><span style="font-size:0.8rem;color:var(--blue);">国内15品牌检测<sup><a href="#ref-3">[3]</a></sup></span></div>
  757. </div>
  758. <div class="data-card">
  759. <div class="big-number green">84<span class="unit">%</span></div>
  760. <div class="desc">烧开水可去除的微塑料<br><span style="font-size:0.8rem;color:var(--blue);">广州医大+暨大 2024<sup><a href="#ref-4">[4]</a></sup></span></div>
  761. </div>
  762. </div>
  763. </div>
  764. </section>
  765. <!-- ===== SECTION: WHAT ===== -->
  766. <section id="what" class="alt">
  767. <div class="container">
  768. <h2>🔬 什么是微塑料?</h2>
  769. <p><strong>微塑料</strong>(Microplastics)指直径小于5毫米的塑料碎片,<strong>纳米塑料</strong>(Nanoplastics)则小于1微米(千分之一毫米)。后者可以穿过细胞膜,进入血液循环<sup><a href="#ref-5">[5]</a></sup>。</p>
  770. <div class="infographic">
  771. <div class="info-item">
  772. <div class="icon">📐</div>
  773. <h4>微塑料</h4>
  774. <p>1μm ~ 5mm<br>肉眼勉强可见</p>
  775. </div>
  776. <div class="info-item">
  777. <div class="icon">🔬</div>
  778. <h4>纳米塑料</h4>
  779. <p>&lt; 1μm<br>可穿过细胞膜</p>
  780. </div>
  781. <div class="info-item">
  782. <div class="icon">🏭</div>
  783. <h4>原生微塑料</h4>
  784. <p>工业磨料、化妆品微珠<br>刻意制造的微小塑料</p>
  785. </div>
  786. <div class="info-item">
  787. <div class="icon">🌊</div>
  788. <h4>次生微塑料</h4>
  789. <p>塑料制品经UV光照、<br>摩擦、降解破碎</p>
  790. </div>
  791. </div>
  792. <div class="highlight-box red">
  793. <p><strong>世卫组织 WHO 2019 年报告</strong>明确指出:饮用水中的微塑料污染是普遍存在的,海洋、污水、淡水、自来水、瓶装水中均有检出。WHO 呼吁加强研究,减少塑料污染<sup><a href="#ref-6">[6]</a></sup>。</p>
  794. </div>
  795. </div>
  796. </section>
  797. <!-- ===== SECTION: SOURCES (办公室场景) ===== -->
  798. <section id="sources">
  799. <div class="container">
  800. <h2>🧊 办公室饮水场景:桶装水/瓶装水的真相</h2>
  801. <p>对于办公室人群,塑料微粒的来源高度集中。下面是针对办公室场景的风险因素分析:</p>
  802. <div class="two-col-grid">
  803. <div class="citation-card">
  804. <div class="source">PNAS · 2024</div>
  805. <div class="title">每升瓶装水含约24万个塑料微粒</div>
  806. <div class="findings">哥伦比亚大学首次用SRS显微成像技术直接观测到:瓶装水中90%为纳米塑料。瓶子被挤压、暴晒、反复开关瓶盖会释放更多微塑料。</div>
  807. <a class="link" href="https://www.pnas.org/doi/10.1073/pnas.2300582121" target="_blank">🔗 查看原文 →</a>
  808. </div>
  809. <div class="citation-card">
  810. <div class="source">J. Hazardous Materials · 2025</div>
  811. <div class="title">瓶装水用户年多摄入9万微塑料颗粒</div>
  812. <div class="findings">康考迪亚大学140+研究综述:人群年摄入39,000~52,000个微塑料颗粒。瓶装水用户额外增加约90,000个。污染始于制造、运输、储存环节。</div>
  813. <a class="link" href="https://www.sciencedaily.com/releases/2025/10/251006051131.htm" target="_blank">🔗 查看原文 →</a>
  814. </div>
  815. <div class="citation-card">
  816. <div class="source">Sci. Total Environ. · 2026</div>
  817. <div class="title">瓶装水微塑料浓度是自来水3倍</div>
  818. <div class="findings">俄亥俄州立大学分析4家水处理厂 + 6个瓶装水品牌:瓶装水纳米塑料浓度是自来水的3倍。瓶身PET和瓶盖PP是主要污染源。</div>
  819. <a class="link" href="https://phys.org/news/2026-02-bottled-worse-microplastics.html" target="_blank">🔗 查看原文 →</a>
  820. </div>
  821. <div class="citation-card">
  822. <div class="source">CCWIN · 2026</div>
  823. <div class="title">国内15品牌检测:平均600万颗粒/升</div>
  824. <div class="findings">采用高精度激光颗粒计数+质谱分析:PET瓶包装620万个/升,纸盒480万,玻璃瓶350万。塑料材质以PET、PP、PE为主。</div>
  825. <a class="link" href="http://www.ccwin.cn/article-87006-1.html" target="_blank">🔗 查看原文 →</a>
  826. </div>
  827. </div>
  828. <h3>办公室场景的额外风险</h3>
  829. <div class="risk-path">
  830. <div class="step-num">1</div>
  831. <div class="content">
  832. <p><strong>桶身老化</strong> — PC桶反复使用,划痕释放微塑料</p>
  833. <span class="cite">来源:PET瓶在使用中持续释放微塑料颗粒<sup><a href="#ref-1">[1]</a></sup></span>
  834. </div>
  835. </div>
  836. <div class="risk-path">
  837. <div class="step-num">2</div>
  838. <div class="content">
  839. <p><strong>高温加热</strong> — 饮水机加热使PET塑料释放率显著上升</p>
  840. <span class="cite">来源:高温暴晒条件下瓶装水释放更多微塑料<sup><a href="#ref-1">[1]</a></sup></span>
  841. </div>
  842. </div>
  843. <div class="risk-path">
  844. <div class="step-num">3</div>
  845. <div class="content">
  846. <p><strong>存放暴晒</strong> — 仓库/办公室堆放暴晒,加速塑料降解</p>
  847. <span class="cite">来源:光照和温度波动是微塑料释放的关键因素<sup><a href="#ref-2">[2]</a></sup></span>
  848. </div>
  849. </div>
  850. <div class="risk-path">
  851. <div class="step-num">4</div>
  852. <div class="content">
  853. <p><strong>密封垫磨损</strong> — 每次换桶摩擦产生碎屑 + 聪明座塑料件接触热水</p>
  854. <span class="cite">来源:瓶盖密封垫磨损也是微塑料来源<sup><a href="#ref-3">[3]</a></sup></span>
  855. </div>
  856. </div>
  857. <!-- 截图:四大风险对应证据 -->
  858. <div class="two-col-grid" style="margin:1.5rem 0;">
  859. <div>
  860. <a href="../img/ref-pet-sources.png" target="_blank">
  861. <img src="../img/ref-pet-sources.png" alt="PET瓶污染源" style="width:100%;border-radius:12px;border:1px solid #E2E8F0;box-shadow:0 4px 12px rgba(0,0,0,0.08);">
  862. </a>
  863. <p style="font-size:0.85rem;color:var(--text-primary);margin-top:0.4rem;font-weight:600;">📌 对应风险①:桶身老化/瓶身材料</p>
  864. <p style="font-size:0.75rem;color:var(--text-muted);">CCWIN 2026 国内15品牌检测:PET瓶620万颗粒/升,污染始于制造、运输、储存<br><a href="http://www.ccwin.cn/article-87006-1.html" target="_blank" style="color:var(--blue);">来源: 中国商业网 2026 →</a></p>
  865. </div>
  866. <div>
  867. <a href="../img/ref-hot-water-antimony.png" target="_blank">
  868. <img src="../img/ref-hot-water-antimony.png" alt="ScienceDaily: 高温释放锑/BPA" style="width:100%;border-radius:12px;border:1px solid #E2E8F0;box-shadow:0 4px 12px rgba(0,0,0,0.08);">
  869. </a>
  870. <p style="font-size:0.85rem;color:var(--text-primary);margin-top:0.4rem;font-weight:600;">📌 对应风险②:饮水机高温加热</p>
  871. <p style="font-size:0.75rem;color:var(--text-muted);">UF/南京大学研究:PET瓶70°C高温下锑和BPA释放量显著增加<br><a href="https://www.sciencedaily.com/releases/2014/09/140922110139.htm" target="_blank" style="color:var(--blue);">来源: ScienceDaily 2014 →</a></p>
  872. </div>
  873. <div>
  874. <a href="../img/ref-heat-sunlight.png" target="_blank">
  875. <img src="../img/ref-heat-sunlight.png" alt="Ohio State: 热量和紫外线加速降解" style="width:100%;border-radius:12px;border:1px solid #E2E8F0;box-shadow:0 4px 12px rgba(0,0,0,0.08);">
  876. </a>
  877. <p style="font-size:0.85rem;color:var(--text-primary);margin-top:0.4rem;font-weight:600;">📌 对应风险③:暴晒温度波动</p>
  878. <p style="font-size:0.75rem;color:var(--text-muted);">Ohio State:紫外线与高温加速塑料降解,BPA-free瓶子也会释放化学物质<br><a href="https://health.osu.edu/health/general-health/reducing-microplastics-better-health" target="_blank" style="color:var(--blue);">来源: 俄亥俄州立大学 2025 →</a></p>
  879. </div>
  880. <div>
  881. <a href="../img/ref-ohio-state.png" target="_blank">
  882. <img src="../img/ref-ohio-state.png" alt="Ohio State: 瓶装水vs自来水" style="width:100%;border-radius:12px;border:1px solid #E2E8F0;box-shadow:0 4px 12px rgba(0,0,0,0.08);">
  883. </a>
  884. <p style="font-size:0.85rem;color:var(--text-primary);margin-top:0.4rem;font-weight:600;">📌 对应风险④:密封垫/聪明座磨损</p>
  885. <p style="font-size:0.75rem;color:var(--text-muted);">Ohio State:瓶装水塑料含量为自来水2-3倍,260万~1150万颗粒/升,半数可入血<br><a href="https://studyfinds.com/bottled-water-twice-plastic-contamination-tap-water/" target="_blank" style="color:var(--blue);">来源: Ohio State Univ. 2026 →</a></p>
  886. </div>
  887. </div>
  888. <div class="highlight-box blue" style="margin-top:1.5rem;">
  889. <p><strong>🔬 科学释疑:"越好的水,微塑料越多"?——核心规律是"塑料接触越多,污染越重"</strong></p>
  890. <p>不少消费者认为"高价水"应该更纯净,但多项研究表明事实恰恰相反:<strong>微塑料的污染程度与包装材质直接相关</strong>,而非水的价格或品牌。</p>
  891. <p>• <strong>PET塑料瓶</strong>:微塑料浓度最高(620万颗粒/升),因水与瓶身直接接触+运输摩擦+温度变化<sup><a href="#ref-3">[3]</a></sup><br>
  892. • <strong>纸盒包装</strong>:次之(480万颗粒/升),内层塑料膜仍会释放<sup><a href="#ref-3">[3]</a></sup><br>
  893. • <strong>玻璃瓶</strong>:理论上最低(350万颗粒/升),但法国国家食品安全局ANSES 2025年研究发现:<strong>玻璃瓶饮料的金属瓶盖涂料是意外的微塑料来源</strong>——瓶盖内侧油漆脱落可导致含量反超塑料瓶<sup><a href="#ref-20">[20]</a></sup><br>
  894. • <strong>自来水</strong>:经水厂处理后微塑料含量最低(160~260万颗粒/升),且无塑料包装二次污染</p>
  895. <p><strong>结论</strong>:"贵水"多是玻璃瓶包装,但玻璃瓶的金属瓶盖涂料会引入额外微塑料。真正决定微塑料含量的不是价格,是<strong>有多少塑料表面与水接触、接触多久、经历多少温度变化和物理摩擦</strong>。最安全的饮水方案始终是:<strong>自来水 + 不锈钢/玻璃容器(使用前冲洗瓶盖)</strong><sup><a href="#ref-21">[21]</a></sup>。</p>
  896. </div>
  897. <div class="highlight-box red" style="margin-top:1.5rem;">
  898. <p><strong>🧬 不只是微塑料:桶装水中的"胖激素"与"焦虑因子"</strong></p>
  899. <p>PET瓶释放的微塑料本身携带<strong>双酚A(BPA)和邻苯二甲酸酯</strong>——这两类物质被科学界称为<strong>"环境致肥因子"(Obesogens)</strong>。它们干扰内分泌系统,促进脂肪细胞生成和脂肪堆积,在"基因相同、饮食不变"的情况下导致体重差异。2021年《临床内分泌与代谢》综述指出,塑化剂暴露与肥胖症流行存在明确关联<sup><a href="#ref-14">[14]</a></sup>。2026年《内分泌与代谢科学》进一步证实微塑料作为"环境致肥因子"的角色——通过诱导慢性低度炎症、胰岛素抵抗和肠道菌群失调三重机制驱动代谢功能紊乱<sup><a href="#ref-15">[15]</a></sup>。</p>
  900. <p>更值得关注的是,微塑料通过破坏肠道屏障(肠漏),引发全身慢性炎症,并通过<strong>肠-脑轴</strong>影响神经递质代谢。2025年PMC综述指出,微塑料累积与焦虑、抑郁等情绪障碍存在显著关联<sup><a href="#ref-5">[5]</a></sup>。这意味着办公室人群每天依赖桶装水,不仅要面对微塑料的物理伤害,还要承受<strong>代谢紊乱(肥胖)+ 情绪障碍(焦虑)</strong>的双重风险。</p>
  901. </div>
  902. </div>
  903. </section>
  904. <!-- ===== SECTION: PATH ===== -->
  905. <section id="path" class="alt">
  906. <div class="container">
  907. <h2>🔄 微塑料如何进入人体?</h2>
  908. <p>研究已证实,微塑料通过三条途径进入人体<sup><a href="#ref-5">[5]</a></sup>:</p>
  909. <div class="infographic">
  910. <div class="info-item">
  911. <div class="icon">🥤</div>
  912. <h4>经口摄入</h4>
  913. <p>饮水、食物、海鲜<br>最主要的暴露途径</p>
  914. </div>
  915. <div class="info-item">
  916. <div class="icon">🌬️</div>
  917. <h4>呼吸吸入</h4>
  918. <p>空气中的微塑料纤维<br>可深达肺部</p>
  919. </div>
  920. <div class="info-item">
  921. <div class="icon">🧴</div>
  922. <h4>皮肤接触</h4>
  923. <p>个人护理品、纺织品<br>相对影响较小</p>
  924. </div>
  925. </div>
  926. <div class="highlight-box blue">
  927. <p><strong>进入人体后的转运路径</strong><br>
  928. 摄入 → 消化道 → 约10%穿过肠道屏障 → 进入淋巴系统和血液循环 → 分布至全身器官(肝、肾、肺、心脏、胎盘、大脑)<sup><a href="#ref-5">[5]</a></sup><sup><a href="#ref-7">[7]</a></sup></p>
  929. <p style="margin-top:0.5rem;font-size:0.9rem;">已检测到微塑料的人体组织:血液、肠道、肺、肝、脾、肾、胎盘、心脏组织、颈动脉斑块、大脑<sup><a href="#ref-7">[7]</a></sup><sup><a href="#ref-8">[8]</a></sup></p>
  930. </div>
  931. <p><strong>关键问题:</strong>大部分微塑料(约90%)会随粪便排出,但仍有10%残留在体内,并在器官中不断累积。微塑料在细胞内无法被溶酶体降解,会在细胞分裂时传递给子细胞,实现"代际传递"<sup><a href="#ref-9">[9]</a></sup>。</p>
  932. </div>
  933. </section>
  934. <!-- ===== SECTION: HARM ===== -->
  935. <section id="harm">
  936. <div class="container">
  937. <h2>🏥 微塑料对身体的危害(按证据强度排列)</h2>
  938. <h3>🔴 1. 心血管损害 — 最直接的临床证据</h3>
  939. <div class="citation-card">
  940. <div class="source">新英格兰医学杂志 (NEJM) · 2024年3月</div>
  941. <div class="title">颈动脉斑块中的微塑料使心血管事件风险提升4.5倍</div>
  942. <div class="findings">
  943. 意大利坎帕尼亚大学团队对257名接受颈动脉斑块切除手术的患者进行分析:<br>
  944. • 近60%(150人)的斑块样本中检出微塑料(聚乙烯 PE + 聚氯乙烯 PVC)<br>
  945. • 术后34个月随访:斑块含微塑料的患者发生心梗/卒中/死亡的风险高4.5倍<br>
  946. • 微塑料含量高的患者炎症生物标志物水平显著更高
  947. </div>
  948. <a class="link" href="https://www.nejm.org/doi/full/10.1056/NEJMoa2309822" target="_blank">🔗 查看新英格兰医学杂志原文 →</a>
  949. </div>
  950. <p style="margin-top:1rem;">2025年PMC综述(纳入72篇研究)进一步确认:微塑料可导致血压升高、动脉粥样硬化、心律失常,直接损伤心肌细胞和血管内皮<sup><a href="#ref-10">[10]</a></sup>。</p>
  951. <!-- 截图:NEJM -->
  952. <div style="margin:1rem 0;">
  953. <a href="../img/ref-nejm.png" target="_blank">
  954. <img src="../img/ref-nejm.png" alt="NEJM: Microplastics in Atheromas and Cardiovascular Events" style="width:100%;max-height:500px;object-fit:cover;object-position:top;border-radius:12px;border:1px solid #E2E8F0;box-shadow:0 4px 12px rgba(0,0,0,0.08);">
  955. </a>
  956. <p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.3rem;">↑ NEJM 2024:颈动脉斑块中微塑料使心梗/卒中风险升高4.5倍<br><a href="https://www.nejm.org/doi/full/10.1056/NEJMoa2309822" target="_blank" style="color:var(--blue);">来源: 新英格兰医学杂志</a></p>
  957. </div>
  958. <h3>🟠 2. 氧化应激 + 慢性炎症(证据最充分的机制)</h3>
  959. <p>微塑料进入细胞后触发活性氧(ROS)大量产生,导致<sup><a href="#ref-5">[5]</a></sup><sup><a href="#ref-11">[11]</a></sup>:</p>
  960. <div class="risk-path">
  961. <div class="step-num" style="background:var(--blue);">1</div>
  962. <div class="content"><p>微塑料被细胞吞噬 → 溶酶体无法降解</p></div>
  963. </div>
  964. <div class="risk-path">
  965. <div class="step-num" style="background:var(--blue);">2</div>
  966. <div class="content"><p>线粒体功能紊乱 → 活性氧(ROS)爆发式产生</p></div>
  967. </div>
  968. <div class="risk-path">
  969. <div class="step-num" style="background:var(--blue);">3</div>
  970. <div class="content"><p>NF-κB 炎症通路激活 → TNF-α 等促炎因子释放</p></div>
  971. </div>
  972. <div class="risk-path">
  973. <div class="step-num" style="background:var(--blue);">4</div>
  974. <div class="content"><p>慢性全身低度炎症 → 进一步损害各器官</p></div>
  975. </div>
  976. <h3>🟡 3. 肠道系统损害</h3>
  977. <div class="highlight-box orange">
  978. <p><strong>中科院沈阳应用生态研究所 2023</strong>:小鼠摄入微塑料28天后,肠道菌群结构显著改变,有益菌丰度显著降低,致病菌显著增加。肠道屏障功能被破坏,免疫功能受损<sup><a href="#ref-12">[12]</a></sup>。</p>
  979. </div>
  980. <h3>🟣 4. 促进癌细胞迁移</h3>
  981. <div class="highlight-box purple">
  982. <p><strong>维也纳大学/维也纳医科大学 2024</strong>:纳米级微塑料被结直肠癌细胞大量摄取,在细胞分裂时传递给子细胞且永不消除。短期暴露即显著增强癌细胞迁移能力<sup><a href="#ref-9">[9]</a></sup>。</p>
  983. </div>
  984. <h3>⚪ 5. 神经系统潜在风险</h3>
  985. <p>2025-2026年研究发现微塑料可穿过血脑屏障进入大脑,动物实验中诱发帕金森样神经退行性变,抑制ATP产生<sup><a href="#ref-13">[13]</a></sup>。</p>
  986. </div>
  987. </section>
  988. <!-- ===== SECTION: TIMELINE ===== -->
  989. <section id="timeline" class="alt">
  990. <div class="container">
  991. <h2>📅 微塑料研究里程碑</h2>
  992. <div class="timeline">
  993. <div class="timeline-item">
  994. <div class="year">2004</div>
  995. <h4>微塑料概念首次提出</h4>
  996. <div class="detail">英国普利茅斯大学 Thompson 等首次提出"微塑料"定义:直径小于5mm的塑料碎片<sup><a href="#ref-5">[5]</a></sup>。</div>
  997. </div>
  998. <div class="timeline-item">
  999. <div class="year">2018</div>
  1000. <h4>人体粪便首次检出微塑料</h4>
  1001. <div class="detail">欧洲消化医学会报告:8位受试者粪便中检出9种微塑料,首次直接证明人类通过饮食摄入微塑料<sup><a href="#ref-5">[5]</a></sup>。</div>
  1002. </div>
  1003. <div class="timeline-item">
  1004. <div class="year">2019</div>
  1005. <h4>WHO 发布饮用水微塑料报告</h4>
  1006. <div class="detail">世界卫生组织发布124页技术报告,确认饮用水中微塑料污染普遍存在,呼吁加大研究力度<sup><a href="#ref-6">[6]</a></sup>。</div>
  1007. </div>
  1008. <div class="timeline-item">
  1009. <div class="year">2024.01</div>
  1010. <h4>PNAS:每升瓶装水含24万塑料微粒</h4>
  1011. <div class="detail">哥伦比亚大学用新光学成像技术首次直接观测到纳米塑料,发现90%为纳米级<sup><a href="#ref-1">[1]</a></sup>。</div>
  1012. </div>
  1013. <div class="timeline-item">
  1014. <div class="year">2024.02</div>
  1015. <h4>广州医大+暨大:烧开水去除84%微塑料</h4>
  1016. <div class="detail">证实简单烧开水即可大幅减少微塑料摄入,煮沸使水垢包裹微塑料共沉淀<sup><a href="#ref-4">[4]</a></sup>。</div>
  1017. </div>
  1018. <div class="timeline-item">
  1019. <div class="year">2024.03</div>
  1020. <h4>NEJM:微塑料使心血管风险提升4.5倍</h4>
  1021. <div class="detail">里程碑式临床研究,首次直接证明微塑料与心血管事件的正相关关系<sup><a href="#ref-8">[8]</a></sup>。</div>
  1022. </div>
  1023. <div class="timeline-item">
  1024. <div class="year">2025-2026</div>
  1025. <h4>EPA 将微塑料列入优先污染物清单</h4>
  1026. <div class="detail">多篇PMC综述系统总结微塑料的氧化应激、炎症、内分泌干扰、神经毒性机制<sup><a href="#ref-5">[5]</a></sup><sup><a href="#ref-10">[10]</a></sup><sup><a href="#ref-11">[11]</a></sup>。</div>
  1027. </div>
  1028. </div>
  1029. </div>
  1030. </section>
  1031. <!-- ===== SECTION: COMPARE ===== -->
  1032. <section id="compare">
  1033. <div class="container">
  1034. <h2>📊 四大饮水方案全面对比</h2>
  1035. <p>基于以上风险分析,我们将办公室常见的四种饮水方案放在同一张表中清晰对比:</p>
  1036. <div class="compare-table-wrapper" style="overflow-x:auto;">
  1037. <table class="compare-table">
  1038. <thead>
  1039. <tr>
  1040. <th style="width:13%;">对比项</th>
  1041. <th style="width:22%;">桶装水/瓶装水</th>
  1042. <th style="width:22%;">自来水(烧开后)</th>
  1043. <th style="width:22%;">RO反渗透纯水机</th>
  1044. <th style="width:22%;">🥇 电解还原水机</th>
  1045. </tr>
  1046. </thead>
  1047. <tbody>
  1048. <tr>
  1049. <td><strong>微塑料含量</strong></td>
  1050. <td style="background:#FFF5F5;">620万颗粒/升,且随时间+温度递增<sup><a href="#ref-3">[3]</a></sup></td>
  1051. <td class="highlight-cell">~200万/升(原水)<br>烧开去除84%+<sup><a href="#ref-4">[4]</a></sup></td>
  1052. <td>RO膜孔径0.0001μm,可截留<sup><a href="#ref-16">[16]</a></sup></td>
  1053. <td class="highlight-cell">多层过滤可有效截留</td>
  1054. </tr>
  1055. <tr>
  1056. <td><strong>抗生素/农残/激素</strong></td>
  1057. <td style="background:#FFF5F5;">桶装水出厂检测有限,难以保证去除</td>
  1058. <td style="background:#FFF5F5;">❌ 烧开无法去除抗生素、农药残留、避孕药等化学污染物</td>
  1059. <td>RO膜可截留大部分大分子有机物,小分子部分通过</td>
  1060. <td class="highlight-cell" style="background:#F0FFF4;">活性炭+UF过滤有效去除余氯、农残、激素等有机污染物</td>
  1061. </tr>
  1062. <tr>
  1063. <td><strong>矿物质保留</strong></td>
  1064. <td>含天然矿物质(但伴随塑料污染)</td>
  1065. <td class="highlight-cell" style="background:#F0FFF4;">✅ 完整保留钙镁等</td>
  1066. <td style="background:#FFF5F5;">❌ 完全去除所有矿物<sup><a href="#ref-16">[16]</a></sup></td>
  1067. <td class="highlight-cell" style="background:#F0FFF4;">✅ 完整保留,生物利用度更优</td>
  1068. </tr>
  1069. <tr>
  1070. <td><strong>BPA/塑化剂</strong></td>
  1071. <td style="background:#FFF5F5;">高温暴晒释放BPA、锑、邻苯二甲酸酯</td>
  1072. <td class="highlight-cell">无额外污染</td>
  1073. <td>小分子有机物部分可通过RO膜</td>
  1074. <td class="highlight-cell">有效过滤(活性炭+UF膜吸附)</td>
  1075. </tr>
  1076. <tr>
  1077. <td><strong>二次污染风险</strong></td>
  1078. <td style="background:#FFF5F5;">饮水机+桶身细菌滋生,密封垫磨损</td>
  1079. <td class="highlight-cell">低(即烧即饮)</td>
  1080. <td>中高:滤芯久不换滋生细菌<sup><a href="#ref-18">[18]</a></sup></td>
  1081. <td>低(定期换芯即可)</td>
  1082. </tr>
  1083. <tr>
  1084. <td><strong>抗氧化/健康增益</strong></td>
  1085. <td>无</td>
  1086. <td>无(仅为安全饮水)</td>
  1087. <td>无(纯水呈弱酸性)</td>
  1088. <td class="highlight-cell" style="background:#EBF8FF;">🏆 溶解氢抗氧化(ORP -250~-500mV)<sup><a href="#ref-19">[19]</a></sup></td>
  1089. </tr>
  1090. <tr>
  1091. <td><strong>肥胖/焦虑风险</strong></td>
  1092. <td style="background:#FFF5F5;">⚠️ BPA/塑化剂关联致肥+焦虑<sup><a href="#ref-14">[14]</a></sup><sup><a href="#ref-15">[15]</a></sup></td>
  1093. <td class="highlight-cell">❌ 无</td>
  1094. <td>不确定(无矿物水可能代谢负担)<sup><a href="#ref-17">[17]</a></sup></td>
  1095. <td class="highlight-cell">❌ 无</td>
  1096. </tr>
  1097. <tr>
  1098. <td><strong>综合成本</strong></td>
  1099. <td style="background:#FFF5F5;">高:每桶12~22元+饮水机折旧</td>
  1100. <td class="highlight-cell" style="background:#F0FFF4;">✅ 极低</td>
  1101. <td>中高:设备+换芯+废水(1:3~7)</td>
  1102. <td>中高:设备+换芯</td>
  1103. </tr>
  1104. <tr>
  1105. <td><strong>综合评价</strong></td>
  1106. <td style="background:#FFF5F5;color:#C53030;font-weight:700;">❌ 风险最高</td>
  1107. <td style="background:#F0FFF4;color:#276749;font-weight:700;">✅ 安全经济之选</td>
  1108. <td style="background:#FFFFF0;color:#975A16;font-weight:700;">⚠️ 缺矿物质</td>
  1109. <td style="background:#EBF8FF;color:#2B6CB0;font-weight:700;">🥇 综合最优解</td>
  1110. </tr>
  1111. </tbody>
  1112. </table>
  1113. </div>
  1114. <!-- ===== Mobile Carousel ===== -->
  1115. <div class="compare-carousel" id="compareCarousel">
  1116. <div class="carousel-track">
  1117. <!-- Card 1: 桶装水/瓶装水 -->
  1118. <div class="carousel-card border-danger" data-index="0">
  1119. <span class="card-badge danger">❌ 风险最高</span>
  1120. <div class="card-title">📦 桶装水/瓶装水</div>
  1121. <ul class="criteria-list">
  1122. <li>
  1123. <span class="criterion-label">微塑料</span>
  1124. <span class="criterion-value">620万颗粒/升,随时间+温度递增<sup><a href="#ref-3">[3]</a></sup></span>
  1125. </li>
  1126. <li>
  1127. <span class="criterion-label">抗生素/污染物</span>
  1128. <span class="criterion-value">出厂检测有限,难以保证去除</span>
  1129. </li>
  1130. <li>
  1131. <span class="criterion-label">矿物质</span>
  1132. <span class="criterion-value">含天然矿物质(但伴塑料污染)</span>
  1133. </li>
  1134. <li>
  1135. <span class="criterion-label">BPA/塑化剂</span>
  1136. <span class="criterion-value">高温暴晒释放BPA、锑、邻苯二甲酸酯</span>
  1137. </li>
  1138. <li>
  1139. <span class="criterion-label">二次污染</span>
  1140. <span class="criterion-value">饮水机+桶身细菌滋生,密封垫磨损</span>
  1141. </li>
  1142. <li>
  1143. <span class="criterion-label">健康增益</span>
  1144. <span class="criterion-value">无</span>
  1145. </li>
  1146. <li>
  1147. <span class="criterion-label">致肥/焦虑风险</span>
  1148. <span class="criterion-value">⚠️ BPA/塑化剂关联致肥+焦虑<sup><a href="#ref-14">[14]</a></sup></span>
  1149. </li>
  1150. <li>
  1151. <span class="criterion-label">综合成本</span>
  1152. <span class="criterion-value">高:每桶12~22元+饮水机折旧</span>
  1153. </li>
  1154. </ul>
  1155. <div class="card-footer danger">❌ 风险最高</div>
  1156. </div>
  1157. <!-- Card 2: 自来水(烧开后) -->
  1158. <div class="carousel-card border-success" data-index="1">
  1159. <span class="card-badge success">✅ 安全经济之选</span>
  1160. <div class="card-title">🚰 自来水(烧开后)</div>
  1161. <ul class="criteria-list">
  1162. <li>
  1163. <span class="criterion-label">微塑料</span>
  1164. <span class="criterion-value">~200万/升(原水),烧开去除84%+<sup><a href="#ref-4">[4]</a></sup></span>
  1165. </li>
  1166. <li>
  1167. <span class="criterion-label">抗生素/污染物</span>
  1168. <span class="criterion-value" style="color:#C53030;">❌ 烧开无法去除抗生素、农药、避孕药等</span>
  1169. </li>
  1170. <li>
  1171. <span class="criterion-label">矿物质</span>
  1172. <span class="criterion-value" style="color:#276749;font-weight:600;">✅ 完整保留钙镁等</span>
  1173. </li>
  1174. <li>
  1175. <span class="criterion-label">BPA/塑化剂</span>
  1176. <span class="criterion-value">无额外污染</span>
  1177. </li>
  1178. <li>
  1179. <span class="criterion-label">二次污染</span>
  1180. <span class="criterion-value">低(即烧即饮)</span>
  1181. </li>
  1182. <li>
  1183. <span class="criterion-label">健康增益</span>
  1184. <span class="criterion-value">无(仅为安全饮水)</span>
  1185. </li>
  1186. <li>
  1187. <span class="criterion-label">致肥/焦虑风险</span>
  1188. <span class="criterion-value" style="color:#276749;font-weight:600;">❌ 无</span>
  1189. </li>
  1190. <li>
  1191. <span class="criterion-label">综合成本</span>
  1192. <span class="criterion-value" style="color:#276749;font-weight:600;">✅ 极低</span>
  1193. </li>
  1194. </ul>
  1195. <div class="card-footer success">✅ 安全经济之选</div>
  1196. </div>
  1197. <!-- Card 3: RO反渗透纯水机 -->
  1198. <div class="carousel-card border-warning" data-index="2">
  1199. <span class="card-badge warning">⚠️ 缺矿物质</span>
  1200. <div class="card-title">💧 RO反渗透纯水机</div>
  1201. <ul class="criteria-list">
  1202. <li>
  1203. <span class="criterion-label">微塑料</span>
  1204. <span class="criterion-value">RO膜孔径0.0001μm,可截留<sup><a href="#ref-16">[16]</a></sup></span>
  1205. </li>
  1206. <li>
  1207. <span class="criterion-label">抗生素/污染物</span>
  1208. <span class="criterion-value">RO膜可截留大部分大分子有机物</span>
  1209. </li>
  1210. <li>
  1211. <span class="criterion-label">矿物质</span>
  1212. <span class="criterion-value" style="color:#C53030;">❌ 完全去除所有矿物<sup><a href="#ref-16">[16]</a></sup></span>
  1213. </li>
  1214. <li>
  1215. <span class="criterion-label">BPA/塑化剂</span>
  1216. <span class="criterion-value">小分子有机物部分可通过RO膜</span>
  1217. </li>
  1218. <li>
  1219. <span class="criterion-label">二次污染</span>
  1220. <span class="criterion-value">中高:滤芯久不换滋生细菌<sup><a href="#ref-18">[18]</a></sup></span>
  1221. </li>
  1222. <li>
  1223. <span class="criterion-label">健康增益</span>
  1224. <span class="criterion-value">无(纯水呈弱酸性)</span>
  1225. </li>
  1226. <li>
  1227. <span class="criterion-label">致肥/焦虑风险</span>
  1228. <span class="criterion-value">不确定(无矿物水可能代谢负担)<sup><a href="#ref-17">[17]</a></sup></span>
  1229. </li>
  1230. <li>
  1231. <span class="criterion-label">综合成本</span>
  1232. <span class="criterion-value">中高:设备+换芯+废水(1:3~7)</span>
  1233. </li>
  1234. </ul>
  1235. <div class="card-footer warning">⚠️ 缺矿物质</div>
  1236. </div>
  1237. <!-- Card 4: 电解还原水机 -->
  1238. <div class="carousel-card border-primary" data-index="3">
  1239. <span class="card-badge primary">🥇 综合最优解</span>
  1240. <div class="card-title">⚡ 电解还原水机</div>
  1241. <ul class="criteria-list">
  1242. <li>
  1243. <span class="criterion-label">微塑料</span>
  1244. <span class="criterion-value" style="color:#276749;font-weight:600;">多层过滤可有效截留</span>
  1245. </li>
  1246. <li>
  1247. <span class="criterion-label">抗生素/污染物</span>
  1248. <span class="criterion-value" style="color:#276749;font-weight:600;">活性炭+UF过滤有效去除余氯、农残、激素</span>
  1249. </li>
  1250. <li>
  1251. <span class="criterion-label">矿物质</span>
  1252. <span class="criterion-value" style="color:#276749;font-weight:600;">✅ 完整保留,生物利用度更优</span>
  1253. </li>
  1254. <li>
  1255. <span class="criterion-label">BPA/塑化剂</span>
  1256. <span class="criterion-value" style="color:#276749;font-weight:600;">有效过滤(活性炭+UF膜吸附)</span>
  1257. </li>
  1258. <li>
  1259. <span class="criterion-label">二次污染</span>
  1260. <span class="criterion-value">低(定期换芯即可)</span>
  1261. </li>
  1262. <li>
  1263. <span class="criterion-label">健康增益</span>
  1264. <span class="criterion-value" style="color:#2B6CB0;font-weight:600;">🏆 溶解氢抗氧化(ORP -250~-500mV)<sup><a href="#ref-19">[19]</a></sup></span>
  1265. </li>
  1266. <li>
  1267. <span class="criterion-label">致肥/焦虑风险</span>
  1268. <span class="criterion-value" style="color:#276749;font-weight:600;">❌ 无</span>
  1269. </li>
  1270. <li>
  1271. <span class="criterion-label">综合成本</span>
  1272. <span class="criterion-value">中高:设备+换芯</span>
  1273. </li>
  1274. </ul>
  1275. <div class="card-footer primary">🥇 综合最优解</div>
  1276. </div>
  1277. </div>
  1278. <div class="carousel-nav">
  1279. <button class="carousel-arrow carousel-prev" aria-label="上一项">‹</button>
  1280. <div class="carousel-dots">
  1281. <span class="carousel-dot active" data-index="0"></span>
  1282. <span class="carousel-dot" data-index="1"></span>
  1283. <span class="carousel-dot" data-index="2"></span>
  1284. <span class="carousel-dot" data-index="3"></span>
  1285. </div>
  1286. <button class="carousel-arrow carousel-next" aria-label="下一项">›</button>
  1287. </div>
  1288. </div>
  1289. <div class="two-col-grid" style="margin-top:1.5rem;">
  1290. <div class="highlight-box green" style="margin:0;">
  1291. <p><strong>自来水烧开</strong>——在微塑料层面是最安全经济的方案,但需注意:<strong>烧开无法去除抗生素、农药残留、避孕药等化学污染物</strong>。若水源存在此类风险,建议搭配活性炭滤水壶或选择过滤净水方案。结论:<strong>预算有限时的最优入门方案,但非完美方案</strong>。</p>
  1292. </div>
  1293. <div class="highlight-box blue" style="margin:0;">
  1294. <p><strong>电解还原水机</strong>——综合最优解。多层过滤去除微塑料+保留矿物质+溶解氢三重优势。结论:<strong>有条件升级时,这是最值得的投资</strong>。</p>
  1295. </div>
  1296. </div>
  1297. </div>
  1298. </section>
  1299. <!-- ===== SECTION: PROTECT ===== -->
  1300. <section id="protect" class="alt">
  1301. <div class="container">
  1302. <h2>🛡️ 办公室人群防护方案</h2>
  1303. <p>基于以上权威研究,以下是办公室工作者可以立即采取的防护措施:</p>
  1304. <h3>✅ 方案一:更换饮水容器</h3>
  1305. <div class="tip-grid">
  1306. <div class="tip-card green">
  1307. <div class="tip-icon">🥤</div>
  1308. <h4>装水容器安全排行榜</h4>
  1309. <p><strong>🥇 不锈钢(304/316)</strong>——化学惰性,零微塑料释放,经久耐用<br>
  1310. <strong>🥇 硼硅玻璃</strong>——零释放,但金属瓶盖涂料需注意,使用前冲洗瓶盖内侧<sup><a href="#ref-20">[20]</a></sup><br>
  1311. <strong>🥈 铝箔水袋</strong>——铝箔阻光、塑料接触面少,但内层仍为PE/PP薄膜,铝离子析出风险待评估<sup><a href="#ref-21">[21]</a></sup><br>
  1312. <strong>🥉 HDPE/PP 塑料瓶</strong>——可重复用,避免装热水和暴晒<br>
  1313. <strong>❌ PET 一次性瓶</strong>——避免重复使用和高温<br>
  1314. <strong>❌ PC 塑料杯</strong>——含BPA,避免使用</p>
  1315. </div>
  1316. <div class="tip-card blue">
  1317. <div class="tip-icon">🧊</div>
  1318. <h4>不用塑料瓶装热水</h4>
  1319. <p>不要在PET塑料瓶中装热水或置于车内暴晒。高温 + 光照 = 微塑料释放高峰。<sup><a href="#ref-2">[2]</a></sup></p>
  1320. </div>
  1321. <div class="tip-card orange">
  1322. <div class="tip-icon">🥡</div>
  1323. <h4>少吃塑料包装外卖</h4>
  1324. <p>不要用塑料袋直接装热食。收到外卖后立即倒入自己的餐具。超市熟食同理。<sup><a href="#ref-4">[4]</a></sup></p>
  1325. </div>
  1326. <div class="tip-card red">
  1327. <div class="tip-icon">🦐</div>
  1328. <h4>不吃海鲜内脏</h4>
  1329. <p>贻贝、牡蛎、扇贝等软体动物微塑料含量最高。吃海鲜要去除胃肠内脏和鳃。<sup><a href="#ref-5">[5]</a></sup></p>
  1330. </div>
  1331. <div class="tip-card green">
  1332. <div class="tip-icon">🪵</div>
  1333. <h4>不用塑料砧板</h4>
  1334. <p>研究估算:用塑料砧板每年可能摄入1450万~7190万个微塑料颗粒。换木/竹砧板。<sup><a href="#ref-4">[4]</a></sup></p>
  1335. </div>
  1336. <div class="tip-card blue">
  1337. <div class="tip-icon">🧋</div>
  1338. <h4>少用塑料吸管</h4>
  1339. <p>饮热饮时塑料吸管释放更多微塑料。咬吸管的行为会额外增加微塑料脱落。<sup><a href="#ref-4">[4]</a></sup></p>
  1340. </div>
  1341. </div>
  1342. <h3 style="margin-top:2rem;">✅ 方案二:电解还原水机(最优解)</h3>
  1343. <p>如果办公室条件允许升级饮水设备,<strong>电解还原水机</strong>是目前综合最优的选择。它在微塑料防护的基础上,额外提供了健康增益:</p>
  1344. <div class="two-col-grid" style="margin:1.2rem 0;">
  1345. <div class="citation-card" style="margin:0;">
  1346. <div class="source">微塑料过滤</div>
  1347. <div class="findings">电解还原水机通常内置活性炭+精密滤芯过滤系统,可有效去除水中微塑料、余氯、重金属等污染物。加装前置过滤器后形成双重过滤,保护电解板的同时进一步提升出水纯净度。</div>
  1348. </div>
  1349. <div class="citation-card" style="margin:0;border-left:4px solid var(--green);">
  1350. <div class="source">矿物质保留</div>
  1351. <div class="findings">与RO纯水机不同,电解还原水机<strong>保留水中天然矿物质</strong>(钙、镁、钾、钠),同时通过电解将水分子团变小,提高矿物质生物利用度。</div>
  1352. </div>
  1353. <div class="citation-card" style="margin:0;border-left:4px solid var(--blue);">
  1354. <div class="source">抗氧化能力</div>
  1355. <div class="findings">电解过程生成<strong>溶解氢(H₂)</strong>,使水具有负氧化还原电位(ORP可达-250mV至-500mV),可选择性中和体内自由基。2024年综述指出氢水具有抗氧化、抗炎、神经保护等多重作用<sup><a href="#ref-19">[19]</a></sup>。</div>
  1356. </div>
  1357. <div class="citation-card" style="margin:0;border-left:4px solid var(--purple);">
  1358. <div class="source">弱碱性还原水</div>
  1359. <div class="findings">电解后的水呈弱碱性(pH 8.5~9.5),含溶解氢(H₂)可选择性中和体内自由基,支持日常抗氧化。</div>
  1360. </div>
  1361. </div>
  1362. <div class="highlight-box teal">
  1363. <p><strong>电解还原水 vs 其他方案的对比优势:</strong></p>
  1364. <p>① 比桶装水:无微塑料/塑化剂污染风险,无需搬运换水,长期成本更低<br>
  1365. ② 比RO纯水机:保留矿物质不流失,出水具有抗氧化活性,不产生酸性废水<br>
  1366. ③ 比自来水烧开:同样安全的前提下,额外提供溶解氢、弱碱性两大健康属性<br>
  1367. ④ 一机多用:可调节pH值出不同用途的水(碱性饮用 / 中性直饮 / 酸性清洁美容)<br><small style="color:var(--text-muted);">⚠ 无论哪种方案,水源本身可能含有抗生素、激素等污染物——这些是微塑料之外的另一种隐形威胁。 → <a href="tap-water-pollution.html" style="color:var(--accent);">自来水中的隐形威胁</a></small></p>
  1368. </div>
  1369. </div>
  1370. </section>
  1371. <!-- ===== SECTION: REFERENCES ===== -->
  1372. <section id="references" style="background:#F7FAFC;padding:3rem 0;">
  1373. <div class="container">
  1374. <h2>📚 科学循证——核心研究出处</h2>
  1375. <p style="font-size:0.85rem;color:var(--text-muted);">以下为本文引用的所有权威来源,点击链接可查看原文</p>
  1376. <div id="ref-1" class="citation-card" style="margin-top:1rem;">
  1377. <div class="source">[1] PNAS (美国国家科学院院刊) · 2024</div>
  1378. <div class="findings">Qian N, et al. Rapid single-particle chemical imaging of nanoplastics by SRS microscopy. <em>Proceedings of the National Academy of Sciences</em>, 2024; 121(3): e2300582121. 利用受激拉曼散射(SRS)显微镜实现纳米塑料的单颗粒化学成像,可在无需标记条件下识别水体中纳米塑料的化学成分和来源。</div>
  1379. <a class="link" href="https://www.pnas.org/doi/10.1073/pnas.2300582121" target="_blank">🔗 https://www.pnas.org/doi/10.1073/pnas.2300582121</a>
  1380. <a class="ref-link-icon" href="../img/ref-pnas.png" target="_blank">📷 查看论文截图</a>
  1381. </div>
  1382. <div id="ref-2" class="citation-card">
  1383. <div class="source">[2] Journal of Hazardous Materials (Elsevier) · 2025 — 环境科学SCI一区顶刊</div>
  1384. <div class="findings">Sajedi S, An C, Chen Z. Unveiling the hidden chronic health risks of nano- and microplastics in single-use plastic water bottles: A review. <em>Journal of Hazardous Materials</em>, 2025; 495: 138948. 系统综述一次性塑料水瓶中纳米/微塑料的长期健康风险,涵盖内分泌干扰、生殖毒性、致癌性等多条证据链。</div>
  1385. <a class="link" href="https://doi.org/10.1016/j.jhazmat.2025.138948" target="_blank">🔗 https://doi.org/10.1016/j.jhazmat.2025.138948</a>
  1386. <a class="ref-link-icon" href="../img/ref-sciencedaily.png" target="_blank">📷 查看论文截图</a>
  1387. </div>
  1388. <div id="ref-3" class="citation-card">
  1389. <div class="source">[3] 中国商业网 (ccwin.cn) · 2026年2月 — 国内商业新闻媒体</div>
  1390. <div class="findings">国内15品牌30批次瓶装水检测:PET瓶620万颗粒/升,纸盒480万,玻璃瓶350万。</div>
  1391. <a class="link" href="http://www.ccwin.cn/article-87006-1.html" target="_blank">🔗 http://www.ccwin.cn/article-87006-1.html</a>
  1392. <a class="ref-link-icon" href="../img/ref-3.png" target="_blank">📷 查看论文截图</a>
  1393. </div>
  1394. <div id="ref-4" class="citation-card">
  1395. <div class="source">[4] Environmental Science & Technology Letters (ACS) · 2024 — 美国化学学会环境科学权威期刊</div>
  1396. <div class="findings">Li Z, Zeng Y, et al. Boiling drinking water effectively removes nanoplastics and microplastics. <em>Environmental Science & Technology Letters</em>, 2024. 研究发现将水煮沸后过滤可去除水中近90%的纳米/微塑料,碳酸钙包裹效应使微塑料随水垢沉淀。</div>
  1397. <a class="link" href="https://pubs.acs.org/doi/10.1021/acs.estlett.4c00081" target="_blank">🔗 https://pubs.acs.org/doi/10.1021/acs.estlett.4c00081</a>
  1398. <br>
  1399. <a class="link" href="https://news.huanbohainews.com.cn/2025-03/28/content_50422269.html" target="_blank">🔗 科普中国解读报道</a>
  1400. <a class="ref-link-icon" href="../img/ref-boiling-water.png" target="_blank">📷 查看论文截图</a>
  1401. </div>
  1402. <div id="ref-5" class="citation-card">
  1403. <div class="source">[5] Frontiers in Public Health · 2025 — PMC12213550 · Frontiers 出版 (瑞士) 公共卫生领域SCI期刊</div>
  1404. <div class="findings">Zhang X, Yang C, et al. Microplastics and human health: unraveling the toxicological pathways and implications for public health. <em>Frontiers in Public Health</em>, 2025; 13. 系统综述微塑料从环境暴露到人体健康效应的毒理学通路,涵盖氧化应激、炎症、免疫毒性、神经毒性等机制。</div>
  1405. <a class="link" href="https://pmc.ncbi.nlm.nih.gov/articles/PMC12213550/" target="_blank">🔗 https://pmc.ncbi.nlm.nih.gov/articles/PMC12213550/</a>
  1406. <a class="ref-link-icon" href="../img/ref-pmc-2025-review.png" target="_blank">📷 查看论文截图</a>
  1407. </div>
  1408. <div id="ref-6" class="citation-card">
  1409. <div class="source">[6] 世界卫生组织 (WHO) · 2019</div>
  1410. <div class="findings">Microplastics in drinking-water. Geneva: World Health Organization; 2019. ISBN: 978-92-4-151619-8. WHO 首次系统评估饮用水微塑料的健康风险,指出微量暴露下健康风险较低,但呼吁减少塑料污染以降低长期风险。</div>
  1411. <a class="link" href="https://www.who.int/publications/i/item/9789241516198" target="_blank">🔗 https://www.who.int/publications/i/item/9789241516198</a>
  1412. <a class="ref-link-icon" href="../img/ref-who-report.png" target="_blank">📷 查看报告截图</a>
  1413. </div>
  1414. <div id="ref-7" class="citation-card">
  1415. <div class="source">[7] Antioxidants (MDPI) · 2024 — PMC11117644 · MDPI出版 抗氧化剂SCI期刊</div>
  1416. <div class="findings">Kadac-Czapska, et al. Microplastics and Oxidative Stress—Current Problems and Prospects. <em>Antioxidants</em>, 2024; 13(5): 579. PMCID PMC11117644。系统综述微塑料诱导氧化应激的机制,微塑料已在人体血液、肠道、肺、肝、脾、肾、胎盘、心脏组织、颈动脉斑块、大脑中被检出。</div>
  1417. <a class="link" href="https://pmc.ncbi.nlm.nih.gov/articles/PMC11117644/" target="_blank">🔗 https://pmc.ncbi.nlm.nih.gov/articles/PMC11117644/</a>
  1418. <a class="ref-link-icon" href="../img/ref-7.png" target="_blank">📷 查看论文截图</a>
  1419. </div>
  1420. <div id="ref-8" class="citation-card">
  1421. <div class="source">[8] 新英格兰医学杂志 (NEJM) · 2024 — 全球排名第一的综合性医学期刊</div>
  1422. <div class="findings">Marfella R, et al. Microplastics and Nanoplastics in Atheromas and Cardiovascular Events. <em>N Engl J Med</em>, 2024; 390:900-910. 首次在人体颈动脉斑块中检出微塑料,且斑块中含微塑料的患者发生心梗、中风等心血管事件的概率显著升高。</div>
  1423. <a class="link" href="https://www.nejm.org/doi/full/10.1056/NEJMoa2309822" target="_blank">🔗 https://www.nejm.org/doi/full/10.1056/NEJMoa2309822</a>
  1424. <a class="ref-link-icon" href="../img/ref-nejm.png" target="_blank">📷 查看论文截图</a>
  1425. </div>
  1426. <div id="ref-9" class="citation-card">
  1427. <div class="source">[9] Chemosphere (Elsevier) · 2024 — 维也纳大学 / 维也纳医科大学</div>
  1428. <div class="findings">Pichler V, Kenner L, et al. Microplastics role in cell migration and distribution during cancer cell division. <em>Chemosphere</em>, 2024; 353: 141463. 纳米级微塑料在细胞分裂中传递给子细胞且永不消除,促进结直肠癌细胞迁移,可能加速肿瘤转移。</div>
  1429. <a class="link" href="https://doi.org/10.1016/j.chemosphere.2024.141463" target="_blank">🔗 https://doi.org/10.1016/j.chemosphere.2024.141463</a>
  1430. <a class="ref-link-icon" href="../img/ref-9.png" target="_blank">📷 查看论文截图</a>
  1431. </div>
  1432. <div id="ref-10" class="citation-card">
  1433. <div class="source">[10] BMC Cardiovascular Disorders (Springer) · 2025</div>
  1434. <div class="findings">Jahedi F, et al. From pollution to palpitations: the heart's silent battle with microplastics. <em>BMC Cardiovascular Disorders</em>, 2025; 25: 837. 系统综述72篇研究,证实微塑料可通过氧化应激、炎症、细胞凋亡等机制损害心脏功能,导致心率改变、心包水肿、心肌纤维化。</div>
  1435. <a class="link" href="https://pmc.ncbi.nlm.nih.gov/articles/PMC12648859/" target="_blank">🔗 https://pmc.ncbi.nlm.nih.gov/articles/PMC12648859/</a>
  1436. <a class="ref-link-icon" href="../img/ref-10.png" target="_blank">📷 查看论文截图</a>
  1437. </div>
  1438. <div id="ref-11" class="citation-card">
  1439. <div class="source">[11] Antioxidants (MDPI) · 2025</div>
  1440. <div class="findings">Wang Z, et al. Antioxidant Intervention Against Microplastic Hazards. <em>Antioxidants</em>, 2025; 14(7): 797. 系统梳理微塑料的氧化应激机制和天然抗氧化剂(维生素C、姜黄素、槲皮素等)的干预作用与局限性。</div>
  1441. <a class="link" href="https://pmc.ncbi.nlm.nih.gov/articles/PMC12291741/" target="_blank">🔗 https://pmc.ncbi.nlm.nih.gov/articles/PMC12291741/</a>
  1442. <a class="ref-link-icon" href="../img/ref-11.png" target="_blank">📷 查看论文截图</a>
  1443. </div>
  1444. <div id="ref-12" class="citation-card">
  1445. <div class="source">[12] Environment International (Elsevier) · 2023 — 中科院沈阳应用生态研究所</div>
  1446. <div class="findings">Zhang Z, et al. Continuous oral exposure to micro- and nanoplastics induced gut microbiota dysbiosis, intestinal barrier and immune dysfunction in adult mice. <em>Environment International</em>, 2023; 182: 108353. 微塑料改变肠道菌群结构(降低 Firmicutes/Bacteroidetes 比值)、破坏肠道屏障功能、抑制肠道免疫。</div>
  1447. <a class="link" href="https://www.sciencedirect.com/science/article/pii/S0160412023004650" target="_blank">🔗 https://doi.org/10.1016/j.envint.2023.108353</a>
  1448. <a class="ref-link-icon" href="../img/ref-12.png" target="_blank">📷 查看论文截图</a>
  1449. </div>
  1450. <div id="ref-13" class="citation-card">
  1451. <div class="source">[13] Nature Medicine (Springer Nature) · 2025 — 新墨西哥大学</div>
  1452. <div class="findings">Nihart AJ, Campen M, et al. Bioaccumulation of microplastics in decedent human brains. <em>Nature Medicine</em>, 2025; 31: 1114–1119. 人脑微塑料浓度显著高于肝脏和肾脏;2016–2024年间浓度增加50%;痴呆症患者脑中微塑料浓度更高。</div>
  1453. <a class="link" href="https://www.nature.com/articles/s41591-024-03453-1" target="_blank">🔗 https://www.nature.com/articles/s41591-024-03453-1</a>
  1454. <a class="ref-link-icon" href="../img/ref-13.png" target="_blank">📷 查看论文截图</a>
  1455. </div>
  1456. <div id="ref-14" class="citation-card">
  1457. <div class="source">[14] Best Practice & Research Clinical Endocrinology & Metabolism (Elsevier) · 2021 — 内分泌代谢领域临床综述权威期刊</div>
  1458. <div class="findings">Biemann R, Blüher M, Isermann B. Exposure to endocrine-disrupting compounds such as phthalates and bisphenol A is associated with an increased risk for obesity. <em>Best Practice & Research Clinical Endocrinology & Metabolism</em>, 2021; 35(5): 101546. 综述塑化剂(邻苯二甲酸酯)和双酚A等内分泌干扰物暴露与肥胖风险的关联,揭示塑料化学物质通过干扰激素代谢促进肥胖的机制。</div>
  1459. <a class="link" href="https://doi.org/10.1016/j.beem.2021.101546" target="_blank">🔗 doi:10.1016/j.beem.2021.101546</a>
  1460. <a class="ref-link-icon" href="../img/ref-14.png" target="_blank">📷 查看论文截图</a>
  1461. </div>
  1462. <div id="ref-15" class="citation-card">
  1463. <div class="source">[15] Endocrine and Metabolic Science (Elsevier) · 2026 — 内分泌代谢科学期刊</div>
  1464. <div class="findings">Mondal R, et al. Human exposure to microplastics and insights into microplastics as obesogens and other metabolic disorders. <em>Endocrine and Metabolic Science</em>, 2026; 100318. 系统阐述微塑料作为"致肥因子(obesogens)"的作用机制,包括干扰脂质代谢、诱导胰岛素抵抗、破坏能量平衡等通路。</div>
  1465. <a class="link" href="https://doi.org/10.1016/j.endmetsci.2026.100318" target="_blank">🔗 doi:10.1016/j.endmetsci.2026.100318</a>
  1466. <a class="ref-link-icon" href="../img/ref-15.png" target="_blank">📷 查看论文截图</a>
  1467. </div>
  1468. <div id="ref-16" class="citation-card">
  1469. <div class="source">[16] FDA (美国食品药品监督管理局) · Reverse Osmosis</div>
  1470. <div class="findings">反渗透技术用于制造透析用水、注射用水。RO膜可去除水中99%以上的溶解性固体,包括矿物质。</div>
  1471. <a class="link" href="https://www.fda.gov/inspections-compliance-enforcement-and-criminal-investigations/inspection-technical-guides/reverse-osmosis" target="_blank">🔗 FDA 技术指南</a>
  1472. <a class="ref-link-icon" href="../img/ref-16.png" target="_blank">📷 查看截图</a>
  1473. </div>
  1474. <div id="ref-17" class="citation-card">
  1475. <div class="source">[17] 世界卫生组织 (WHO) · 2005</div>
  1476. <div class="findings">Nutrients in Drinking Water. WHO 报告第12章"HEALTH RISKS FROM DRINKING DEMINERALISED WATER"明确指出:长期饮用去矿物质水可能对健康产生负面影响,包括增加矿物质流失、心血管风险和代谢负担。</div>
  1477. <a class="link" href="https://iris.who.int/bitstreams/ee809f3c-d909-4138-9242-002bce630853/download" target="_blank">🔗 WHO 第12章原文 PDF (IRIS)</a>
  1478. <a class="ref-link-icon" href="../img/ref-17.png" target="_blank">📷 查看截图</a>
  1479. </div>
  1480. <div id="ref-18" class="citation-card">
  1481. <div class="source">[18] 中科院城市环境研究所 · 2020</div>
  1482. <div class="findings">家用净水器饮水安全问答:膜过滤技术存在微生物泄露风险,滤芯需定期更换;不建议长期饮用RO纯水,超滤/纳滤更适宜日常所需。</div>
  1483. <a class="link" href="https://iue.cas.cn/xwzx/mtsm/202009/P020200925375787224817.pdf" target="_blank">🔗 中科院原文 PDF</a>
  1484. <a class="ref-link-icon" href="../img/ref-18.png" target="_blank">📷 查看截图</a>
  1485. </div>
  1486. <div id="ref-19" class="citation-card">
  1487. <div class="source">[19] 科学网(中国科学院主办)· 2024 — 孙学军教授(第二军医大学)氢医学综述</div>
  1488. <div class="findings">氢水的健康价值:抗炎症抗氧化【综述】。电解氢水具有抗氧化、抗炎、神经保护、抗凋亡、抗过敏等作用。与普通氢水相比,电解氢水的活性氧清除能力约为5倍。</div>
  1489. <a class="link" href="https://blog.sciencenet.cn/blog-41174-1424107.html" target="_blank">🔗 科学网 孙学军教授综述</a>
  1490. <a class="ref-link-icon" href="../img/ref-19.png" target="_blank">📷 查看截图</a>
  1491. </div>
  1492. <div id="ref-20" class="citation-card">
  1493. <div class="source">[20] ANSES (法国食品环境安全署) · 2025 — Journal of Food Composition and Analysis</div>
  1494. <div class="findings">Chaïb I, et al. Microplastic contamination in beverages: Glass bottle caps as an overlooked source. <em>Journal of Food Composition and Analysis</em>, 2025. ANSES研究发现:玻璃瓶饮料的微塑料含量高于塑料瓶和铝罐,污染源自瓶盖漆脱落;建议灌装前预清洗瓶盖(水/乙醇/水三步冲洗可减少约70%)。</div>
  1495. <a class="link" href="https://www.anses.fr/en/content/caps-glass-bottles-contaminate-beverages-microplastics" target="_blank">🔗 ANSES 官方报告</a>
  1496. <br>
  1497. <a class="link" href="https://www.sciencedirect.com/science/article/pii/S0889157525005344" target="_blank">🔗 ScienceDirect 原文</a>
  1498. <a class="ref-link-icon" href="../img/ref-20.png" target="_blank">📷 查看论文截图</a>
  1499. </div>
  1500. <div id="ref-21" class="citation-card">
  1501. <div class="source">[21] Heliyon (Cell Press) · 2024 — 南加州大学</div>
  1502. <div class="findings">Wang Y, Wang Y. Assessing microplastic contamination in soda beverages: A multi-city, multi-container laser direct infrared spectroscopy study. <em>Heliyon</em>, 2024; 10(12): e32805. 对美国4城市同一品牌汽水的铝罐、玻璃瓶、塑料瓶三种包装检测发现:地理来源对微塑料含量的影响大于包装类型;铝罐和玻璃瓶因瓶盖/密封结构复杂,微塑料含量与塑料瓶无显著差异。</div>
  1503. <a class="link" href="https://doi.org/10.1016/j.heliyon.2024.e32805" target="_blank">🔗 https://doi.org/10.1016/j.heliyon.2024.e32805</a>
  1504. <a class="ref-link-icon" href="../img/ref-21.png" target="_blank">📷 查看论文截图</a>
  1505. </div>
  1506. <div id="ref-22" class="citation-card">
  1507. <div class="source">[22] WWF / 纽卡斯尔大学 (澳大利亚) · 2019</div>
  1508. <div class="findings">World Wildlife Fund (WWF) & University of Newcastle, Australia. No Plastic in Nature: Assessing Plastic Ingestion from Nature to People. 2019. 综合50余篇研究数据,推算普通人每周通过食物和水摄入约5克微塑料(≈一张银行卡重量),主要来自饮用水(含瓶装水和自来水)、海鲜、食盐、啤酒等。</div>
  1509. <a class="link" href="https://www.worldwildlife.org/publications/no-plastic-in-nature-assessing-plastic-ingestion-from-nature-to-people" target="_blank">🔗 WWF 报告原文</a>
  1510. </div>
  1511. <div class="highlight-box blue" style="margin-top:2rem;">
  1512. <p><strong>免责声明</strong>:本文内容仅供科普参考,不构成医疗建议。研究证据截至 2026 年 7 月。如有健康疑虑请咨询专业医师。</p>
  1513. </div>
  1514. </div>
  1515. </section>
  1516. <!-- Footer (shared) -->
  1517. <div id="footer-placeholder"></div>
  1518. <script src="js/footer.js"></script>
  1519. <script>
  1520. (function(){
  1521. var track = document.getElementById('compareCarousel');
  1522. if (!track) return;
  1523. track = track.querySelector('.carousel-track');
  1524. var dots = document.querySelectorAll('.carousel-dot');
  1525. var prev = document.querySelector('.carousel-prev');
  1526. var next = document.querySelector('.carousel-next');
  1527. var cards = track.querySelectorAll('.carousel-card');
  1528. if (!cards.length) return;
  1529. var gap = 16; // 1rem in px
  1530. var updateDots = function(){
  1531. var scrollLeft = track.scrollLeft;
  1532. var cardWidth = cards[0].offsetWidth + gap;
  1533. var activeIndex = Math.round(scrollLeft / cardWidth);
  1534. if (activeIndex < 0) activeIndex = 0;
  1535. if (activeIndex >= dots.length) activeIndex = dots.length - 1;
  1536. dots.forEach(function(d, i){
  1537. d.classList.toggle('active', i === activeIndex);
  1538. });
  1539. };
  1540. track.addEventListener('scroll', updateDots);
  1541. dots.forEach(function(dot){
  1542. dot.addEventListener('click', function(){
  1543. var index = parseInt(this.getAttribute('data-index'));
  1544. if (cards[index]) {
  1545. cards[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
  1546. }
  1547. });
  1548. });
  1549. if (prev) {
  1550. prev.addEventListener('click', function(){
  1551. var cardWidth = cards[0].offsetWidth + gap;
  1552. track.scrollBy({ left: -cardWidth, behavior: 'smooth' });
  1553. });
  1554. }
  1555. if (next) {
  1556. next.addEventListener('click', function(){
  1557. var cardWidth = cards[0].offsetWidth + gap;
  1558. track.scrollBy({ left: cardWidth, behavior: 'smooth' });
  1559. });
  1560. }
  1561. })();
  1562. </script>
  1563. </body>
  1564. </html>