🎨 公告展示效果优化

This commit is contained in:
ronger 2021-07-01 10:14:04 +08:00
parent 6b869a2e2f
commit 2aad0f6428

View File

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