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