Card 组件支持 thumb slot，加入 flex 布局 (#48)

docs/examples-docs/card.md

@@ -86,4 +86,5 @@ export default {
 | title | 自定义标题 |
 | desc | 自定义描述 |
 | tags | 自定义tags |
+| thumb | 自定义thumb |
 | footer | 自定义footer |

packages/card/src/card.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="van-card">
-    <img :src="thumb" alt="" class="van-card__img">
-    <div class="van-card__content" :class="{'van-card__content--center': !this.$slots.footer}">
-      <div class="van-card__info">
+  <div :class="['van-card', { 'van-card--center': !$slots.footer }]">
+    <div class="van-card__thumb">
+      <slot name="thumb">
+        <img :src="thumb" class="van-card__img" />
+      </slot>
+    </div>
+    <div class="van-card__content">
       <slot name="title">
         <h4 v-text="title" class="van-card__title"></h4>
       </slot>
@@ -13,17 +16,13 @@
     </div>
     <slot name="footer"></slot>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
   name: 'van-card',
   props: {
-    thumb: {
-      type: String,
-      required: true
-    },
+    thumb: String,
     title: String,
     desc: String
   }

packages/vant-css/src/card.css

@@ -1,93 +1,93 @@
 @import './mixins/ellipsis.css';
 
-@component-namespace van {
-  @b card {
-    padding: 5px 15px 5px 115px;
+.van-card {
+  color: #333;
   height: 90px;
-    background: #FAFAFA;
-    overflow: hidden;
+  background: #fafafa;
   position: relative;
-    margin-top: 10px;
+  padding: 5px 15px 5px 115px;
 
-    &:first-child {
-      margin-top: 0;
+  &:not(:first-child) {
+    margin-top: 10px;
   }
 
-    @e img {
-      width: 90px;
-      height: auto;
-      border: 0;
-      position: absolute;
+  &--center,
+  &__thumb {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__thumb {
     top: 5px;
     left: 15px;
+    width: 90px;
+    height: 90px;
+    position: absolute;
+
+    img {
+      border: none;
+      max-width: 100%;
+      max-height: 100%;
+    }
   }
 
-    @e content {
-      display: table;
+  &,
+  &__thumb,
+  &__row {
+    display: flex;
+  }
+
+  &__content {
     width: 100%;
 
-      @m center {
-        display: table;
+    &--center {
       height: 90px;
-
-        .van-card__info {
-          display: table-cell;
-          vertical-align: middle;
-        }
+      align-items: center;
     }
   }
 
-    @e row {
-      overflow: hidden;
-      padding-right: 80px;
-      position: relative;
-    }
-
-    @e title {
+  &__title,
+  &__desc {
     line-height: 20px;
-      color: #333;
-      max-height: 40px;
-      margin-bottom: 5px;
     word-break: break-all;
+  }
+
+  &__title {
+    max-height: 40px;
     @mixin multi-ellipsis 2;
   }
 
-    @e desc {
-      font-size: 12px;
+  &__desc {
     color: #666;
+    font-size: 12px;
     max-height: 20px;
-      word-break: break-all;
     @mixin multi-ellipsis 1;
   }
 
-    @e price {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 80px;
+  &__price,
+  &__num {
+    flex: 1;
+    min-width: 80px;
+    line-height: 20px;
     text-align: right;
+  }
+
+  &__price {
     font-size: 14px;
-      color: #333;
   }
 
-    @e num {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 80px;
-      text-align: right;
-      font-size: 12px;
+  &__num {
     color: #666;
+    font-size: 12px;
   }
 
-    @e footer {
-      position: absolute;
+  &__footer {
     right: 15px;
     bottom: 5px;
+    position: absolute;
 
     .van-button {
       margin-left: 5px;
     }
   }
 }
-}