[improvement] Card: optimize style (#2417)

2019-01-01 22:45:04 +08:00
parent 51296f0059
commit 4fcf1309b6
5 changed files with 99 additions and 93 deletions
@@ -1,67 +1,69 @@
 <template>
-  <div :class="b({ center: centered })">
-    <a
-      v-if="thumb || $slots.thumb"
-      :href="thumbLink"
-      :class="b('thumb')"
-    >
-      <slot name="thumb">
-        <img
-          v-if="lazyLoad"
-          v-lazy="thumb"
-          :class="b('img')"
-        >
-        <img
-          v-else
-          :src="thumb"
-          :class="b('img')"
-        >
-      </slot>
-      <van-tag
-        v-if="tag"
-        mark
-        type="danger"
-        :class="b('tag')"
+  <div :class="b()">
+    <div :class="b('header')">
+      <a
+        v-if="thumb || $slots.thumb"
+        :href="thumbLink"
+        :class="b('thumb')"
      >
-        {{ tag }}
-      </van-tag>
-    </a>
+        <slot name="thumb">
+          <img
+            v-if="lazyLoad"
+            v-lazy="thumb"
+            :class="b('img')"
+          >
+          <img
+            v-else
+            :src="thumb"
+            :class="b('img')"
+          >
+        </slot>
+        <van-tag
+          v-if="tag"
+          mark
+          type="danger"
+          :class="b('tag')"
+        >
+          {{ tag }}
+        </van-tag>
+      </a>

-    <div :class="b('content')">
-      <slot name="title">
-        <div
-          v-if="title"
-          v-text="title"
-          :class="b('title')"
-        />
-      </slot>
-      <slot name="desc">
-        <div
-          v-if="desc"
-          v-text="desc"
-          :class="[b('desc'), 'van-ellipsis']"
-        />
-      </slot>
-      <slot name="tags" />
+      <div :class="b('content')">
+        <slot name="title">
+          <div
+            v-if="title"
+            v-text="title"
+            :class="b('title')"
+          />
+        </slot>
+        <slot name="desc">
+          <div
+            v-if="desc"
+            v-text="desc"
+            :class="[b('desc'), 'van-ellipsis']"
+          />
+        </slot>
+        <slot name="tags" />

-      <div class="van-card__bottom">
-        <div
-          v-if="isDef(price)"
-          :class="b('price')"
-        >
-          <slot name="price">{{ currency }} {{ price }}</slot>
-        </div>
-        <div
-          v-if="isDef(originPrice)"
-          :class="b('origin-price')"
-        >
-          {{ currency }} {{ originPrice }}
-        </div>
-        <div
-          v-if="isDef(num) || $slots.num"
-          :class="b('num')"
-        >
-          <slot name="num">x {{ num }}</slot>
+        <div class="van-card__bottom">
+          <div
+            v-if="isDef(price)"
+            :class="b('price')"
+          >
+            <slot name="price">{{ currency }} {{ price }}</slot>
+          </div>
+          <div
+            v-if="isDef(originPrice)"
+            :class="b('origin-price')"
+          >
+            {{ currency }} {{ originPrice }}
+          </div>
+          <div
+            v-if="isDef(num) || $slots.num"
+            :class="b('num')"
+          >
+            <slot name="num">x {{ num }}</slot>
+          </div>
        </div>
      </div>
    </div>