156 lines
6.4 KiB
Vue
156 lines
6.4 KiB
Vue
<template>
|
||
<Head>
|
||
<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></Poster>
|
||
|
||
<div class="background_box">
|
||
|
||
<main class="container ">
|
||
<!-- 爱情故事展示 -->
|
||
<div class="card-pos-box">
|
||
|
||
<div class="love-story-title-box">
|
||
<h2>爱情故事</h2>
|
||
<h4>记录生活，分享喜悦，快乐相随</h4>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<!-- 列表渲染 -->
|
||
<div class="card1" v-for="(item) in loveStoryList" :key=item.love_story_id>
|
||
<div class="show-wrapper">
|
||
<div class="pic-wrapper">
|
||
<img :src=item.love_story_cover />
|
||
</div>
|
||
<h2 class="title">{{item.love_story_title}}</h2>
|
||
<div class="show-info">
|
||
<div class="show-info-item">
|
||
<svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="1642" width="128" height="128">
|
||
<path
|
||
d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
|
||
fill="" p-id="1643"></path>
|
||
<path
|
||
d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
|
||
fill="#FF5F5F" p-id="1644"></path>
|
||
<path
|
||
d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
|
||
fill="#FFFFFF" p-id="1645"></path>
|
||
</svg>
|
||
{{item.love_story_date}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hover-wrapper">
|
||
<div class="hover-info">
|
||
<div class="info-item">
|
||
<!-- 地点 -->
|
||
<span>{{item.love_story_place}}</span>
|
||
<span class="info-item-title">{{item.love_story_date}}</span>
|
||
</div>
|
||
</div>
|
||
<nuxt-link :to="getLink(item)" class="btn">
|
||
<div>查看</div>
|
||
</nuxt-link>
|
||
</div>
|
||
<div class="background"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- 分页 -->
|
||
<div class="page-box">
|
||
<pagination class="page" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit"
|
||
@pagination="routerJump()" />
|
||
</div>
|
||
</main>
|
||
|
||
</div>
|
||
|
||
<Final></Final>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
// 预对接
|
||
let loveStoryList = 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"
|
||
// }
|
||
]
|
||
)
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
onMounted(() => {
|
||
|
||
})
|
||
|
||
// --- 参数 ---
|
||
let total = ref(0)
|
||
const queryParams = reactive({
|
||
page: parseInt(route.params.page) || 1,
|
||
limit: 10
|
||
})
|
||
|
||
// --- 方法 ---
|
||
const routerJump = function () {
|
||
let { page } = queryParams
|
||
router.push(String(page))
|
||
}
|
||
|
||
const getLink = function (item) {
|
||
if (item.love_story_link) {
|
||
return item.love_story_link;
|
||
} else {
|
||
return "/love-story/details/" + item.love_story_id;
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* 接口对接
|
||
*/
|
||
|
||
// 获取Tdk
|
||
let tdk = ref({})
|
||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
|
||
tdk.value = JSON.parse(res.data.value).data
|
||
})
|
||
|
||
// // 爱情故事列表
|
||
useFetch('/api/loveStory/getLoveStoryList', { params: queryParams }).then(res => {
|
||
total.value = JSON.parse(res.data.value).count || 0
|
||
loveStoryList.value = JSON.parse(res.data.value).data || []
|
||
})
|
||
|
||
// // 添加流量访问
|
||
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
||
|
||
|
||
// fontSizeReactive({
|
||
// 880: 1,
|
||
// 480: 3,
|
||
// })
|
||
onMounted(() => {
|
||
htmlAddAnimations()
|
||
|
||
})
|
||
</script>
|
||
|
||
<style scoped src="~/assets/css/business/love_story/index.scss"></style>
|
||
<style scoped src="~/assets/css/business/love_story/media.scss"></style>
|
||
<style scoped src="~/assets/css/index/card.css"></style>
|