[improvement] Card: optimize style (#2417)

packages/card/en-US.md

@@ -52,7 +52,6 @@ Use `slot` to custom content.
 | num | Number | `String | Number` | - |
 | price | Price | `String | Number` | - |
 | origin-price | Origin price | `String | Number` | - |
-| centered | Whether content vertical centered | `String` | `false` |
 | currency | Currency symbol |  `String` | `¥` |
 | thumb-link | Thumb link URL | `String` | - |
 | lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` |

packages/card/index.less

@@ -2,14 +2,12 @@
 @import '../style/mixins/ellipsis';
 
 .van-card {
-  color: @text-color;
-  display: flex;
-  font-size: 12px;
   position: relative;
-  box-sizing: border-box;
+  color: @text-color;
+  font-size: 12px;
   padding: 5px 15px;
+  box-sizing: border-box;
   background-color: @background-color-light;
-  flex-wrap: wrap;
 
   &:not(:first-child) {
     margin-top: 10px;
@@ -21,6 +19,10 @@
     justify-content: center;
   }
 
+  &__header {
+    display: flex;
+  }
+
   &__thumb {
     position: relative;
     width: 90px;
@@ -44,12 +46,12 @@
 
   &__title,
   &__desc {
-    line-height: 17px;
     word-break: break-all;
   }
 
   &__title {
-    max-height: 34px;
+    line-height: 16px;
+    max-height: 32px;
     font-weight: bold;
 
     .multi-ellipsis(2);
@@ -57,7 +59,8 @@
 
   &__desc {
     color: @gray-darker;
-    max-height: 17px;
+    max-height: 20px;
+    line-height: 20px;
   }
 
   &__bottom {
@@ -65,7 +68,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    line-height: 17px;
+    line-height: 18px;
   }
 
   &__price {
@@ -93,7 +96,6 @@
   }
 
   &__footer {
-    width: 100%;
     text-align: right;
     flex: none;
 

packages/card/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div :class="b({ center: centered })">
+  <div :class="b()">
+    <div :class="b('header')">
       <a
         v-if="thumb || $slots.thumb"
         :href="thumbLink"
@@ -65,6 +66,7 @@
           </div>
         </div>
       </div>
+    </div>
 
     <div
       :class="b('footer')"

packages/card/test/__snapshots__/demo.spec.js.snap

@@ -3,7 +3,8 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-card"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
+    <div class="van-card">
+      <div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
           <!----></a>
         <div class="van-card__content">
           <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
@@ -14,11 +15,13 @@ exports[`renders demo correctly 1`] = `
             <div class="van-card__num">x 2</div>
           </div>
         </div>
+      </div>
       <!---->
     </div>
   </div>
   <div>
-    <div class="van-card"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"> <span class="van-tag van-tag--mark van-card__tag" style="background-color:#f44;">
+    <div class="van-card">
+      <div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"> <span class="van-tag van-tag--mark van-card__tag" style="background-color:#f44;">
         标签
       </span></a>
         <div class="van-card__content">
@@ -37,6 +40,7 @@ exports[`renders demo correctly 1`] = `
             <div class="van-card__num">x 2</div>
           </div>
         </div>
+      </div>
       <div class="van-card__footer">
         <div class="card__footer"><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
           按钮

packages/card/zh-CN.md

@@ -52,7 +52,6 @@ Vue.use(Card);
 | num | 商品数量 | `String | Number` | - | - |
 | price | 商品价格 | `String | Number` | - | - |
 | origin-price | 商品划线原价 | `String | Number` | - | 1.3.6 |
-| centered | 内容是否垂直居中 | `String` | `false` | - |
 | currency | 货币符号 |  `String` | `¥` | - |
 | thumb-link | 点击左侧图片后的跳转链接 | `String` | - | 1.3.4 |
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | 1.5.0 |