vue-ant-patterns/es/d-card/style/index.less

vue-ant-patterns

@import '../../style/index.less';

@gradient-min: fade(@card-background, 20%);
@gradient-max: fade(@card-background, 40%);

@depot-prefix-cls: ~'@{depot-prefix}-dcard';
@depot-prefix-container-cls: ~'@{depot-prefix}-container';
@depot-prefix-persion-cls: ~'@{depot-prefix}-dcard-person';

.@{depot-prefix-cls} {
  &-container {
    position: relative;
    .perspective(800px);

    //卡片封面
    .cover-box {
      position: relative;
      overflow: hidden;
    }
    .cover-box > * {
      width: 100%;
    }
    .cover-title {
      position: absolute;
      bottom: 0;
      height: @cover-title-H;
      line-height: @cover-title-H !important;
      padding-left: @padding-md;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      .f14;
      .ellipsis();
    }
    .cover-box img {
      width: 100%;
      height: auto;
      .transform-scale(1);
      .transition(all 1s ease-in-out);
    }

    .cover-box:hover img {
      .transform-scale(1.08);
    }
    //右下角操作区域
    .right-bottom-operation {
      position: absolute;
      bottom: 0;
      right: 0;
      border: @padding-xs solid;
      border-color: transparent #4b5874 #4b5874 transparent;
      width: 0;
      height: 0;
      cursor: pointer;
      opacity: 0;
      .transition(opacity 0.3s);
    }
    .rightBottom-show {
      opacity: 1;
    }
    .W50 {
      width: 50%;
    }

    .ant-card-head-wrapper {
      height: 100%;
      line-height: 1;
    }

    .ant-card-body {
      .flex;
      .flex-justify-end();
      .flex-col();
      z-index: 9;
      // height: 100%;
    }

    .ant-card-head-title {
      padding: 5px 0;
    }
    .ant-card-head {
      min-height: 40px;
    }
    .ant-card-extra {
      padding-top: 0;
      padding-bottom: 0;
    }

    .ant-card-hoverable:hover {
      box-shadow: 0 0 20px;
    }
    .ant-card-small > .ant-card-head > .ant-card-head-wrapper > .ant-card-head-title {
      // padding-bottom: 0;
      padding: 5px 0 5px;
      line-height: 30px;
    }
    .ant-tabs {
      margin-bottom: 0;
    }
  }
  &-loading {
    .ant-card-extra {
      width: 100%;
      line-height: 22px;
    }
  }
  &-container-inner {
    .transform-3d();
    position: relative;
  }
  // &-showBackCard &-container-inner{
  //   // -webkit-transform: rotateY( -180deg );
  //   // -moz-transform: rotateY( -180deg );
  //   // -o-transform: rotateY( -180deg );
  //   // transform: rotateY( -180deg );
  // }

  &-inner {
    border-radius: 0;
    .transition(all 1s);
    .backface-visibility();
    .flex;
    .flex-col();
    .flex-justify-between();
  }

  &-container-other {
    height: 100%;
    overflow: hidden;
  }

  &-showBackCard &-front {
    .transform-rotateY(-180deg);
    // z-index: 2;
  }
  &-back {
    .transform-rotateY(180deg);
    // z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }
  &-showBackCard &-back {
    .transform-rotateY(0);
  }

  &-description {
    // margin-top: -25px;
    margin-bottom: 15px;
    .f14;
    .twoLineEllipsis();
  }
  &-shadow {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  }
  &-borderRadius {
    border-radius: @border-radius;
  }

  &-default {
    height: @small-card-H;
    .cover-box {
      height: @small-card-H;
    }
  }

  /*卡片大小*/
  &-large {
    height: auto;
  }

  &-empty {
    background: rgba(255, 255, 255, 0.4);

    .depot-dcard-content {
      min-height: 40px;
    }
  }
  &-loading-block {
    height: 20px;
    margin: 0;
    background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
    background-size: 600% 600%;
    border-radius: @border-radius;
    animation: card-loading 1.4s ease infinite;
  }
  &-loading-span {
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-right: 5px;
    background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
    background-size: 600% 600%;
    border-radius: @border-radius;
    animation: card-loading 1.4s ease infinite;
  }
  //tab卡片标题样式重置
  &-tabs-wrapper {
    &.ant-card-small > .ant-card-head > .ant-card-head-wrapper > .ant-card-head-title {
      padding-bottom: 0;
      padding-top: 8px;
    }
  }
  &-head-tabs {
    .ant-tabs-bar {
      margin-bottom: 1px;
      border-bottom: 0;
    }

    .ant-tabs-nav .ant-tabs-tab {
      padding: 2px 16px 8px;
      margin: 0;
      .f14;
    }

    .ant-tabs-nav .ant-tabs-tab-active {
      color: #005bac;
    }

    .ant-tabs-ink-bar {
      background: #005bac;
    }
  }

  &-grid {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

@-webkit-keyframes card-loading {
  0%,
  100% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@-moz-keyframes card-loading {
  0%,
  100% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@-o-keyframes card-loading {
  0%,
  100% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes card-loading {
  0%,
  100% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
//人员卡片
.@{depot-prefix-persion-cls} {
  position: relative;
  min-width: @person-card-W;
  height: @person-card-H;
  .perspective(800px);

  .depot-dcard-inner {
    height: @person-card-H;
    // border: 1px solid transparent;
    padding: @padding-md 0;
  }

  &-selected {
    .depot-dcard-inner::after {
      .transition(all 0.3s);
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border: 1px solid #005bac;
      border-radius: 4px;
      z-index: 1;
    }
  }

  & .backInfoWrapper {
    width: 100%;

    & > h3 {
      padding-left: @person-card-left-W;
    }

    & .back-info-item {
      margin-bottom: @padding-xs;
      .flex;
      .flex-justify-between();
    }
  }

  .front-baseinfo {
    width: 100%;
    height: @person-card-H - @padding-md*2;
    .flex;
    .flex-center-between();
  }

  //左半部分头像
  .avatar-box {
    width: @person-card-left-W;
    height: 100%;
    padding-right: @padding-md;
    .flex;
    .flex-center-between();
    .flex-col();
    .icon-box {
      .flex;
      .flex-center-between();
      width: 100%;
      .icon-button {
        color: @text-color-65;
        background: @btn-gray-bg !important;
        font-size: 12px;
        &:hover {
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }

    img {
      cursor: pointer;
    }
  }

  //进度条
  .line-progress {
    // .flex-center();
    // .flex-col();

    .line-progress-txt {
      .f12;
      color: @primary-color;
    }
  }

  //右侧员工信息
  .base-info {
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    overflow: hidden;
    color: @text-color-content;
    .flex;
    .flex-justify-between();
    .flex-col();
    & > h3 {
      color: @text-color-title;
      cursor: pointer;
      .fw700;
    }

    & .s-line {
      .ellipsis();

      .tag {
        .f12;
        .ellipsis();
        margin-right: 5px;
        background-color: #eef0f4;
        padding: 0 @padding-xs;
      }
    }

    .s-primary-color {
      color: @primary-color;
    }
  }

  //左上角操作区域
  .left-option {
    position: absolute;
    top: @padding-md;
    left: @padding-md;
    opacity: 0;
    .transition(all 0.3s);

    .ant-checkbox-checked .ant-checkbox-inner {
      background-color: #005bac;
      border-color: #005bac;
    }
  }

  .checkbox-show {
    opacity: 1;
  }

  //右上角操作区域
  .right-option {
    position: absolute;
    top: @padding-md;
    right: @padding-md;
    cursor: pointer;
    .transform-rotate(90deg);

    .icon-button {
      width: @padding-md;
      height: @padding-md;

      &:hover {
        background: transparent;
      }
    }
  }

  //右下角操作区域
  .right-bottom-operation {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 8px solid;
    border-color: transparent #4b5874 #4b5874 transparent;
    width: 0;
    height: 0;
    cursor: pointer;
    opacity: 0;
    .transition(opacity 0.3s);
  }

  .rightBottom-show {
    opacity: 1;
  }
}