<template>
<div class="roll" v-show="cardBuyers && cardBuyers.length > 0">
<div class="roll_cont">
<div :class="{ marquee_top: animate }" class="roll_con">
<div class="roll_box" v-for="(item, index) in cardBuyers" :key="index">
<div class="roll_main">
<img class="head_img" src="./image/header_bg.png" alt="" />
<!-- <img v-show="item.headImg" class="head_img" :src="item.headImg" alt /> -->
<div class="txtWrap">
<p class="txt">{{ item.name }}买了{{ item.num }}万个会员</p>
</div>
</div>
<p class="time">{{ item.time }}小时前</p>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
name: "AdvertRoll", //滚动广告栏
// props: {
// cardBuyers: {
// type: Array,
// default: [],
// },
// },
data() {
return {
animate: false,
setInTime: "", // 定时器
cardBuyers: [
{
name: "张经理",
num: 10000,
time: 2,
},
{
name: "李经理",
num: 10000,
time: 10,
},
{
name: "王客户",
num: 10000,
time: 10,
},
{
name: "胡经理",
num: 10000,
time: 10,
},
],
};
},
destroyed() {
clearInterval(this.setInTime); // 页面销毁时清除定时器
},
mounted() {
this.setInTime = setInterval(this.showMarquee, 3000);
},
methods: {
// 滚动栏滚动
showMarquee() {
this.animate = true;
setTimeout(() => {
this.cardBuyers.push(this.cardBuyers[0]);
this.cardBuyers.shift();
this.animate = false;
}, 500);
},
},
};
</script>
<style scoped>
.roll {
width: 100%;
height: 38px;
overflow: hidden;
}
.txtWrap {
display: inline;
padding-top: 2px;
}
.roll_cont {
margin-left: 10px;
margin-right: 14px;
}
.roll_con {
width: 100%;
margin: 0 auto;
}
.roll_main {
justify-content: center;
align-items: center;
vertical-align: middle;
margin-top: 9px;
margin-left: 10px;
}
.head_img {
width: 20px;
height: 20px;
border-radius: 50%;
vertical-align: middle;
margin-right: 6px;
border-radius: 50%;
border: solid 0.5px #ffffff;
text-align: center;
}
.marquee_top {
width: 100%;
transition: all 0.5s;
/* 容器高度 */
margin-top: -30px;
overflow: hidden;
}
.roll_box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
margin: 0 auto;
}
.txt {
font-size: 12px;
color: #fa5d1d;
text-align: center;
margin: 0;
padding: 0;
display: inline;
}
.time {
font-size: 12px;
color: #999999;
text-align: center;
margin: 0;
padding: 0;
margin-top: 6px;
}
</style>