产品动画

src/components/Product.vue

@@ -11,6 +11,7 @@
             <span>→</span>
           </div>
         </div>
+        <div class="detail_show_container"></div>
       </div>
       <div class="product_card">
         <img :src="A1" alt="" class="product_img" />
@@ -18,6 +19,7 @@
           <p>动车底部巡检</p>
           <div class="btn"><span>查看详情</span> <span>→</span></div>
         </div>
+        <div class="detail_show_container"></div>
       </div>
       <div class="product_card">
         <img :src="A1" alt="" class="product_img" />
@@ -25,6 +27,7 @@
           <p>动车底部巡检</p>
           <div class="btn"><span>查看详情</span> <span>→</span></div>
         </div>
+        <div class="detail_show_container"></div>
       </div>
       <div class="product_card">
         <img :src="A1" alt="" class="product_img" />
@@ -32,6 +35,7 @@
           <p>动车底部巡检</p>
           <div class="btn"><span>查看详情</span> <span>→</span></div>
         </div>
+        <div class="detail_show_container"></div>
       </div>
     </div>
   </div>
@@ -52,12 +56,12 @@ import A1 from '@/static/img/index/a1.png'
     align-items: center;
     flex-wrap: wrap;
     margin-top: 82px;
+    position: relative;
     .product_card {
       width: 50%;
       height: 393px;
       box-sizing: border-box;
       position: relative;
-      background: #000;
       .product_img {
         width: 100%;
         height: 100%;
@@ -88,6 +92,43 @@ import A1 from '@/static/img/index/a1.png'
           cursor: pointer;
         }
       }
+      &:nth-child(even) {
+        .detail_show_container {
+          display: none;
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          background: #fcfcfc;
+          height: 100%;
+          box-sizing: border-box;
+          z-index: 999;
+        }
+      }
+      &:nth-child(odd) {
+        .detail_show_container {
+          display: none;
+          position: absolute;
+          top: 0;
+          left: 100%;
+          width: 100%;
+          background: #fcfcfc;
+          height: 100%;
+          box-sizing: border-box;
+          z-index: 999;
+        }
+      }
+      &:hover {
+        .detail_show_container {
+          display: flex;
+        }
+        .bottom_tip {
+          background: none;
+          p {
+            opacity: 0;
+          }
+        }
+      }
     }
   }
 }