在开发后台管理系统时，经常会用到进度条这样一个控件，Element UI中提供了progress这样一个组件，如下图所示：

 该组件默认的颜色会比较单一，为此时常需要对该组件的样式进行一些优化，以满足实际项目的需求。

上图是对该组件经过样式优化后的效果，下面提供代码供大家参考：

<template>
    <div id="orderAnalysis">
        <el-row>
            <el-col :span="12">
                <div class="progress-box" v-for="(item,index) in progressLeftData" :key="index">
                    <div class="progress-title">
                        <img src="./images/1.png" alt="首充用户数" v-if="index==0">
                        <img src="./images/2.png" alt="二充用户数" v-if="index==1">
                        <img src="./images/3.png" alt="三充用户数" v-if="index==2">
                        <span class="num" v-if="index>2">{{index+1}}</span>
                        <span class="text">{{item.title}}</span> 
                    </div>
                    <div class="progress-body-left">
                        <el-progress 
                            :text-inside="true" 
                            :percentage="item.rate" 
                            :stroke-width="22">
                        </el-progress>
                    </div>
                    <div class="progress-result">
                        <div>{{item.ucount}}人，占{{item.rate}}%</div>
                        <div>ARPPU: ￥{{item.arppu}}</div>
                    </div>

                </div>
            </el-col>
            <el-col :span="12">
                <div class="progress-box" v-for="(item,index) in progressRightData" :key="index">
                    <div class="progress-title">
                        <img src="./images/1.png" alt="累充<=30元" v-if="index==0">
                        <img src="./images/2.png" alt="累充30-100元" v-if="index==1">
                        <img src="./images/3.png" alt="累充100-200元" v-if="index==2">
                        <span class="num"  v-if="index>2">{{index+1}}</span>
                        <span class="text">{{item.title}}</span> 
                    </div>
                    <div class="progress-body-right">
                        <el-progress 
                            :text-inside="true" 
                            :percentage="item.rate" 
                            :stroke-width="22">
                        </el-progress>
                    </div>
                    <div class="progress-result">
                        <div>{{item.ucount}}人，占{{item.rate}}%</div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>



export default {
    name: "orderAnalysis",
    data() {
        return {
            // 模拟数据
            progressLeftData:[
                {title:"首充用户数",rate:100,ucount:9813,arppu:40.45},
                {title:"二充用户数",rate:16.83,ucount:1652,arppu:53.58},
                {title:"三充用户数",rate:9.09,ucount:892,arppu:82.78},
                {title:"四充用户数",rate:4.3,ucount:422,arppu:94.87},
                {title:"五充及以上",rate:2.08,ucount:204,arppu:69.06}
            ],
            progressRightData:[
                {title:"累充<=30元",ucount:9982,rate:63.59},
                {title:"累充30-100元",ucount:4131,rate:26.32},
                {title:"累充100-200元",ucount:1052,rate:6.7},
                {title:"累充200-300元",ucount:497,rate:3.17},
                {title:"累充300元以上",ucount:36,rate:0.23},

            ]
        };
    },
};
</script>

<style lang="scss" scoped>

#orderAnalysis {
    margin:20px;
    padding: 20px;
    background:#fff;
    border:1px solid #ccc;
    width:1000px;
    .progress-box{
        height:32px;
        line-height: 32px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom:25px;
        .progress-title{
            width:130px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            img{
                width:20px;
                height:20px;
                margin-right:10px;
            }
            .num{
                width:20px;
                margin-right:10px;
                text-align: center;
            }
            .text{
                width:100px;
                font-size:14px;
                color:#666;
            }
        }
        .progress-body-left,
        .progress-body-right{
            flex:1;
            margin: 0 10px;
        }
        .progress-result{
            width:150px;
            div{
                height:16px;
                line-height: 16px;
                font-size:14px;
                text-align: left;
                color:#666;
            }
        }

    }
}

</style>


<style lang="scss">

// 组件样式优化代码
#orderAnalysis {

    .el-progress-bar__outer{
        border-radius:0px;
        background: #FFF4F5;
    }
    .el-progress-bar__innerText{
        color:blue;
    }

    .el-progress-bar__inner{
        border-radius:0px;
        background: linear-gradient(270deg,#FD3546 0%,#FC8434 100%);
    }

    .el-progress-bar__inner{
        border-radius:0px;
        background: linear-gradient(270deg,#DF35FC 0%,#FC6060 100%);
    }
    

}

</style>