feat(SPA): 资讯三张图样式调整

issue #455
slimkit · Nov 30, 2018 · ebbda77 · ebbda77
1 parent 51533b7
commit ebbda77
Showing 1 changed file with 108 additions and 53 deletions.
diff --git a/resources/spa/src/page/news/components/NewsCard.vue b/resources/spa/src/page/news/components/NewsCard.vue
@@ -3,27 +3,40 @@
     :to="`/news/${news.id}`"
     tag="div"
     class="news-card"
+    :class="{ 'multi-image':images.length }"
   >
-    <section class="body">
-      <h2>{{ title }}</h2>
-      <p>
-        <i
-          v-show="!currentCate"
-          class="news-cate"
-        >
-          {{ cate }}
-        </i>
+    <template v-if="images.length">
+      <!-- 三张图 -->
+      <h2 class="title">{{ title }}</h2>
+      <ul class="images">
+        <li v-for="img in images" :key="img.id">
+          <div
+            class="img"
+            :style="{'background-image': `url(${getImageUri(img.id, 'w=190&h=135')})`}"
+          />
+        </li>
+      </ul>
+      <p class="info">
+        <i v-show="!currentCate" class="news-cate"> {{ cate }} </i>
         <span>{{ author }}</span>
         <span>・{{ hits }}浏览</span>
         <span>・{{ time | time2tips }}</span>
       </p>
-    </section>
-    <div
-      v-if="image"
-      class="poster"
-    >
-      <img :src="image">
-    </div>
+    </template>
+    <template v-else>
+      <section class="body">
+        <h2 class="title">{{ title }}</h2>
+        <p class="info">
+          <i v-show="!currentCate" class="news-cate"> {{ cate }} </i>
+          <span>{{ author }}</span>
+          <span>・{{ hits }}浏览</span>
+          <span>・{{ time | time2tips }}</span>
+        </p>
+      </section>
+      <div v-if="image" class="poster">
+        <img :src="image">
+      </div>
+    </template>
   </RouterLink>
 </template>
 
@@ -44,6 +57,13 @@ export default {
       time: '',
     }
   },
+  computed: {
+    images () {
+      if (!this.news.images) return []
+      if (this.news.images.length < 3) return []
+      return this.news.images.slice(0, 3)
+    },
+  },
   mounted () {
     this.formatData()
   },
@@ -63,9 +83,14 @@ export default {
       this.time = createdAt
       this.cate = category.name
       this.image = image
-        ? `${this.$http.defaults.baseURL}/files/${image.id}?w=190&h=135`
+        ? this.getImageUri(image.id, 'w=190&h=135')
         : null
     },
+    getImageUri (id, query) {
+      let uri = `${this.$http.defaults.baseURL}/files/${id}`
+      if (query) uri += `?${query}`
+      return uri
+    },
   },
 }
 </script>
@@ -80,57 +105,87 @@ export default {
   background-color: #fff;
   border-bottom: 1px solid #ededed; /*no*/
 
+  &.multi-image {
+    flex-direction: column;
+    align-items: flex-start;
+    height: 315px;
+  }
+
   .body {
     display: flex;
     flex: auto;
     min-width: 0; // 不要删除此行，与 flex 弹性宽度有关
     height: 100%;
     flex-direction: column;
     justify-content: space-between;
+  }
 
-    h2 {
-      flex: 0 0 auto;
-      margin: 0;
-      max-height: 42 * 2px;
-      font-size: 32px;
-      color: #333;
-      line-height: 42px;
-      font-weight: normal;
+  .title {
+    flex: none;
+    margin: 0;
+    max-height: 42 * 2px;
+    font-size: 32px;
+    color: #333;
+    line-height: 42px;
+    font-weight: normal;
 
-      text-overflow: -o-ellipsis-lastline;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-    }
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 
-    p {
-      font-size: 24px;
-      color: #ccc;
-      margin: 0;
-      text-overflow: -o-ellipsis-lastline;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      vertical-align: middle;
+  .images {
+    flex: auto;
+    display: flex;
+    justify-content: space-between;
+    height: 135px;
+    width: 100%;
+    margin: 20px 0;
+    overflow: hidden;
+
+    li {
+      flex: none;
+      width: 32.5%;
 
-      i.news-cate {
-        padding: 4px;
-        font-style: normal;
-        display: inline-block;
-        font-size: 20px;
-        height: 30/0.95px;
-        color: @primary;
-        line-height: 30/0.95-10px;
-        border: 1px solid currentColor; /*no*/
-        -webkit-transform-origin-x: 0;
-        -webkit-transform: scale(0.95);
-        transform: scale(0.95);
+      .img {
+        background: no-repeat center;
+        background-size: cover;
+        width: 100%;
+        height: 100%;
       }
     }
   }
 
+  .info {
+    flex: none;
+    font-size: 24px;
+    color: #ccc;
+    margin: 0;
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+
+    i.news-cate {
+      padding: 4px;
+      margin-right: 8px;
+      font-style: normal;
+      display: inline-block;
+      font-size: 20px;
+      height: 30/0.95px;
+      color: @primary;
+      line-height: 30/0.95-10px;
+      border: 1px solid currentColor; /*no*/
+      -webkit-transform-origin-x: 0;
+      -webkit-transform: scale(0.95);
+      transform: scale(0.95);
+    }
+  }
+
   .poster {
     margin-left: 40px;
     order: 1;