文章模块基本完成

src/components/Paper/ArticleList.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="articleList" @click="goArticleDetail">
+    <div style="display: flex;flex-direction: column;">
+        <div style="display: flex;justify-content: flex-start">
+            <span style="font-size: 16px;color: black;font-weight: bold">{{articleList.ArticleTitle}}</span>
+        </div>
+          <span v-text="brief" style="display: flex;justify-content:flex-start;text-align: left;margin-top: 10px;font-size: 13px;color: #9ca3af">
+
+          </span>
+        <div style="margin-top: 10px;display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;font-size: 12px;color: #1f2937">
+            <span style="display: flex;justify-content: flex-start"> 作者: </span>
+            <span style="margin-left: 5px"> {{articleList.username}} </span>
+            <span style="margin-left: 5px">●</span>
+            <span style="margin-left: 5px">发布于 </span>
+            <span style="margin-left: 5px">{{articleList.publishtime}}</span>
+            <span style="margin-left: 5px">●</span>
+            <span style="margin-left: 5px">阅读: </span>
+            <span style="margin-left: 5px">{{ formatNumber(articleList.ReadCount) }}</span>
+        </div>
+    </div>
+    <div style="width: 100px;height: 100px;margin-right: 10px">
+        <el-avatar :size="100" shape="square" :src="articleList.articleico"></el-avatar>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "ArticleList",
+    props: {
+        articleList: Object
+    },
+    data(){
+        return {
+        }
+
+    },
+    computed:{
+        brief: function() {
+            return this.articleList.ArticleContent.substr(0, 100) + '...';
+        },
+    },
+    methods:{
+        formatNumber(num) {
+            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
+        },
+        goArticleDetail(){
+            this.$router.push({
+                path:'/ArticleDetail',
+                query: {
+                    id: this.articleList.ArticleId,
+                    refresh: true
+                }})
+            // console.log(this.$route.query.id)
+        },
+    }
+}
+</script>
+
+<style scoped>
+.articleList{
+    height: 15vh;
+    width: 100%;
+    /*background-color: #59A3A4;*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 10px;
+    cursor: pointer;
+    overflow: hidden;
+}
+.articleList:hover{
+    background-color: #eeeeee;
+}
+</style>