<template>
|
<div class="container mx-auto px-4 py-8 bg-white" v-loading="loading_frm">
|
<div class=" mx-auto">
|
<!-- 面包屑导航 -->
|
<div class="mb-6 text-gray-500">
|
<el-breadcrumb separator="/">
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item :to="{ path:'/policy-info'}">政策文件</el-breadcrumb-item>
|
<el-breadcrumb-item class="text-ellipsis">{{ newsDetail.title }}</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
|
<!-- 文章内容 -->
|
<div class="article-content">
|
<div class="prose max-w-none" v-html="newsDetail.content"></div>
|
</div>
|
|
<!-- 上一篇/下一篇 -->
|
<div class="mt-8 pt-4 border-t">
|
<div class="flex flex-col gap-2">
|
<div v-if="newsDetail.prevID"
|
class="text-[22px] line-height-[32px] text-gray-600 hover:text-blue-500 cursor-pointer">
|
上一篇：<span @click="prevNews(newsDetail.prevID)">{{ getPrveTitle(newsDetail.id)
|
}}</span>
|
</div>
|
<div v-if="newsDetail.nextID" class="text-gray-600 hover:text-blue-500 cursor-pointer">
|
下一篇：<span @click="nextNews(newsDetail.nextID)">{{ getNextTitle(newsDetail.id)
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref } from 'vue';
|
import { useRoute,useRouter } from 'vue-router';
|
import axios from 'axios';
|
import { marked } from 'marked';
|
|
const route = useRoute();
|
const router = useRouter();
|
|
const newsDetail = ref([]);
|
const newsId = ref(0)
|
const loading_frm = ref(false)
|
const m_allData = ref([])
|
|
onMounted(() => {
|
// 这里可以根据路由参数获取新闻详情
|
newsId.value = route.params.id;
|
initNewsList();
|
});
|
const initNewsList = () => {
|
loading_frm.value = true
|
|
axios({
|
method: 'get',
|
url: "static/Data/newsData/list.json"
|
}).then(res => {
|
const result = res.data
|
const { LegalRelatedList, StandardDynamicsList } = result
|
const allData = LegalRelatedList.concat(StandardDynamicsList)
|
const foundNews = allData.find(item => item.id === Number(newsId.value));
|
newsDetail.value = foundNews as any
|
m_allData.value = allData
|
initNewContentByMarked()
|
}).catch(err => {
|
console.log(err)
|
loading_frm.value = false
|
})
|
}
|
|
const initNewContentByMarked = () => {
|
let fileID = newsDetail.value.id
|
let filePath = `static/Data/newsData/${fileID}.md`;
|
// 读取文件内容并转换为HTML
|
fetch(filePath).then(response => {
|
return response.text();
|
}).then(content => {
|
// 使用marked库将Markdown内容转换为HTML
|
const htmlContent = marked(content);
|
newsDetail.value.content = htmlContent;
|
loading_frm.value = false;
|
}).catch(error => {
|
console.error('Error reading file:', error);
|
});
|
}
|
|
const getPrveTitle = (id: number) => {
|
//根据id获取当前索引
|
let index = m_allData.value.findIndex(item => item.id === id)
|
if (index > 0) {
|
return m_allData.value[index - 1].title
|
}
|
return ''
|
}
|
const prevNews = (id) => {
|
router.push({ path: `/news-detail/${id}` })
|
}
|
const nextNews = (id) => {
|
router.push({ path: `/news-detail/${id}` })
|
}
|
|
const getNextTitle = (id: number) => {
|
//根据id获取当前索引
|
let cur_index = 0
|
m_allData.value.forEach((item, index) => {
|
if (item.id === id) {
|
cur_index = index
|
}
|
})
|
if (cur_index < m_allData.value.length - 1) {
|
return m_allData.value[cur_index + 1].title
|
}
|
else return ''
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.prose {
|
font-size: 16px;
|
line-height: 1.75;
|
color: #374151;
|
}
|
|
.prose h2 {
|
margin-top: 2em;
|
margin-bottom: 1em;
|
}
|
|
.prose p {
|
margin-bottom: 1.25em;
|
}
|
|
.news-title {
|
font-family: Microsoft YaHei;
|
font-size: 36px;
|
color: #1d1d1f;
|
font-weight: bold;
|
line-height: 36px;
|
}
|
:deep(.el-breadcrumb__inner){
|
max-width: 200px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.news-info {
|
height: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
font-size: 16px;
|
color: #777777;
|
line-height: 32px;
|
}
|
</style>
|
