param

src/components/FourCard.vue

@@ -1,7 +1,43 @@
 <template>
   <div class="four_card_container">
     <div class="card_container">
-      <img :src="Hardware" alt="icon" class="icon" />
+      <svg
+        version="1.1"
+        id="图层_1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        class="icon"
+        viewBox="0 0 207 209"
+        style="enable-background: new 0 0 207 209"
+        xml:space="preserve"
+      >
+        <g>
+          <g>
+            <path
+              class="st0"
+              d="M80.73,133.85c-7.04,0-11.97-4.3-11.97-10.44V79.19c0-7.38,4.59-11.97,11.97-11.97h42.69
+   c7.38,0,11.97,4.59,11.97,11.97v42.69c0,7.05-4.3,11.97-10.44,11.97H80.73z M80.5,123.63h43.15V78.96H80.5V123.63z"
+            />
+            <path
+              class="st0"
+              d="M137.15,200.93c-2.74,0-5.87-3.13-5.87-5.87v-27.67h-21.81v27.67c0,2.74-3.13,5.87-5.87,5.87
+   c-2.74,0-5.87-3.13-5.87-5.87v-27.67H75.93v27.67c0,2.74-3.13,5.87-5.87,5.87s-5.87-3.13-5.87-5.87v-27.67h-4.8
+   c-14.17,0-22.64-11.51-22.64-22.64v-4.8H9.07c-2.74,0-5.87-3.13-5.87-5.87c0-2.74,3.13-5.87,5.87-5.87h27.67V106.4H9.07
+   c-2.74,0-5.87-3.13-5.87-5.87c0-0.47,0.1-4.64,3.58-4.64c0.46,0,0.96,0.07,1.49,0.2l0.39,0.1h28.08V74.38H9.07
+   c-2.74,0-5.87-3.13-5.87-5.87c0-2.74,3.13-5.87,5.87-5.87h26.15v-4.8c0-14.17,11.51-22.64,22.64-22.64h4.8V7.53
+   c0-2.74,3.13-5.87,5.87-5.87s5.87,3.13,5.87,5.87V35.2h21.81V7.53c0-4.33,3.16-5.87,5.87-5.87c2.74,0,5.87,3.13,5.87,5.87V35.2
+   h21.81V7.53c0-5.87,3.16-5.87,4.34-5.87c2.74,0,5.87,3.13,5.87,5.87v26.15h4.8c14.17,0,22.64,11.51,22.64,22.64v4.8h27.68
+   c2.74,0,5.87,3.13,5.87,5.87s-3.13,5.87-5.87,5.87h-27.68v21.81h27.68c2.74,0,5.87,3.13,5.87,5.87c0,1.63-1.11,3.4-2.59,4.57
+   v-0.22h-27.91v21.81h27.68c2.74,0,5.87,3.13,5.87,5.87c0,2.74-3.13,5.87-5.87,5.87h-27.68v6.33c0,14.17-11.51,22.64-22.64,22.64
+   h-4.8v27.67C143.01,197.81,139.89,200.93,137.15,200.93z M57.86,45.42c-6.42,0-10.9,4.48-10.9,10.9v88.43
+   c0,6.42,4.48,10.9,10.9,10.9h88.43c6.42,0,10.9-4.48,10.9-10.9V56.32c0-6.42-4.48-10.9-10.9-10.9H57.86z"
+            />
+          </g>
+        </g>
+      </svg>
+      <!-- <img :src="Hardware" alt="icon" class="icon" /> -->
       <h3 class="card_title">硬件定制</h3>
       <div class="desc">
         <p class="line">专业水下视学设备团队，研发出品多</p>
@@ -63,6 +99,7 @@ import Temp from '@/static/img/index/6.png'
       width: 60px;
       height: 60px;
       margin-bottom: 42px;
+      fill: #f95926;
     }
     .card_title {
       font-size: 18px;

src/components/detail/Parameter.vue

@@ -4,7 +4,35 @@
       title="产品参数"
       line1="根据一线工程师的使用感受，设计的产品，易用性很高"
     />
-    <div class="card_container"></div>
+    <div class="card_container">
+      <div class="tb_header">
+        <div class="number_header">#</div>
+        <div class="name_header">名称</div>
+        <div class="param_header">参数</div>
+      </div>
+      <div class="tb_body">
+        <div class="data_line">
+          <div class="number_header">1</div>
+          <div class="name_header">名称一号</div>
+          <div class="param_header">参数一号</div>
+        </div>
+        <div class="data_line">
+          <div class="number_header">1</div>
+          <div class="name_header">名称一号</div>
+          <div class="param_header">参数一号</div>
+        </div>
+        <div class="data_line">
+          <div class="number_header">1</div>
+          <div class="name_header">名称一号</div>
+          <div class="param_header">参数一号</div>
+        </div>
+        <div class="data_line">
+          <div class="number_header">1</div>
+          <div class="name_header">名称一号</div>
+          <div class="param_header">参数一号</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -18,11 +46,67 @@ import HeadLine from '../HeadLine'
   margin: 0 auto;
   .card_container {
     width: 76vw;
-    height: calc(76vw / 1.78);
-    background: #000;
     margin: 0 auto;
     margin-top: 90px;
-    position: relative;
+    .tb_header {
+      display: flex;
+      align-items: center;
+      background: #5064f4;
+      height: 90px;
+      font-size: 28px;
+      font-weight: 500;
+      color: #ffffff;
+      .number_header {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      .name_header {
+        flex: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .param_header {
+        flex: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .tb_body {
+      .data_line {
+        &:nth-child(odd) {
+          background: #f6f6f6;
+        }
+        width: 100%;
+        display: flex;
+        align-items: center;
+        height: 90px;
+        font-size: 28px;
+        font-weight: 400;
+        color: #000;
+        .number_header {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+        .name_header {
+          flex: 10;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .param_header {
+          flex: 10;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
   }
 }
 </style>