点击到详情页

src/components/Card.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="line_cards">
-    <div class="card" v-for="item in caseList" :key="item.id">
+    <div
+      class="card"
+      v-for="item in caseList"
+      :key="item.id"
+      @click="toDetail(item.id)"
+    >
       <p class="title">{{ item.title }}</p>
       <div class="img_box">
         <img :src="item.picUrl" class="img" />
@@ -16,11 +21,25 @@
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
 const props = defineProps({
   caseList: {
     type: Array,
   },
+  classify: {
+    type: String,
+  },
 })
+const toDetail = productId => {
+  router.push({
+    path: `/detail`,
+    query: {
+      t: props.classify,
+      p: productId,
+    },
+  })
+}
 </script>
 
 <style lang="scss" scoped>

src/components/detail/Paragraph.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="paragraph_container">{{ text }}</article>
+  <article class="paragraph_container" v-html="text"></article>
 </template>
 
 <script setup>

src/mock/case_detail/index.js

@@ -18,3 +18,25 @@ export const caseList = {
   8: case_detail_img_data_08,
   9: case_detail_img_data_09,
 }
+
+import { detailList as detailList_01 } from './01'
+import { detailList as detailList_02 } from './02'
+import { detailList as detailList_03 } from './03'
+import { detailList as detailList_04 } from './04'
+import { detailList as detailList_05 } from './05'
+import { detailList as detailList_06 } from './06'
+import { detailList as detailList_07 } from './07'
+import { detailList as detailList_08 } from './08'
+import { detailList as detailList_09 } from './09'
+
+export const detailList = {
+  1: detailList_01,
+  2: detailList_02,
+  3: detailList_03,
+  4: detailList_04,
+  5: detailList_05,
+  6: detailList_06,
+  7: detailList_07,
+  8: detailList_08,
+  9: detailList_09,
+}

src/pages/CaseShow.vue

@@ -3,11 +3,11 @@
     <SubNavigation title="案例展示" />
     <CaseCard :activeTab="classify" />
     <HeadLine
-      title="医疗健康"
+      :title="getTitle()"
       line1="我们精通气动、液动、电动等各种传动机构"
       line2="完成机械所需的各种动作"
     />
-    <Card :caseList="getCaseList()" />
+    <Card :caseList="getCaseList()" :classify="classify" />
   </div>
 </template>
 
@@ -21,15 +21,62 @@ import { ref, onMounted } from 'vue'
 import { caseList } from '@/mock/case_detail'
 const route = useRoute()
 
+const trackList = [
+  {
+    id: 1,
+    title: '医疗健康',
+  },
+  {
+    id: 2,
+    title: '智能硬件',
+  },
+  {
+    id: 3,
+    title: '工业设备',
+  },
+  {
+    id: 4,
+    title: '高铁设备',
+  },
+  {
+    id: 5,
+    title: '户外设备',
+  },
+  {
+    id: 6,
+    title: '特种装备',
+  },
+  {
+    id: 7,
+    title: '智能家居',
+  },
+  {
+    id: 8,
+    title: '实验仪器',
+  },
+  {
+    id: 9,
+    title: '消费电子',
+  },
+]
+
+const getTitle = () => {
+  const arr = trackList.filter(item => item.id == classify.value)
+  if (arr?.length > 0) {
+    return arr[0].title
+  }
+  return ''
+}
+
 const getCaseList = () => {
   return caseList[classify.value]
 }
 
-const classify = ref(1)
+const classify = ref('1')
 
 onMounted(() => {
   if (route.query.t) {
-    classify.value = route.query.t || 1
+    classify.value = route.query.t || '1'
   }
 })
 </script>

src/pages/Detail.vue

@@ -1,22 +1,25 @@
 <template>
   <div class="detail_container">
     <SubNavigation title="国网照明巡检摄像头 - 详情页" />
-    <Paragraph
-      text="电力运维人员的日常工作有相当一部分是需要走到第一线去的，如设备检修、线路巡检 电源放电等。电力运维人员的一线工作呈现出“点多、"
-    />
-    <CardTitle title="设计" blue_title="研发型外观" en="APPEARANCE" />
-    <Img :pic1="A1" :pic2="A1" />
-    <Intro :cardIntro="cardIntro" />
-    <Paragraph
-      text="电力运维人员的日常工作有相当一部分是需要走到第一线去的，如设备检修、线路巡检 电源放电等。电力运维人员的一线工作呈现出“点多、"
-    />
-    <video
-      controls
-      style="width: 100%; height: auto; object-fit: fill"
-      controlslist="nodownload"
-    >
-      <source :src="MP4" />
-    </video>
+    <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>
 
@@ -26,15 +29,24 @@ 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 MP4 from '@/static/video/a.mp4'
-import A1 from '@/static/img/company.jpg'
-import { ref } from 'vue'
-const cardIntro = ref([
-  {
-    title: '主机模块',
-    desc: '内置自研电路板，光学机芯，电池，天线等。',
-  },
-])
+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>