详情card

src/components/Card.vue

@@ -3,7 +3,7 @@
     <div class="card" v-for="item in caseList" :key="item.id">
       <p class="title">{{ item.title }}</p>
       <div class="img_box">
-        <img :src="item.pic" class="img" />
+        <img :src="item.picUrl" class="img" />
         <div class="bottom_text">
           <p>工业设计</p>
           <p>软硬件研发</p>

src/components/SubNavigation.vue

@@ -12,7 +12,7 @@
         </div>
         <div class="btn_wrap">
           <div class="btn" @click="toPage('/company')">公司简介</div>
-          <div class="btn" @click="toPage('/case-show?t=1')">案例展示</div>
+          <div class="btn" @click="toPage('/case-show')">案例展示</div>
           <div class="btn" @click="toPage('/contact')">联系我们</div>
           <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
           <div class="btn" @click="toPage('/hardware')">软硬件研发</div>

src/components/Top.vue

@@ -16,7 +16,7 @@
         </div>
         <div class="btn_wrap">
           <div class="btn" @click="toPage('/company')">公司简介</div>
-          <div class="btn" @click="toPage('/case-show?t=1')">案例展示</div>
+          <div class="btn" @click="toPage('/case-show')">案例展示</div>
           <div class="btn" @click="toPage('/contact')">联系我们</div>
           <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
           <div class="btn" @click="toPage('/hardware')">软硬件研发</div>

src/mock/case_detail/01.js

@@ -6,27 +6,25 @@ export const case_detail_img_data = [
   {
     id: '1',
     picUrl: T1_1,
+    title: '智能多通道全自动免疫荧光分析仪',
   },
   {
     id: '2',
     picUrl: T1_2,
+    title: '微型光度计',
   },
   {
     id: '3',
     picUrl: T1_3,
+    title: '智慧医美视频拍照系统',
   },
   {
     id: '4',
     picUrl: T1_4,
+    title: '超声肿瘤治疗系统',
   },
 ]
 
-export const titleList = {
-  1: '智能多通道全自动免疫荧光分析仪',
-  2: '微型光度计',
-  3: '智慧医美视频拍照系统',
-  4: '超声肿瘤治疗系统',
-}
 import D1_0 from '@/static/img/case_detail/01/detail/01/id/01.jpg'
 import D1_2 from '@/static/img/case_detail/01/detail/01/id/02.jpg'
 import D1_3 from '@/static/img/case_detail/01/detail/01/id/03.jpg'

src/mock/case_detail/02.js

@@ -11,52 +11,50 @@ export const case_detail_img_data = [
   {
     id: '1',
     picUrl: T1_1,
+    title: '国网照明巡检摄像头',
   },
   {
     id: '2',
     picUrl: T1_2,
+    title: '暖手宝',
   },
   {
     id: '3',
     picUrl: T1_3,
+    title: 'AI智能音箱',
   },
   {
     id: '4',
     picUrl: T1_4,
+    title: '森空机-总裁版',
   },
   {
     id: '5',
     picUrl: T1_5,
+    title: '室内空气调节机',
   },
   {
     id: '6',
     picUrl: T1_6,
+    title: '娱乐打禅休闲一体化座舱',
   },
   {
     id: '7',
     picUrl: T1_7,
+    title: '杀菌除味空气机',
   },
   {
     id: '8',
     picUrl: T1_8,
+    title: '剧本杀',
   },
   {
     id: '9',
     picUrl: T1_9,
+    title: '智能语音86开关-精英版',
   },
 ]
 
-export const titleList = {
-  1: '国网照明巡检摄像头',
-  2: '暖手宝',
-  3: 'AI智能音箱',
-  4: '森空机-总裁版',
-  5: '室内空气调节机',
-  6: '娱乐打禅休闲一体化座舱',
-  7: '杀菌除味空气机',
-  8: '剧本杀',
-  9: '智能语音86开关-精英版',
-}
 import D1_0 from '@/static/img/case_detail/02/detail/01/id/01.jpg'
 import D1_2 from '@/static/img/case_detail/02/detail/01/id/02.jpg'
 import D1_3 from '@/static/img/case_detail/02/detail/01/id/03.jpg'

src/mock/case_detail/03.js

