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

.page {
  .bgc {}

  // 场景1背景
  .bgc1 {
    background-color: #ffd5da;
  }

  .bg {}

  .sence {
    position: relative;

    .view {
      position: absolute;

      .ebg {
        width: 750px;
        position: absolute;
      }

      .point {
        position: absolute;
        z-index: 31;
        width: 40px;
        height: 40px;
        animation: scalelinear 2s linear infinite;
      }
    }

    .view1 {
      .ebg {
        height: 1303px;
      }

      .point1 {
        left: 111px;
        top: 258px;
      }

      .point2 {
        left: 337px;
        top: 350px;
      }

      .point3 {
        left: 558px;
        top: 437px;
      }
    }

    .tips-border {
      position: absolute;
      width: 208px;
      height: 344px;
      top: 100px;
      left: 40px;
      z-index: 55;

      .rel {
        position: relative;
      }

      .ebg {
        position: absolute;
        width: 208px;
        height: 344px;
      }

      .cont {
        position: relative;
        width: 208px;
        height: 344px;
        @extend .bb;
        padding: 75px 18px;
        color: #ffffff;

        .name {
          font-size: 24px;
        }

        .val {
          font-size: 20px;
        }

        .btn {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 90px;
          margin: 0 auto;
          border-radius: 20px;
          color: #b93139;
          background-color: #ffffff;
          @include btc(180px, 40px);
          font-size: 24px;
        }
      }
    }
  }



  .main {
    position: relative;

    .top-space {
      height: 610px;
    }

    .content {
      position: relative;

      // 换一批按钮
      .change-btn {
        margin-left: 48px;
        box-shadow: 0px 6px 30px 0 rgba(126, 40, 40, 0.5);
        background-color: #ffffff;
        @include btc(160px, 54px);
        border-radius: 27px;
        font-size: 28px;
        font-weight: 300;
        color: #ba3039;
        @extend .fcc;

        .icon {
          margin-right: 12px;
          width: 29px;
          height: 29px;
        }
      }

      // 许愿单
      .wish-container {
        position: relative;

        // 背景图
        .ebg {
          width: 746px;
          height: 539px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          margin: 0 auto;
        }

        .space1 {
          height: 116px;
        }

        // 心愿
        .wish {
          position: relative;
          margin: 0 auto 0;
          display: flex;
          // justify-content: center;
          @extend .bb;
          // height: 140px;
          min-height: 238px;
          width: 660px;

          &-item {
            position: relative;
            text-align: center;
            width: 220px;

            .display {

              position: relative;
              margin: 0 auto;
              width: 140px;
              height: 140px;
              border-radius: 70px;
              background-image: radial-gradient(circle at 0 0, #ffffff, #f2e6e6);
              @extend .fcc;

              .prod {
                max-width: 200px;
                max-height: 200px;
                margin-bottom: 10px;
              }

              .close {
                width: 30px;
                height: 30px;
                position: absolute;
                bottom: 0;
                right: 0;
              }
            }

            .name {
              width: 160px;
              margin: 8px auto 0;
              color: #333333;
              font-size: 20px;
              // font-weight: 300;
            }

            .val {
              @extend .fcc;
              color: #b93138;
              font-size: 20px;
              margin-top: 4px;

              .icon {
                margin-left: 6px;
                width: 11px;
                height: 18px;
              }
            }
          }
        }

        .empty {
          position: relative;
          text-align: center;
          min-height: 238px;
          padding-top: 24px;
          @extend .bb;

          // color: #c7565d;
          color: #c77378;
          font-size: 28px;

          .iconfont {
            // color: #c7565d;
            font-size: 120px;
          }

          .icon{}

          .tips {

            margin-top: 16px;
            line-height: 40px;
          }
        }

        // 提交心愿按钮
        .submit-btn {
          margin: 48px auto 0;
          width: 234px;
          height: 64px;
          line-height: 64px;
        }

        .disable {
          background: transparent;
          background-color: #d2d2d2;
        }
      }

      .btn {
        @include cb;
      }
    }
  }
}


@keyframes scalelinear {

  /** 第一种写法**/
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}