思路:
把每条公告内容看成是走马灯的一个item,去掉左右箭头,去掉指示器,上下滚动用vertical,水平滚动用horizontal
优势:实现简单
劣势:效果单一
html部分
<el-card class="notice">
<el-carousel indicator-position="none" arrow="never" direction="vertical" :interval="5000">
<el-carousel-item v-for="i in 4" :key="i" class="notice_item">
<img src="@/assets/images/notice.png" alt="">
此处是公告内容!此处是公告内容!{{i}}
</el-carousel-item>
</el-carousel>
</el-card>
style
/**/
.notice{
width: 1200px;
height: 50px;
left: 50%;
transform: translate(-50%);
position: absolute;
z-index: 2;
padding: 0;
}
.notice /deep/ .el-card__body{
padding: 0;
}
/*使文字和公告图片在一行*/
.notice_item{
height: 50px;
line-height: 50px;
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
}
.notice_item img{
width: 40px;
/*height: 16px;*/
margin: 0 44px 0 32px;
}
elementUI走马灯文档:
https://element.eleme.cn/#/zh-CN/component/carousel
注:若有错误或值得改进的地方,可以留言,欢迎指正