123

src/components/Tabs/index.vue

@@ -28,10 +28,10 @@ const isActive = id => {
     : detailStore.hardware_id == id
 }
 const updateActiveTab = id => {
+  myEmit('onMySonFunc')
   if (props.isCase) {
     detailStore.updateIndustryId(id)
     detailStore.updateExampleId('1')
-    myEmit('onMySonFunc')
   } else {
     detailStore.updateHardwareId(id)
     detailStore.updateHardwareExampleId('1')

src/components/Trumbs/index.vue

@@ -53,8 +53,8 @@ const props = defineProps({
 })
 const modules = ref([FreeMode, Navigation])
 const viewDetail = index => {
+  myEmit('onMySonFunc')
   if (props.isCase) {
-    myEmit('onMySonFunc')
     detailStore.updateExampleId(index)
   } else {
     detailStore.updateHardwareExampleId(index)

src/mock/case.js

@@ -423,12 +423,12 @@ import A1 from '@/assets/img/all_case/01.jpg'
 import A2 from '@/assets/img/all_case/02.jpg'
 import A3 from '@/assets/img/all_case/03.jpg'
 import A4 from '@/assets/img/all_case/04.jpg'
-import A5 from '@/assets/img/all_case/05.jpg'
-import A6 from '@/assets/img/all_case/06.jpg'
+import A5 from '@/assets/img/all_case/05.png'
+import A6 from '@/assets/img/all_case/06.png'
 import A7 from '@/assets/img/all_case/07.jpg'
-import A8 from '@/assets/img/all_case/08.jpg'
-import A9 from '@/assets/img/all_case/09.jpg'
-import A10 from '@/assets/img/all_case/10.jpg'
+import A8 from '@/assets/img/all_case/08.png'
+import A9 from '@/assets/img/all_case/09.png'
+import A10 from '@/assets/img/all_case/10.png'
 import A11 from '@/assets/img/all_case/11.jpg'
 import A12 from '@/assets/img/all_case/12.jpg'
 import A13 from '@/assets/img/all_case/13.jpg'
@@ -444,9 +444,9 @@ import A22 from '@/assets/img/all_case/22.jpg'
 import A23 from '@/assets/img/all_case/23.jpg'
 import A24 from '@/assets/img/all_case/24.jpg'
 import A25 from '@/assets/img/all_case/25.jpg'
-import A26 from '@/assets/img/all_case/26.jpg'
+import A26 from '@/assets/img/all_case/26.png'
 import A27 from '@/assets/img/all_case/27.jpg'
-import A28 from '@/assets/img/all_case/28.jpg'
+import A28 from '@/assets/img/all_case/28.png'
 import A29 from '@/assets/img/all_case/29.jpg'
 import A30 from '@/assets/img/all_case/30.jpg'
 import A31 from '@/assets/img/all_case/31.jpg'

src/mock/hardware.js

@@ -56,369 +56,368 @@ import { swiperList as swiper_09 } from './hardware/09'
 import { titleList as title_09 } from './hardware/09'
 import { detailList as detail_09 } from './case_detail/09'
 
-const hardware_list = {}
-// export const hardware_list = {
-//   1: {
-//     1: {
-//       id: '1',
-//       title: title_01['1'],
-//       swiperList: swiper_01['1'],
-//       detailList: detail_01['1'],
-//     },
-//     2: {
-//       id: '2',
-//       title: title_01['2'],
-//       swiperList: swiper_01['2'],
-//       detailList: detail_01['2'],
-//     },
-//     3: {
-//       id: '3',
-//       title: title_01['3'],
-//       swiperList: swiper_01['3'],
-//       detailList: detail_01['3'],
-//     },
-//     4: {
-//       id: '4',
-//       title: title_01['4'],
-//       swiperList: swiper_01['4'],
-//       detailList: detail_01['4'],
-//     },
-//   },
-//   2: {
-//     1: {
-//       id: '1',
-//       title: title_02['1'],
-//       swiperList: swiper_02['1'],
-//       detailList: detail_02['1'],
-//     },
-//     2: {
-//       id: '2',
-//       title: title_02['2'],
-//       swiperList: swiper_02['2'],
-//       detailList: detail_02['2'],
-//     },
-//     3: {
-//       id: '3',
-//       title: title_02['3'],
-//       swiperList: swiper_02['3'],
-//       detailList: detail_02['3'],
-//     },
-//     4: {
-//       id: '4',
-//       title: title_02['4'],
-//       swiperList: swiper_02['4'],
-//       detailList: detail_02['4'],
-//     },
-//     5: {
-//       id: '5',
-//       title: title_02['5'],
-//       swiperList: swiper_02['5'],
-//       detailList: detail_02['5'],
-//     },
-//     6: {
-//       id: '6',
-//       title: title_02['6'],
-//       swiperList: swiper_02['6'],
-//       detailList: detail_02['6'],
-//     },
-//     7: {
-//       id: '7',
-//       title: title_02['7'],
-//       swiperList: swiper_02['7'],
-//       detailList: detail_02['7'],
-//     },
-//     8: {
-//       id: '8',
-//       title: title_02['8'],
-//       swiperList: swiper_02['8'],
-//       detailList: detail_02['8'],
-//     },
-//     9: {
-//       id: '9',
-//       title: title_02['9'],
-//       swiperList: swiper_02['9'],
-//       detailList: detail_02['9'],
-//     },
-//   },
-//   3: {
-//     1: {
-//       id: '1',
-//       title: title_03['1'],
-//       swiperList: swiper_03['1'],
-//       detailList: detail_03['1'],
-//     },
-//     2: {
-//       id: '2',
-//       title: title_03['2'],
-//       swiperList: swiper_03['2'],
-//       detailList: detail_03['2'],
-//     },
-//     3: {
-//       id: '3',
-//       title: title_03['3'],
-//       swiperList: swiper_03['3'],
-//       detailList: detail_03['3'],
-//     },
-//     4: {
-//       id: '4',
-//       title: title_03['4'],
-//       swiperList: swiper_03['4'],
-//       detailList: detail_03['4'],
-//     },
-//     5: {
-//       id: '5',
-//       title: title_03['5'],
-//       swiperList: swiper_03['5'],
-//       detailList: detail_03['5'],
-//     },
-//     6: {
-//       id: '6',
-//       title: title_03['6'],
-//       swiperList: swiper_03['6'],
-//       detailList: detail_03['6'],
-//     },
-//     7: {
-//       id: '7',
-//       title: title_03['7'],
-//       swiperList: swiper_03['7'],
-//       detailList: detail_03['7'],
-//     },
-//     8: {
-//       id: '8',
-//       title: title_03['8'],
-//       swiperList: swiper_03['8'],
-//       detailList: detail_03['8'],
-//     },
-//   },
-//   4: {
-//     1: {
-//       id: '1',
-//       title: title_04['1'],
-//       swiperList: swiper_04['1'],
-//       detailList: detail_04['1'],
-//     },
-//     2: {
-//       id: '2',
-//       title: title_04['2'],
-//       swiperList: swiper_04['2'],
-//       detailList: detail_04['2'],
-//     },
-//     3: {
-//       id: '3',
-//       title: title_04['3'],
-//       swiperList: swiper_04['3'],
-//       detailList: detail_04['3'],
-//     },
-//     4: {
-//       id: '4',
-//       title: title_04['4'],
-//       swiperList: swiper_04['4'],
-//       detailList: detail_04['4'],
-//     },
-//     5: {
-//       id: '5',
-//       title: title_04['5'],
-//       swiperList: swiper_04['5'],
-//       detailList: detail_04['5'],
-//     },
-//   },
-//   5: {
-//     1: {
-//       id: '1',
-//       title: title_05['1'],
-//       swiperList: swiper_05['1'],
-//       detailList: detail_05['1'],
-//     },
-//     2: {
-//       id: '2',
-//       title: title_05['2'],
-//       swiperList: swiper_05['2'],
-//       detailList: detail_05['2'],
-//     },
-//     3: {
-//       id: '3',
-//       title: title_05['3'],
-//       swiperList: swiper_05['3'],
-//       detailList: detail_05['3'],
-//     },
-//     4: {
-//       id: '4',
-//       title: title_05['4'],
-//       swiperList: swiper_05['4'],
-//       detailList: detail_05['4'],
-//     },
-//     5: {
-//       id: '5',
-//       title: title_05['5'],
-//       swiperList: swiper_05['5'],
-//       detailList: detail_05['5'],
-//     },
-//   },
-//   6: {
-//     1: {
-//       id: '1',
-//       title: title_06['1'],
-//       swiperList: swiper_06['1'],
-//       detailList: detail_06['1'],
-//     },
-//     2: {
-//       id: '2',
-//       title: title_06['2'],
-//       swiperList: swiper_06['2'],
-//       detailList: detail_06['2'],
-//     },
-//     3: {
-//       id: '3',
-//       title: title_06['3'],
-//       swiperList: swiper_06['3'],
-//       detailList: detail_06['3'],
-//     },
-//   },
-//   7: {
-//     1: {
-//       id: '1',
-//       title: title_07['1'],
-//       swiperList: swiper_07['1'],
-//       detailList: detail_07['1'],
-//     },
-//     2: {
-//       id: '2',
-//       title: title_07['2'],
-//       swiperList: swiper_07['2'],
-//       detailList: detail_07['2'],
-//     },
-//     3: {
-//       id: '3',
-//       title: title_07['3'],
-//       swiperList: swiper_07['3'],
-//       detailList: detail_07['3'],
-//     },
-//     4: {
-//       id: '4',
-//       title: title_07['4'],
-//       swiperList: swiper_07['4'],
-//       detailList: detail_07['4'],
-//     },
-//     5: {
-//       id: '5',
-//       title: title_07['5'],
-//       swiperList: swiper_07['5'],
-//       detailList: detail_07['5'],
-//     },
-//     6: {
-//       id: '6',
-//       title: title_07['6'],
-//       swiperList: swiper_07['6'],
-//       detailList: detail_07['6'],
-//     },
-//     7: {
-//       id: '7',
-//       title: title_07['7'],
-//       swiperList: swiper_07['7'],
-//       detailList: detail_07['7'],
-//     },
-//     8: {
-//       id: '8',
-//       title: title_07['8'],
-//       swiperList: swiper_07['8'],
-//       detailList: detail_07['8'],
-//     },
-//     9: {
-//       id: '9',
-//       title: title_07['9'],
-//       swiperList: swiper_07['9'],
-//       detailList: detail_07['9'],
-//     },
-//     10: {
-//       id: '10',
-//       title: title_07['10'],
-//       swiperList: swiper_07['10'],
-//       detailList: detail_07['10'],
-//     },
-//     11: {
-//       id: '11',
-//       title: title_07['11'],
-//       swiperList: swiper_07['11'],
-//       detailList: detail_07['11'],
-//     },
-//     12: {
-//       id: '12',
-//       title: title_07['12'],
-//       swiperList: swiper_07['12'],
-//       detailList: detail_07['12'],
-//     },
-//   },
-//   8: {
-//     1: {
-//       id: '1',
-//       title: title_08['1'],
-//       swiperList: swiper_08['1'],
-//       detailList: detail_08['1'],
-//     },
-//     2: {
-//       id: '2',
-//       title: title_08['2'],
-//       swiperList: swiper_08['2'],
-//       detailList: detail_08['2'],
-//     },
-//     3: {
-//       id: '3',
-//       title: title_08['3'],
-//       swiperList: swiper_08['3'],
-//       detailList: detail_08['3'],
-//     },
-//     4: {
-//       id: '4',
-//       title: title_08['4'],
-//       swiperList: swiper_08['4'],
-//       detailList: detail_08['4'],
-//     },
-//     5: {
-//       id: '5',
-//       title: title_08['5'],
-//       swiperList: swiper_08['5'],
-//       detailList: detail_08['5'],
-//     },
-//   },
-//   9: {
-//     1: {
-//       id: '1',
-//       title: title_09['1'],
-//       swiperList: swiper_09['1'],
-//       detailList: detail_09['1'],
-//     },
-//     2: {
-//       id: '2',
-//       title: title_09['2'],
-//       swiperList: swiper_09['2'],
-//       detailList: detail_09['2'],
-//     },
-//     3: {
-//       id: '3',
-//       title: title_09['3'],
-//       swiperList: swiper_09['3'],
-//       detailList: detail_09['3'],
-//     },
-//     4: {
-//       id: '4',
-//       title: title_09['4'],
-//       swiperList: swiper_09['4'],
-//       detailList: detail_09['4'],
-//     },
-//     5: {
-//       id: '5',
-//       title: title_09['5'],
-//       swiperList: swiper_09['5'],
-//       detailList: detail_09['5'],
-//     },
-//     6: {
-//       id: '6',
-//       title: title_09['6'],
-//       swiperList: swiper_09['6'],
-//       detailList: detail_09['6'],
-//     },
-//   },
-// }
+export const hardware_list = {
+  1: {
+    1: {
+      id: '1',
+      title: title_01['1'],
+      swiperList: swiper_01['1'],
+      detailList: detail_01['1'],
+    },
+    2: {
+      id: '2',
+      title: title_01['2'],
+      swiperList: swiper_01['2'],
+      detailList: detail_01['2'],
+    },
+    3: {
+      id: '3',
+      title: title_01['3'],
+      swiperList: swiper_01['3'],
+      detailList: detail_01['3'],
+    },
+    4: {
+      id: '4',
+      title: title_01['4'],
+      swiperList: swiper_01['4'],
+      detailList: detail_01['4'],
+    },
+  },
+  2: {
+    1: {
+      id: '1',
+      title: title_02['1'],
+      swiperList: swiper_02['1'],
+      detailList: detail_02['1'],
+    },
+    2: {
+      id: '2',
+      title: title_02['2'],
+      swiperList: swiper_02['2'],
+      detailList: detail_02['2'],
+    },
+    3: {
+      id: '3',
+      title: title_02['3'],
+      swiperList: swiper_02['3'],
+      detailList: detail_02['3'],
+    },
+    4: {
+      id: '4',
+      title: title_02['4'],
+      swiperList: swiper_02['4'],
+      detailList: detail_02['4'],
+    },
+    5: {
+      id: '5',
+      title: title_02['5'],
+      swiperList: swiper_02['5'],
+      detailList: detail_02['5'],
+    },
+    6: {
+      id: '6',
+      title: title_02['6'],
+      swiperList: swiper_02['6'],
+      detailList: detail_02['6'],
+    },
+    7: {
+      id: '7',
+      title: title_02['7'],
+      swiperList: swiper_02['7'],
+      detailList: detail_02['7'],
+    },
+    8: {
+      id: '8',
+      title: title_02['8'],
+      swiperList: swiper_02['8'],
+      detailList: detail_02['8'],
+    },
+    9: {
+      id: '9',
+      title: title_02['9'],
+      swiperList: swiper_02['9'],
+      detailList: detail_02['9'],
+    },
+  },
+  3: {
+    1: {
+      id: '1',
+      title: title_03['1'],
+      swiperList: swiper_03['1'],
+      detailList: detail_03['1'],
+    },
+    2: {
+      id: '2',
+      title: title_03['2'],
+      swiperList: swiper_03['2'],
+      detailList: detail_03['2'],
+    },
+    3: {
+      id: '3',
+      title: title_03['3'],
+      swiperList: swiper_03['3'],
+      detailList: detail_03['3'],
+    },
+    4: {
+      id: '4',
+      title: title_03['4'],
+      swiperList: swiper_03['4'],
+      detailList: detail_03['4'],
+    },
+    5: {
+      id: '5',
+      title: title_03['5'],
+      swiperList: swiper_03['5'],
+      detailList: detail_03['5'],
+    },
+    6: {
+      id: '6',
+      title: title_03['6'],
+      swiperList: swiper_03['6'],
+      detailList: detail_03['6'],
+    },
+    7: {
+      id: '7',
+      title: title_03['7'],
+      swiperList: swiper_03['7'],
+      detailList: detail_03['7'],
+    },
+    8: {
+      id: '8',
+      title: title_03['8'],
+      swiperList: swiper_03['8'],
+      detailList: detail_03['8'],
+    },
+  },
+  4: {
+    1: {
+      id: '1',
+      title: title_04['1'],
+      swiperList: swiper_04['1'],
+      detailList: detail_04['1'],
+    },
+    2: {
+      id: '2',
+      title: title_04['2'],
+      swiperList: swiper_04['2'],
+      detailList: detail_04['2'],
+    },
+    3: {
+      id: '3',
+      title: title_04['3'],
+      swiperList: swiper_04['3'],
+      detailList: detail_04['3'],
+    },
+    4: {
+      id: '4',
+      title: title_04['4'],
+      swiperList: swiper_04['4'],
+      detailList: detail_04['4'],
+    },
+    5: {
+      id: '5',
+      title: title_04['5'],
+      swiperList: swiper_04['5'],
+      detailList: detail_04['5'],
+    },
+  },
+  5: {
+    1: {
+      id: '1',
+      title: title_05['1'],
+      swiperList: swiper_05['1'],
+      detailList: detail_05['1'],
+    },
+    2: {
+      id: '2',
+      title: title_05['2'],
+      swiperList: swiper_05['2'],
+      detailList: detail_05['2'],
+    },
+    3: {
+      id: '3',
+      title: title_05['3'],
+      swiperList: swiper_05['3'],
+      detailList: detail_05['3'],
+    },
+    4: {
+      id: '4',
+      title: title_05['4'],
+      swiperList: swiper_05['4'],
+      detailList: detail_05['4'],
+    },
+    5: {
+      id: '5',
+      title: title_05['5'],
+      swiperList: swiper_05['5'],
+      detailList: detail_05['5'],
+    },
+  },
+  6: {
+    1: {
+      id: '1',
+      title: title_06['1'],
+      swiperList: swiper_06['1'],
+      detailList: detail_06['1'],
+    },
+    2: {
+      id: '2',
+      title: title_06['2'],
+      swiperList: swiper_06['2'],
+      detailList: detail_06['2'],
+    },
+    3: {
+      id: '3',
+      title: title_06['3'],
+      swiperList: swiper_06['3'],
+      detailList: detail_06['3'],
+    },
+  },
+  7: {
+    1: {
+      id: '1',
+      title: title_07['1'],
+      swiperList: swiper_07['1'],
+      detailList: detail_07['1'],
+    },
+    2: {
+      id: '2',
+      title: title_07['2'],
+      swiperList: swiper_07['2'],
+      detailList: detail_07['2'],
+    },
+    3: {
+      id: '3',
+      title: title_07['3'],
+      swiperList: swiper_07['3'],
+      detailList: detail_07['3'],
+    },
+    4: {
+      id: '4',
+      title: title_07['4'],
+      swiperList: swiper_07['4'],
+      detailList: detail_07['4'],
+    },
+    5: {
+      id: '5',
+      title: title_07['5'],
+      swiperList: swiper_07['5'],
+      detailList: detail_07['5'],
+    },
+    6: {
+      id: '6',
+      title: title_07['6'],
+      swiperList: swiper_07['6'],
+      detailList: detail_07['6'],
+    },
+    7: {
+      id: '7',
+      title: title_07['7'],
+      swiperList: swiper_07['7'],
+      detailList: detail_07['7'],
+    },
+    8: {
+      id: '8',
+      title: title_07['8'],
+      swiperList: swiper_07['8'],
+      detailList: detail_07['8'],
+    },
+    9: {
+      id: '9',
+      title: title_07['9'],
+      swiperList: swiper_07['9'],
+      detailList: detail_07['9'],
+    },
+    10: {
+      id: '10',
+      title: title_07['10'],
+      swiperList: swiper_07['10'],
+      detailList: detail_07['10'],
+    },
+    11: {
+      id: '11',
+      title: title_07['11'],
+      swiperList: swiper_07['11'],
+      detailList: detail_07['11'],
+    },
+    12: {
+      id: '12',
+      title: title_07['12'],
+      swiperList: swiper_07['12'],
+      detailList: detail_07['12'],
+    },
+  },
+  8: {
+    1: {
+      id: '1',
+      title: title_08['1'],
+      swiperList: swiper_08['1'],
+      detailList: detail_08['1'],
+    },
+    2: {
+      id: '2',
+      title: title_08['2'],
+      swiperList: swiper_08['2'],
+      detailList: detail_08['2'],
+    },
+    3: {
+      id: '3',
+      title: title_08['3'],
+      swiperList: swiper_08['3'],
+      detailList: detail_08['3'],
+    },
+    4: {
+      id: '4',
+      title: title_08['4'],
+      swiperList: swiper_08['4'],
+      detailList: detail_08['4'],
+    },
+    5: {
+      id: '5',
+      title: title_08['5'],
+      swiperList: swiper_08['5'],
+      detailList: detail_08['5'],
+    },
+  },
+  9: {
+    1: {
+      id: '1',
+      title: title_09['1'],
+      swiperList: swiper_09['1'],
+      detailList: detail_09['1'],
+    },
+    2: {
+      id: '2',
+      title: title_09['2'],
+      swiperList: swiper_09['2'],
+      detailList: detail_09['2'],
+    },
+    3: {
+      id: '3',
+      title: title_09['3'],
+      swiperList: swiper_09['3'],
+      detailList: detail_09['3'],
+    },
+    4: {
+      id: '4',
+      title: title_09['4'],
+      swiperList: swiper_09['4'],
+      detailList: detail_09['4'],
+    },
+    5: {
+      id: '5',
+      title: title_09['5'],
+      swiperList: swiper_09['5'],
+      detailList: detail_09['5'],
+    },
+    6: {
+      id: '6',
+      title: title_09['6'],
+      swiperList: swiper_09['6'],
+      detailList: detail_09['6'],
+    },
+  },
+}
 
 import A1 from '@/assets/img/all_hard/1.png'
 import A2 from '@/assets/img/all_hard/2.png'

src/mock/hardware/01.js

@@ -16,7 +16,7 @@ export const hardware_detail_img_data = [
   },
 ]
 
-import S1_1_1 from '@/assets/img/1tail/01/swiper/01/01.png'
+import S1_1_1 from '@/assets/img/hardware_detail/01/swiper/01/01.png'
 import S1_1_2 from '@/assets/img/hardware_detail/01/swiper/01/02.png'
 import S1_1_3 from '@/assets/img/hardware_detail/01/swiper/01/03.png'
 

src/mock/hardware/03.js

@@ -1,6 +1,6 @@
 import T1_1 from '@/assets/img/hardware_detail/03/trumbs/12.png'
 import T1_2 from '@/assets/img/hardware_detail/03/trumbs/13.png'
-import T1_3 from '@/assets/img/hardware_detail/03/trumbs/14.png'
+import T1_3 from '@/assets/img/hardware_detail/03/trumbs/14.jpg'
 import T1_4 from '@/assets/img/hardware_detail/03/trumbs/15.png'
 import T1_5 from '@/assets/img/hardware_detail/03/trumbs/16.png'
 import T1_6 from '@/assets/img/hardware_detail/03/trumbs/17.png'

src/views/Index/components/HardwareDetails/index.vue

@@ -11,9 +11,8 @@
               <div class="header_intro">
                 <p>
                   {{
-                    hardware_detail_img_data[hardware_id] &&
-                    hardware_detail_img_data[hardware_id][hardwareExampleId]
-                      ?.title
+                    hardware_list[hardware_id] &&
+                    hardware_list[hardware_id][hardwareExampleId]?.title
                   }}
                 </p>
               </div>
@@ -25,9 +24,8 @@
                   class="case_detail_swiper"
                 >
                   <swiper-slide
-                    v-for="item in hardware_detail_img_data[hardware_id] &&
-                    hardware_detail_img_data[hardware_id][hardwareExampleId]
-                      ?.swiperList"
+                    v-for="item in hardware_list[hardware_id] &&
+                    hardware_list[hardware_id][hardwareExampleId]?.swiperList"
                     :key="item.id"
                   >
                     <div class="swiper_div_wrap">
@@ -54,23 +52,21 @@
                 <div class="article">
                   <Paragraph
                     :text="
-                      hardware_detail_img_data[hardware_id] &&
-                      hardware_detail_img_data[hardware_id][hardwareExampleId]
-                        ?.detailList?.topText
+                      hardware_list[hardware_id] &&
+                      hardware_list[hardware_id][hardwareExampleId]?.detailList
+                        ?.topText
                     "
                     :isHtml="
-                      hardware_detail_img_data[hardware_id] &&
-                      hardware_detail_img_data[hardware_id][hardwareExampleId]
-                        ?.detailList?.isHtml
+                      hardware_list[hardware_id] &&
+                      hardware_list[hardware_id][hardwareExampleId]?.detailList
+                        ?.isHtml
                     "
                   />
                   <div
                     class="card_container"
-                    v-for="(item, index) in hardware_detail_img_data[
-                      hardware_id
-                    ] &&
-                    hardware_detail_img_data[hardware_id][hardwareExampleId]
-                      ?.detailList?.card"
+                    v-for="(item, index) in hardware_list[hardware_id] &&
+                    hardware_list[hardware_id][hardwareExampleId]?.detailList
+                      ?.card"
                     :key="index"
                   >
                     <CardTitle
@@ -117,7 +113,7 @@ import { handleScreenAuto, handleScreenToFlexCenter } from '@/common/utils'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Pagination } from 'swiper'
-import { hardware_detail_img_data } from '@/mock/hardware'
+import { hardware_list } from '@/mock/hardware'
 import { useDetailStore, useSwiperStore } from '@/store'
 import { storeToRefs } from 'pinia'
 import Video from 'cpns/Video'
@@ -333,7 +329,7 @@ const handleScroll = e => {
             }
             .right_detail:hover {
               z-index: 120;
-              width: 160%;
+              width: 220%;
             }
           }
         }