@@ -10,48 +10,45 @@ export const case_detail_img_data = [
   {
     id: '1',
     picUrl: T1_1,
+    title: '全自动AI缠绕打包机器人',
   },
   {
     id: '2',
     picUrl: T1_2,
+    title: '水处理设备',
   },
   {
     id: '3',
     picUrl: T1_3,
+    title: '相机同步控制终端',
   },
   {
     id: '4',
     picUrl: T1_4,
+    title: '鸡舍智能检测摄像头',
   },
   {
     id: '5',
     picUrl: T1_5,
+    title: '引擎进气阀除碳机',
   },
   {
     id: '6',
     picUrl: T1_6,
+    title: '直喷车动力恢复施工系统',
   },
   {
     id: '7',
     picUrl: T1_7,
+    title: '水处理净化机',
   },
   {
     id: '8',
     picUrl: T1_8,
+    title: '线阵平台控制终端',
   },
 ]
 
-export const titleList = {
-  1: '全自动AI缠绕打包机器人',
-  2: '水处理设备',
-  3: '相机同步控制终端',
-  4: '鸡舍智能检测摄像头',
-  5: '引擎进气阀除碳机',
-  6: '直喷车动力恢复施工系统',
-  7: '水处理净化机',
-  8: '线阵平台控制终端',
-}
-
 import D1_0 from '@/static/img/case_detail/03/detail/01/id/01.jpg'
 import D1_2 from '@/static/img/case_detail/03/detail/01/id/02.jpg'
 import D1_3 from '@/static/img/case_detail/03/detail/01/id/03.jpg'

src/mock/case_detail/04.js

@@ -6,28 +6,25 @@ export const case_detail_img_data = [
   {
     id: '1',
     picUrl: T1_1,
+    title: '动车底部巡检',
   },
   {
     id: '2',
     picUrl: T1_2,
+    title: '线性光源发生器',
   },
   {
     id: '3',
     picUrl: T1_3,
+    title: '受电弓压力检测',
   },
   {
     id: '4',
     picUrl: T1_4,
+    title: '异音检测装置',
   },
 ]
 
-export const titleList = {
-  1: '动车底部巡检',
-  2: '线性光源发生器',
-  3: '受电弓压力检测',
-  4: '异音检测装置',
-  5: '相机光源控制系统',
-}
 import D1_0 from '@/static/img/case_detail/04/detail/01/id/01.jpg'
 import D1_2 from '@/static/img/case_detail/04/detail/01/id/02.jpg'
 import D1_3 from '@/static/img/case_detail/04/detail/01/hd/01.jpg'

src/mock/case_detail/05.js

@@ -7,32 +7,30 @@ export const case_detail_img_data = [
   {
     id: '1',
     picUrl: T1_1,
+    title: '受电弓压力检测',
   },
   {
     id: '2',
     picUrl: T1_2,
+    title: '智能灯杆',
   },
   {
     id: '3',
     picUrl: T1_3,
+    title: '线性光源发生器',
   },
   {
     id: '4',
     picUrl: T1_4,
+    title: '光伏智能接线盒',
   },
   {
     id: '5',
     picUrl: T1_5,
+    title: '邮政报刊亭',
   },
 ]
 
-export const titleList = {
-  1: '受电弓压力检测',
-  2: '智能灯杆',
-  3: '线性光源发生器',
-  4: '光伏智能接线盒',
-  5: '邮政报刊亭',
-}
 import D1_0 from '@/static/img/case_detail/05/detail/01/id/01.jpg'
 import D1_2 from '@/static/img/case_detail/05/detail/01/hd/01.jpg'
 import D1_3 from '@/static/img/case_detail/05/detail/01/id/02.jpg'

src/mock/case_detail/06.js

@@ -5,22 +5,20 @@ export const case_detail_img_data = [
   {
     id: '1',
     picUrl: T1_1,
+    title: '智能多通道水下图像检测系统',
   },
   {
     id: '2',
     picUrl: T1_2,
+    title: '水下20米AI图像识别相机',
   },
   {
     id: '3',
     picUrl: T1_3,
+    title: 'AI图像识别相机控制终端',
   },
 ]
 
-export const titleList = {
-  1: '智能多通道水下图像检测系统',
-  2: '水下20米AI图像识别相机',
-  3: 'AI图像识别相机控制终端',
-}
 import D1_0 from '@/static/img/case_detail/06/detail/01/id/01.jpg'
 import D1_1 from '@/static/img/case_detail/06/detail/01/id/02.jpg'
 import D1_2 from '@/static/img/case_detail/06/detail/01/id/03.jpg'

