关于我们

src/components/AboutUs.vue

@@ -5,12 +5,14 @@
       <span>了解更多</span>
       <img :src="RightArrow" alt="right_arrow" class="right_arrow" />
     </div>
+    <FourCard />
   </div>
 </template>
 
 <script setup>
 import HeadLine from '@/components/HeadLine'
 import RightArrow from '@/static/img/jiantou.png'
+import FourCard from '@/components/FourCard'
 </script>
 
 <style lang="scss" scoped>

src/components/FourCard.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="four_card_container">
+    <div class="card_container">
+      <img :src="Hardware" alt="icon" class="icon" />
+      <h3 class="card_title">硬件定制</h3>
+      <div class="desc">
+        <p class="line">专业水下视学设备团队，研发出品多</p>
+        <p>年的使用经验打磨的好产品</p>
+      </div>
+      <p class="en">HARDWARE</p>
+    </div>
+    <p class="ver_line"></p>
+    <div class="card_container">
+      <img :src="Hardware" alt="icon" class="icon" />
+      <h3 class="card_title">软件定制</h3>
+      <div class="desc">
+        <p class="line">专业水下视学设备团队，研发出品多</p>
+        <p>年的使用经验打磨的好产品</p>
+      </div>
+      <p class="en">SOFTWARE</p>
+    </div>
+    <p class="ver_line"></p>
+    <div class="card_container">
+      <img :src="Hardware" alt="icon" class="icon" />
+      <h3 class="card_title">结构定制</h3>
+      <div class="desc">
+        <p class="line">专业水下视学设备团队，研发出品多</p>
+        <p>年的使用经验打磨的好产品</p>
+      </div>
+      <p class="en">STRUCTURE</p>
+    </div>
+    <p class="ver_line"></p>
+    <div class="card_container">
+      <img :src="Hardware" alt="icon" class="icon" />
+      <h3 class="card_title">硬件定制</h3>
+      <div class="desc">
+        <p class="line">专业水下视学设备团队，研发出品多</p>
+        <p>年的使用经验打磨的好产品</p>
+      </div>
+      <p class="en">HARDWARE</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Hardware from '@/static/img/3.png'
+</script>
+
+<style lang="scss" scoped>
+.four_card_container {
+  display: flex;
+  align-items: center;
+  .card_container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 40px 45px 30px 45px;
+    box-sizing: border-box;
+    .icon {
+      width: 60px;
+      height: 60px;
+      margin-bottom: 42px;
+    }
+    .card_title {
+      font-size: 18px;
+      font-weight: 500;
+      color: #3d3d3d;
+      margin-bottom: 59px;
+    }
+    .desc {
+      font-size: 14px;
+      font-weight: 300;
+      color: #7e7e7e;
+      text-align: center;
+      white-space: nowrap;
+      margin-bottom: 99px;
+      .line {
+        margin-bottom: 10px;
+      }
+    }
+    .en {
+      font-size: 14px;
+      font-family: Cottorway Typeface;
+      font-weight: 500;
+      color: #7e7e7e;
+      white-space: nowrap;
+    }
+  }
+  .ver_line {
+    height: 260px;
+    width: 1px;
+    background: #ededed;
+  }
+}
+</style>

src/components/HeadLine.vue

@@ -37,6 +37,7 @@
     font-weight: 300;
     color: #686868;
     line-height: 28px;
+    white-space: nowrap;
   }
 }
 </style>