整体布局

src/components/detail/Detail.vue

@@ -1,10 +1,53 @@
 <template>
-  <div class="product_detail_card_container">detail</div>
+  <div class="product_detail_card_container">
+    <HeadLine title="产品细节" line1="注重产品的每一个细节" />
+    <div class="detail_card">
+      <div class="mask">
+        <div class="btn">点击查看详情</div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import HeadLine from '../HeadLine'
+</script>
 
 <style lang="scss" scoped>
 .product_detail_card_container {
+  padding: 90px 0 0 0;
+  margin: 0 auto;
+  .detail_card {
+    width: 76vw;
+    height: calc(76vw / 1.78);
+    background: #000;
+    margin: 0 auto;
+    margin-top: 90px;
+    position: relative;
+    .mask {
+      background: rgba(29, 30, 32, 0.7);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .btn {
+        width: 206px;
+        height: 55px;
+        background: linear-gradient(90deg, #7182ff, #5064f4);
+        border-radius: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22px;
+        font-weight: 300;
+        color: #fafafa;
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>

src/components/detail/Parameter.vue

@@ -1,10 +1,28 @@
 <template>
-  <div class="parameter_container">param</div>
+  <div class="parameter_container">
+    <HeadLine
+      title="产品参数"
+      line1="根据一线工程师的使用感受，设计的产品，易用性很高"
+    />
+    <div class="card_container"></div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import HeadLine from '../HeadLine'
+</script>
 
 <style lang="scss" scoped>
 .parameter_container {
+  padding: 90px 0;
+  margin: 0 auto;
+  .card_container {
+    width: 76vw;
+    height: calc(76vw / 1.78);
+    background: #000;
+    margin: 0 auto;
+    margin-top: 90px;
+    position: relative;
+  }
 }
 </style>

src/components/detail/RelativeMerits.vue

@@ -1,10 +1,28 @@
 <template>
-  <div class="relative_merits_container">优缺点</div>
+  <div class="relative_merits_container">
+    <HeadLine
+      title="优缺点对比"
+      line1="根据一线工程师的使用感受，设计的产品，易用性很高"
+    />
+    <div class="card_container"></div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import HeadLine from '../HeadLine'
+</script>
 
 <style lang="scss" scoped>
 .relative_merits_container {
+  padding: 90px 0 0 0;
+  margin: 0 auto;
+  .card_container {
+    width: 76vw;
+    height: calc(76vw / 1.78);
+    background: #000;
+    margin: 0 auto;
+    margin-top: 90px;
+    position: relative;
+  }
 }
 </style>

src/components/detail/Video.vue

@@ -1,10 +1,46 @@
 <template>
-  <div class="video_container">video</div>
+  <div class="video_container">
+    <HeadLine title="产品使用视频" line1="做专业的水下设备制造商" />
+    <div class="video">
+      <div class="mask">
+        <img :src="Play" class="video_img" alt="video_img" />
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import HeadLine from '../HeadLine'
+import Play from '@/static/img/zhongxin/shipin2.png'
+</script>
 
 <style lang="scss" scoped>
 .video_container {
+  padding: 90px 0 0 0;
+  margin: 0 auto;
+  .video {
+    width: 76vw;
+    height: calc(76vw / 1.78);
+    background: #000;
+    margin: 0 auto;
+    margin-top: 90px;
+    position: relative;
+    .mask {
+      background: rgba(80, 100, 244, 0.7);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .video_img {
+        width: 110px;
+        height: 110px;
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>