|
|
@@ -531,6 +531,127 @@
|
|
|
.compare-table tr:last-child td { border-bottom: none; }
|
|
|
.compare-table .highlight-cell { background: var(--green-light); font-weight: 600; }
|
|
|
|
|
|
+ /* ===== Comparison Carousel (Mobile) ===== */
|
|
|
+ .compare-carousel { display: none; }
|
|
|
+ .carousel-track {
|
|
|
+ display: flex;
|
|
|
+ gap: 1rem;
|
|
|
+ overflow-x: auto;
|
|
|
+ scroll-snap-type: x mandatory;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ scrollbar-width: none;
|
|
|
+ padding: 0.5rem 0 1rem;
|
|
|
+ }
|
|
|
+ .carousel-track::-webkit-scrollbar { display: none; }
|
|
|
+ .carousel-card {
|
|
|
+ flex: 0 0 calc(100% - 2rem);
|
|
|
+ scroll-snap-align: start;
|
|
|
+ background: white;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ box-shadow: var(--shadow-card);
|
|
|
+ padding: 1.5rem;
|
|
|
+ border-top: 4px solid #CBD5E0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .carousel-card .card-badge {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 0.7rem;
|
|
|
+ font-weight: 700;
|
|
|
+ padding: 0.25rem 0.75rem;
|
|
|
+ border-radius: 999px;
|
|
|
+ margin-bottom: 0.75rem;
|
|
|
+ letter-spacing: 0.02em;
|
|
|
+ }
|
|
|
+ .carousel-card .card-badge.danger { background: #FFF5F5; color: #C53030; }
|
|
|
+ .carousel-card .card-badge.success { background: #F0FFF4; color: #276749; }
|
|
|
+ .carousel-card .card-badge.warning { background: #FFFFF0; color: #975A16; }
|
|
|
+ .carousel-card .card-badge.primary { background: #EBF8FF; color: #2B6CB0; }
|
|
|
+ .carousel-card.border-danger { border-top-color: #E53E3E; }
|
|
|
+ .carousel-card.border-success { border-top-color: #38A169; }
|
|
|
+ .carousel-card.border-warning { border-top-color: #DD6B20; }
|
|
|
+ .carousel-card.border-primary { border-top-color: #3182CE; }
|
|
|
+ .carousel-card .card-title {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ padding-bottom: 0.75rem;
|
|
|
+ border-bottom: 1px solid #E2E8F0;
|
|
|
+ }
|
|
|
+ .carousel-card .criteria-list { list-style: none; }
|
|
|
+ .carousel-card .criteria-list li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 0.6rem 0;
|
|
|
+ border-bottom: 1px dashed #EDF2F7;
|
|
|
+ gap: 0.5rem;
|
|
|
+ }
|
|
|
+ .carousel-card .criteria-list li:last-child { border-bottom: none; }
|
|
|
+ .carousel-card .criterion-label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text-primary);
|
|
|
+ width: 5.5rem;
|
|
|
+ }
|
|
|
+ .carousel-card .criterion-value {
|
|
|
+ font-size: 0.8rem;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ text-align: right;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ .carousel-card .criterion-value .highlight-cell { background: transparent; font-weight: 600; }
|
|
|
+ .carousel-card .card-footer {
|
|
|
+ margin-top: 0.75rem;
|
|
|
+ padding-top: 0.75rem;
|
|
|
+ border-top: 1px solid #E2E8F0;
|
|
|
+ font-size: 0.85rem;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .carousel-card .card-footer.danger { color: #C53030; }
|
|
|
+ .carousel-card .card-footer.success { color: #276749; }
|
|
|
+ .carousel-card .card-footer.warning { color: #975A16; }
|
|
|
+ .carousel-card .card-footer.primary { color: #2B6CB0; }
|
|
|
+ .carousel-nav {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 1rem;
|
|
|
+ margin-top: 0.75rem;
|
|
|
+ }
|
|
|
+ .carousel-arrow {
|
|
|
+ width: 36px; height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #E2E8F0;
|
|
|
+ background: white;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ font-size: 1.3rem;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: all 0.2s;
|
|
|
+ box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
|
|
+ }
|
|
|
+ .carousel-arrow:hover { background: var(--bg-alt); color: var(--text-primary); }
|
|
|
+ .carousel-dots {
|
|
|
+ display: flex;
|
|
|
+ gap: 0.5rem;
|
|
|
+ }
|
|
|
+ .carousel-dot {
|
|
|
+ width: 8px; height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #CBD5E0;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+ .carousel-dot.active {
|
|
|
+ background: var(--blue);
|
|
|
+ width: 24px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
/* ===== Responsive ===== */
|
|
|
@media (max-width: 640px) {
|
|
|
.hero { padding: 4rem 1rem 3rem; min-height: auto; }
|
|
|
@@ -545,6 +666,8 @@
|
|
|
section { padding: 2.5rem 0; }
|
|
|
h2 { font-size: 1.4rem; }
|
|
|
.highlight-box { padding: 1.25rem; }
|
|
|
+ .compare-table-wrapper { display: none; }
|
|
|
+ .compare-carousel { display: block; }
|
|
|
.compare-table { font-size: 0.8rem; }
|
|
|
.compare-table th, .compare-table td { padding: 0.5rem 0.75rem; }
|
|
|
}
|
|
|
@@ -958,7 +1081,7 @@
|
|
|
<h2>📊 四大饮水方案全面对比</h2>
|
|
|
<p>基于以上风险分析，我们将办公室常见的四种饮水方案放在同一张表中清晰对比：</p>
|
|
|
|
|
|
- <div style="overflow-x:auto;">
|
|
|
+ <div class="compare-table-wrapper" style="overflow-x:auto;">
|
|
|
<table class="compare-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
@@ -1037,6 +1160,186 @@
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- ===== Mobile Carousel ===== -->
|
|
|
+ <div class="compare-carousel" id="compareCarousel">
|
|
|
+ <div class="carousel-track">
|
|
|
+ <!-- Card 1: 桶装水/瓶装水 -->
|
|
|
+ <div class="carousel-card border-danger" data-index="0">
|
|
|
+ <span class="card-badge danger">❌ 风险最高</span>
|
|
|
+ <div class="card-title">📦 桶装水/瓶装水</div>
|
|
|
+ <ul class="criteria-list">
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">微塑料</span>
|
|
|
+ <span class="criterion-value">620万颗粒/升，随时间+温度递增<sup><a href="#ref-3">[3]</a></sup></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">抗生素/污染物</span>
|
|
|
+ <span class="criterion-value">出厂检测有限，难以保证去除</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">矿物质</span>
|
|
|
+ <span class="criterion-value">含天然矿物质（但伴塑料污染）</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">BPA/塑化剂</span>
|
|
|
+ <span class="criterion-value">高温暴晒释放BPA、锑、邻苯二甲酸酯</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">二次污染</span>
|
|
|
+ <span class="criterion-value">饮水机+桶身细菌滋生，密封垫磨损</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">健康增益</span>
|
|
|
+ <span class="criterion-value">无</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">致肥/焦虑风险</span>
|
|
|
+ <span class="criterion-value">⚠️ BPA/塑化剂关联致肥+焦虑<sup><a href="#ref-14">[14]</a></sup></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">综合成本</span>
|
|
|
+ <span class="criterion-value">高：每桶12~22元+饮水机折旧</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="card-footer danger">❌ 风险最高</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Card 2: 自来水（烧开后） -->
|
|
|
+ <div class="carousel-card border-success" data-index="1">
|
|
|
+ <span class="card-badge success">✅ 安全经济之选</span>
|
|
|
+ <div class="card-title">🚰 自来水（烧开后）</div>
|
|
|
+ <ul class="criteria-list">
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">微塑料</span>
|
|
|
+ <span class="criterion-value">~200万/升（原水），烧开去除84%+<sup><a href="#ref-4">[4]</a></sup></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">抗生素/污染物</span>
|
|
|
+ <span class="criterion-value" style="color:#C53030;">❌ 烧开无法去除抗生素、农药、避孕药等</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">矿物质</span>
|
|
|
+ <span class="criterion-value" style="color:#276749;font-weight:600;">✅ 完整保留钙镁等</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">BPA/塑化剂</span>
|
|
|
+ <span class="criterion-value">无额外污染</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">二次污染</span>
|
|
|
+ <span class="criterion-value">低（即烧即饮）</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">健康增益</span>
|
|
|
+ <span class="criterion-value">无（仅为安全饮水）</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">致肥/焦虑风险</span>
|
|
|
+ <span class="criterion-value" style="color:#276749;font-weight:600;">❌ 无</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">综合成本</span>
|
|
|
+ <span class="criterion-value" style="color:#276749;font-weight:600;">✅ 极低</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="card-footer success">✅ 安全经济之选</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Card 3: RO反渗透纯水机 -->
|
|
|
+ <div class="carousel-card border-warning" data-index="2">
|
|
|
+ <span class="card-badge warning">⚠️ 缺矿物质</span>
|
|
|
+ <div class="card-title">💧 RO反渗透纯水机</div>
|
|
|
+ <ul class="criteria-list">
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">微塑料</span>
|
|
|
+ <span class="criterion-value">RO膜孔径0.0001μm，可截留<sup><a href="#ref-16">[16]</a></sup></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">抗生素/污染物</span>
|
|
|
+ <span class="criterion-value">RO膜可截留大部分大分子有机物</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">矿物质</span>
|
|
|
+ <span class="criterion-value" style="color:#C53030;">❌ 完全去除所有矿物<sup><a href="#ref-16">[16]</a></sup></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">BPA/塑化剂</span>
|
|
|
+ <span class="criterion-value">小分子有机物部分可通过RO膜</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">二次污染</span>
|
|
|
+ <span class="criterion-value">中高：滤芯久不换滋生细菌<sup><a href="#ref-18">[18]</a></sup></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">健康增益</span>
|
|
|
+ <span class="criterion-value">无（纯水呈弱酸性）</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">致肥/焦虑风险</span>
|
|
|
+ <span class="criterion-value">不确定（无矿物水可能代谢负担）<sup><a href="#ref-17">[17]</a></sup></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">综合成本</span>
|
|
|
+ <span class="criterion-value">中高：设备+换芯+废水（1:3~7）</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="card-footer warning">⚠️ 缺矿物质</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Card 4: 电解还原水机 -->
|
|
|
+ <div class="carousel-card border-primary" data-index="3">
|
|
|
+ <span class="card-badge primary">🥇 综合最优解</span>
|
|
|
+ <div class="card-title">⚡ 电解还原水机</div>
|
|
|
+ <ul class="criteria-list">
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">微塑料</span>
|
|
|
+ <span class="criterion-value" style="color:#276749;font-weight:600;">多层过滤可有效截留</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">抗生素/污染物</span>
|
|
|
+ <span class="criterion-value" style="color:#276749;font-weight:600;">活性炭+UF过滤有效去除余氯、农残、激素</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">矿物质</span>
|
|
|
+ <span class="criterion-value" style="color:#276749;font-weight:600;">✅ 完整保留，生物利用度更优</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">BPA/塑化剂</span>
|
|
|
+ <span class="criterion-value" style="color:#276749;font-weight:600;">有效过滤（活性炭+UF膜吸附）</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">二次污染</span>
|
|
|
+ <span class="criterion-value">低（定期换芯即可）</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">健康增益</span>
|
|
|
+ <span class="criterion-value" style="color:#2B6CB0;font-weight:600;">🏆 溶解氢抗氧化（ORP -250~-500mV）<sup><a href="#ref-19">[19]</a></sup></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">致肥/焦虑风险</span>
|
|
|
+ <span class="criterion-value" style="color:#276749;font-weight:600;">❌ 无</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="criterion-label">综合成本</span>
|
|
|
+ <span class="criterion-value">中高：设备+换芯</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="card-footer primary">🥇 综合最优解</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="carousel-nav">
|
|
|
+ <button class="carousel-arrow carousel-prev" aria-label="上一项">‹</button>
|
|
|
+ <div class="carousel-dots">
|
|
|
+ <span class="carousel-dot active" data-index="0"></span>
|
|
|
+ <span class="carousel-dot" data-index="1"></span>
|
|
|
+ <span class="carousel-dot" data-index="2"></span>
|
|
|
+ <span class="carousel-dot" data-index="3"></span>
|
|
|
+ </div>
|
|
|
+ <button class="carousel-arrow carousel-next" aria-label="下一项">›</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="two-col-grid" style="margin-top:1.5rem;">
|
|
|
<div class="highlight-box green" style="margin:0;">
|
|
|
<p><strong>自来水烧开</strong>——在微塑料层面是最安全经济的方案，但需注意：<strong>烧开无法去除抗生素、农药残留、避孕药等化学污染物</strong>。若水源存在此类风险，建议搭配活性炭滤水壶或选择过滤净水方案。结论：<strong>预算有限时的最优入门方案，但非完美方案</strong>。</p>
|
|
|
@@ -1297,5 +1600,54 @@
|
|
|
<!-- Footer (shared) -->
|
|
|
<div id="footer-placeholder"></div>
|
|
|
<script src="js/footer.js"></script>
|
|
|
+<script>
|
|
|
+(function(){
|
|
|
+ var track = document.getElementById('compareCarousel');
|
|
|
+ if (!track) return;
|
|
|
+ track = track.querySelector('.carousel-track');
|
|
|
+ var dots = document.querySelectorAll('.carousel-dot');
|
|
|
+ var prev = document.querySelector('.carousel-prev');
|
|
|
+ var next = document.querySelector('.carousel-next');
|
|
|
+ var cards = track.querySelectorAll('.carousel-card');
|
|
|
+ if (!cards.length) return;
|
|
|
+
|
|
|
+ var gap = 16; // 1rem in px
|
|
|
+ var updateDots = function(){
|
|
|
+ var scrollLeft = track.scrollLeft;
|
|
|
+ var cardWidth = cards[0].offsetWidth + gap;
|
|
|
+ var activeIndex = Math.round(scrollLeft / cardWidth);
|
|
|
+ if (activeIndex < 0) activeIndex = 0;
|
|
|
+ if (activeIndex >= dots.length) activeIndex = dots.length - 1;
|
|
|
+ dots.forEach(function(d, i){
|
|
|
+ d.classList.toggle('active', i === activeIndex);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ track.addEventListener('scroll', updateDots);
|
|
|
+
|
|
|
+ dots.forEach(function(dot){
|
|
|
+ dot.addEventListener('click', function(){
|
|
|
+ var index = parseInt(this.getAttribute('data-index'));
|
|
|
+ if (cards[index]) {
|
|
|
+ cards[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ if (prev) {
|
|
|
+ prev.addEventListener('click', function(){
|
|
|
+ var cardWidth = cards[0].offsetWidth + gap;
|
|
|
+ track.scrollBy({ left: -cardWidth, behavior: 'smooth' });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (next) {
|
|
|
+ next.addEventListener('click', function(){
|
|
|
+ var cardWidth = cards[0].offsetWidth + gap;
|
|
|
+ track.scrollBy({ left: cardWidth, behavior: 'smooth' });
|
|
|
+ });
|
|
|
+ }
|
|
|
+})();
|
|
|
+</script>
|
|
|
</body>
|
|
|
</html>
|
