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

$blessContentWidth: 650px;
$blessContentLabelWidth: 650px;

.van-button__text {
  font-size: 36rpx;
}

.van-popup {}

.poster-popup {
  .van-popup {
    background-color: transparent !important;
  }
}

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

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

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

// 修改对话框
.dialog {
  position: relative;
  @extend .bb;
  padding: 36px 24px;
  font-size: 38px;
  // background-color: #ffffff;

  &-item {
    margin-bottom: 48px;
    position: relative;

    .label {
      margin-bottom: 12px;
    }
  }

  .upload {
    position: relative;
    display: flex;

    .image {
      width: 240px;
      height: 152px;
    }
  }

  .nickname {
    margin-top: 12px;
  }

  .t1 {
    margin-top: 12px;
  }
}

.dialog2 {
  text-align: center;
}

.poster {
  width: 540px;
}

.save-btn {
  margin: 24px auto;
  @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);

  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);
}

.page {
  // padding-bottom: 200px;

  .bgc {}

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


  .ebggif {}

  .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;
        width: $blessContentWidth;
        margin: 0 auto;
      }

      // 用户
      .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: 660px;
          display: flex;
          // justify-content: flex-start;
          justify-content: center;
          flex-wrap: wrap;
          margin: 36px auto 0;
          // height: 450px;
          overflow: hidden;

          //
          &-item {
            // align-self: flex-start;
            width: 33.33%;
            text-align: center;
            margin-bottom: 32px;

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

            &-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;

              .t1 {
                max-width: 145px;
                @include ellipsis(1);
              }
            }

            &-inv {
              width: 145px;
              padding: 0;
              background-color: transparent;
              background: transparent;


              .icon-inv {
                width: 145px;
              }
            }
          }
        }

        .six {
          height: 458px;
        }

        .all {
          height: auto;
          overflow: visible;
        }

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

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

        .more2 {
          margin-top: 0;
        }

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

      // 祝福内容
      .blessing {
        margin: 72px auto 72px;


        &-item {
          width: $blessContentWidth;
          margin: 0 auto;
          font-size: 42px;
          text-align: center;
          color: #333333;

          &-text {
            width: $blessContentLabelWidth;
            font-weight: bold;
            margin: 16px auto;
          }

          &-image {
            width: $blessContentWidth;
            margin: 16px auto;
          }

        }
      }

      // 尾部
      .tail {
        text-align: center;

        // 尾部头像
        .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: 48px;

            .t1 {
              text-decoration: underline;
            }
          }

          &-item {
            display: flex;
            justify-content: center;

            .btn {
              @extend .bb;
              margin: 32px auto;
              width: 480px;
              height: 76px;
              line-height: 76px;
              padding: 0 20px;
              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);
              background-image: linear-gradient(to top, #e65638, #dd784d);
            }

            .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);
            }
          }


        }

        &-image-bot {
          margin: 48px auto 0;
          width: 750px;
          display: block;
        }

        &-bot-space {
          min-height: 166px;
        }

      }

    }

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

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

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

        .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);
          background-image: linear-gradient(to top, #e65638, #dd784d);
          padding: 0;
        }

        .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);
        }
      }
    }
  }
}

.music {
  width: 66px;
  height: 66px;
  position: fixed;
  right: 24px;
  top: 24px;
  z-index: 31;
}


.ani-rotation-music {
  -webkit-transform: rotate(360deg);
  animation: rotation 3s linear infinite;
  -moz-animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
  -o-animation: rotation 3s linear infinite;
}


.ani-rotation {
  -webkit-transform: rotate(360deg);
  animation: rotation 6s linear infinite;
  -moz-animation: rotation 6s linear infinite;
  -webkit-animation: rotation 6s linear infinite;
  -o-animation: rotation 6s linear infinite;
}


@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

#poster {
  position: absolute;
}