src/mock/case_detail/07.js

@@ -14,50 +14,62 @@ export const case_detail_img_data = [
   {
     id: '1',
     picUrl: T1_1,
+    title: '大屏智能语音控制86开关',
   },
   {
     id: '2',
     picUrl: T1_2,
+    title: '智能插排',
   },
   {
     id: '3',
     picUrl: T1_3,
+    title: '多信息展示语音控制86开关',
   },
   {
     id: '4',
     picUrl: T1_4,
+    title: 'dot智能音箱',
   },
   {
     id: '5',
     picUrl: T1_5,
+    title: '长条智能音箱',
   },
   {
     id: '6',
     picUrl: T1_6,
+    title: '组合式智能音箱',
   },
   {
     id: '7',
     picUrl: T1_7,
+    title: '桌面智能音箱',
   },
   {
     id: '8',
     picUrl: T1_8,
+    title: '智能门窗感应器',
   },
   {
     id: '9',
     picUrl: T1_9,
+    title: '智能控制套装',
   },
   {
     id: '10',
     picUrl: T1_10,
+    title: '智能音箱-商务版',
   },
   {
     id: '11',
     picUrl: T1_11,
+    title: '机械、语音双控智能86开关',
   },
   {
     id: '12',
     picUrl: T1_12,
+    title: '智能猫眼',
   },
 ]
 

src/mock/case_detail/08.js

@@ -7,33 +7,30 @@ export const case_detail_img_data = [
   {
     id: '1',
     picUrl: T1_1,
+    title: '微量气体泄漏流量计',
   },
   {
     id: '2',
     picUrl: T1_2,
+    title: '水质检测仪',
   },
   {
     id: '3',
     picUrl: T1_3,
+    title: '滚筒相机实验平台',
   },
   {
     id: '4',
     picUrl: T1_4,
+    title: '线阵相机实验平台',
   },
   {
     id: '5',
     picUrl: T1_5,
+    title: '面阵相机实验平台',
   },
 ]
 
-export const titleList = {
-  1: '微量气体泄漏流量计',
-  2: '水质检测仪',
-  3: '滚筒相机实验平台',
-  4: '线阵相机实验平台',
-  5: '面阵相机实验平台',
-}
-
 import Movie_1 from '@/static/gas.mp4'
 import D1_1 from '@/static/img/case_detail/08/detail/01/id/01.jpg'
 import D1_2 from '@/static/img/case_detail/08/detail/01/id/02.jpg'

src/mock/case_detail/09.js

@@ -8,38 +8,35 @@ export const case_detail_img_data = [
   {
     id: '1',
     picUrl: T1_1,
+    title: '便携HUB',
   },
   {
     id: '2',
     picUrl: T1_2,
+    title: '智能屏音箱',
   },
   {
     id: '3',
     picUrl: T1_3,
+    title: '暖手宝',
   },
   {
     id: '4',
     picUrl: T1_4,
+    title: '便携手持',
   },
   {
     id: '5',
     picUrl: T1_5,
+    title: '儿童手绘板',
   },
   {
     id: '6',
     picUrl: T1_6,
+    title: '家用智能控制终端',
   },
 ]
 
-export const titleList = {
-  1: '便携HUB',
-  2: '智能屏音箱',
-  3: '暖手宝',
-  4: '便携手持',
-  5: '儿童手绘板',
-  6: '家用智能控制终端',
-}
-
 import D1_0 from '@/static/img/case_detail/09/detail/01/id/01.jpg'
 import D1_1 from '@/static/img/case_detail/09/detail/01/id/02.jpg'
 import D1_2 from '@/static/img/case_detail/09/detail/01/id/03.jpg'

src/mock/case_detail/index.js

