2 changed files with 95 additions and 0 deletions
@ -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; |
||||
|
} |
||||
|
} |
||||
|
} |
@ -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; |
Loading…
Reference in new issue