<template>
    <div class="rightChartTop">
        <div class="title">
            <div class="title1">人员</div>
            <div>租金（￥）</div>
            <div class="date">签约时间</div>
        </div>
        <div class="one">
            <ul class="new-list" :class="{ anim: animate }" @mouseenter="Stop()" @mouseleave="Up()">
                <li v-for="item, index in list" :key="index" class="liscroll">
                    <span>{{ item.namt }}</span>
                    <span>{{ item.momey }}</span>
                    <span>{{ item.number }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'rightChartTop',
    data() {
        return {
            animate: false,
            intNum: null,
            list: [
                { namt: '测试01', number: '2023-06-15', momey: '800' },
                { namt: '测试02', number: '2023-06-14', momey: '900' },
                { namt: '测试03', number: '2023-06-13', momey: '1000' },
                { namt: '测试04', number: '2023-06-12', momey: '1100' },
                { namt: '测试05', number: '2023-06-11', momey: '1200' },
                { namt: '测试06', number: '2023-06-10', momey: '1300' },
                { namt: '测试07', number: '2023-06-09', momey: '1400' },
                { namt: '测试08', number: '2023-06-08', momey: '1500' }
            ]
        }
    },
    created() {
        this.ScrollUp()
    },
    methods: {
        ScrollUp() {
            this.intNum = setInterval(() => {
                this.animate = true   // 向上滚动时添加css过渡动画
                setTimeout(() => {
                    this.list.push(this.list[0])
                    this.list.shift()
                    this.animate = false
                }, 500)
            }, 3000)
        },
        Stop() {
            clearInterval(this.intNum)
        },
        Up() {
            this.ScrollUp()
        }
    }
}
</script>

<style scoped>
.rightChartTop {
    /* background-color: #ffffff; */
    background-color: rgba(0,191,255, 0.2);
}

.anim {
    transition: all 0.5s linear;
    margin-top: -28px;
}

.new-list {
    line-height: 28px;
    height: 224px;
}

.liscroll {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    color: 	#778899;
    /* border-bottom: 1px dashed #eeeeee; */
}
/* .liscroll:last-child {
    border-bottom: none;
} */
/* .liscroll:nth-child(n){
    background-color: skyblue;
}
.liscroll:nth-child(2n){
    background-color: #7390b6;
} */

.title {
    background-color: rgba(0,191,255);
    position: relative;
    width: 100%;
    top: 0;
    z-index: 1;
    padding: 0 5px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    display: flex;
    align-items: center;
    color: #ffffff;
    font-weight: bold;
    justify-content: space-around;
}
.one{
    display: inline-block;
    height: 224px;
    width: 100%;
    box-sizing: border-box;
}
</style>