dreamworks-mobile/src/pages/Detail.vue

<template>
  <div class="detail_container">
    <SubNavigation title="国网照明巡检摄像头 - 详情页" />
    <Paragraph :text="getList()?.topText" />
    <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>
</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 } 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 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>