进度条case1

<template>
    <div class="process">
        <div class="process-wrap scroll-hide">
                <div class="process-part" v-for="(item, index) in listData" :key="`chartData-${index}`">
                    <div class="process-part-chart">
                        <div class="process-part-chart-name">{{ item.name }}</div>
                        <div class="process-part-chart-wrap">
                            <div class="process-part-chart-wrap-progress" :style="{width: item.progress}">
                                <div class="process-part-chart-wrap-progress-img"></div>
                            </div>
                        </div>

                        <div class="process-part-chart-num">{{ item.value }}&nbsp;次</div>
                    </div>
                </div>
            </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            listData: [
                {
                    name: '台州市',
                    progress: '90%',
                    value: '22',
                },
                {
                    name: '温州市',
                    progress: '80%',
                    value: '20',
                },
                {
                    name: '嘉兴市',
                    progress: '70%',
                    value: '16',
                },
            ],
        }
    },
} 
</script>
<style scoped lang="scss">
.process {
    width: 100%;
    height: 100%;
    &-wrap {
        width: 100%;
        height: 100%;
        padding: 12px 0;
        overflow-y: auto;
    }
    &-part {
        width: 100%;
        height: calc(100% / 5);
        margin-bottom: 10px;
        transition: all 0.28s;
        cursor: pointer;
        box-sizing: border-box;
        &:hover {
           padding: 0 10px;
            .process-part-chart-wrap {
                border-color: #fff;
            }
        }
        &-chart {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            &-name {
                margin-bottom: 4px;
                font-size: 14px;
                color: #FFFFFF;
                width: 15%;
                text-align: left;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            &-wrap {
                position: relative;
                width: 73%;
                height: 20px;
                // border: 1px solid rgba(255, 255, 255, 0.4);
                background: #283b4a;
                &-line {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    width: 100%;
                    height: 1px;
                    border: 1px solid #19B1FB;
                    background: #072B3C;
                }
                &-progress {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    max-width: 85%;
                    height: 8px;
                    background: linear-gradient(62deg, #00B4FF 0%, #80D0C7 100%);
                    transition: width 5s linear;

                    @keyframes progressAni {
                        0% {
                            width: 0;
                        }
                        100% {
                            width: 100%;
                        }
                    }

                    &::after {
                        content: " ";
                        display: inline-block;
                        position: absolute;
                        right: 0px;
                        top: -5px;
                        width: 4px;
                        height: 18px;
                        background: #fff;
                    }
                }
            }
            &-num {
                width: 12%;
                font-size: 16px;
                font-weight: bold;
                text-align: right;
                color: #19B1FB;
            }
        }
    }
}
</style>