循环滚动列表组件

<!-- 种养分析 -->
<template>
    <div class="palntTemplate">
        <el-row class="tab_title">
            <el-col :span="3">排名</el-col>
            <el-col :span="5">种养类型</el-col>
            <el-col :span="5">规模</el-col>
            <el-col :span="6">产量</el-col>
            <el-col :span="5">产值(万元)</el-col>
        </el-row>
        <div class="contentBox">
            <div :style="{height:tabHeight}" :class="{'ani':tabData.length>6}">
                <div>
                    <el-row class="tab_item" v-for="(item,index) in tabData" :key="index">
                        <el-col :span="3">{{index+1}}</el-col>
                        <el-col :span="5">{{item.name}}</el-col>
                        <el-col :span="5">{{item.item1}}</el-col>
                        <el-col :span="6">{{item.item2}}</el-col>
                        <el-col :span="5">{{item.item3}}</el-col>
                    </el-row>
                </div>
                <div v-if="tabData.length>6">
                    <el-row class="tab_item" v-for="(item,index) in tabData" :key="index">
                        <el-col :span="3">{{index+1}}</el-col>
                        <el-col :span="5">{{item.name}}</el-col>
                        <el-col :span="5">{{item.item1}}</el-col>
                        <el-col :span="6">{{item.item2}}</el-col>
                        <el-col :span="5">{{item.item3}}</el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: true,
            tabData: [
                { name: "水稻", item1: "2100亩", item2: "3000公斤", item3: "6100" },
                { name: "小麦", item1: "2100亩", item2: "3000公斤", item3: "6100" },
                { name: "香蕉", item1: "2100亩", item2: "3000公斤", item3: "6100" },
                { name: "冬桃", item1: "2100亩", item2: "3000公斤", item3: "6100" },
                { name: "苹果", item1: "2100亩", item2: "3000公斤", item3: "6100" },
                { name: "玉米", item1: "2100亩", item2: "3000公斤", item3: "6100" },
                { name: "白菜", item1: "2100亩", item2: "3000公斤", item3: "6100" },
                { name: "萝卜", item1: "2100亩", item2: "3000公斤", item3: "6100" }
            ]
        }
    },
    computed: {
        tabHeight: function () {
            return this.tabData.length * 0.42 + 'rem'
        }
    }
}
</script>

<style scoped>
.palntTemplate {
    width: 100%;
    height: 100%;
    padding-top: .15rem;
    text-align: center;
}

.palntTemplate .tab_title {
    height: .27rem;
    margin-top: .15rem;
    line-height: .27rem;
    font-size: .16rem;
    letter-spacing: 0px;
    color: #f4f4f4;
    background-image: url("../assets/img/tab_1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.palntTemplate .tab_item {
    height: .27rem;
    margin-top: .15rem;
    line-height: .27rem;
    color: #f4f4f4;
    cursor: pointer;
    background-image: url("../assets/img/tab_5.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.palntTemplate .tab_item:nth-child(1) {
    background-image: url("../assets/img/tab_2.png");
}

.palntTemplate .tab_item:nth-child(2) {
    background-image: url("../assets/img/tab_3.png");
}

.palntTemplate .tab_item:nth-child(3) {
    background-image: url("../assets/img/tab_4.png");
}

.palntTemplate .contentBox {
    width: 100%;
    height: 2.6rem;
    overflow: hidden;
}

.palntTemplate .ani {
    animation: tab 5s linear infinite;
	-webkit-animation: tab 5s linear infinite; ;/*Webkit内核的浏览器（如 Safari、Chrome）*/
	-moz-animation: tab 5s linear infinite; ;/*gecko内核的浏览器（如 Firefox）*/
	-o-animation: tab 5s linear infinite; ;/*Opera 浏览器*/
	-ms-animation: tab 5s linear infinite; ;/*IE8+*/
}

@keyframes tab {
    0% {
        transform: translateY(0%);
    }
    100%{
        transform: translateY(-100%);
    }
}
</style>