aerwen_web_nuxt/pages/news/details/[id].vue
2023-06-29 19:19:30 +08:00

87 lines
2.8 KiB
Vue

<template>
<Head>
<Title>{{ infoArticleInfo.info_article_title }}{{ tdk.tdk_title }}</Title>
<Meta :content=tdk.tdk_keyword name="keywords" />
<Meta :content=tdk.tdk_description name="description" />
</Head>
<Header></Header>
<!-- 艺考资讯详情大盒子 -->
<div class="joint-details-pos-box">
<div class="--box--">
<!-- 返回 -->
<div @click="router.back()">
<img class="return" src="/img/business/signUp/返回.png" alt="">
</div>
<!-- 标题 -->
<div class="joint-details-title-box" data-animation="animate__animated animate__zoomIn">
<div class="joint-details-title">{{ infoArticleInfo.info_article_title }}</div>
<div class="joint-details-time">{{ infoArticleInfo.info_article_create_time }}</div>
</div>
<hr>
<div class="joint-details-content-box op0" data-animation="animate__animated animate__fadeIn"
v-html=infoArticleInfo.info_article_content></div>
<!-- 翻篇 -->
<div class="Turn-the-page op0" data-animation="animate__animated animate__fadeIn">
<hr>
<div class="Turn-the-page-box">
<nuxt-link class="f1" v-if="infoArticleInfo.prve"
:to="'/news/details/' + infoArticleInfo.prve.info_article_id">上一篇: {{
infoArticleInfo.prve.info_article_title }}</nuxt-link>
<nuxt-link class="f1" v-if="infoArticleInfo.next"
:to="'/news/details/' + infoArticleInfo.next.info_article_id">下一篇: {{
infoArticleInfo.next.info_article_title }}</nuxt-link>
</div>
</div>
</div>
</div>
<Final></Final>
</template>
<script setup>
// --- 接口对接 ---
// 参数
const route = useRoute()
const router = useRouter()
// 预对接
let infoArticleInfo = ref({})
// 获取新闻详情
useFetch('/api/news/getinfoArticleInfo', { params: { info_article_id: route.params.id } }).then(res => {
infoArticleInfo.value = JSON.parse(res.data.value).data
setTimeout(() => {
[...document.querySelectorAll('.joint-details-content-box img')].map(item => {
item.style.maxWidth = 100 + '%'
item.style.height = 0 + '%'
})
htmlAddAnimations()
});
})
// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: route.name } }).then(res => {
tdk.value = JSON.parse(res.data.value).data
})
// 添加流量访问
useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
</script>
<style scoped src="~/assets/css/business/news/news_details/index.scss"></style>
<style scoped src="~/assets/css/business/news/news_details/media.scss"></style>