yonui-ys/lib/components/Progress/index.less

yonui ys

.ImportProgressBall_Outer .ImportProgressBall_Inner>span {
  display: block;
  height: auto;
}

.ImportProgressBall_Outer {
  position: fixed;
  bottom: 120px;
  right: 26px;
  background: #fff;
  z-index: 111111;
  cursor: pointer;
  border-radius: 50%;
  width: 68px;
  height: 68px;
  line-height: 68px;
  text-align: center;
  box-shadow: 0px 0px 18px 0px #c7d3e3;

  .ImportProgressBall_Inner .ImportProgressBall_Rate {
    .u-progress-circle .u-progress-inner {
      text-align: center;
      line-height: 62px;
      width: 62px !important;
      height: 62px !important;
      position: relative;
      left: 0;
      top: 3px;
      font-size: 26px;
      display: inline-block;
      background-color: transparent;
      vertical-align: baseline;

      svg.rc-progress-circle {
        border-radius: 50%;
        width: 62px;
        height: 62px;
        vertical-align: baseline;
        background: linear-gradient(45deg, #def0fd 0%, #f3f3ff 100%);
      }

      .u-progress-circle .u-progress-text {
        display: block;
        position: absolute;
        width: 100%;
        text-align: center;
        line-height: 1;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        font-family: tahoma;
        margin: 0;
        font-size: 12px;
      }

      .ImportProgressBall_Percent {
        height: 62px;
        text-align: center;
        line-height: 62px;
        position: relative;
        top: -2px;

        .ImportProgressBall_PercentNum {
          font-size: 20px;
          color: #4E97FF;
        }

        .ImportProgressBall_Percent100 {
          font-size: 12px;
          color: #4E97FF;
        }
      }
    }

  }
}

.u-progress {
  display: inline-block;
  overflow: unset;
  height: auto;
  margin-bottom: 0;
  background-color: transparent;
  box-shadow: none;
}

.u-progress-inner {
  display: inline-block;
  width: 100%;
  background-color: #f7f7f7;
  border-radius: 100px;
  vertical-align: middle;
}

.u-progress-circle .u-progress-text {
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 1;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  font-family: tahoma;
  margin: 0;
}

// from base.less 异步导入左边方框
.ImportProgressBall_Popover {
  background-color: transparent;
  border: none;
  box-shadow: 0 0 0px 0 rgba(0, 0, 0, .2);
  width: 240px;
  height: 262px;
  // top: 50% !important;
  // transform: translateY(-50%) !important;
  left: auto !important; // fix: liulili 异步导入
  right: 98px;
  .tooltip-arrow{
    margin-top: -15px;
  }
  .tooltip-inner {
    padding: 12px 0;
    box-shadow: 0 0 0px 0 rgba(0, 0, 0, .2);
    background-color: #fff !important;
    border-radius: 6px !important;
    border: 1px solid #dcdcdc;
  }
  .u-popover-content {
    .ImportProgressBall_Content {
      padding: 0 12px;
    }
    .ImportProgressBall_Items {
      width: 217px;
      height: 212px;
      overflow-y: auto;
      padding-right: 16px;
      margin-top: 10px;

      .ImportProgressBall_Title {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        margin-top: 3px
      }

      .ImportProgressBall_Item {
        // margin-bottom: 9px;
        margin-bottom: 8px; // async: liulili 导入导出

        .ImportProgressBall_Progress {
          .u-progress {
            display: block;
          }
          .u-progress-inner {
            height: 5px;
            background-color: #F5F5F5 !important;
            position: relative;
            top: -6px;

            .u-progress-bg {
              height: 4px !important;
              border-radius: 6px;
              margin-top: -7px;
              background-color: #6ec2ff;
              position: relative;
              top: 7px;
            }
          }
        }

        .ImportProgressBall_Info {
          font-size: 12px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 17px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          .ImportProgressBall_Info_busName {
            max-width: 55%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis
          }
        }
      }
    }
  }

  .ant-popover-content {
    box-shadow: 0 0 0px 0 rgba(0, 0, 0, .2);

    .ant-popover-arrow {
      top: 50%;
      margin-top: -5px;
      left: 233px;
      border-width: 8px;

      &::after {
        bottom: -7px;
      }
    }

    .ant-popover-inner {
      border: none !important;
      background-color: #fff !important;
      border-radius: 6px !important;
      border: 1px solid #dcdcdc;
      box-shadow: 0 1px 6px rgba(0, 0, 0, .2) !important;
      transform-origin: right;
    }

    .ant-popover-inner-content {
      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
      border: none !important;
      padding-left: 15px;
      padding-right: 0px;
      background-color: transparent;

      .ImportProgressBall_Items {
        width: 217px;
        height: 212px;
        overflow-y: auto;
        padding-right: 16px;
        margin-top: -1px; // async: liulili 导入导出

        .ImportProgressBall_Title {
          font-size: 14px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          margin-top: 3px
        }

        .ImportProgressBall_Item {
          margin-bottom: 8px; // async: liulili 导入导出

          .ImportProgressBall_Progress {
            height: 8px;
            .ant-progress-inner {
              height: 5px;
              background-color: #f7f7f7 !important;
              position: relative;
              top: -7px;

              .ant-progress-bg {
                height: 4px !important;
                border-radius: 6px;
                margin-top: -7px;
                background-color: #6ec2ff;
                position: relative;
                top: 7px;
              }
            }
          }

          .ImportProgressBall_Info {
            font-size: 12px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 17px;
            margin-top: -16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            .ImportProgressBall_Info_busName {
              max-width: 55%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis
            }
          }
        }
      }
    }
  }
}

// 财务-成本计算，进度条
.checkout-analysis {
  .progress {
    .u-progress {
      width: 100%;
      font-size: 12px;
      position: relative;
    }

    .u-progress-show-info .u-progress-outer {
      padding-right: 2.75em;
      margin-right: -2.75em;
      display: inline-block;
      width: 100%;

      .u-progress-inner {
        background: #f5f5f5;
        box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        padding: 4px 5px;
      }
    }

    .u-progress-text {
      width: 2em;
      text-align: left;
      font-size: 1em;
      margin-left: 0.75em;
      color: #00a854;
      position: absolute;
    }

    .u-progress-bg {
      background-image: linear-gradient(to right, #15cc6f 0%, #17b442 100%);
      position: relative;
      height: 12px !important;
      border-radius: 10px;
    }
  }
}