[new feature] Card: update style (#1085)

example/pages/card/index.wxml

@@ -9,6 +9,15 @@
     />
   </demo-block>
 
+  <demo-block title="没有商品图片">
+    <van-card
+      num="2"
+      price="2.00"
+      desc="描述信息"
+      title="商品标题"
+    />
+  </demo-block>
+
   <demo-block title="高级用法">
     <van-card
       num="2"
@@ -22,9 +31,9 @@
       <view slot="tags">
         <van-tag plain type="danger">满减</van-tag>
       </view>
-      <view slot="footer">
+      <view slot="footer" class="van-card__footer">
-        <van-button size="mini" custom-class="button">按钮</van-button>
+        <van-button size="mini" round custom-class="button">按钮</van-button>
-        <van-button size="mini">按钮</van-button>
+        <van-button size="mini" round>按钮</van-button>
       </view>
     </van-card>
   </demo-block>

example/pages/card/index.wxss

@@ -6,3 +6,7 @@
 .button {
   margin-right: 5px;
 }
+
+.van-card__footer {
+  margin-top: 5px;
+}

packages/card/index.less

@@ -1,13 +1,14 @@
 @import '../common/style/var.less';
 
 .van-card {
-  box-sizing: border-box;
   position: relative;
-  height: 100px;
+  display: flex;
+  padding: 5px 15px;
   font-size: 12px;
   color: @text-color;
-  padding: 5px 15px 5px 115px;
   background: @background-color-light;
+  box-sizing: border-box;
+  flex-wrap: wrap;
 
   &--center {
     align-items: center;
@@ -15,11 +16,15 @@
   }
 
   &__thumb {
-    position: absolute;
+    position: relative;
-    top: 5px;
-    left: 15px;
     width: 90px;
     height: 90px;
+    margin-right: 10px;
+    flex: none;
+
+    &:empty {
+      display: none;
+    }
   }
 
   &__img {
@@ -27,49 +32,52 @@
     height: 100%;
   }
 
-  &,
   &__content {
-    display: flex;
+    position: relative;
-  }
+    height: 90px;
-
+    flex: 1;
-  &__content {
-    width: 100%;
   }
 
   &__title,
   &__desc {
-    line-height: 20px;
+    line-height: 17px;
     word-break: break-all;
   }
 
   &__title {
-    max-height: 40px;
+    max-height: 34px;
+    font-weight: bold;
   }
 
   &__desc {
-    max-height: 20px;
+    max-height: 17px;
     color: @gray-darker;
   }
 
-  &__left {
+  &__bottom {
-    flex: 1;
+    position: absolute;
-    min-width: 0; // hack for flex box ellipsis
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    line-height: 17px;
   }
 
-  &__right {
+  &__price {
-    flex: none;
+    display: inline-block;
-    padding-left: 10px;
+    font-weight: bold;
-    line-height: 20px;
+    color: @red;
-    text-align: right;
   }
 
   &__origin-price {
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 10px;
     color: @gray-darker;
     text-decoration: line-through;
   }
 
   &__num {
-    color: @gray-darker;
+    float: right;
   }
 
   &__tag {
@@ -79,12 +87,8 @@
   }
 
   &__footer {
-    position: absolute;
+    width: 100%;
-    right: 15px;
+    text-align: right;
-    bottom: 5px;
+    flex: none;
-
-    .van-button {
-      margin-left: 5px;
-    }
   }
 }

packages/card/index.wxml

@@ -7,7 +7,7 @@
       lazy-load="{{ lazyLoad }}"
       class="van-card__img thumb-class"
     />
-    <slot wx:else name="thumb" />
+    <slot name="thumb" />
     <van-tag
       wx:if="{{ tag }}"
       mark
@@ -19,7 +19,6 @@
   </view>
 
   <view class="van-card__content">
-    <view class="van-card__left">
     <view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
     <slot wx:else name="title" />
 
@@ -27,8 +26,8 @@
     <slot wx:else name="desc" />
 
     <slot name="tags" />
-    </view>
+
-    <view class="van-card__right">
+    <view class="van-card__bottom">
       <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</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>