公告
暂无公告
{{text.val}}
import baseModule from '../baseModule'
export default {
name: "announcementList",
computed: {
text() {
return {
id: this.number,
val: this.textArr[this.number]
}
}
},
mounted() {
this.startMove()
},
methods: {
startMove() {
// eslint-disable-next-line
let timer = setTimeout(() => {
if (this.number === 2) {
this.number = 0;
} else {
this.number += 1;
}
this.startMove();
}, 2000); // 滚动不需要停顿则将2000改成动画持续时间
}
},
data() {
return {
textArr: [
'1 第一条公告',
'2 第二条公告第二条公告',
'3 第三条公告第三条公告第三条公告'
],
number: 0
}
},
}
.announcementList {
margin: 0;
padding: 0;
font-size: 14px;
.lable {
margin:5px 0px 7px 10px;
}
.displayContent {
color: #9f9f9f;
text-align: center;
}
.textBox {
width: 100%;
height: 35px;
margin: 0 auto;
margin-top: 3px;
overflow: hidden;
position: relative;
text-align: center;
}
.text {
width: 100%;
position: absolute;
bottom: 0;
}
.slide-enter-active, .slide-leave-active {
transition: all 0.5s linear;
}
.slide-enter {
transform: translateY(20px) scale(1);
opacity: 1;
}
.slide-leave-to {
transform: translateY(-20px) scale(0.8);
opacity: 0;
}
}
