diff --git a/空气质量预测/源码/用户端/iapip-web/src/pages/articles/index.tsx b/空气质量预测/源码/用户端/iapip-web/src/pages/articles/index.tsx
new file mode 100644
index 0000000..94845ed
--- /dev/null
+++ b/空气质量预测/源码/用户端/iapip-web/src/pages/articles/index.tsx
@@ -0,0 +1,24 @@
+import { history } from '@umijs/max'
+import { articles } from '@/common/articles'
+
+export default function ArticleList() {
+    return (
+        <div style={{ maxWidth: 820, margin: '0 auto', padding: '32px 16px 64px' }}>
+            <a onClick={() => history.push('/landing')} style={{ color: '#888' }}>← 返回首页</a>
+            <h1 style={{ fontSize: 24, margin: '16px 0 24px' }}>健康装修科普</h1>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                {articles.map(a => (
+                    <article
+                        key={a.id}
+                        onClick={() => history.push('/article/' + a.id)}
+                        style={{ cursor: 'pointer', padding: 20, border: '1px solid #eee', borderRadius: 8, transition: 'box-shadow .2s' }}
+                    >
+                        <div style={{ color: '#B43533', fontSize: 13 }}>{a.tag} · {a.date}</div>
+                        <h2 style={{ fontSize: 18, margin: '8px 0' }}>{a.title}</h2>
+                        <p style={{ color: '#666', fontSize: 14, lineHeight: 1.7, margin: 0 }}>{a.summary}</p>
+                    </article>
+                ))}
+            </div>
+        </div>
+    )
+}