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

packages/card/index.less

@@ -3,12 +3,13 @@
 
 .van-card {
   color: @text-color;
-  height: 100px;
+  display: flex;
   font-size: 12px;
   position: relative;
   box-sizing: border-box;
-  padding: 5px 15px 5px 115px;
+  padding: 5px 15px;
   background-color: @background-color-light;
+  flex-wrap: wrap;
 
   &:not(:first-child) {
     margin-top: 10px;
@@ -21,11 +22,11 @@
   }
 
   &__thumb {
-    top: 5px;
-    left: 15px;
+    position: relative;
     width: 90px;
     height: 90px;
-    position: absolute;
+    margin-right: 10px;
+    flex: none;
 
     img {
       border: none;
@@ -34,52 +35,52 @@
     }
   }
 
-  &,
-  &__thumb,
   &__content {
-    display: flex;
-  }
-
-  &__content {
-    width: 100%;
+    position: relative;
+    height: 90px;
+    flex: 1;
   }
 
   &__title,
   &__desc {
-    line-height: 20px;
+    line-height: 17px;
     word-break: break-all;
   }
 
   &__title {
-    max-height: 40px;
+    max-height: 34px;
+    font-weight: bold;
 
     .multi-ellipsis(2);
   }
 
   &__desc {
     color: @gray-darker;
-    max-height: 20px;
+    max-height: 17px;
   }
 
-  &__left {
-    flex: 1;
-    min-width: 0; /* hack for flex box ellipsis */
+  &__bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    line-height: 17px;
   }
 
-  &__right {
-    flex-shrink: 0;
-    line-height: 20px;
-    padding-left: 10px;
-    text-align: right;
+  &__price {
+    display: inline-block;
   }
 
   &__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 {
@@ -89,9 +90,9 @@
   }
 
   &__footer {
-    right: 15px;
-    bottom: 8px;
-    position: absolute;
+    width: 100%;
+    text-align: right;
+    flex: none;
 
     .van-button {
       margin-left: 5px;

packages/card/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="b({ center: centered })">
     <a
+      v-if="thumb || $slots.thumb"
       :href="thumbLink"
       :class="b('thumb')"
     >
@@ -25,28 +26,33 @@
         {{ tag }}
       </van-tag>
     </a>
+
     <div :class="b('content')">
-      <div :class="b('left')">
-        <slot name="title">
-          <div
-            v-if="title"
-            :class="b('title')"
-          >
-            {{ title }}
-          </div>
-        </slot>
-        <slot name="desc">
-          <div
-            v-if="desc"
-            :class="[b('desc'), 'van-ellipsis']"
-          >
-            {{ desc }}
-          </div>
-        </slot>
-        <slot name="tags" />
-      </div>
-      <div :class="b('right')">
-        <div v-if="isDef(price)">{{ currency }} {{ price }}</div>
+      <slot name="title">
+        <div
+          v-if="title"
+          :class="b('title')"
+        >
+          {{ title }}
+        </div>
+      </slot>
+      <slot name="desc">
+        <div
+          v-if="desc"
+          :class="[b('desc'), 'van-ellipsis']"
+        >
+          {{ desc }}
+        </div>
+      </slot>
+      <slot name="tags" />
+
+      <div class="van-card__bottom">
+        <div
+          v-if="isDef(price)"
+          :class="b('price')"
+        >
+          {{ currency }} {{ price }}
+        </div>
         <div
           v-if="isDef(originPrice)"
           :class="b('origin-price')"
@@ -61,6 +67,7 @@
         </div>
       </div>
     </div>
+
     <div
       :class="b('footer')"
       v-if="$slots.footer"

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

@@ -6,16 +6,16 @@ exports[`renders demo correctly 1`] = `
     <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">
         <!----></a>
       <div class="van-card__content">
-        <div class="van-card__left">
-          <div class="van-card__title">
-            商品标题
-          </div>
-          <div class="van-card__desc van-ellipsis">
-            描述信息
-          </div>
+        <div class="van-card__title">
+          商品标题
         </div>
-        <div class="van-card__right">
-          <div>¥ 2.00</div>
+        <div class="van-card__desc van-ellipsis">
+          描述信息
+        </div>
+        <div class="van-card__bottom">
+          <div class="van-card__price">
+            ¥ 2.00
+          </div>
           <!---->
           <div class="van-card__num">
             x 2
@@ -30,16 +30,16 @@ exports[`renders demo correctly 1`] = `
       标签
     </span></a>
       <div class="van-card__content">
-        <div class="van-card__left">
-          <div class="van-card__title">
-            商品标题
-          </div>
-          <div class="van-card__desc van-ellipsis">
-            描述信息
-          </div>
+        <div class="van-card__title">
+          商品标题
         </div>
-        <div class="van-card__right">
-          <div>¥ 2.00</div>
+        <div class="van-card__desc van-ellipsis">
+          描述信息
+        </div>
+        <div class="van-card__bottom">
+          <div class="van-card__price">
+            ¥ 2.00
+          </div>
           <div class="van-card__origin-price">
             ¥ 10.00
           </div>