@@ -0,0 +1,20 @@
+import { case_detail_img_data as case_detail_img_data_01 } from './01'
+import { case_detail_img_data as case_detail_img_data_02 } from './02'
+import { case_detail_img_data as case_detail_img_data_03 } from './03'
+import { case_detail_img_data as case_detail_img_data_04 } from './04'
+import { case_detail_img_data as case_detail_img_data_05 } from './05'
+import { case_detail_img_data as case_detail_img_data_06 } from './06'
+import { case_detail_img_data as case_detail_img_data_07 } from './07'
+import { case_detail_img_data as case_detail_img_data_08 } from './08'
+import { case_detail_img_data as case_detail_img_data_09 } from './09'
+export const caseList = {
+  1: case_detail_img_data_01,
+  2: case_detail_img_data_02,
+  3: case_detail_img_data_03,
+  4: case_detail_img_data_04,
+  5: case_detail_img_data_05,
+  6: case_detail_img_data_06,
+  7: case_detail_img_data_07,
+  8: case_detail_img_data_08,
+  9: case_detail_img_data_09,
+}

src/mock/index.js

@@ -14,52 +14,52 @@ export const caseList = [
   {
     id: 1,
     title: '国网照明巡检摄像头',
-    pic: L1,
+    picUrl: L1,
   },
   {
     id: 2,
     title: '娱乐打禅休闲一体化座舱',
-    pic: L2,
+    picUrl: L2,
   },
   {
     id: 3,
     title: '超声肿瘤治疗系统',
-    pic: L3,
+    picUrl: L3,
   },
   {
     id: 4,
     title: '微型光度计',
-    pic: L4,
+    picUrl: L4,
   },
   {
     id: 5,
     title: '动车底部巡检',
-    pic: L5,
+    picUrl: L5,
   },
   {
     id: 6,
     title: '智能灯杆',
-    pic: L6,
+    picUrl: L6,
   },
   {
     id: 7,
     title: '智慧医美视频拍照系统',
-    pic: L7,
+    picUrl: L7,
   },
   {
     id: 8,
     title: '智能多通道全自动免疫荧光分析仪',
-    pic: L8,
+    picUrl: L8,
   },
   {
     id: 9,
     title: '线性相机实验平台',
-    pic: L9,
+    picUrl: L9,
   },
   {
     id: 10,
     title: '水处理设备',
-    pic: L10,
+    picUrl: L10,
   },
 ]
 
@@ -436,51 +436,51 @@ export const hardCaseList = [
   {
     id: 1,
     title: '国网照明巡检摄像头',
-    pic: H1,
+    picUrl: H1,
   },
   {
     id: 2,
     title: '娱乐打禅休闲一体化座舱',
-    pic: H2,
+    picUrl: H2,
   },
   {
     id: 3,
     title: '暖手宝',
-    pic: H3,
+    picUrl: H3,
   },
   {
     id: 4,
     title: '微型光度计',
-    pic: H4,
+    picUrl: H4,
   },
   {
     id: 5,
     title: '动车底部巡检',
-    pic: H5,
+    picUrl: H5,
   },
   {
     id: 6,
     title: '全自动AI缠绕打包机器人',
-    pic: H6,
+    picUrl: H6,
   },
   {
     id: 7,
     title: '智慧医美视频拍照系统',
-    pic: H7,
+    picUrl: H7,
   },
   {
     id: 8,
     title: '智能多通道全自动免疫荧光分析仪',
-    pic: H8,
+    picUrl: H8,
   },
   {
     id: 9,
     title: '室内空调调节机',
-    pic: H9,
+    picUrl: H9,
   },
   {
     id: 10,
     title: '水处理设备',
-    pic: H10,
+    picUrl: H10,
   },
 ]

src/pages/CaseShow.vue

@@ -7,7 +7,7 @@
       line1="我们精通气动、液动、电动等各种传动机构"
       line2="完成机械所需的各种动作"
     />
-    <Card :caseList="caseList" />
+    <Card :caseList="getCaseList()" />
   </div>
 </template>
 
@@ -16,15 +16,21 @@ import CaseCard from 'cpns/CaseCard'
 import Card from 'cpns/Card'
 import SubNavigation from 'cpns/SubNavigation'
 import HeadLine from 'cpns/HeadLine'
-import { caseList } from '@/mock'
 import { useRoute } from 'vue-router'
 import { ref, onMounted } from 'vue'
+import { caseList } from '@/mock/case_detail'
 const route = useRoute()
 
-const classify = ref(0)
+const getCaseList = () => {
+  return caseList[classify.value]
+}
+
+const classify = ref(1)
 
 onMounted(() => {
-  classify.value = route.query.t
+  if (route.query.t) {
+    classify.value = route.query.t || 1
+  }
 })
 </script>