elementui el-progress进度条尾端自定义图片

最新推荐文章于 2024-04-27 23:16:13 发布

汪叽在羡

最新推荐文章于 2024-04-27 23:16:13 发布

阅读量1k

点赞数

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/day_z/article/details/131911617

版权

效果图：

实现思路就是在进度条自定义的百分比文字显示部分添加背景图片，然后把文字隐藏。

css实现：

      /deep/ .el-progress {
        .el-progress-bar__outer {
          background: rgba(255, 168, 0, 0.16);
          border: 1px solid #ffa800;
          border-radius: 7px;
          height: 8px !important;
          position: absolute;
          left: 0;
          right: 0;
          z-index: 1;
          overflow: visible; // 关键
        }
        .el-progress-bar__inner {
          position: absolute;
          height: 8px;
          background: linear-gradient(90deg, #ffa800 0%, #ffdd86 100%);
          &::after {
            display: block;
          }
        }
        .el-progress-bar__innerText {
          display: block;
          width: 20px;
          height: 35px !important;
          float: right;
          background-image: url("../../assets/countryScreen/yd.png");
          background-size: 100% 100%;
          margin: -14px -10px;
          position: absolute;
          right: 0;
          font-size: 0;
        }
      }