165 lines
4.2 KiB
Vue
165 lines
4.2 KiB
Vue
<template>
|
|
|
|
<Head>
|
|
<Title>{{ newsDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
|
|
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
|
<Meta :content=tdk?.tdk_description name="description" />
|
|
</Head>
|
|
|
|
<Header></Header>
|
|
<Poster :type=1 :title="newsDetail.news_title"></Poster>
|
|
|
|
<div class="container">
|
|
<div class="news">
|
|
<div class="news__title">
|
|
<h1>{{ newsDetail.news_title }}</h1>
|
|
<h3 class="news__date">{{ newsDetail.news_issue_date }}</h3>
|
|
</div>
|
|
|
|
<!-- 渲染新闻富文本 -->
|
|
<section class="news__detail" v-html="newsDetail.news_content"></section>
|
|
|
|
<div class="news__paging">
|
|
<div class="news__paging-prev">
|
|
<template v-if="newsDetail.prev">
|
|
<nuxt-link :to="getHerf('/news/details/' + newsDetail.prev?.news_id)">
|
|
{{ newsDetail.prev?.news_title }}
|
|
</nuxt-link>
|
|
</template>
|
|
<template v-else>
|
|
{{ $t('news.noprev') }}
|
|
</template>
|
|
</div>
|
|
|
|
<div class="news__paging-next">
|
|
<template v-if="newsDetail.next">
|
|
<nuxt-link :to="getHerf('/news/details/' + newsDetail.next?.news_id)">
|
|
{{ newsDetail.next?.news_title }}
|
|
</nuxt-link>
|
|
</template>
|
|
<template v-else>
|
|
{{ $t('news.nonext') }}
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<Final></Final>
|
|
<PopupSidebar></PopupSidebar>
|
|
<PopupMessageUs></PopupMessageUs>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { l, locale } = useI18n();
|
|
// --- 接口对接 ---
|
|
// 参数
|
|
const route = useRoute()
|
|
|
|
// 预对接
|
|
let newsDetail = ref({})
|
|
|
|
onMounted(() => {
|
|
fontSizeReactive({
|
|
880: 1,
|
|
480: 1,
|
|
})
|
|
})
|
|
|
|
|
|
// 获取新闻详情
|
|
useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
|
|
newsDetail.value = JSON.parse(res.data.value).data
|
|
})
|
|
|
|
// 获取Tdk
|
|
let tdk = ref({})
|
|
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
|
tdk.value = JSON.parse(res.data.value).data
|
|
})
|
|
// 添加流量访问
|
|
useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.news {
|
|
padding: 80px 0px;
|
|
|
|
&__title {
|
|
padding-bottom: 20px;
|
|
margin-bottom: 40px;
|
|
border-bottom: 1px solid var(--rootColor);
|
|
|
|
h1 {
|
|
font-size: 26px;
|
|
color: #000;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&__date {
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: #666;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
:deep(p) {
|
|
font-size: 16px;
|
|
line-height: 28px;
|
|
color: #222;
|
|
text-indent: 2em;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
:deep(img) {
|
|
max-width: 100%;
|
|
display: block;
|
|
margin: 30px auto;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
&__paging {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 50px;
|
|
flex-wrap: wrap;
|
|
|
|
&-prev,
|
|
&-next {
|
|
width: 45%;
|
|
overflow: hidden;
|
|
border: 1px solid var(--rootColor);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 13px 10px;
|
|
transition: all 0.35s ease-in-out;
|
|
user-select: none;
|
|
|
|
&:hover {
|
|
background-color: var(--rootColor);
|
|
}
|
|
|
|
a {
|
|
font-size: 16px;
|
|
color: #000;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: #fff
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |