@import '@/styles/common.less';
@import '@/styles/variables.less';

.product-dialog {

  .layout() {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .header-font {
    font-size: 36px;
    line-height: 58px;
    color: @blColor;
    font-weight: 500;
  }

  .describe-font {
    font-size: 28px;
    line-height: 48px;
    color: @blColorG2;
  }

  .button() {
    width: 360px;
    height: 72px;
    padding: 0;
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 72px;
    border-radius: 44px;
    color: #FFFFFF;
    background: @blHighlightColor;
    margin-top: 40px;
  }

  .highlight-container() {
    width: 100%;
    box-sizing: border-box;
    font-size: 24px;
    line-height: 48px;
    color: @blHighlightColor;
    background: #6D3DF514;
    border-radius: 8px;
    padding: 32px 72px;
    margin-top: 40px;
  }

  // common
  &__qr-code,
  &__group-confirm,
  &__group-need-buy,
  &__job-contact-with-group,
  &__group-buy,
  &__group-buy_success,
  &__publish-job-buy,
  &__company-publish-job-buy {
    .layout();
  }

  // ============================================= 通告 ================================================= //
  // 通告已经解锁，直接联系
  &__job-contact_direct,
  // 通告已经解锁，等待播络联系
  &__job-contact_cs {
    .layout();

    &__header {
      .header-font();
    }

    &__describe {
      .describe-font();
      margin-top: 24px
    }

    &__content {
      .highlight-container();
    }

    &__button {
      .button();
    }

    &__report {
      font-size: 28px;
      font-weight: 400;
      line-height: 40px;
      color: @blHighlightColor;
      margin-top: 40px;
    }
  }

  // 通告不可解锁
  &__job-unable {
    .layout();

    &__header {
      display: flex;
      flex-direction: row;
      .header-font();

      .highlight {
        color: @blHighlightColor;
        margin-left: 10px;
      }
    }

    &__describe {
      display: flex;
      flex-direction: row;
      font-size: 28px;
      line-height: 48px;
      color: @blColor;
      margin-top: 32px;

      .highlight {
        color: @blHighlightColor;
      }
    }

    &__button {
      .button();
    }
  }

  // 通告购买
  &__job-buy {
    .layout();

    &__header {
      .flex-row();
      .header-font();
      font-size: 32px;

      .highlight {
        color: @blHighlightColor;
        margin-left: 10px;
      }
    }

    &__describe {
      .flex-row();
      .describe-font();
      margin-top: 18px;
      line-height: 40px;

      .highlight {
        color: @blHighlightColor;
      }
    }

    &__container {
      .flex-row();
      justify-content: space-around;
      margin-top: 56px;
    }

    &__item {
      position: relative;
      width: 182px;
      height: 192px;
      .flex-column();
      justify-content: center;
      border: 2px solid @blHighlightColor;
      border-radius: 8px;
      margin-right: 15px;

      &:last-child {
        margin-right: 0;
      }

      &.disabled {
        border-color: #E0E0E0;
        background: #F7F7F7;
      }

      &.selected {
        background: @blHighlightBg;
      }

      &__title {
        font-size: 32px;
        line-height: 48px;
        font-weight: 500;
        color: @blColor;
        margin-bottom: 8px;

        &.free {
          font-size: 24px;
          line-height: 36px;
          margin-bottom: 14px;
        }
      }

      &__content {
        font-size: 28px;
        line-height: 40px;
        font-weight: 500;
        color: @blColor;
        margin-bottom: 8px;
      }

      &__price {
        font-size: 28px;
        line-height: 40px;
        font-weight: 500;
        color: @blHighlightColor;
      }

      &__badge {
        transform: translate3d(10px, -50%, 0);
      }
    }

    &__button {
      .button();
    }

    &__tips {
      font-size: 28px;
      line-height: 40px;
      color: @blColorG2;
      margin-top: 32px;
    }

    &__hint {
      font-size: 24px;
      line-height: 40px;
      text-align: center;
      color: @blColorG1;
      margin-top: 24px;

      .highlight {
        color: @blHighlightColor;
        display: inline;
      }

    }

  }

  // ============================================= 群 ================================================= //

  // 群 common
  &__qr-code__tips,
  &__group-confirm__tips,
  &__group-need-buy__top-tips,
  &__group-buy__tips,
  &__group-buy_success__tips {
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;
    color: @blColorG1;

    &.highlight {
      color: @blHighlightColor;
    }
  }

  // 群解锁
  &__group-confirm__header {
    .header-font();
    display: flex;
    flex-direction: row;
    margin-top: 24px;

    .highlight {
      color: @blHighlightColor;
    }
  }

  &__group-confirm__button {
    .button();
  }

  // 群扫描二维码
  &__qr-code__header {
    .header-font();
    display: flex;
    flex-direction: row;
    align-items: center;

    .highlight {
      color: @blHighlightColor;
    }
  }

  &__qr-code__copy-button {
    .button();
  }

  &__qr-code__copy-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  &__qr-code__copy-success {
    font-size: 32px;
    line-height: 40px;
    font-weight: 500;
    color: @blColor;
  }

  &__qr-code__steps {
    margin-top: 40px;
  }

  &__qr-code__step {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 28px;
    font-weight: 400;
  }

  &__qr-code__step-number {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #E0E0E0;
  }

  &__qr-code__step-title {
    margin-left: 20px;

    &.highlight {
      color: @blHighlightColor;
    }
  }

  &__qr-code__step-line {
    position: relative;
    width: 2px;
    height: 40px;
    background: #E0E0E0;
    margin: 4px 0;
    margin-left: 18px;
  }

  &__qr-code__image {
    width: 304px;
    height: 304px;
    margin-top: 40px;
  }

  &__qr-code__tips {
    margin-top: 40px;
  }

  &__qr-code__footer {
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    color: @blHighlightColor;
    margin-top: 24px;
  }

  &__qr-code__tips-footer {
    .divider {
      width: 540px;
      height: 1px;
      background: #E0E0E0;
      margin: 40px 0;
    }

    .tips {
      font-size: 28px;
      line-height: 40px;
      font-weight: 400;
      color: @blColorG1;
    }
  }

  // 群解锁次数已用完
  &__group-need-buy__header {
    .header-font();
    display: flex;
    flex-direction: row;
    margin-top: 16px;

    .highlight {
      color: @blHighlightColor;
    }
  }

  &__group-need-buy__button-container {
    position: relative;
    margin-top: 40px;
  }

  &__group-need-buy__button {
    .button();
    margin-top: 0;
  }

  // ============================================= 通告+群 ================================================= //
  // 去群内联系发布人
  &__job-contact-with-group__header {
    .header-font();
  }

  &__job-contact-with-group__describe {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    line-height: 56px;
    font-weight: 500;
    color: @blColor;
    margin-top: 40px;

    .highlight {
      color: @blHighlightColor
    }
  }

  &__job-contact-with-group__content {
    .highlight-container();
  }

  &__job-contact-with-group__button-container {
    width: fit-content;
    position: relative;
    margin-top: 40px;
  }

  &__job-contact-with-group__button {
    .button();
    margin-top: 0;
  }

  // ============================================= 购买群 ================================================= //
  &__group-buy__header {
    .header-font();
  }

  &__group-buy__container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 40px;
  }

  &__group-buy__item {
    position: relative;
    width: 170px;
    height: 156px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid @blHighlightColor;
    border-radius: 8px;
    margin-right: 24px;

    &.selected {
      background: @blHighlightBg;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  &__group-buy__item-title {
    font-size: 40px;
    line-height: 48px;
    font-weight: 500;
    color: @blColor;
  }

  &__group-buy__item-price {
    font-size: 28px;
    line-height: 48px;
    font-weight: 500;
    color: @blHighlightColor;
    margin-top: 12px;
  }

  &__group-buy__button {
    .button();
  }

  &__group-buy__tips {
    margin-top: 34px;
  }

  // ============================================= 购买成功 ================================================= //
  &__group-buy_success__tips-container {
    display: flex;
    flex-direction: row;
  }

  &__group-buy_success__icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
  }

  &__group-buy_success__tips {
    white-space: nowrap;
  }

  &__group-buy_success__header {
    .header-font();
    display: flex;
    flex-direction: row;
    margin-top: 24px;

    .highlight {
      color: @blHighlightColor;
    }
  }

  &__group-buy_success__button {
    .button();
  }


  // ============================================= 发布通告的企业会员 ================================================= //
  &__publish-job-buy__header {
    .header-font();
  }

  &__publish-job-buy__price-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    font-size: 28px;
    line-height: 40px;
    font-weight: 500;
    margin-top: 60px;
  }

  &__publish-job-buy__price {
    font-size: 80px;
    line-height: 80px;
  }

  &__publish-job-buy__badge {
    transform: translate3d(50%, -90%, 0);
  }

  &__publish-job-buy__tips {
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    color: @blColorG1;
    margin-top: 32px;
  }

  &__publish-job-buy__button {
    .button();
    margin-top: 32px;
  }

  // ============================================= 企业购买单次发布通告 ================================================= //
  &__company-publish-job-buy {
    &__header {
      .header-font();
    }

    &__price-container {
      .flex-row();
      justify-content: space-between;
      margin-top: 54px;
    }

    &__item {
      position: relative;
      width: 230px;
      height: 156px;
      .flex-column();
      justify-content: center;
      border: 2px solid @blHighlightColor;
      border-radius: 8px;
      margin-right: 24px;

      &:last-child {
        margin-right: 0;
      }

      &.disabled {
        border-color: #E0E0E0;
        background: #F7F7F7;
      }

      &.selected {
        background: @blHighlightBg;
      }

      &__title {
        font-size: 32px;
        line-height: 48px;
        font-weight: 500;
        color: @blColor;
        margin-bottom: 12px;

        &.free {
          font-size: 24px;
          line-height: 36px;
          margin-bottom: 14px;
        }
      }

      &__price {
        font-size: 32px;
        line-height: 48px;
        font-weight: 500;
        color: @blHighlightColor;
      }

      &__badge {
        transform: translate3d(10px, -50%, 0);
      }
    }

    &__divider {
      .flex-row();
      justify-content: center;
      margin-top: 24px;

      &__left-line,
      &__right-line {
        width: 206px;
        height: 1px;
      }

      &__left-line {
        background: linear-gradient(270deg, #E0E0E0 0%, #FFFFFF 100%);
      }

      &__right-line {
        background: linear-gradient(90deg, #E0E0E0 0%, #FFFFFF 100%);
      }

      &__title {
        font-size: 24px;
        line-height: 40px;
        font-weight: 400;
        color: @blColorG1;
      }
    }

    &__contents {
      .flex-column();
      align-items: flex-start;
      align-self: flex-start;
      margin-top: 12px;
      margin-left: 30px;
    }

    &__content {
      font-size: 24px;
      line-height: 40px;
      font-weight: 400;
      text-align: left;
      color: @blColorG1;

      &.highlight {
        color: @blHighlightColor;
      }

      .highlight-span {
        color: @blHighlightColor;
        display: inline;
      }
    }

    &__button {
      .button();
      margin-top: 32px;
    }
  }

}