From 34fda69ce2cf5f54b7336438019b255de831e04e Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Mon, 22 May 2023 10:50:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E4=BD=93=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/detail/Detail.vue         | 47 ++++++++++++++++++++++++++++++--
 src/components/detail/Parameter.vue      | 22 +++++++++++++--
 src/components/detail/RelativeMerits.vue | 22 +++++++++++++--
 src/components/detail/Video.vue          | 40 +++++++++++++++++++++++++--
 4 files changed, 123 insertions(+), 8 deletions(-)

diff --git a/src/components/detail/Detail.vue b/src/components/detail/Detail.vue
index 24dee91..7f6296b 100644
--- a/src/components/detail/Detail.vue
+++ b/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>
diff --git a/src/components/detail/Parameter.vue b/src/components/detail/Parameter.vue
index 232af79..cf747e6 100644
--- a/src/components/detail/Parameter.vue
+++ b/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>
diff --git a/src/components/detail/RelativeMerits.vue b/src/components/detail/RelativeMerits.vue
index 34c735b..2156d3d 100644
--- a/src/components/detail/RelativeMerits.vue
+++ b/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>
diff --git a/src/components/detail/Video.vue b/src/components/detail/Video.vue
index b0f22fc..77eefcd 100644
--- a/src/components/detail/Video.vue
+++ b/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>