更新 article 相关页面

src/views/home/Article.vue

@@ -1,32 +1,73 @@
 <template>
   <div>
-    <el-row v-if="totalSize !== 0" id="movie-list">
-      <el-col :md="24">
-        <div>
-          <el-col v-for="(item, index) in dataList"
-                  :key="index"
-                  :md="6" :sm="12" :xs="12"
-                  style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-            <article-card :article="item" />
-          </el-col>
-        </div>
-        <!--
-          分页按钮：
-          page-size：每页显示条数
-          total：总条数
-          hide-on-single-page： 页数为一时隐藏
-        -->
-        <el-col :span="24" class="pagination">
-          <el-pagination
-            background
-            :small="screenWidth <= 768"
-            layout="prev, pager, next"
-            :page-size="pageSize"
-            :current-page="currentPage"
-            :total="totalSize"
-            @current-change="handleCurrentChange"
-          />
-        </el-col>
+    <el-row v-if="totalSize !== 0" class="movie-list">
+      <el-col :md="18">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>文章列表</span>
+              <el-button style="float: right; padding: 3px 0" type="text" @click="refresh">刷新</el-button>
+            </div>
+            <div class="text item" v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+              <el-row>
+                <el-col :md="4">
+                  <router-link target="_blank" :to="`/article/${item.articleId}`">
+                    <el-image
+                      lazy
+                      fit="cover"
+                      :src="item.coverUrl"
+                      class="coverImg"
+                    />
+                  </router-link>
+                </el-col>
+                <el-col :md="20">
+                  <router-link target="_blank" :to="`/article/${item.articleId}`">
+                    <el-row>
+                      <div style="padding: 14px">
+                        <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
+                      </div>
+                    </el-row>
+                  </router-link>
+                  <el-row>
+                    <div style="padding: 14px">
+                      <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.excerpt }}</span>
+                    </div>
+                  </el-row>
+                </el-col>
+              </el-row>
+              <el-row>
+                <div style="padding: 14px">
+                  <span style="left: 0;margin-bottom: 0px;color: black;">发布于: {{ item.publishAt }}</span>
+                </div>
+              </el-row>
+              <el-divider />
+            </div>
+            <el-col :span="18" class="pagination">
+              <el-pagination
+                :small="screenWidth <= 768"
+                layout="prev, pager, next"
+                :page-size="pageSize"
+                :current-page="currentPage"
+                :total="totalSize"
+              />
+            </el-col>
+          </el-card>
+        </el-row>
+      </el-col>
+      <el-col :md="6">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <el-row>
+                <span>热门文章</span>
+              </el-row>
+            </div>
+            <div class="text item">
+              <el-row>
+              </el-row>
+            </div>
+          </el-card>
+        </el-row>
       </el-col>
     </el-row>
     <el-row v-else class="not-result">
@@ -39,12 +80,21 @@
 </template>
 
 <script>
-import ArticleCard from 'components/card/ArticleCard'
-import { getArticles } from "@/api/article";
+import {getArticles} from "@/api/article";
 
 export default {
   name: 'Article',
-  components: { ArticleCard },
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 50
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  components: {},
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -82,38 +132,60 @@ export default {
           const respData = resp.data
           this.dataList = respData.list
           this.totalSize = respData.totalSize
-          console.log(this.dataList)
         }
       })
     },
+    refresh() {
+      this.$notify({
+        message: '接口未实现',
+        type: 'info',
+        duration: 3000
+      })
+    }
   }
 }
 </script>
 
 <style scoped>
-#movie-list {
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.movie-list {
   padding-top: 15px;
   padding-left: 6%;
   padding-right: 6%;
 }
 
+.coverImg {
+  width: 100%;
+  height: 120px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
 .not-result {
   padding-top: 100px;
   padding-bottom: 100px;
   text-align: center;
 }
 
-.pagination {
-  text-align: center;
-  padding: 10px;
-}
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  #movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
 </style>

src/views/home/ArticlePage.vue

@@ -127,12 +127,6 @@ export default {
 </script>
 
 <style scoped>
-.movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
-}
-
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px) {
   .movie-list {
@@ -142,6 +136,12 @@ export default {
   }
 }
 
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
 .clearfix:before,
 .clearfix:after {
   display: table;