进度条case2

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

                        <div class="XhcsChart-part-chart-num">{{ item.value }}&nbsp;次</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</template>

<script>
export default {
    data() {
        return {
            listData: []
        }
    },
}
</script>

<style scoped lang="scss">
.XhcsChart {
    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;

            .XhcsChart-part-chart-wrap {
                border-color: #fff;
            }
        }

        &-name {
            margin-bottom: 4px;

            font-size: 14px;

            color: #FFFFFF;
        }

        &-chart {
            display: flex;
            justify-content: space-between;
            align-items: center;

            width: 100%;


            &-wrap {
                position: relative;
                width: 89%;

                height: 20px;
                border: 1px solid rgba(255, 255, 255, 0.4);

                &-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%);
                    left: 10px;

                    max-width: 85%;
                    //width: 85%;
                    height: 8px;

                    background: linear-gradient(0deg, #00B4FF 0%, #03FFFF 100%);
                    border-radius: 4px;

                    transition: width 5s linear;
                    //animation: progressAni 2s;
                    //animation-fill-mode: forwards;

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

                    //&-img {
                    //    position: absolute;
                    //    top: -9px;
                    //    left: -6px;
                    //
                    //    width: 25px;
                    //    height: 25px;
                    //
                    //    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==") no-repeat;
                    //    background-size: 100% 100%;
                    //}

                    &::after {
                        content: " ";
                        display: inline-block;
                        position: absolute;
                        right: -12px;
                        top: -11px;

                        width: 30px;
                        height: 30px;

                        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==") no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
            &-num {
                font-size: 16px;
                font-weight: bold;

                color: #19B1FB;
            }


        }






    }
}

</style>