qt-public-ui/es/RankCards/style.less

新设计规范下业务组件库

@import (reference) '../../style/common.less';

.umui-rank {
  each(@chart-color-1, {
    @cls: replace(~"@{value}", '#', '', 'g');
    .umui-card-item.color-@{cls} {
      .umui-card-item-rank,
      .umui-card-item-bar div{
        background-color: @value !important;
      }
    }
  });
  .umui-card-item.color-unselect {
    .umui-card-item-rank,
    .umui-card-item-bar div {
      background-color: @border-color-base !important;
    }
  }

  &-cards {
    display: flex;
    justify-content: flex-start;
    .umui-card-item {
      position: relative;
      margin-right: 8px;
      height: 112px;
      width: @umui-rank-card-width;
      min-width: @umui-rank-card-width;
      border: 1px solid @border-color-base;
      border-top: none;
      padding: 16px 20px 16px 32px;
      color: @text-color;
      border-radius: @border-radius-base;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
      &:hover {
        .umui-card-item-label span {
          color: @primary-color;
        }
      }
      &.umui-small-item {
        height: 90px;
        width: @umui-rank-card-small-width;
        min-width: @umui-rank-card-small-width;
        .umui-card-item-bar {
          width: @umui-rank-card-small-width - @umui-rank-card-rank-size + 2;
        }
        .umui-with-tips {
          max-width: 89px;
        }
      }
    }

    .umui-card-item-bar {
      position: absolute;
      top: 0;
      left: -1px;
      width: @umui-rank-card-width - @umui-rank-card-rank-size + 2;
      height: 4px;
      overflow: hidden;
      border-top-right-radius: @border-radius-base;
      margin-left: 22px;
      background-color: @border-color-base;
      div {
        height: 4px;
        min-width: 1px;
        background-color: @primary-color;
      }
    }

    .umui-card-item-rank {
      position: absolute;
      color: @white;
      top: 0;
      left: -1px;
      width: @umui-rank-card-rank-size;
      border-bottom-right-radius: @umui-rank-card-rank-size;
      border-top-left-radius: @border-radius-base;
      font-size: 14px;
      height: @umui-rank-card-rank-size;
      line-height: 21px;
      text-align: center;
      text-indent: -2px;
      background-color: @primary-color;
      .umui-card-item-star {
        color: @white;
      }
    }

    .umui-with-tips {
      max-width: 124px;
    }
    .umui-card-item-label {
      position: relative;
    }
    .umui-card-item-label span {
      font-size: 14px;
      text-align: justify;
      height: 42px;
      .n-line-ellipsis(2);
    }
    .umui-label-tips {
      position: absolute;
      top: 2px;
      right: -10px;
    }

    .umui-small-item .umui-card-item-label span {
      height: 22px;
      .n-line-ellipsis(1);
    }

    .umui-card-item-value {
      .umui-indicator;

      font-size: 22px;
      line-height: 34px;
      margin-top: 2px;
    }
  }

  .umui-rank-indicators {
    margin-top: 20px;
    line-height: 34px;
    .umui-rank-indicators-label {
      font-size: 14px;
      margin-right: 12px;
      vertical-align: top;
    }
    .umui-rank-indicators-value {
      .umui-indicator;

      font-size: 22px;
      margin-right: 40px;
    }
  }
}