194 lines
6.5 KiB
Vue
194 lines
6.5 KiB
Vue
<template>
|
||
<!-- <Load></Load> -->
|
||
<!-- <ImgDetail ref='ImgDetailRef' :imgList="imgList" :imgIdx="imgIdx"></ImgDetail> -->
|
||
|
||
<Head>
|
||
<Title>{{ tdk.tdk_title }}</Title>
|
||
<Meta :content=tdk.tdk_keyword name="keywords" />
|
||
<Meta :content=tdk.tdk_description name="description" />
|
||
<Meta name="baidu-site-verification" content="" />
|
||
</Head>
|
||
<Header></Header>
|
||
<Carousel></Carousel>
|
||
|
||
|
||
<div class="Home-main">
|
||
|
||
|
||
<!-- 爱情故事展示 -->
|
||
<div class="card-pos-box">
|
||
|
||
<div class="love-story-title-box op0" data-animation="animate__animated animate__fadeInDown">
|
||
<h2>爱情故事</h2>
|
||
<h4>记录生活，分享喜悦，快乐相随</h4>
|
||
</div>
|
||
|
||
<div class="content" v-if="homeData.loveStoryList" >
|
||
<!-- 列表渲染 -->
|
||
<div class="card1" v-for="(item) in homeData.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 class="love-story-btn-box">
|
||
<nuxt-link to="/love-story/1" class="btn">
|
||
查看更多
|
||
</nuxt-link>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- 心愿清单 -->
|
||
<div class="cardiac-moment-pos-box">
|
||
<div class="cardiac-moment-img-box">
|
||
<img src="/img/home/monment.png" alt="">
|
||
</div>
|
||
|
||
<div class="love-story-title-box op0" data-animation="animate__animated animate__fadeInDown">
|
||
<h2>心愿清单</h2>
|
||
<h4>听我许下与你有关的心愿</h4>
|
||
</div>
|
||
|
||
<div class="todo-list-big-box" v-if="homeData.wishList">
|
||
<div class="todo-list-box" v-for="(item) in homeData.wishList" :key="item.wish_list_id">
|
||
<div class="todo-list-check-box">
|
||
<img v-if="item.wish_list_status === 1" alt="" class="todo-list-check-img"
|
||
src="https://www.mitangguan.cn/img/mitangguan/imcomplete.png">
|
||
<img v-else alt="" class="todo-list-check-img" src="https://www.mitangguan.cn/img/mitangguan/complete.png">
|
||
</div>
|
||
<div class="todo-list-text-box">
|
||
<div class="todo-list-text">{{ item.wish_list_name }}</div>
|
||
<div class="todo-list-time">{{ item.wish_list_create_time }}</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="love-story-btn-box">
|
||
<nuxt-link to="/todo-list" class="btn">
|
||
查看更多
|
||
</nuxt-link>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- 图片预览示例 -->
|
||
<!-- <div class="top-show-box">
|
||
<img @click="handleImg(0)" :src=openImg1 alt="">
|
||
</div> -->
|
||
|
||
<Final></Final>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
|
||
/** 基础变量 **/
|
||
let imgList = ref([])
|
||
let imgIdx = ref(0)
|
||
let ImgDetailRef = ref(null)
|
||
|
||
|
||
/**预对接的数据**/
|
||
|
||
|
||
/**js常量的定义**/
|
||
|
||
|
||
|
||
|
||
/**js操控的逻辑变量**/
|
||
|
||
|
||
|
||
|
||
/**方法函数**/
|
||
|
||
// 预览图片
|
||
function handleImg(v) {
|
||
ImgDetailRef.value.showImgDetail()
|
||
imgIdx.value = v
|
||
}
|
||
|
||
const getLink = function (item) {
|
||
if (item.love_story_link) {
|
||
return item.love_story_link;
|
||
} else {
|
||
return "/love-story/details/" + item.love_story_id;
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* 接口对接
|
||
*/
|
||
|
||
let homeData = ref({})
|
||
useFetch('/api/home/getHome').then(res => {
|
||
homeData.value = JSON.parse(res.data.value).data
|
||
})
|
||
|
||
// 获取Tdk
|
||
let tdk = ref({})
|
||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1 } }).then(res => {
|
||
tdk.value = JSON.parse(res.data.value).data
|
||
})
|
||
|
||
|
||
|
||
/**onMounted**/
|
||
onMounted(() => {
|
||
// imgList.value.push(openImg1.value)
|
||
|
||
htmlAddAnimations({ tagDom: 'Home-main', preload: 1.3 })
|
||
})
|
||
/**export**/
|
||
defineExpose({
|
||
middleware: 'auth'
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped src="~/assets/css/index/index.scss"></style>
|
||
<style scoped src="~/assets/css/index/media.scss"></style>
|
||
<style scoped src="~/assets/css/index/card.css"></style>
|