实现样式的覆盖以及scoped的作用域

先说样式的覆盖吧，在使用框架或者别的官方组件（像饿了吗）时，一些图标还有条形图的样式需要进行样式的覆盖。怎么做呢，下面就讲一个方法吧，

要得到效果如下

这里用到的是饿了吗的组件，实例如下：

<template>
    <el-row :gutter="60">
        <el-col :span="7" type="flex">
            <div class="grid-content card-fx" v-if="fengxian">
                    <dataCard iconName="fengxian"
                        title="覆盖度"
                        :value="fengxian.value"
                        :count="fengxian.count"
                        label="项风险"></dataCard>
            </div>
        </el-col>
        <el-col :span="7" type="flex">
            <div class="grid-content card-yw" v-if="yewu">
                    <dataCard iconName="fork"
                        title="覆盖度"
                        :value="yewu.value"
                        :count="yewu.count"
                        label="项业务">
                    </dataCard>
            </div>
        </el-col>
        <el-col :span="7" type="flex">
            <div class="grid-content card-up" v-if="update">
                    <dataCard iconName="fork"
                        title="更新率"
                        :value="update.value"
                        :count="update.count"
                        label="条案例">
                        <el-radio-group v-model="updateRadio" size="mini" class="btn-group">
                            <el-radio-button label="本月"></el-radio-button>
                            <el-radio-button label="全年"></el-radio-button>
                        </el-radio-group>
                    </dataCard>
            </div>
        </el-col>
    </el-row>
</template>

在样式中：

<style lang="less">
.card-fx {
    .icon {
        color: #2db7f5
    }
    .el-progress-bar__inner {
        background-color: #2db7f5
    }
}
.card-yw {
    .icon {
        color: #808bc6
    }
    .el-progress-bar__inner {
        background-color: #808bc6
    }
}
.card-up {
    .icon {
        color: #70d354
    }
    .el-progress-bar__inner {
        background-color: #70d354
    }
}
.btn-group {
        margin-top: -55px;
        margin-left: 70px;
        position: relative;
    }
</style>

这样就可以实现了，其中 .el-progress-bar__inner {background-color: #2db7f5}为进度条的颜色。

下面说第二点，如果在style中加入scoped对其进行局域限制，会使颜色不显示，是因为scoped的作用域在最外层，没有进行到里面。