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

.profile-view-fragment {
  padding-bottom: 88rpx;

  &__header {
    position: relative;
    width: 100%;

    &__swiper {
      width: 100%;
      height: 1080px;
    }

    &__swiper-item {
      width: 100%;
      height: 1080px;
      position: relative;
    }

    &__cover {
      width: 100%;
      height: 100%;
    }

    &__cover-preview {
      width: 70px;
      height: 70px;
      position: absolute;
      top: 50%;
      right: 50%;
      transform: translate3d(50%, -50%, 0);
    }

    &__edit-video {
      position: absolute;
      top: 32px;
      right: 24px;
      width: 176px;
      height: 56px;
      line-height: 56px;
      text-align: center;
      font-size: 28px;
      font-weight: 400;
      color: #ffffff;
      background: #6D3DF5B2;
      border-radius: 48px;
    }

    &__banner {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 72px;
      padding: 0 24px;
      .flex-row();
      justify-content: space-between;
      font-size: 32px;
      line-height: 48px;
      font-weight: 500;
      color: #ffffff;
      box-sizing: border-box;
      background: linear-gradient(349.14deg, rgba(0, 0, 0, 0.3) 13.62%, rgba(0, 0, 0, 0.195) 126.8%);
    }

    &__video-size {
      font-size: 24px;
      font-weight: 400;
    }

    &__swiper-button {
      &__next,
      &__prev {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.7);

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      &__prev {
        left: 32px;
      }
      &__next {
        right: 32px;
      }

      &__image {
        width: 70px;
        height: 70px;
        padding: 9px;
      }
    }
  }

  &__body {
    margin: 24px;
    // 底部按钮栏高度 + 边距
    margin-bottom: calc(24px + 24px);
    // margin-bottom: calc(112px + 24px);
    width: calc(100% - 48px);
    background: #ffffff;
    border-radius: 16px;
  }

  &__divider {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: #e0e0e0;
  }

  &__basic-info {
    position: relative;
    padding: 40px;

    &__name-container {
      .flex-row();
    }

    &__name {
      font-size: 36px;
      line-height: 48px;
      font-weight: 500;
      color: @blColor;
    }

    &__edit {
      font-size: 28px;
      line-height: 32px;
      font-weight: 400;
      color: @blHighlightColor;
      margin-left: 8px;
    }

    &__content {
      font-size: 24px;
      line-height: 40px;
      font-weight: 400;
      color: @blColor;
      margin-top: 12px;
    }
  }

  &__info-group {
    position: relative;
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
  }

  &__info-group__header {
    .flex-row();
    justify-content: space-between;

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

    &__edit {
      font-size: 28px;
      line-height: 32px;
      font-weight: 400;
      color: @blHighlightColor;
    }
  }

  &__info-group__items {
    .flex-row();
    align-items: flex-start;
    flex-wrap: wrap;
  }

  &__info-group__item {
    width: 50%;
    margin-top: 32px;

    &.full-line {
      width: 100%;
    }

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

    &__value {
      font-size: 28px;
      line-height: 40px;
      font-weight: 500;
      color: @blColor;
      margin-top: 4px;
      white-space: pre-wrap;
      word-break: break-all;
    }
  }

  &__footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    padding: 12px 32px;
    box-shadow: 0px -4px 20px 0px #00000014;
    box-sizing: border-box;

    &__buttons {
      .flex-row();

      &__share {
        .button(@height: 88px, @fontSize: 32px, @fontWeight: 500, @borderRadius: 48px);
        flex: 1 1;
        color: @blHighlightColor;
        background: @blHighlightBg;
      }

      &__manager {
        .button(@height: 88px, @fontSize: 32px, @fontWeight: 500, @borderRadius: 48px);
        flex: 2 2;
        margin-left: 32px;
      }
    }
  }

  .join-group-hint {
    margin: 24px;
  }
}