vue-ant-patterns/lib/d-detail-info/style/index.less

vue-ant-patterns

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

@depot-prefix-cls: ~'@{depot-prefix}-detail-info';

@media screen and (max-width: 1300px) {
  .@{depot-prefix-cls} {
    & &-banner {
      .banner-other-box {
        display: none !important;
      }
    }
  }
}
.@{depot-prefix-cls} {
  @top: 200px;
  @titleHeight: 40px;
  @banner-padding-top: 16px;
  @nav: ~'@{depot-prefix-cls}-anchor-nav';
  @banner: ~'@{depot-prefix-cls}-banner';
  @title: ~'@{depot-prefix-cls}-title';
  @body: ~'@{depot-prefix-cls}-body';
  @fixed-sider: ~'@{depot-prefix-cls}-fixed-sider';
  @gh: 64px;

  height: 100%;
  overflow: hidden;
  position: relative;
  // margin: 0 -24px;
  // padding: 0 24px;

  &-collapse {
    .ant-collapse {
      .ant-collapse-item {
        border: none;

        .ant-collapse-header {
          .flex;
          .flex-center-between;
          border-bottom: 1px solid #ecf0f4;
        }
      }
    }
  }

  .banner-item {
    height: @top - @banner-padding-top * 2;
    color: @text-color-dark;
  }

  .text-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & .ant-progress-line .ant-progress-inner {
    background-color: #939aa9;
  }
  & .ant-progress-circle svg > path:first-child {
    stroke: #939aa9;
  }

  .@{title} {
    height: @titleHeight;
    display: block;
    align-items: center;
    padding: 0 16px 0 24px;
  }

  .@{nav} {
    width: @sider-width-anchor + 24px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    // position: fixed;
    position: absolute;
    right: 24px;
    z-index: 99999;

    display: flex;
    align-items: center;

    h3 {
      color: @text-color-dark;
      margin: 0;
      display: none;
    }
    .left,
    .right {
      display: none;
      position: absolute;
      top: 0;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 1;
    }
    .ant-anchor-ink {
      display: block;
    }
    .ant-anchor.fixed .ant-anchor-ink .ant-anchor-ink-ball {
      display: inline-block !important;
    }
  }

  .d-avatar {
    img {
      border: 2px solid #9aa9c3;
      width: 112px !important;
      height: 112px !important;
    }
  }

  .@{banner} {
    height: @top;
    padding: @banner-padding-top 48px;
    background: #54637b;
    background: linear-gradient(to bottom, #54637b 0%, #415168 100%);
    // margin: 0 -24px;
    h3 {
      margin-bottom: 5px;
    }
    .line-progress {
      display: none;
      flex-direction: column;
      align-items: center;
    }
    .flex;
    .flex-justify-between;

    & .tag {
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 5px;
    }

    .banner-base-info-box {
      width: 332px;
      .banner-item;
      .flex;
      .flex-center-between;
      .avatar-box {
        width: 112px;
        height: 100%;
        .flex;
        .flex-center-between;
        .flex-col;
        .icon-box {
          .flex;
          .flex-center-between;
          width: 100%;
          .icon-button {
            color: @text-color-dark;
            font-size: 12px;
            background: rgba(255, 255, 255, 0.1) !important;

            &:hover {
              background: rgba(0, 0, 0, 0.1) !important;
            }
          }
        }
      }
      .base-info {
        width: 180px;
        height: 100%;
        & > h3 {
          color: @text-color-dark;
        }
        & .s-line {
          margin-bottom: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .tag {
            margin-right: 5px;
            margin-bottom: 0;
          }
        }
      }
    }

    .banner-tags-box {
      width: 280px;
      .banner-item;
      font-size: 0;
      overflow: hidden;
      .tag {
        margin-bottom: 3px;
        margin-right: 3px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    .banner-integrity-box {
      width: 160px;
      .banner-item;
      .flex;
      .flex-center-between;
      .flex-col;

      .ant-progress-circle .ant-progress-text {
        color: @text-color-dark;
      }
    }
    .banner-other-box {
      display: flex;
      width: 460px;
      .banner-item;
      .d-list {
        align-items: center;
        flex: 1;
        margin: 0;
      }
      .item {
        width: 46%;
        display: flex;
        height: 24px;
        .label {
          width: 90px;
          flex: 0 0 auto;
        }
      }

      .ant-progress-text {
        color: @text-color-dark;
      }
    }
  }

  .@{body} {
    overflow: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .ant-form-item {
      .flex;
    }
  }
  .@{body}-inner {
    width: 100%;
  }

  .@{nav} + .@{body} {
    .@{body}-inner {
      width: calc(~'100% - @{sider-width-anchor} - 24px');
    }
  }

  // .@{title} + .@{banner} {

  // }
  .@{title} + .@{banner} + .@{body} {
    top: @top + @titleHeight;
  }
  .@{title} + .@{banner} + .@{nav} + .@{body} {
    top: @top + @titleHeight;
  }
  &-content {
    .@{depot-prefix-cls}-body {
      padding: 0 24px;
    }
  }

  // &-title + &-banner + &-body {
  //   top: @top + @titleHeight;
  // }
  // 64 是 header 高, 最后处理
  // 30 留出一行空隙
  .@{fixed-sider} {
    // position: fixed;
    // top: @gh + 30px;
    // bottom: 10px;
    width: @sider-width-anchor - 24px;
    flex: 1 0 auto;
  }

  // .@{title} + .@{nav} {
  //   // .@{fixed-sider} {
  //   //   // top: @gh + 30px;
  //   // }
  // }

  // .@{banner} + .@{nav} {
  //   .@{fixed-sider} {
  //     // top: @top + @gh + 30px;
  //   }
  // }

  // .@{title} + .@{banner} + .@{nav} {
  //   .@{fixed-sider} {
  //     // top: @titleHeight + @top + @gh + 30px;
  //   }
  // }

  .@{title} + .@{body},
  .@{title} + .@{nav} + .@{body} {
    top: @titleHeight;
  }
  .@{banner} + .@{body},
  .@{banner} + .@{nav} + .@{body} {
    top: @top;
  }
  .@{title} + .@{banner} + .@{body},
  .@{title} + .@{banner} + .@{nav} + .@{body} {
    top: @titleHeight + @top;
  }

  // title
  // banner
  // tab-nav = sider
  // body
  //  > content
  //  > sider

  // 窗口模式时, sider 换成 tab-nav
  // @nav: ~'@{depot-prefix-cls}-anchor-nav';
  // @banner: ~'@{depot-prefix-cls}-banner';
  // @title: ~'@{depot-prefix-cls}-title';
  // @body: ~'@{depot-prefix-cls}-body';
  &-window {
    .d-avatar {
      img {
        width: 80px !important;
        height: 80px !important;
      }
    }
    .@{banner} {
      padding: @banner-padding-top 24px;
      .line-progress {
        display: flex;
        width: 100%;
        // .ant-progress.ant-progress-line {
        //   display: block;
        // }
        .ant-progress-text {
          display: none;
        }

        .ant-progress.ant-progress-line {
          display: block;

          & > div {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
      }
    }

    .@{nav} {
      position: static;
      height: @titleHeight;
      // margin: 0 -24px;
      padding: 0 24px;
      background: #343c4d;
      width: 100%;

      h3 {
        display: block;
      }

      .@{fixed-sider} {
        // width: 100%;
        position: static;
        height: 40px;
        overflow: hidden;

        .ant-anchor-ink {
          display: none;
        }
        & > *,
        .ant-affix,
        .ant-anchor-wrapper,
        .ant-anchor {
          height: 100% !important;
          // width: 100% !important;
          padding: 0;
          margin: 0;
          overflow: hidden;
          background: transparent;
        }

        .ant-anchor {
          display: flex;
          align-items: center;
        }
      }
      .ant-anchor-link {
        padding-left: 20px;
        padding-right: 20px;
      }
      .ant-anchor-link-title {
        color: @text-color-dark;
      }

      .ant-anchor-link-active > .ant-anchor-link-title {
        color: @text-color-blue-light;
      }
    }

    .@{nav} + .@{body} {
      top: @titleHeight;
      .@{body}-inner {
        width: 100%;
      }
    }
    .@{title} + .@{nav} + .@{body} {
      top: @titleHeight * 2;
    }

    .@{banner} + .@{nav} + .@{body} {
      top: @top + @titleHeight;
    }

    .@{title} + .@{banner} + .@{nav} + .@{body} {
      top: @titleHeight * 2 + @top;
    }
  }
}