l-hammer/YDTemplate

/**
 * 为避免打包代码量过大，较大的（大于一百行）第三方样式建议不要使用@import引入，使用CDN引入即可
 * 例如：swiper.scss就不要使用@import引入，直接使用<link rel="stylesheet" href="https://static.yindou.com/web/css/swiper.min.css">
 */
@import "../normalize/index.scss";  /* resets */
@import "../animation/index.scss";  /* 常用动画 */
@import "../basics/index.scss";  /* base */
@import "../iconfonts/index.scss";  /* iconfonts */
@import "../customs/examples/app.scss"; /* theme */
@import "../components/app/progress.scss";  /* loading */
@import "../components/app/record.scss";  /* record page */
@import "../components/app/dialog.scss";  /* record page */

// @include font-size(21px, '.ft-21');
// @include font-size(22px, '.ft-22');
// @include font-size(24px, '.ft-24');
// @include font-size(26px, '.ft-26');
// @include font-size(39px, '.ft-39');
// @include font-size(80px, '.ft-80');
// @include font-size(112px, '.ft-112');

.ft-14 {
  font-size: .373333rem !important;
}
.ft-20 {
  font-size: .533333rem;
}
.ft-21 {
  font-size: .56rem;
}
.ft-22 {
  font-size: .586667rem;
}
.ft-24 {
  font-size: .64rem;
}
.ft-26 {
  font-size: .693333rem;
}
.ft-39 {
  font-size: 1.04rem;
}
.ft-80 {
  font-size: 2.133333rem;
}
.ft-112 {
  font-size: 2.986667rem;
}

#app {
  height: 100%;
  background: linear-gradient(to bottom, #96D7F9, #2eb0f3);
  .main {
    height: inherit;
  }
}

.btn {
  display: inline-block;
  padding: .24rem;
  background: #ffeea6;
  border-radius: .52rem;
  letter-spacing: -.026667rem;
  color: #91512d;
  &:active {
    background: rgba($color: #ffeea6, $alpha: .8);
  }
  &.gray {
    background: #b8b5b0 !important;
  }
  &.disabled,
  &[disabled] {
    pointer-events: none;
    filter: grayscale(60%);
  }
  &.shake {
    animation: shake .8s infinite alternate-reverse;
  }
}

.main.home,
.main.invite {
  display: flex;
  flex-direction: column;
  font-family: 'FZJHSXJW';
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/05/invitefriends/page-1.jpg') no-repeat center / 100% 100%;
  .top {
    position: relative;
    padding-top: 1.36rem;
    margin-bottom: .266667rem;
    p.tit {
      line-height: 1.1em;
      color: white;
      text-align: center;
    }
    a.rules {
      position: absolute;
      padding: .133333rem .08rem .133333rem .333333rem;
      color: white;
      top: .426667rem; right: .293333rem;
      background: #0698e2;
      border-radius: .426667rem;
    }
  }
  .mid {
    width: 100%;
    height: 10.16rem;
    background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/05/invitefriends/drum.png') no-repeat center / 100% 100%;
    position: relative;
    &.drumming {
      background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/05/invitefriends/drumming.png') no-repeat center / 100% 100%;
    }
    span.num {
      color: #ed5455;
      font-family: 'fzhtjt';
      @include justify-center {
        margin-top: 1.6rem;
      }
    }
    a.btn {
      padding: .173333rem .56rem;
      background: #ee4b4c;
      color: white;
      &:active {
        background: rgba($color: #ee4b4c, $alpha: .8);
      }
      position: absolute;
      top: 5.066667rem; left: 50%;
      margin-left: -1.786667rem;
    }
  }
  .bot {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    > .btn {
      padding-right: .08rem;
    }
  }
  .dialog .dialog-container {
    width: 10rem;
    background: transparent;
    .forward {
      width: 100%; height: 3.64rem;
      position: absolute;
      top: -50vh;
      background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/05/invitefriends/invite.png') no-repeat left top / 100%;
    }
  }
  .dialog .dialog-bind,
  .dialog .dialog-withdraw {
    width: 8.24rem;
    margin: 0 auto;
    background: #ffe8c4;
    color: #555555;
    border-radius: .106667rem;
    padding-bottom: .386667rem;
    .con {
      padding-top: .92rem;
      padding-bottom: .613333rem;
    }
    div[slot=btns] {
      display: flex;
      justify-content: space-around;
      padding: 0 .653333rem;
    }
    a.btn {
      width: 2.746667rem;
      text-align: center;
      background: #ff3744;
      color: white;
    }
  }
}

.main.invite {
  .top p.single.tit {
    line-height: 1.52rem;
  }
  .mid {
    .pk .num {
      text-align: center;
    }
    .pk .friend {
      margin-left: -1.453333rem;
    }
    .pk .self {
      margin-left: 1.453333rem;
    }
    .pk .name {
      display: flex;
      font-family: 'FZJHSXJW';
      margin-top: -.68rem;
      color: #93532d;
    }
    .pk .vs {
      margin-top: 2.933333rem;
      color: #93532d;
    }
  }
  .bot {
    padding-right: .28rem;
    justify-content: flex-end;
    &.around {
      justify-content: space-around;
    }
  }
}

.main.rules {
  padding: 2.106667rem .426667rem 0;
  background: #2eb0f3 url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/05/invitefriends/rule-title.png') no-repeat left top / 100%;
  p {
    color: white;
    line-height: 1.29em;
    &.ps {
      margin-top: .386667rem;
      margin-bottom: .48rem;
      font-weight: 500;
    }
  }
  .table {
    margin-top: .28rem;
  }
}

.main.records {
  padding-top: 1.906667rem;
  background: #2eb0f3 url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/05/invitefriends/records-title.png') no-repeat left top / 100%;
  .table span.date {
    flex: 2;
  }
}