朔黄进度条定制样式

hanbaoshan

2021-02-28 45e291c7e7a17d8b34535cc2d6847abcce39f574

朔黄进度条定制样式

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -76,6 +76,7 @@
          <div class="val">99%</div>
          <div class="trend">
            <el-progress
              class="defined-progress"
              :percentage="99"
              stroke-linecap="square"
              color="#1890ff"
@@ -1111,10 +1112,10 @@
<style lang="scss">
.guide-index {
  .el-progress-bar__outer {
    border-radius: 5px;
    border-radius: 2px;
  }
  .el-progress-bar__inner {
    border-radius: 5px;
    border-radius: 2px;
  }
  .triangle {
    width: 0;
@@ -1133,6 +1134,27 @@
      border-right-color: transparent;
    }
  }
  .defined-progress{
    position: relative;
    &:before{
      content: '';
      position: absolute;
      width: 2px;
      height: 4px;
      background: #1890ff;
      top: -6px;
      right: -5px;
    }
    &:after{
      content: '';
      position: absolute;
      width: 2px;
      height: 4px;
      background: #1890ff;
      bottom: -6px;
      right: -5px;
    }
  }
  .tab-menu {
    .el-tabs__item {
      padding: 0 30px !important;