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

.page {
  padding-bottom: 0;

  .bgc {}

  .bg {}

  .decoration {
    position: relative;

    .d1 {
      position: absolute;
      width: 533px;
      height: 227px;
      top: 0;
      right: 0;
    }
  }

  .main {
    .top-space {
      height: 48px;
    }

    .content {
      position: relative;

      // 标题
      .tit {
        font-size: 36px;
        color: #a01635;
        text-align: center;
      }

      // 问题
      .question {
        @extend .bb;
        padding: 40px 52px 0;

        &-item {
          margin-bottom: 60px;

          // 问题
          .ques {
            display: flex;
            align-items: center;
            color: #333333;

            .light {
              width: 18px;
              height: 36px;
              margin-right: 10px;
            }
          }

          // 答案
          .answer {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 32px;

            &-item {
              width: 312px;
              height: 72px;
              line-height: 72px;
              border-radius: 36px;
              border: solid 1px #999999;
              @extend .bb;
              padding: 0 10px;
              font-size: 22px;
              color: #333333;
              margin-bottom: 28px;
            }

            .selected {
              border: solid 2px #ac0521;
              color: #ac0521;
            }

            .right {
              color: #ffffff;
              background-color: #32ba32;
              border: none;
            }

          }


        }
      }

      // 提交按钮
      .submit-btn {
        margin: 0 auto;
        @include cb(300px, 80px);
        margin-bottom: 52px;
      }

      // 结果
      .result {
        position: relative;
        margin: 60px auto 0;
        width: 750px;
        height: 1043px;

        .d1 {
          position: absolute;
          top: -20px;
          right: 0;
          width: 318px;
          height: 218px;
        }

        .d2 {
          position: absolute;
          left: 0;
          bottom: -4px;
          width: 122px;
          height: 252px;
        }

        .bg {
          position: absolute;
          width: 738px;
          height: 1043px;
        }

        .cont {
          position: relative;
          text-align: center;

          .space1 {
            height: 80px;
          }

          .tit {
            color: #333333;
            font-size: 30px;
          }

          // 球形
          .ball {
            margin: 28px auto 0;
            width: 194px;
            height: 194px;
            border-radius: 97px;
            background-image: linear-gradient(to top, #c22f3b, #e92647 99%), linear-gradient(to bottom, #bb343a, #bb343a);
            display: flex;
            align-content: center;
            flex-wrap: wrap;

            font-size: 24px;
            color: #ffffff;

            .t1 {
              width: 100%;
            }

            .score {
              width: 100%;
              font-size: 70px;
              height: 80px;
              line-height: 80px;
            }
          }

          .tips {
            margin-top: 40px;
            text-align: center;
            font-size: 24px;
            color: #333333;
          }

          // 优惠券
          .coupon {
            width: 578px;
            position: relative;
            // margin: 18px;
            margin: 0 auto;

            &-item {
              position: relative;
              width: 578px;
              height: 198px;
              margin: 0 auto 12px;

              .ebg {
                left: 0;
                top: 0;
                position: absolute;
                width: 578px;
                height: 198px;
              }

              .cont {
                position: relative;

                .name {
                  position: absolute;
                  left: 40px;
                  top: 40px;
                  color: #ffffff;
                  font-size: 32px;
                }

                .detail {
                  position: absolute;
                  border-radius: 24px;
                  font-size: 24px;
                  border: solid 1px rgba($color: #ffffff, $alpha: 0.8);
                  color: rgba($color: #ffffff, $alpha: 0.8);
                  @include btc(140px, 48px);
                  top: 40px;
                  right: 26px;
                }

                .card-info {
                  position: absolute;
                  top: 146px;
                  color: #fbe4c9;
                  font-size: 24px;
                }

                .card-no {
                  left: 28px;
                }

                .card-date {
                  right: 28px;
                }
              }
            }

            &-item2 {
              .name {
                color: #653d0d;
              }

              .card-info {
                color: #fce6c2;
              }
            }
          }
        }

        .create-wish-btn {
          @include cb(300px, 80px);
          position: absolute;
          bottom: 80px;
          left: 0;
          right: 0;
          margin: 0 auto;
        }

      }
    }
  }
}