feat(Card): style update (#2754)

* feat(Card): style update

* feat(Card): style update

packages/card/README.md

@@ -70,6 +70,7 @@
 |-----------|-----------|
 | title | 自定义标题栏，如果设置了`title`属性则不生效 |
 | desc | 自定义描述栏，如果设置了`desc`属性则不生效 |
+| price-top | 自定义价格上方区域 |
 | thumb | 自定义 thumb，如果设置了`thumb`属性则不生效 |
 | bottom | 自定义价格下方区域 |
 | footer | 自定义 footer |

packages/card/index.less

@@ -33,12 +33,21 @@
   &__img {
     width: 100%;
     height: 100%;
+    .theme(border-radius, '@border-radius-lg');
   }
 
   &__content {
     position: relative;
+    display: flex;
     flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
     min-width: 0; /* hack for flex box ellipsis */
+    .theme(min-height, '@card-thumb-size');
+
+    &--center {
+      justify-content: center;
+    }
   }
 
   &__title,
@@ -64,6 +73,16 @@
     display: inline-block;
     font-weight: bold;
     .theme(color, '@card-price-color');
+    .theme(font-size, '@card-price-font-size');
+
+    &-integer {
+      .theme(font-size, '@card-price-integer-font-size');
+      .theme(font-family, '@card-price-font-family');
+    }
+
+    &-decimal {
+      .theme(font-family, '@card-price-font-family');
+    }
   }
 
   &__origin-price {

packages/card/index.ts

@@ -19,7 +19,10 @@ VantComponent({
     desc: String,
     thumb: String,
     title: String,
-    price: String,
+    price: {
+      type: String,
+      observer: 'updatePrice'
+    },
     centered: Boolean,
     lazyLoad: Boolean,
     thumbLink: String,
@@ -35,6 +38,15 @@ VantComponent({
   },
 
   methods: {
+    updatePrice() {
+      const { price } = this.data;
+      const priceArr = price.toString().split('.');
+      this.setData({
+        integerStr: priceArr[0],
+        decimalStr: priceArr[1] ? `.${priceArr[1]}` : '',
+      });
+    },
+
     onClickThumb() {
       this.jumpLink('thumbLink');
     }

packages/card/index.wxml

@@ -21,17 +21,20 @@
       </van-tag>
     </view>
 
-    <view class="van-card__content">
-      <view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view>
-      <slot wx:else name="title" />
+    <view class="van-card__content {{ utils.bem('card__content', { center: centered }) }}">
+      <view>
+        <view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view>
+        <slot wx:else name="title" />
 
-      <view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>
-      <slot wx:else name="desc" />
+        <view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>
+        <slot wx:else name="desc" />
 
-      <slot name="tags" />
+        <slot name="tags" />
+      </view>
 
       <view class="van-card__bottom">
-        <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
+        <slot name="price-top" />
+        <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }}<text class="van-card__price-integer">{{ integerStr }}</text><text class="van-card__price-decimal">{{ decimalStr }}</text></view>
         <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
         <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
         <slot name="bottom" />

packages/common/style/var.less

@@ -42,6 +42,7 @@
 @font-size-md: 14px;
 @font-size-lg: 16px;
 @font-weight-bold: 500;
+@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
 
 // Animation
 @animation-duration-base: .3s;
@@ -52,6 +53,7 @@
 @border-width-base: 1px;
 @border-radius-sm: 2px;
 @border-radius-md: 4px;
+@border-radius-lg: 8px;
 @border-radius-max: 999px;
 
 //ActionSheet
@@ -112,13 +114,16 @@
 @card-font-size: @font-size-sm;
 @card-text-color: @text-color;
 @card-background-color: @background-color-light;
-@card-thumb-size: 90px;
+@card-thumb-size: 88px;
 @card-title-line-height: 16px;
 @card-desc-color: @gray-7;
 @card-desc-line-height: 20px;
 @card-price-color: @red;
 @card-origin-price-color: @gray-7;
 @card-origin-price-font-size: @font-size-xs;
+@card-price-font-size: @font-size-sm;
+@card-price-integer-font-size: @font-size-lg;
+@card-price-font-family: @price-integer-font-family;
 
 // Cell
 @cell-font-size: @font-size-md;