<template>
<div class="scroll-wrap">
? ? ? ? ? <div
? ? ? ? ? ? class="scroll-content"
? ? ? ? ? ? :style="{ top }"
? ? ? ? ? ? @mouseenter="Stop()"
? ? ? ? ? ? @mouseleave="Up()"
? ? ? ? ? >
? ? ? ? ? ? <p v-for="item in reportList">
? ? ? ? ? ? ? 恭喜{{ item.className }}{{ item.userName }}晉級為{{ item.level }}
? ? ? ? ? ? </p>
? ? ? ? ? </div>
? ? ?</div>
</template>

created(){
? ? this.getReportList();
? ? this.ScrollUp();
},
computed: {
? ? top() {
? ? ? return -this.activeIndex * 30 + "px";
? ? },
? },
?methods: { ??
? ?? ?//查詢晉級名單
? ? getReportList() {
? ? ? var vm = this;
? ? ? vm.$axios
? ? ? ? .get("/personResult/selectImprovementList")
? ? ? ? .then(function (response) {
? ? ? ? ? if (response.data.code === "0000") {
? ? ? ? ? ? vm.reportList = response.data.data;
? ? ? ? ? ?} else if (response.data.code === "1111") {
? ? ? ? ? ? vm.$message({
? ? ? ? ? ? ? message: response.data.message,
? ? ? ? ? ? ? type: "warning",
? ? ? ? ? ? });
? ? ? ? ? }
? ? ? ? });
? ? },
? ? //滾動播報方法
? ? ScrollUp() {
? ? ? this.intnum = setInterval((_) => {
? ? ? ? if (this.activeIndex < this.reportList.length) {
? ? ? ? ? this.activeIndex += 1;
? ? ? ? } else {
? ? ? ? ? this.activeIndex = 0;
? ? ? ? }
? ? ? }, 1000);
? ? },
? ? Stop() {
? ? ? clearInterval(this.intnum);
? ? },
? ? Up() {
? ? ? this.ScrollUp();
? ? },
}

.scroll-wrap {
? position: relative;
? z-index: 2;
? float: left;
? margin-left: 5%;
? overflow: hidden;
}
.scroll-content {
? position: relative;
? transition: top 0.5s;
}
.scroll-content p {
? /* 每行信息間隔高度 */
? line-height: 30px;
? font-size: 20px;
? color: yellow;
? text-align: center;
}