机械gif

src/components/OneStop.vue

@@ -13,7 +13,7 @@
         <img class="img" :src="item.pic" />
         <div class="btn_wrap">
           <p>{{ item.title }}</p>
-          <div v-if="item.btn" class="btn">
+          <div v-if="item.btn" class="btn" @click="toDetail(item.linkUrl)">
             <span class="fontscale">查看详情</span>
           </div>
           <div v-else class="btn2">
@@ -28,6 +28,14 @@
 <script setup>
 import HeadLine from 'cpns/HeadLine'
 import { OneList } from '@/mock'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const toDetail = linkUrl => {
+  if (linkUrl) {
+    router.push(linkUrl)
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/components/SubNavigation.vue

@@ -16,7 +16,7 @@
           <div class="btn" @click="toPage('/contact')">联系我们</div>
           <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
           <div class="btn" @click="toPage('/hardware')">软硬件研发</div>
-          <div class="btn" @click="toPage('/product')">产品研发</div>
+          <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
         </div>
       </div>
     </div>

src/components/Top.vue

@@ -30,7 +30,7 @@
           <div class="btn" @click="toPage(`${isHard ? '/' : '/hardware'}`)">
             {{ isHard ? '工业设计' : '软硬件研发' }}
           </div>
-          <div class="btn" @click="toPage('/product')">产品研发</div>
+          <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
         </div>
       </div>
     </div>

src/mock/index.js

@@ -323,6 +323,7 @@ export const OneList = [
     id: 1,
     title: '工业设计',
     pic: O1,
+    linkUrl: '/case-show',
     btn: true,
   },
   {
@@ -330,17 +331,20 @@ export const OneList = [
     title: '结构设计',
     pic: O2,
     btn: true,
+    linkUrl: '/case-show',
   },
   {
     id: 3,
     title: '软件研发',
     pic: O3,
     btn: true,
+    linkUrl: '/case-show',
   },
   {
     id: 4,
     title: '硬件研发',
     pic: O4,
+    linkUrl: '/hardware',
     btn: true,
   },
   {

src/pages/Hardware.vue

@@ -25,7 +25,14 @@
     />
     <div class="img_wrap">
       <img :src="Dian" class="img" alt="" />
-      <img :src="Accelerate" class="img" alt="" />
+      <div class="gif_wrap">
+        <img :src="Gif1" class="left_img" alt="" />
+        <img :src="SAccelerate" class="right_img" alt="" />
+      </div>
+      <div class="gif_wrap">
+        <img :src="Gif2" class="left_img" alt="" />
+        <img :src="TAccelerate" class="right_img" alt="" />
+      </div>
     </div>
     <AboutUs />
     <Cooperation />
@@ -46,6 +53,10 @@ import Dian from '@/static/img/hardware/dianji.png'
 import AboutUs from 'cpns/AboutUs.vue'
 import Cooperation from 'cpns/Cooperation'
 import Bottom from 'cpns/Bottom'
+import SAccelerate from '@/static/img/hardware/s-accelerate.png'
+import TAccelerate from '@/static/img/hardware/t-accelerate.png'
+import Gif1 from '@/static/img/hardware/1.gif'
+import Gif2 from '@/static/img/hardware/2.gif'
 import { ref } from 'vue'
 
 const isDrag = ref(false)
@@ -66,6 +77,21 @@ const handleRelease = e => {
   padding-bottom: $bottom-height;
   .img_wrap {
     padding: 0 7px;
+    .gif_wrap {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+      border-radius: 3px;
+      overflow: hidden;
+      .left_img {
+        width: 133px;
+        height: 67px;
+      }
+      .right_img {
+        width: 63%;
+        height: 67px;
+      }
+    }
   }
   .img {
     width: 100%;