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

$contentWidth: 690px;

.page {
  padding-bottom: $pageBottom;

  .bgc {
    // background-color: #131413;
  }

  .bg {}

  .main {

    .top {
      position: relative;
      width: 750px;
      color: #ffffff;

      &-bg {
        position: absolute;
        width: 750px;
        height: 300px;
      }

      .user {
        width: 750px;
        margin: 0 auto 36px;
        position: relative;
        padding-top: 42px;
        display: flex;
        justify-content: space-between;
        z-index: 21;

        &-info {
          display: flex;
          padding-left: 30px;
          @extend .bb;

          .avatar {
            width: 120px;
            height: 120px;
            border-radius: 60px;
          }

          .wrap1 {
            margin-top: 12px;
            margin-left: 20px;

            .name {
              font-size: 36px;
            }

            .vip {
              display: inline-block;
              font-size: 24px;
              margin-top: 8px;
              background: #FF7B21;
              border-radius: 4px;
              padding: 2px 12px;
              border-radius: 8px;
            }

            .vip-check {
              background: #6DD400;
            }
          }
        }

        &-data {
          display: flex;
          align-items: center;


          .wrap {
            // width: 120px;
            padding: 0 40px;
            text-align: center;

            .t1 {
              font-size: 40px;
            }

            .t2 {
              font-size: 24px;
              opacity: .7;
            }
          }

          .line {
            height: 80px;
            width: 2px;
            opacity: 0.5;
            background: #FFFFFF;
          }
        }
      }
    }

    .top-space {
      height: 0px;
    }

    .content {
      position: relative;
      color: #ffffff;

      // 场景
      .sence {
        width: $contentWidth;
        margin: 0 auto 0;

        .border {
          width: $contentWidth;
          @extend .shadow;
          background-color: #ffffff;
          @extend .bb;
          padding: 24px 26px;
          margin: 0 auto 20px;
        }

        // 签到区
        .sign {

          // 头部
          .tit {
            display: flex;
            justify-content: space-between;

            .t1 {
              font-size: 28px;
              color: #333333;
              font-weight: bold;
            }

            .t2 {
              display: flex;
              align-items: center;
              font-size: 24px;
              color: #3680EB;

              .icon {
                width: 34px;
                height: 36px;
                margin-right: 10px;
              }
            }
          }

          // 7天签到
          .check {
            position: relative;
            margin: 32px auto 0;
            display: flex;
            justify-content: space-between;

            &-item {
              display: flex;
              // align-items: center;

              .line {
                background: #F0F0F0;
                width: 46px;
                height: 2px;
                margin-top: 26px;
              }

              .day {
                text-align: center;

                .circle {
                  background: #F0F0F0;
                  width: 52px;
                  height: 52px;
                  line-height: 52px;
                  border-radius: 26px;
                  font-size: 28px;
                  color: #FFFFFF;
                }

                .num {
                  font-size: 24px;
                  color: #3680EB;
                  margin-top: 6px;
                }

                .icon {
                  margin-top: 6px;
                  width: 40px;
                  height: 40px;
                }
              }
            }

            &-item-act {
              .line {
                background: #3680EB;
              }

              .day {
                .circle {
                  background: #3680EB;
                }

              }
            }

            // &-item {
            //   width: 68px;
            //   height: 100px;
            //   border-radius: 8px;
            //   text-align: center;
            //   background: #F0F0F0;
            //   padding: 8px 4px;
            //   @extend .bb;

            //   .no {
            //     @extend .fcc;
            //     color: #333333;
            //     font-size: 28px;
            //     height: 40px;
            //   }

            //   .icon {
            //     image {
            //       margin-top: 4px;
            //       width: 40px;
            //       height: 40px;
            //     }
            //   }
            // }

            // &-item-act {
            //   color: #FFFFFF;
            //   background: #3680EB;

            //   .no {
            //     color: #ffffff;
            //   }
            // }
          }

          // 签到按钮
          &-btn {
            @include btc(280px, 68px);
            margin: 12px auto 4px;
            border-radius: 34px;
            background: #3680EB;
            font-size: 28px;
            color: #FFFFFF;
          }

          &-btn-disable {
            background: #ECECEC;
          }
        }

        // 订单区域
        .order {
          display: flex;
          justify-content: space-between;
          font-size: 24px;
          color: #131415;
          text-align: center;

          &-item {
            width: 110px;

            .icon-wrap {
              @extend .fcc;
              height: 100px;
              height: 100px;

              .icon {
                height: 64px;
                height: 64px;
              }
            }

            .txt {}
          }
        }

        // 功能区
        .func {
          color: #333333;
          font-size: 28px;
          text-align: center;

          .my-qrcode {
            width: 620px;
            // height: 140px;
            margin: auto 0;
            background: #F8F8F8;
            padding: 22px 0;

            .qrcode {
              width: 56px;
              height: 56px;
            }

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

          &-wrap {
            margin: 40px auto 4px;
            display: flex;
            justify-content: space-between;

            &-item {
              width: 132px;
              position: relative;



              .icon-wrap {
                position: relative;
                @extend .fcc;
                // width: 100px;
                height: 100px;

                .icon {
                  // width: 64px;
                  height: 64px;
                }

                .rpoint {
                  position: absolute;
                  width: 24px;
                  height: 24px;
                  border-radius: 24px;
                  right: 22px;
                  top: 10px;
                  background-color: #fe4b4b;
                  z-index: 1;
                }
              }

              .txt {}
            }

          }
        }


      }
    }
  }
}