首页卡片链接

src/components/AboutUs.vue

@@ -22,7 +22,6 @@ const route = useRoute()
 const isHard = ref(false)
 
 onMounted(() => {
-  console.log(route)
   if (route.path.indexOf('/hardware') != -1) {
     isHard.value = true
   }

src/components/Card.vue

@@ -4,7 +4,7 @@
       class="card"
       v-for="item in caseList"
       :key="item.id"
-      @click="toDetail(item.id)"
+      @click="toDetail(item.id, item.classify)"
     >
       <p class="title">{{ item.title }}</p>
       <div class="img_box">
@@ -31,11 +31,11 @@ const props = defineProps({
     type: String,
   },
 })
-const toDetail = productId => {
+const toDetail = (productId, classify) => {
   router.push({
     path: `/detail`,
     query: {
-      t: props.classify,
+      t: props.classify || classify,
       p: productId,
     },
   })

src/mock/index.js

@@ -6,7 +6,7 @@ import L5 from '@/static/img/case/li5.png'
 import L6 from '@/static/img/case/li6.png'
 import L7 from '@/static/img/case/li7.png'
 import L8 from '@/static/img/case/li8.png'
-import L9 from '@/static/img/case/li9.png'
+import L9 from '@/static/img/case_detail/02/trumbs/09.jpg'
 import L10 from '@/static/img/case/li10.png'
 
 // 首页案例展示
@@ -15,116 +15,136 @@ export const caseList = [
     id: 1,
     title: '国网照明巡检摄像头',
     picUrl: L1,
+    classify: '2',
   },
   {
-    id: 2,
+    id: 6,
     title: '娱乐打禅休闲一体化座舱',
     picUrl: L2,
+    classify: '2',
   },
   {
-    id: 3,
+    id: 4,
     title: '超声肿瘤治疗系统',
     picUrl: L3,
+    classify: '1',
   },
   {
-    id: 4,
+    id: 2,
     title: '微型光度计',
     picUrl: L4,
+    classify: '1',
   },
   {
-    id: 5,
+    id: 1,
     title: '动车底部巡检',
     picUrl: L5,
+    classify: '4',
   },
   {
-    id: 6,
+    id: 2,
     title: '智能灯杆',
     picUrl: L6,
+    classify: '5',
   },
   {
-    id: 7,
+    id: 3,
     title: '智慧医美视频拍照系统',
     picUrl: L7,
+    classify: '1',
   },
   {
-    id: 8,
+    id: 1,
     title: '智能多通道全自动免疫荧光分析仪',
     picUrl: L8,
+    classify: '1',
   },
   {
     id: 9,
-    title: '线性相机实验平台',
+    title: '智能语音86开关-精英版',
     picUrl: L9,
+    classify: '2',
   },
   {
-    id: 10,
+    id: 2,
     title: '水处理设备',
     picUrl: L10,
+    classify: '3',
   },
 ]
 
-import Y1 from '@/static/img/hardware/hardware1.png'
-import Y2 from '@/static/img/hardware/hardware2.png'
-import Y3 from '@/static/img/hardware/hardware3.png'
-import Y4 from '@/static/img/hardware/hardware4.png'
-import Y5 from '@/static/img/hardware/hardware5.png'
-import Y6 from '@/static/img/hardware/hardware6.png'
-import Y7 from '@/static/img/hardware/hardware7.png'
-import Y8 from '@/static/img/hardware/hardware8.png'
-import Y9 from '@/static/img/hardware/hardware9.png'
-import Y10 from '@/static/img/hardware/hardware10.png'
+import H1 from '@/static/img/hardware/hardware1.png'
+import H2 from '@/static/img/hardware/hardware2.png'
+import H3 from '@/static/img/hardware/hardware3.png'
+import H4 from '@/static/img/hardware/hardware4.png'
+import H5 from '@/static/img/hardware/hardware5.png'
+import H6 from '@/static/img/hardware/hardware6.png'
+import H7 from '@/static/img/hardware/hardware7.png'
+import H8 from '@/static/img/hardware/hardware8.png'
+import H9 from '@/static/img/hardware_detail/08/trumbs/01.jpg'
+import H10 from '@/static/img/hardware/hardware10.png'
 
 // 首页硬件展示
 export const hardList = [
   {
     id: 1,
     title: '国网照明巡检摄像头',
-    picUrl: Y1,
+    picUrl: H1,
+    classify: '2',
   },
   {
-    id: 2,
+    id: 6,
     title: '娱乐打禅休闲一体化座舱',
-    picUrl: Y2,
+    picUrl: H2,
+    classify: '2',
   },
   {
-    id: 3,
+    id: 2,
     title: '暖手宝',
-    picUrl: Y3,
+    picUrl: H3,
+    classify: '2',
   },
   {
-    id: 4,
+    id: 2,
     title: '微型光度计',
-    picUrl: Y4,
+    picUrl: H4,
+    classify: '1',
   },
   {
-    id: 5,
+    id: 1,
     title: '动车底部巡检',
-    picUrl: Y5,
+    picUrl: H5,
+    classify: '4',
   },
   {
-    id: 6,
+    id: 1,
     title: '全自动AI缠绕打包机器人',
-    picUrl: Y6,
+    picUrl: H6,
+    classify: '3',
   },
   {
-    id: 7,
+    id: 3,
     title: '智慧医美视频拍照系统',
-    picUrl: Y7,
+    picUrl: H7,
+    classify: '1',
   },
   {
-    id: 8,
+    id: 1,
     title: '智能多通道全自动免疫荧光分析仪',
-    picUrl: Y8,
+    picUrl: H8,
+    classify: '1',
   },
   {
-    id: 9,
-    title: '室内空调调节机',
-    picUrl: Y9,
+    id: 1,
+    title: '微量气体泄漏流量计',
+    picUrl: H9,
+    classify: '8',
   },
   {
-    id: 10,
+    id: 2,
     title: '水处理设备',
-    picUrl: Y10,
+    picUrl: H10,
+    classify: '3',
   },
 ]
 
@@ -421,67 +441,66 @@ export const newsList = [
   },
 ]
 
-import H1 from '@/static/img/hardware/hardware1.png'
-import H2 from '@/static/img/hardware/hardware2.png'
-import H3 from '@/static/img/hardware/hardware3.png'
-import H4 from '@/static/img/hardware/hardware4.png'
-import H5 from '@/static/img/hardware/hardware5.png'
-import H6 from '@/static/img/hardware/hardware6.png'
-import H7 from '@/static/img/hardware/hardware7.png'
-import H8 from '@/static/img/hardware/hardware8.png'
-import H9 from '@/static/img/hardware/hardware9.png'
-import H10 from '@/static/img/hardware/hardware10.png'
-
 export const hardCaseList = [
   {
     id: 1,
     title: '国网照明巡检摄像头',
     picUrl: H1,
+    classify: '2',
   },
   {
-    id: 2,
+    id: 6,
     title: '娱乐打禅休闲一体化座舱',
     picUrl: H2,
+    classify: '2',
   },
   {
-    id: 3,
+    id: 2,
     title: '暖手宝',
     picUrl: H3,
+    classify: '2',
   },
   {
-    id: 4,
+    id: 2,
     title: '微型光度计',
     picUrl: H4,
+    classify: '1',
   },
   {
-    id: 5,
+    id: 1,
     title: '动车底部巡检',
     picUrl: H5,
+    classify: '4',
   },
   {
-    id: 6,
+    id: 1,
     title: '全自动AI缠绕打包机器人',
     picUrl: H6,
+    classify: '3',
   },
   {
-    id: 7,
+    id: 3,
     title: '智慧医美视频拍照系统',
     picUrl: H7,
+    classify: '1',
   },
   {
-    id: 8,
+    id: 1,
     title: '智能多通道全自动免疫荧光分析仪',
     picUrl: H8,
+    classify: '1',
   },
   {
-    id: 9,
-    title: '室内空调调节机',
+    id: 1,
+    title: '微量气体泄漏流量计',
     picUrl: H9,
+    classify: '8',
   },
   {
-    id: 10,
+    id: 2,
     title: '水处理设备',
     picUrl: H10,
+    classify: '3',
   },
 ]
 

src/pages/index.vue

@@ -35,13 +35,11 @@ import { ref } from 'vue'
 const isDrag = ref(false)
 
 const handlePress = e => {
-  e.preventDefault()
   // 背景虚化
   isDrag.value = true
 }
 const handleRelease = e => {
   // 背景实体化
-  e.preventDefault()
   isDrag.value = false
 }
 </script>