实现样式的覆盖以及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的作用域在最外层，没有进行到里面。