.component-list-item {
    background: @white;
    padding: .15rem .2rem;
    box-shadow: 0 2px 10px 0 @blue-light-6l; // .box-shadow(0 0 .05rem @blue-gray-light);
    position: relative;
    border-bottom: 1px solid @blue-light-6l;

    margin-bottom: .05rem;
    .info-aera {
      position: relative;
      padding: 0 .1rem;
      span,
      p {
        display: block;
        margin-right: .8rem;
      }
      span {
        b {
          font-weight: normal;
          color: @blue-gray;
          font-size: @font-16;
          margin-right: .16rem;
        }
      }
      p {
        line-height: .18rem;
        i {
          font-style: normal;
          font-size: @font-xxs;
          color: @blue-light-3l;
          opacity: 0.80;
        }
      }
      .status,
      button {
        position: absolute;
        top: 0;
        right: .1rem;
        text-align: right;
        border-left: 1px solid @gray-light-l;
        padding-left: .08rem;
        font-size: @font-14;
        color: @blue-gray;
      }
      &.base-info {
        padding-bottom: .12rem;
        margin-bottom: .15rem;
        border-bottom: 1px dashed @gray-light-2l;
        line-height: .18rem;
        .status {
          border: 0;
          color: @blue-gray-light;
        }
      }
      &.foot-info {
        height: @font-xxs;
        line-height: @font-xxs;
        span {
          font-size: @font-xxs;
          color: @gray-dark;
        }
        button {
          top: -.02rem;
          height: @font-14;
          line-height: @font-14;
        }
      }
    }
}