feat(Sku): update style (#4437)

src/sku/Sku.js

@@ -546,7 +546,6 @@ export default createComponent({
         round
         closeable
         position="bottom"
-        closeIcon="clear"
         class="van-sku-container"
         getContainer={this.getContainer}
         closeOnClickOverlay={this.closeOnClickOverlay}

src/sku/components/SkuMessages.js

@@ -113,7 +113,7 @@ export default createComponent({
 
   render() {
     return (
-      <CellGroup class={bem()}>
+      <CellGroup class={bem()} border={this.messages.length > 0}>
         {this.messages.map((message, index) => (message.type === 'image' ? (
           <Cell
             class={bem('image-cell')}

src/sku/index.less

@@ -6,17 +6,11 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    height: 80%;
-    max-height: max-content; /* avoid androiod keyboard cover fields */
+    min-height: 50%;
+    max-height: 80%;
     overflow-y: visible;
     font-size: @font-size-md;
     background: @white;
-
-    .van-popup__close-icon {
-      top: @padding-sm;
-      color: @sku-icon-gray-color;
-      font-size: 20px;
-    }
   }
 
   &-body {
@@ -55,6 +49,9 @@
     }
 
     &__goods-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
       min-height: 96px;
       padding: @padding-sm 36px @padding-sm @padding-xs;
       overflow: hidden;
@@ -225,8 +222,7 @@
   }
 
   &-messages {
-    padding-bottom: @padding-xs;
-    background: @background-color;
+    padding-bottom: @padding-xl;
 
     &__image-cell {
       .van-cell__title {
@@ -314,7 +310,7 @@
     padding: @padding-xs @padding-md;
 
     .van-button {
-      height: 36px;
+      height: 40px;
       font-weight: 500;
       font-size: @font-size-md;
       line-height: 34px;
@@ -322,13 +318,13 @@
       border-radius: 0;
 
       &:first-of-type {
-        border-top-left-radius: 18px;
-        border-bottom-left-radius: 18px;
+        border-top-left-radius: 20px;
+        border-bottom-left-radius: 20px;
       }
 
       &:last-of-type {
-        border-top-right-radius: 18px;
-        border-bottom-right-radius: 18px;
+        border-top-right-radius: 20px;
+        border-bottom-right-radius: 20px;
       }
 
       &--warning {

src/style/var.less

@@ -437,7 +437,7 @@
 // Popup
 @popup-background-color: @white;
 @popup-transition: transform @animation-duration-base ease-out;
-@popup-round-border-radius: 12px;
+@popup-round-border-radius: 20px;
 @popup-close-icon-size: 18px;
 @popup-close-icon-color: @gray-dark;
 @popup-close-icon-margin: 16px;