mock数据前准备

src/components/FourCard.vue

@@ -39,8 +39,8 @@
       </svg>
       <h3 class="card_title">硬件定制</h3>
       <div class="desc">
-        <p class="line">专业水下视学设备团队，研发出品多</p>
-        <p>年的使用经验打磨的好产品</p>
+        <p class="line">专业定制专用的硬件设备、机械设备</p>
+        <p>高度定制以满足产品需求</p>
       </div>
       <p class="en">HARDWARE</p>
     </div>
@@ -126,8 +126,8 @@
       </svg>
       <h3 class="card_title">软件定制</h3>
       <div class="desc">
-        <p class="line">专业水下视学设备团队，研发出品多</p>
-        <p>年的使用经验打磨的好产品</p>
+        <p class="line">专业定制驱动程序、应用软件</p>
+        <p>深挖产品需求和特点</p>
       </div>
       <p class="en">SOFTWARE</p>
     </div>
@@ -210,8 +210,8 @@
       </svg>
       <h3 class="card_title">结构定制</h3>
       <div class="desc">
-        <p class="line">专业水下视学设备团队，研发出品多</p>
-        <p>年的使用经验打磨的好产品</p>
+        <p class="line">专业定制外部内部结构、线路布置及人机交互</p>
+        <p>为好产品保驾护航</p>
       </div>
       <p class="en">STRUCTURE</p>
     </div>
@@ -261,12 +261,12 @@
           />
         </g>
       </svg>
-      <h3 class="card_title">硬件定制</h3>
+      <h3 class="card_title">外观定制</h3>
       <div class="desc">
-        <p class="line">专业水下视学设备团队，研发出品多</p>
-        <p>年的使用经验打磨的好产品</p>
+        <p class="line">专业的外形、色彩及品牌设计</p>
+        <p>营造品牌独特的视觉形象</p>
       </div>
-      <p class="en">HARDWARE</p>
+      <p class="en">APPEARANCE</p>
     </div>
   </div>
 </template>

src/components/Product.vue

@@ -6,7 +6,7 @@
         <img :src="A1" alt="" class="product_img" />
         <div class="bottom_tip">
           <p>动车底部巡检</p>
-          <div class="btn">
+          <div class="btn" @click="toProductDetail(1)">
             <span>查看详情</span>
             <span>→</span>
           </div>
@@ -22,7 +22,9 @@
         <img :src="A2" alt="" class="product_img" />
         <div class="bottom_tip">
           <p>受电弓压力检测</p>
-          <div class="btn"><span>查看详情</span> <span>→</span></div>
+          <div class="btn" @click="toProductDetail(2)">
+            <span>查看详情</span> <span>→</span>
+          </div>
         </div>
         <div class="detail_show_container">
           <div class="content">
@@ -35,7 +37,9 @@
         <img :src="A3" alt="" class="product_img" />
         <div class="bottom_tip">
           <p>异响检测装置</p>
-          <div class="btn"><span>查看详情</span> <span>→</span></div>
+          <div class="btn" @click="toProductDetail(3)">
+            <span>查看详情</span> <span>→</span>
+          </div>
         </div>
         <div class="detail_show_container">
           <div class="content">
@@ -48,7 +52,9 @@
         <img :src="A4" alt="" class="product_img" />
         <div class="bottom_tip">
           <p>线性光源发生器</p>
-          <div class="btn"><span>查看详情</span> <span>→</span></div>
+          <div class="btn" @click="toProductDetail(4)">
+            <span>查看详情</span> <span>→</span>
+          </div>
         </div>
         <div class="detail_show_container">
           <div class="content">
@@ -69,6 +75,17 @@ import A1 from '@/static/img/index/a1.png'
 import A2 from '@/static/img/index/a2.png'
 import A3 from '@/static/img/index/a3.png'
 import A4 from '@/static/img/index/a4.png'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const toProductDetail = index => {
+  router.push({
+    path: '/product',
+    query: {
+      i: index,
+    },
+  })
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/Product.vue

@@ -18,11 +18,16 @@ import RelativeMerits from '@/components/detail/RelativeMerits'
 import Parameter from '@/components/detail/Parameter'
 import Contact from '@/components/Contact'
 import Bottom from '@/components/Bottom'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const index = ref(1)
 onMounted(() => {
   document.getElementById('product_overview').scrollIntoView({
     behavior: 'smooth',
   })
+  const i = route.query.i || 1
+  index.value = i
 })
 </script>