feat(CouponList): refactor style & add new prop show-count (#5139)

src/coupon/index.less

@@ -14,45 +14,36 @@
 
   &__content {
     display: flex;
+    align-items: center;
     box-sizing: border-box;
-    height: @coupon-content-height;
+    min-height: @coupon-content-height;
     padding: @coupon-content-padding;
-  }
-
-  p,
-  h2 {
-    margin: 0;
-
-    .ellipsis();
-  }
-
-  h2 {
-    height: 34px;
-    font-weight: @font-weight-bold;
-    line-height: 34px;
-  }
-
-  p {
-    color: @gray-6;
-    font-size: @font-size-sm;
-    line-height: 16px;
+    color: @gray-8;
   }
 
   &__head {
     position: relative;
     min-width: @coupon-head-width;
-    padding-right: @padding-xs;
+    padding: 0 @padding-xs;
+    color: @coupon-amount-color;
+    text-align: center;
+  }
 
-    p {
-      white-space: pre-wrap;
-    }
+  &__amount,
+  &__condition,
+  &__name,
+  &__valid {
+    .ellipsis();
   }
 
   &__amount {
-    color: @coupon-amount-color;
+    margin-bottom: 6px;
+    font-weight: @font-weight-bold;
     font-size: @coupon-amount-font-size;
+    .ellipsis();
 
     span {
+      font-weight: normal;
       font-size: @coupon-currency-font-size;
 
       &:not(:empty) {
@@ -61,6 +52,12 @@
     }
   }
 
+  &__condition {
+    font-size: @font-size-sm;
+    line-height: 16px;
+    white-space: pre-wrap;
+  }
+
   &__body {
     position: relative;
     flex: 1;
@@ -68,17 +65,26 @@
   }
 
   &__name {
+    margin-bottom: 10px;
+    font-weight: bold;
     font-size: @coupon-name-font-size;
+    line-height: 20px;
+  }
+
+  &__valid {
+    font-size: @font-size-sm;
   }
 
   &__corner {
     position: absolute;
-    top: @padding-md;
+    top: 0;
     right: @padding-md;
+    bottom: 0;
   }
 
   &__description {
     padding: @coupon-description-padding;
+    font-size: @font-size-sm;
     background-color: @coupon-description-background-color;
     border-top: 1px dashed @coupon-description-border-color;
   }
@@ -92,10 +98,8 @@
       height: @coupon-content-height - 10px;
     }
 
-    p,
-    h2,
-    span {
-      color: @coupon-disabled-text-color;
+    .van-coupon__head {
+      color: inherit;
     }
   }
 }