diff --git a/src/cms/detail/index.scss b/src/cms/detail/index.scss
new file mode 100644
index 0000000..cf68b09
--- /dev/null
+++ b/src/cms/detail/index.scss
@@ -0,0 +1,50 @@
+.article-detail-page {
+  padding: 15px;
+  background-color: #fff;
+
+  .article-header {
+    margin-bottom: 20px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 15px;
+
+    .article-title {
+      font-size: 24px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      line-height: 1.4;
+    }
+
+    .article-meta {
+      font-size: 14px;
+      color: #999;
+
+      span {
+        margin-right: 15px;
+      }
+    }
+  }
+
+  .article-content {
+    line-height: 1.8;
+    font-size: 16px;
+    color: #333;
+
+    .article-main-image {
+      width: 100%;
+      height: auto;
+      margin-bottom: 15px;
+      border-radius: 8px;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+      display: block;
+      margin: 10px 0;
+    }
+
+    p {
+      margin-bottom: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/cms/detail/index.tsx b/src/cms/detail/index.tsx
new file mode 100644
index 0000000..c8a70ae
--- /dev/null
+++ b/src/cms/detail/index.tsx
@@ -0,0 +1,45 @@
+import {useEffect, useState} from "react";
+import {Image} from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
+import {CmsArticle} from "@/api/cms/cmsArticle/model";
+import {getCmsArticle} from "@/api/cms/cmsArticle";
+import dayjs from "dayjs";
+import './index.scss'
+
+const ArticleDetail = () => {
+  const [article, setArticle] = useState<CmsArticle | null>(null);
+  const router = Taro.getCurrentInstance().router;
+  const articleId = router?.params?.id;
+
+  useEffect(() => {
+    if (articleId) {
+      getCmsArticle(Number(articleId)).then(res => {
+        setArticle(res);
+      }).catch(error => {
+        console.error("Failed to fetch article detail:", error);
+      });
+    }
+  }, [articleId]);
+
+  if (!article) {
+    return <div>加载中...</div>;
+  }
+
+  return (
+    <div className={'article-detail-page'}>
+      <div className={'article-header'}>
+        <h1 className={'article-title'}>{article.title}</h1>
+        <div className={'article-meta'}>
+          <span>作者：{article.author}</span>
+          <span>发布时间：{dayjs(article.createTime).format('YYYY-MM-DD HH:mm')}</span>
+        </div>
+      </div>
+      <div className={'article-content'}>
+        {article.image && <Image src={article.image} className={'article-main-image'} />}
+        <div dangerouslySetInnerHTML={{ __html: article.content || '' }} />
+      </div>
+    </div>
+  );
+};
+
+export default ArticleDetail;