feat(product_detail): sync action-sheet to common component

@@ -72,14 +72,29 @@ export default {
     opacity: 0;
     opacity: 0;
   }
   }
 
 
-  .cube-action-sheet-fade-enter-active, .cube-action-sheet-fade-leave-active {
-    transition: all 0.3s ease-in-out;
+  .cube-action-sheet-fade-enter-active {
+    transition: all 0.4s cubic-bezier(0, 0.96, 0.14, 1.06);
+  }
+
+  .cube-action-sheet-fade-leave-active {
+    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   }
 
 
   .cube-action-sheet-panel {
   .cube-action-sheet-panel {
     background: #fff;
     background: #fff;
     border-top-left-radius: 20px 24px;
     border-top-left-radius: 20px 24px;
     border-top-right-radius: 20px 24px;
     border-top-right-radius: 20px 24px;
+
+    &:after {
+      content: "";
+      width: 100%;
+      height: 200px;
+      position: absolute;
+      left: 0;
+      bottom: -200px;
+      z-index: -1;
+      background: #fff;
+    }
   }
   }
 
 
   .cube-action-sheet-bottom-enter, .cube-action-sheet-bottom-leave-active {
   .cube-action-sheet-bottom-enter, .cube-action-sheet-bottom-leave-active {
@@ -90,12 +105,18 @@ export default {
     transform: translate3d(100%, 0, 0);
     transform: translate3d(100%, 0, 0);
   }
   }
 
 
-  .cube-action-sheet-bottom-enter-active, .cube-action-sheet-bottom-leave-active,
-  .cube-action-sheet-right-enter-active, .cube-action-sheet-right-leave-active {
-    transition: all 0.3s ease-in-out;
+  .cube-action-sheet-bottom-enter-active,
+  .cube-action-sheet-right-enter-active {
+    transition: all 0.4s cubic-bezier(0, 0.96, 0.14, 1.06);
+  }
+
+  .cube-action-sheet-bottom-leave-active,
+  .cube-action-sheet-right-leave-active {
+    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   }
 
 
   /deep/ .cube-popup-mask {
   /deep/ .cube-popup-mask {
-    opacity: 0.2;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 1;
   }
   }
 </style>
 </style>