From 47246a785258ee2d9d33b66c5253302f801d1606 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Wed, 24 May 2023 19:45:02 +0800
Subject: [PATCH] product detail card animate

---
 src/components/detail/Detail.vue | 82 ++++++++++++++++++++++++++++------------
 1 file changed, 57 insertions(+), 25 deletions(-)

diff --git a/src/components/detail/Detail.vue b/src/components/detail/Detail.vue
index 9d41ded..d31761e 100644
--- a/src/components/detail/Detail.vue
+++ b/src/components/detail/Detail.vue
@@ -2,10 +2,26 @@
   <div class="product_detail_card_container">
     <HeadLine title="产品细节" line1="注重产品的每一个细节" />
     <div class="detail_card">
-      123
-      <!-- <div class="mask">
-        <div class="btn">点击查看详情</div>
-      </div> -->
+      <div class="one_card">
+        <div class="mask">
+          <div class="btn">点击查看详情</div>
+        </div>
+      </div>
+      <div class="one_card">
+        <div class="mask">
+          <div class="btn">点击查看详情</div>
+        </div>
+      </div>
+      <div class="one_card">
+        <div class="mask">
+          <div class="btn">点击查看详情</div>
+        </div>
+      </div>
+      <div class="one_card">
+        <div class="mask">
+          <div class="btn">点击查看详情</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -20,33 +36,49 @@ import HeadLine from '../HeadLine'
   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;
+    flex-wrap: wrap;
+    .one_card {
+      width: 50%;
+      height: 393px;
+      background: #ddd;
+      border: solid 1px #000;
+      box-sizing: border-box;
+      &:hover {
+        .mask {
+          opacity: 1;
+          transition: 1s ease;
+        }
+      }
+      .mask {
+        z-index: 1;
+        background: rgba(0, 0, 0, 1);
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
         display: flex;
+        opacity: 0;
         align-items: center;
         justify-content: center;
-        font-size: 22px;
-        font-weight: 300;
-        color: #fafafa;
-        cursor: pointer;
+        .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;
+        }
       }
     }
   }