113 lines
4.1 KiB
Vue
113 lines
4.1 KiB
Vue
<template>
|
|
<Head>
|
|
<Title>{{ loveStoryInfo.love_story_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 class="music-box" v-if="loveStoryInfo.love_story_music">
|
|
<div class="music-name">{{ loveStoryInfo.love_story_music_name }}</div>
|
|
<audio controls="controls" height="100" width="100" autoplay>
|
|
<source :src=loveStoryInfo.love_story_music type="audio/mp3" />
|
|
<embed height="100" width="100" :src=loveStoryInfo.love_story_music />
|
|
</audio>
|
|
</div>
|
|
|
|
<!-- 返回 -->
|
|
<div class="back-btn" @click="router.back()">
|
|
← 返回
|
|
</div>
|
|
<!-- 标题 -->
|
|
<div class="joint-details-title-box" data-animation="animate__animated animate__zoomIn">
|
|
<div class="joint-details-title">{{ loveStoryInfo.love_story_title }}</div>
|
|
<div class="joint-details-time">{{ loveStoryInfo.love_story_date }}</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="joint-details-content-box op0" data-animation="animate__animated animate__fadeIn"
|
|
v-html=loveStoryInfo.love_story_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="loveStoryInfo.prve"
|
|
:to="'/love-story/details/' + loveStoryInfo.prve.love_story_id">上一篇: {{
|
|
loveStoryInfo.prve.love_story_title }}</nuxt-link>
|
|
<nuxt-link class="f1" v-if="loveStoryInfo.next"
|
|
:to="'/love-story/details/' + loveStoryInfo.next.love_story_id">下一篇: {{
|
|
loveStoryInfo.next.love_story_title }}</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<Final></Final>
|
|
</template>
|
|
|
|
<script setup>
|
|
// --- 接口对接 ---
|
|
// 参数
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
// 预对接
|
|
let loveStoryInfo = ref(
|
|
{
|
|
// love_story_id : 2,
|
|
// love_story_title : "暑假初见1",
|
|
// love_story_author : "lwh1",
|
|
// love_story_place : "广州南站1",
|
|
// love_story_date : "2023-07-07",
|
|
// love_story_cover : "/uploads/LoveStoryImg/20230824\\ed099c7eac8b171c38814b985b4f5de5.jpg",
|
|
// love_story_sort : 1,
|
|
// love_story_music : "/uploads/LoveStoryFile/凄美地-郭顶.128.mp3",
|
|
// love_story_music_name : "凄美地-郭顶.128.mp3",
|
|
// love_story_content : "<p>1111<img src=\"/uploads/Img/20230824\\03cd04de8e390129fe731493333a68bc.png\" alt=\"\" data-href=\"\" style=\"\"/></p>"
|
|
}
|
|
)
|
|
|
|
|
|
|
|
// 获取新闻详情
|
|
useFetch('/api/loveStory/getLoveStoryInfo', { params: { love_story_id: route.params.id } }).then(res => {
|
|
loveStoryInfo.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 + '%'
|
|
}),
|
|
|
|
|
|
[...document.querySelectorAll('.joint-details-content-box video')].map(item => {
|
|
item.style.maxWidth = 100 + '%'
|
|
item.style.height = 0 + '%'
|
|
item.style.margin = "0 auto"
|
|
})
|
|
|
|
|
|
htmlAddAnimations()
|
|
});
|
|
|
|
})
|
|
// 获取Tdk
|
|
let tdk = ref({})
|
|
useFetch('/api/tdk/getTdk', { params: { tdk_type: 3 } }).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/love_story/love_story_details/index.scss"></style>
|
|
<style scoped src="~/assets/css/business/love_story/love_story_details/media.scss"></style>
|