硬件

src/components/CaseShow.vue

@@ -10,6 +10,7 @@
       <div class="card">
         <p class="title">国网照明巡检摄像头</p>
         <div class="img_box">
+          <div class="img"></div>
           <div class="bottom_text">
             <p>工业设计</p>
             <p>软硬件研发</p>
@@ -67,6 +68,11 @@ import HeadLine from 'cpns/HeadLine'
         width: 100%;
         flex: 1;
         position: relative;
+        .img {
+          width: 100%;
+          height: 100%;
+          background: red;
+        }
         .bottom_text {
           position: absolute;
           left: -50%;

src/components/Hardware.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="hardware_container">
+    <HeadLine
+      themeTitle="硬件案例"
+      title="展示"
+      line1="医疗健康、智能硬件、工业设备、高铁设备、户外设备"
+      line2="特种设备、智能家居、实验仪器、消费电子"
+    />
+    <div class="line_cards">
+      <div class="card">
+        <p class="title">国网照明巡检摄像头</p>
+        <div class="img_box">
+          <div class="img"></div>
+          <div class="bottom_text">
+            <p>工业设计</p>
+            <p>软硬件研发</p>
+            <p>样机制作</p>
+            <p>量产</p>
+          </div>
+        </div>
+      </div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
+
+<style lang="scss" scoped>
+.hardware_container {
+  .line_cards {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    column-gap: 7px;
+    padding: 0 7px;
+    box-sizing: border-box;
+    row-gap: 7px;
+    .card {
+      height: 132px;
+      background: #ffffff;
+      border-radius: 3px;
+      flex: 1;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      padding: 11px 7px 7px 7px;
+      .title {
+        font-size: 8px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #2f2f2f;
+        padding-left: 2px;
+        margin-bottom: 11px;
+      }
+      .img_box {
+        width: 100%;
+        flex: 1;
+        position: relative;
+        .img {
+          width: 100%;
+          height: 100%;
+          background: red;
+        }
+        .bottom_text {
+          position: absolute;
+          left: -50%;
+          bottom: -10%;
+          height: 34px;
+          background: rgba(0, 0, 0, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #ffffff;
+          width: 200%;
+          transform: scale(0.5);
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/index.vue

@@ -2,6 +2,7 @@
   <div class="home_container">
     <Swiper />
     <CaseShow />
+    <Hardware />
     <MechanicalDrive />
     <Track />
     <OneStop />
@@ -16,6 +17,7 @@
 <script setup>
 import Swiper from 'cpns/Swiper'
 import CaseShow from 'cpns/CaseShow'
+import Hardware from 'cpns/Hardware'
 import MechanicalDrive from 'cpns/MechanicalDrive'
 import AboutUs from 'cpns/AboutUs'
 import Track from 'cpns/Track'