You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.7 KiB
61 lines
1.7 KiB
<template>
|
|
<div class="detail_container">
|
|
<SubNavigation :title="`${getTitle()} - 详情页`" />
|
|
<Paragraph :text="getList()?.topText" :isHtml="getList()?.isHtml" />
|
|
<div style="background: #f8f8f8">
|
|
<div v-for="(item, index) in getList()?.card" :key="index">
|
|
<CardTitle
|
|
:title="item?.cardTitle"
|
|
:blue_title="item?.cardBlueTitle"
|
|
:en="item?.en"
|
|
/>
|
|
<Img :double="item?.isDouble" :pic1="item?.pic1" :pic2="item?.pic2" />
|
|
<Intro v-if="item?.cardIntro" :cardIntro="item?.cardIntro" />
|
|
<Paragraph v-if="item?.cardText" :text="item?.cardText" />
|
|
<video
|
|
v-if="item?.video"
|
|
controls
|
|
style="width: 100%; height: auto; object-fit: fill"
|
|
controlslist="nodownload"
|
|
>
|
|
<source :src="item?.video" />
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SubNavigation from 'cpns/SubNavigation'
|
|
import Paragraph from 'cpns/detail/Paragraph'
|
|
import CardTitle from 'cpns/detail/CardTitle'
|
|
import Img from 'cpns/detail/Img'
|
|
import Intro from 'cpns/detail/Intro'
|
|
import { detailList, caseList } from '@/mock/case_detail'
|
|
import { useRoute } from 'vue-router'
|
|
import { ref, onMounted } from 'vue'
|
|
const route = useRoute()
|
|
|
|
const getList = () => {
|
|
return detailList[classify.value][pId.value]
|
|
}
|
|
const getTitle = () => {
|
|
return caseList[classify.value][parseInt(pId.value) - 1]?.title
|
|
}
|
|
|
|
const classify = ref('1')
|
|
const pId = ref('1')
|
|
|
|
onMounted(() => {
|
|
if (route.query.t && route.query.p) {
|
|
classify.value = route.query.t || '1'
|
|
pId.value = route.query.p || '1'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail_container {
|
|
padding-top: $sub-header-height;
|
|
}
|
|
</style>
|