动态进度条组件

<!-- 土地利用统计 -->
<template>
    <div class="landTemplate">
        <div class="title">
            <div class="titleMenu">
                <div :class="{'isActive':isActive == 0}" @click="setActiveItem(0)">农用地</div>
                <div :class="{'isActive':isActive == 1}" @click="setActiveItem(1)">建设用地</div>
                <div :class="{'isActive':isActive == 2}" @click="setActiveItem(2)">未利用地</div>
            </div>
            <span>单位:市亩</span>
        </div>
        <div class="contentBox">
            <el-carousel indicator-position="none" @change="carousel" height="2.2rem" ref="carousel" class="carousel">
                <el-carousel-item v-for="(item,index) in listData" :key="index">
                    <div v-for="(i,ix) in item.list" :key="ix" class="listItem">
                        <div>{{i.title}}</div>
                        <div>
                            <div class="progressBox">
                                <div class="progress" :style="{width:i.num}">
                                    <img :src="item.url">
                                </div>
                            </div>
                        </div>
                        <span>{{i.num2}}</span>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isActive:1,
            listData:[{
                title:"农用地",
                url:require("../assets/img/y1.png"),
                list:[{
                    title:"水田",
                    num:'86%',
                    num2:'128'
                },{
                    title:"旱地",
                    num:'45%',
                    num2:'182'
                },{
                    title:"其它园地",
                    num:'60%',
                    num2:'1'
                },{
                    title:"乔木林地",
                    num:'80%',
                    num2:'1280.6'
                },{
                    title:"天然牧草地",
                    num:'40%',
                    num2:'1280.6'
                }]
            },{
                title:"建设用地",
                url:require("../assets/img/y2.png"),
                list:[{
                    title:"水田",
                    num:'50%',
                    num2:'1280.6'
                },{
                    title:"水田",
                    num:'43%',
                    num2:'1280.6'
                },{
                    title:"水田",
                    num:'20%',
                    num2:'1280.6'
                }]
            },{
                title:"未利用地",
                url:require("../assets/img/y3.png"),
                list:[{
                    title:"水田",
                    num:'10%',
                    num2:'1280.6'
                },{
                    title:"水田",
                    num:'34%',
                    num2:'1280.6'
                }]
            }]
        }
    },
    methods:{
        carousel:function(e){
            this.isActive = e
        },
        setActiveItem(index){
            this.isActive = index
            this.$refs.carousel.setActiveItem(index)
        }
    }
}
</script>

<style>
.landTemplate{
    width: 100%;
    height: 100%;
}
.landTemplate >.title{
    padding-top: .24rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.landTemplate .titleMenu{
    display: flex;
    justify-content: space-between;
}
.landTemplate .titleMenu>div{
    margin-right:.15rem;
    width: .9rem;
    height: .32rem;
    background-image: url("../assets/img/d1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .16rem;
    color: #f4f4f4;
    cursor: pointer;
}
.landTemplate .titleMenu>.isActive{
    background-image: url("../assets/img/d2.png");
    font-size: .16rem;
    color: #fff;
    font-weight: 600;
}
.landTemplate >.title>span{
    font-size: .14rem;
    color: #f4f4f4;
    line-height: .32rem;
}
.landTemplate .contentBox{
    width: 100%;
    height: 2.2rem;
}
.landTemplate .contentBox .carousel .el-carousel-item{
    width: 100%;
    height: 100%;
    
}
.landTemplate .el-carousel__container button{
    display: none;
}
.landTemplate .listItem{
    display: flex;
    justify-content: space-between;
    margin-top: .2rem;
    line-height: .2rem;
    font-size: .16rem;
    color: #f4f4f4;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    padding-left: .06rem;
}
.landTemplate .listItem>div:first-child{
    width: .9rem;
    text-align-last: justify;
    text-align: justify;
    text-justify: distribute-all-lines;
}
.landTemplate .listItem>span{
    width: .66rem;
}
.landTemplate .listItem>div:nth-child(2){
    width: 2.56rem;
	height: .2rem;
    display: flex;
    align-items: center;
}
.landTemplate .progressBox{
    width: 100%;
    height: .13rem;
    border-radius: .06rem;
	border: solid .01rem #13e1e3;
    overflow: hidden;
}
.landTemplate .progress{
    width: 80%;
    height: 100%;
    border-radius: 0.06rem;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
.landTemplate .progress img{
    width: 2.56rem;
    height: 400%;
    position: absolute;
    top: 0;
    left: 0;
    animation: imgAny 0.9s linear infinite;
    display: block;
}
@keyframes imgAny {
    0%{
        transform: translateY(-46%);
    }
    100%{
        transform: translateY(0);
    }
}
</style>