three card

src/components/MetalPlate/LinkCard/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="link_card_container">
     <div class="card mr" @click="toPage('/')">
-      <img class="bg_img" :src="BG" alt="" />
       <div class="modal">
         <h1 class="title">整机开发</h1>
         <div class="btn">
@@ -10,23 +9,38 @@
         </div>
         <p class="en">Complete machine</p>
       </div>
+      <img class="bg_img" :src="B1" alt="" />
+    </div>
+    <div class="card mr" @click="toPage('/pc/design')">
+      <div class="modal blbg">
+        <h1 class="title">工业设计</h1>
+        <div class="btn">
+          <p class="text">立即前往</p>
+          <img :src="Arrow" class="icon" alt="" />
+        </div>
+        <p class="en">Industrial Design</p>
+      </div>
+      <img class="bg_img" :src="B2" alt="" />
     </div>
     <div class="card" @click="toPage('/pc/hardware')">
-      <img class="bg_img" :src="BG" alt="" />
       <div class="modal">
         <h1 class="title">软硬件定制</h1>
         <div class="btn">
           <p class="text">立即前往</p>
           <img :src="Arrow" class="icon" alt="" />
         </div>
-        <p class="en">Hardware</p>
+        <p class="en">Software Hardware</p>
       </div>
+      <img class="bg_img" :src="B4" alt="" />
     </div>
   </div>
 </template>
 
 <script setup>
-import BG from '@/assets/design/link/1.png'
+import B1 from '@/assets/design/link/1.png'
+import B2 from '@/assets/design/link/2.png'
+import B3 from '@/assets/design/link/3.png'
+import B4 from '@/assets/design/link/4.png'
 import Arrow from '@/assets/design/link/arrow.png'
 import { useRouter, useRoute } from 'vue-router'
 
@@ -55,47 +69,46 @@ const toPage = (path, p) => {
 }
 
 .link_card_container {
-  padding: 0 190px;
+  padding: 0 48px;
   padding-bottom: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   .card {
     flex: 1;
-    height: 420px;
+    height: 287px;
     position: relative;
     cursor: pointer;
+    display: flex;
+    align-items: center;
     .bg_img {
-      width: 100%;
-      height: auto;
+      width: 290.42px;
+      height: 287px;
       object-fit: cover;
     }
     .modal {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
       height: 100%;
-      background: rgba(0, 0, 0, 0.86);
-      padding-left: 98px;
+      padding-left: 36px;
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
+      background: #000;
+      flex: 1;
       .title {
         font-family: AlibabaPuHuiTi;
-        font-size: 76px;
+        font-size: 40px;
         font-weight: bold;
         line-height: normal;
         letter-spacing: 0.06em;
         color: #f6f6f6;
       }
       .btn {
-        margin-top: 18px;
-        margin-bottom: 20px;
+        margin-top: 15px;
+        margin-bottom: 9px;
         border-radius: 324px;
-        padding: 11px 24px;
+        padding: 4px 24px;
         background: #2a4ee1;
         display: flex;
         align-items: center;
@@ -107,22 +120,28 @@ const toPage = (path, p) => {
           line-height: normal;
           letter-spacing: 0.1em;
           color: #ffffff;
-          margin-right: 15px;
+          margin-right: 4px;
         }
         .icon {
-          width: 19px;
-          height: 4px;
+          width: 12px;
+          height: 2px;
         }
       }
       .en {
         font-family: Poppins;
-        font-size: 30px;
+        font-size: 16px;
         font-weight: 500;
         line-height: normal;
         letter-spacing: 0em;
         color: #ffffff;
       }
     }
+    .blbg {
+      background: #2a4ee1;
+      .btn {
+        background: #000;
+      }
+    }
     &:hover {
       .modal {
         .btn {

src/views/MetalPlate/index.vue

@@ -18,9 +18,9 @@
       <FactoryEnvironment />
       <HeaderLine title="合作客户" />
       <Partner />
-      <HeaderLine title="不止于此" />
-      <LinkCard />
     </div>
+    <HeaderLine title="不止于此" />
+    <LinkCard />
     <NewBottomMetal />
   </div>
 </template>
@@ -63,7 +63,6 @@ onMounted(() => {
   background: #f5f7fd;
   .main_content_wrap {
     padding: 0 245px;
-    padding-bottom: 143px;
     padding-top: 28px;
   }
 }