hjyd-mobile/src/pages/Detail.vue

<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>