From a8d8c02a4482092c8d752956a8616c25c2899424 Mon Sep 17 00:00:00 2001
From: zty <zty18395607196@gmail.com>
Date: Tue, 7 Jul 2026 04:07:00 -0400
Subject: [PATCH] feat(web): wire landing news cards to article pages

---
 .../iapip-web/src/pages/landing/index.tsx          | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/空气质量预测/源码/用户端/iapip-web/src/pages/landing/index.tsx b/空气质量预测/源码/用户端/iapip-web/src/pages/landing/index.tsx
index e0287b3..50d77d1 100644
--- a/空气质量预测/源码/用户端/iapip-web/src/pages/landing/index.tsx
+++ b/空气质量预测/源码/用户端/iapip-web/src/pages/landing/index.tsx
@@ -4,6 +4,7 @@ import { LOC_STOR_KEY } from '@/common/constants'
 import PhoneAuthModal from '@/components/phone-auth-modal'
 import api from '@/services/api'
 import type { EcoMaterial } from '@/services/api/material'
+import { articles } from '@/common/articles'
 import './landing.css'
 
 const LeafIcon = () => (
@@ -25,12 +26,7 @@ const stats = [
   { n: '6 项', t: '污染物 · 甲醛/苯/TVOC/氨/氡/VOC' },
   { n: '2 部', t: '国标依据 · 18883 / 50325' }
 ]
-const news = [
-  { tag: '政策解读', date: '专栏 · 2026.05', title: '两大国标怎么读?GB/T 18883 与 GB 50325 的差别', desc: '一个是"住进去后"的室内空气质量标准,一个是"交工验收时"的工程控制标准——限值与采样条件并不相同,看懂它们才能判断房子到底达不达标。' },
-  { tag: '科普', date: '专栏 · 2026.04', title: '新装住宅的甲醛,为什么能持续释放 3–15 年?', desc: '人造板里的脲醛树脂胶会缓慢分解释放甲醛,释放周期长、受温湿度影响大。短期通风只能降一时浓度,真正的关键在源头材料的选择。' },
-  { tag: '指南', date: '专栏 · 2026.03', title: '夏天为什么更容易超标?温度与释放速率', desc: '温度每升高若干度,材料的甲醛释放速率会明显增大。这也是"冬天测达标、夏天又超标"的原因。预测时把环境温湿度纳入计算,结果才靠谱。' },
-  { tag: '方法', date: '专栏 · 2026.02', title: '先预测,再决定要不要做 CMA 检测', desc: '上门检测有成本。用本系统先做一次免费预测、定位高风险房间与主要污染材料,再有针对性地安排第三方 CMA 检测,省钱也更有的放矢。' }
-]
+const news = articles
 const cases = [
   { type: '住宅 · I类民用建筑', name: '锦绣华庭 · 主卧', meta: '主源:多层实木复合地板 · 人造板衣柜', w1: 82, v1: '0.18', w2: 36, v2: '0.08', chip: '甲醛达标' },
   { type: '住宅 · I类民用建筑', name: '翠湖天地 · 儿童房', meta: '主源:人造板衣柜 · 壁纸基膜', w1: 95, v1: '0.21', w2: 32, v2: '0.07', chip: '甲醛达标' },
@@ -123,18 +119,18 @@ export default function Landing() {
         <div className="wrap">
           <div className="sec-head">
             <div><div className="sec-tag">健康装修科普</div><h2 className="sec-h">读懂装修污染,先把知识装进脑子</h2></div>
-            <a className="btn" onClick={openPredict}>全部文章</a>
+            <a className="btn" onClick={() => history.push('/articles')}>全部文章</a>
           </div>
           <div className="carousel">
             <div className="cviewport">
               <div className="ctrack" style={{ transform: `translateX(${-cur * 100}%)` }}>
                 {news.map((n, i) => (
-                  <article className="cslide" key={i}>
+                  <article className="cslide" key={i} style={{ cursor: 'pointer' }} onClick={() => history.push('/article/' + n.id)}>
                     <div className="cslide-img"><span className="cslide-tag">{n.tag}</span><div className="img-ph">资讯配图</div></div>
                     <div className="cslide-body">
                       <div className="cslide-date">{n.date}</div>
                       <h3>{n.title}</h3>
-                      <p>{n.desc}</p>
+                      <p>{n.summary}</p>
                       <span className="cslide-more">阅读全文<ArrowIcon /></span>
                     </div>
                   </article>