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

新设计规范下业务组件库

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

@multi-height: 180px;
@default-height: 120px;
@simple-height: 64px;
@min-width: 160px;

.umui-index-card {
  position: relative;
  border: 1px solid @border-color-base;
  min-width: @min-width;
  padding: 16px 20px;
  line-height: 1.5;
  background: @component-background;
  color: @text-color;
  // height: @default-height;
  cursor: pointer;
  .umui-multi-hook {
    position: absolute;
    font-size: 16px;
    right: 8px;
    bottom: 8px;
    color: @primary-color;
  }
  .umui-index-top {
    display: flex;
    .umui-index-title {
      max-width: 112px;
      font-size: 14px;
      .ellipsis;
    }
    &:nth-of-type(n+2) {
      margin-top: 14px;
    }
  }
  &:not(.umui-multi) {
    .um-index-desc-wrapper {
      display: none;
    }
  }
  .umui-index-value {
    .umui-indicator;

    font-size: 28px;
    line-height: 42px;
    margin: 1px 0;
  }
  .umui-index-links {
    line-height: 1.5;
    .umui-index-links-icon {
      color: @primary-color;
    }
    a {
      color: @primary-color;
      text-decoration: underline;
    }
  }

  &.umui-active {
    border-color: @primary-color;
    .umui-index-value {
      color: @primary-color;
    }
  }

  &:hover {
    background: tint(@primary-color, 95%);
  }
  .umui-indicator-action-icon {
    display: inline-block;
  }
  .umui-indicator-action-icon-none {
    display: none;
  }

  &.umui-disabled:hover {
    background: @component-background;
    cursor: default;
  }

  .umui-index-ratios {
    color: @text-color-info;
    display: inline-block;
    .umui-positive {
      .umui-index-ratio-value,
      .umui-index-ratio-icon {
        color: @error-color;
      }
    }
    .umui-negative {
      .umui-index-ratio-value,
      .umui-index-ratio-icon {
        color: @success-color;
      }
    }
    .umui-index-ratio-label {
      margin-right: 8px;
    }
    .umui-index-ratio-icon {
      margin-left: 4px;
    }
  }

  &.index-add {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    .index-add-icon {
      color: @primary-color;
      font-size: 20px;
    }
    .index-add-text {
      color: @text-color-secondary;
      font-size: 14px;
      margin-top: 16px;
    }
    &.umui-simple {
      flex-direction: row;
      line-height: 30px;
      .index-add-text {
        color: @text-color-secondary;
        font-size: 14px;
        margin-top: 0;
        margin-left: 16px;
      }
    }
  }

  .umui-tip-icon {
    margin-top: 2px;
  }
}

.umui-index-card.umui-multi {
  height: @multi-height;
  min-width: 258px;
  .umui-index-content {
    display: flex;
    align-items: center;
    .umui-index-ratios {
      margin-left: 12px;
    }
  }
  .um-index-desc-wrapper {
    display: block;
    .umui-index-desc {
      color: @text-color-info;
      margin-bottom: 8px;
      height: 36px;
      .n-line-ellipsis(2);
    }
  }
}

.umui-index-card.umui-simple {
  height: @simple-height;
  line-height: 30px;
  .umui-tip-icon {
    margin-top: 6px;
  }
}

.umui-index-card-group {
  .umui-index-card:not(:first-child) {
    border-left: none;
    &.umui-active::before {
      content: '';
      position: absolute;
      display: block;
      height: calc(~"100% + 2px");
      width: 1px;
      top: -1px;
      left: -1px;
      background-color: @primary-color;
    }
  }
}

.umui-indicator-action {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 18px;
  color: #97a1af;
  z-index: 2;
  &-menu ul {
    text-align: center;
    width: 80px;
    min-width: unset;
  }
  &:hover {
    color: #6b798e;
  }
}