el-progress进度条深度选择器修改背景色线条渐变色

最近项目中使用到进度条，关于进度条的颜色，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_img3 {
    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,#f5bda3)  
 } 
 .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的背景色。