// @import '../../assets/scss/mixins';
@import '../../assets/scss/utils';

// 用户头像
.portrait {
  position: relative;
  margin: 24px auto;
  text-align: center;
  width: 216px;
  @extend .fcc;

  &-inner {
    width: 167px;
    height: 167px;
    border-radius: 167px;
  }

  &-border {
    width: 167px;
    height: 167px;
    position: absolute;
  }
}

.page {
  padding-bottom: 200px;

  .bgc {}

  .ebg {
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .main {
    position: relative;

    // 顶部背景
    .top-bg {
      position: absolute;
      width: 750px;
    }

    .top-space {
      height: 200px;
    }

    .content {
      position: relative;
      z-index: 11;

      // 标题
      .title {
        font-size: 46px;
        font-weight: 500;
        text-align: center;
        color: #fee085;
      }

      // 用户
      .user {
        font-size: 48px;
        font-weight: 600;
        text-align: center;
        color: #fee085;

        .portrait {
          margin: 24px auto 0;
        }

        // 用户名称
        .name {
          margin: 24px auto 0;

          display: flex;
          justify-content: center;
          align-items: flex-end;

          .tt {
            font-size: 48px;
            font-weight: 500;
            text-align: center;
            color: #fee085;
          }

          &-edit {
            width: 29px;
            margin: 0 0 12px 12px;
          }
        }

        // 编辑页面
        .edit {
          margin: 24px auto 0;
          display: flex;
          justify-content: center;
          align-items: flex-end;

          .tt {
            font-size: 42px;
          }

          .t2 {
            margin-left: 42px;
          }
        }

        // 用户组
        .group {
          width: 650px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          margin: 36px auto 0;

          //
          &-item {
            width: 33.33%;
            text-align: center;
            margin: 0 auto 32px;

            &-portrait {
              margin: 0 auto;
              width: 145px;
              height: 145px;
              border-radius: 145px;
              border-image-slice: 1;
              border-width: 4px;
              border-image-source: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
              background-image: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
            }

            &-name {
              margin: 4px auto 0;
              font-size: 36px;
              font-weight: 500;
              text-align: center;
              color: #ff8752;
              display: flex;
              justify-content: center;
              align-items: flex-end;
            }
          }
        }

        //查看更多
        .more {
          @extend .fcc;
          font-size: 36px;
          font-weight: 500;
          text-align: center;
          color: #e16e6e;

          .icon-down {
            width: 32px;
            margin-top: 6px;
            margin-left: 10px;
          }
        }

        // 句子
        .sentence {
          margin: 64px auto 0;
        }
      }

      // 尾部
      .tail {

        // 尾部头像
        .portrait {
          margin: 72px auto 0;
        }

        // 用户名称
        .name {
          margin: 24px auto 0;
          text-align: center;

          .tt {
            font-size: 48px;
            font-weight: 500;
            text-align: center;
            color: #fee085;
            margin-top: 48px;
          }
        }

        // 按钮组
        &-btn-wrap {
          display: flex;
          justify-content: flex-end;
          flex-wrap: wrap;
          margin: 64px auto 0;

          &-item {
            width: 100%;
          }

          // 分享团队图片
          .blessing-share-group-btn {
            width: 370px;
            margin-right: 20px;
          }

          // 选择更多祝福模板
          .more-template {
            font-size: 36px;
            color: #dfa244;
            text-align: right;
            margin-right: 40px;
            margin-top: 24px;

            .t1 {
              text-decoration: underline;
            }
          }
        }

      }

    }

    // fix底部
    .bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 101;

      .bottom-bg {
        width: 750px;
        height: 132px;
        position: absolute;
        bottom: 0;
      }

      .btn-wrap {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        margin: 0px auto 24px;

        .btn {
          margin: 0 22px;
          @include btc(290px, 76px);
          color: #fee085;
          font-size: 36px;
          border-radius: 8px;
          box-shadow: 5.9px 5.5px 18px 0 rgba(26, 36, 91, 0.73);
          background-image: linear-gradient(to top, #b41d36, #bb2634);
        }

        .btn2 {
          color: #940023;
          box-shadow: 5.9px 5.5px 18px 0 rgba(26, 36, 91, 0.73);
          background-image: linear-gradient(to top, #f4b44d, #e8b976, #ffebb5);
        }
      }
    }
  }
}