🎨 公告展示效果优化

components/announcement/list.vue

@@ -1,12 +1,11 @@
 <template>
   <el-row class="wrapper">
     <el-col :xs="24" :sm="24" :xl="24" style="margin: 0 auto;">
-      <el-carousel :interval="5000" type="card" height="256px">
-        <el-carousel-item v-for="article in announcements.articles" :key="article.idArticle" style="padding-bottom: 1rem;">
-          <el-card style="height: 250px;">
+      <el-carousel :interval="5000" height="210px" indicator-position="outside" arrow="always">
+        <el-carousel-item v-for="article in announcements.articles" :key="article.idArticle">
+          <el-card>
             <div class="card-body d-flex flex-column">
-              <el-link rel="nofollow" @click="onRouter('article',article.articleLink)" :underline="false"
-                       style="margin-bottom: .7rem;">
+              <el-link :href="article.articleLink" style="margin-bottom: .7rem;">
                 <h4>
                   {{ article.articleTitle }}
                   <el-tag
@@ -18,6 +17,9 @@
                 </h4>
               </el-link>
               <div class="text-muted article-summary-md">{{ article.articlePreviewContent }}</div>
+              <div style="margin-top: 1rem;">
+                <small class="d-block text-muted">发布于 {{ article.timeAgo }}</small>
+              </div>
             </div>
           </el-card>
         </el-carousel-item>
@@ -33,13 +35,6 @@ export default {
     announcements: {
       type: Object
     }
-  },
-  methods: {
-    onRouter(name, data) {
-      this.$router.push({
-        path: data
-      })
-    }
   }
 }
 </script>