el

el

最近项目中使用到进度条，关于进度条的颜，ui画的长这样，

这是我一开始画的，

其实element上的进度条实际上长这样

我把蓝这一块改成白后，发现和底一样，就看不出进度的效果了，所以随便先调了一个颜，结果被ui小无情的指出要修改
好吧，修改之后进度条长这样

仔细看是有渐变效果的，现在上代码

     <div class=header_pic_1 header_pic_img1><el-progress :percentage=70 ></el-progress></div>.header_pic_img1 {background: url(~@/assets/images/xxx.png) no-repeat;::v-deep .el-progress { .el-progress-bar{.el-progress-bar__outer{background:linear-gradient(to right#8075fd , #b87bfe)  } .el-progress-bar__inner{background:linear-gradient(to right, #8075fd ,  #f9fdf8)
}}
}}.header_pic_img2 {background: url(~@/assets/images/xxx.png) no-repeat;::v-deep .el-progress { .el-progress-bar{.el-progress-bar__outer{background:linear-gradient(to right,#8cc8fa,#a4b7fd)  } .el-progress-bar__inner{background:linear-gradient(to right, #8cc8fa, #f9fdf8)
}}
}}.header_pic_img {background: url(~@/assets/images/xxx.png) no-repeat;::v-deep .el-progress { .el-progress-bar{.el-progress-bar__outer{background:linear-gradient(to right,#f2a4aa,#f5bda)  } .el-progress-bar__inner{background:linear-gradient(to right,#f2a4aa,#f9fdf8)
}}
}}.header_pic_img4 {background: url(~@/assets/images/xxx.png) no-repeat;::v-deep .el-progress { .el-progress-bar{.el-progress-bar__outer{background:linear-gradient(to right,#98e8bb,#baeb9e)  } .el-progress-bar__inner{background:linear-gradient(to right,#98e8bb ,#f9fdf8 )
}}
}}
}
::v-deep .el-progress__text {margin-left: -10px;color: #fff;
}

el-progress所在的div有一张背景图，一排有四个div对应四张背景图。el-progress的样式要深度选择器才能修改到，四个progress一开始用nth-child的方式 想给每个progress修改为不一样的颜，但是试了几种都没成功。
我用的是sass预编译器，通过层级嵌套，作用到每一个独立的div，从而改变内部的progress的背景。