vue-ant-patterns/lib/d-card-layout/style/index.less

vue-ant-patterns

@import '../../style/themes/index.less';
@import '../../style/mixins/flex.less';

@depot-prefix-cls: ~'@{depot-prefix}-layout-card';

.@{depot-prefix-cls} {
  /* 无间隔的flex布局 */
  &-inner-flex {
    flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    position: relative;
    &:first-child {
      .depot-dcard-inner {
        border-top-left-radius: @padding-xs / 2;
        border-bottom-left-radius: @padding-xs / 2;
      }
    }
    &:last-child {
      margin-right: 0;
      .depot-dcard-inner {
        border-top-right-radius: @padding-xs / 2;
        border-bottom-right-radius: @padding-xs / 2;
      }
    }
    &::after {
      content: '';
      position: absolute;
      display: block;
      height: 75%;
      width: 1px;
      background-color: rgba(0, 0, 0, 0.04);
      top: 12.5%;
      right: 0;
    }
    &:last-child::after {
      display: none;
    }
  }

  /*栅格断点区间*/
  &-inner-grid {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    float: left;
    position: relative;
    min-height: 1px;
    margin-bottom: @padding-md;
  }
  &-inner-col-sm {
    width: 100%;
  }
  &-inner-col-md {
    width: 50%;
  }
  &-inner-col-lg {
    width: 33.3%;
  }
  &-inner-col-xl {
    width: 25%;
  }
  &-inner-col-xxl {
    width: 16.66666667%;
  }
}

// @media screen and(max-width: 768px) {
//   .depot-layout-card-inner-grid {
//     width: 100%;
//   }
// }

// @media screen and (min-width: 769px) and (max-width: 1017px) {
//   .depot-layout-card-inner-grid {
//     width: 50%;
//   }
// }

// @media screen and (min-width: 1018px) and (max-width: 1439px) {
//   .depot-layout-card-inner-grid {
//     width: 33.3%;
//   }
// }
// @media screen and (min-width: 1440px) and (max-width: 2199px) {
//   .depot-layout-card-inner-grid {
//     width: 25%;
//   }
// }
// @media screen and (min-width: 2200px) {
//   .depot-layout-card-inner-grid {
//     width: 16.66666667%;
//   }
// }
/*工作中心布局-特殊的一种卡片布局，卡片大小为240*148px*/
.depot-layout-card-workdashboard {
  .flex;
  .flex-wrap();
}
.depot-layout-card-inner-workdashboard {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  // float: left;
  position: relative;
  width: @workdashboard-card-W;
  height: @small-card-H;
  margin-bottom: @padding-xs;
}