peko-h5/view/peko/activity/act-61/css/index.scss

@function px2rem($px, $rem:75) {
  @return $px / $rem+rem;
}

@import '../../../common/css/flex.scss';

@font-face {
  font-family: 'pingfang';
  src: url('../fonts/PingFangSCRegular.ttf');
  src: url('../fonts/PingFangSCRegular.ttf') format('woff'),
    url('../fonts/PingFangSCRegular.ttf') format('truetype'),
    url('../fonts/PingFangSCRegular.ttf') format('svg');
}

html,
body {
  background: #BAE9FB;
  font-family: 'pingfang';
}



.max {
  width: px2rem(750);
  margin: 0 auto;
  height: px2rem(2682);
  background: url('../images/bg.png') no-repeat;
  background-size: 100% px2rem(1012);
  position: relative;

  .canter {
    position: absolute;
    top: px2rem(602);
    left: 50%;
    transform: translateX(-50%);
    width: px2rem(690);
    height: px2rem(1800);
    background: url('../images/game.png') no-repeat;
    background-size: 100% 100%;

    .game-button {
      width: 100%;
      height: px2rem(600);
      // background: rgba(0, 0, 0, .6);
      display: flex;
      flex-direction: column;
      align-items: center;

      .game-tit {
        width: px2rem(411);
        height: px2rem(135);
        margin-top: px2rem(91);
      }

      .game-show {
        width: px2rem(201);
        height: px2rem(71);
        margin-top: px2rem(34);
      }

      div {
        display: flex;
        width: 82%;
        justify-content: space-around;
        margin-top: px2rem(36);

        p {
          width: px2rem(220);
          height: px2rem(64);

          &:first-child {
            background: url('../images/m2.png') no-repeat;
            background-size: 100% 100%;
          }

          &:last-child {
            background: url('../images/m1.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }

  .bottom {
    width: px2rem(690);
    height: px2rem(1000);
    // background: rgba(0, 0, 0, .6);
    margin-top: px2rem(196);
    box-sizing: border-box;
    padding: px2rem(0) px2rem(53);

    // p {
    //   width: 98%;

    //   font-weight: bold;
    //   color: #031877;
    //   line-height: px2rem(42);
    //   text-indent: -10px;

    //   &.apple {
    //     color: #1D7DFF;
    //     font-size: px2rem(24);
    //     text-align: center;
    //     margin-top: px2rem(86);
    //   }




    //   span {
    //     color: #35A4FE;
    //     font-weight: bold;
    //   }
    // }

    .expalin-list {
      font-size: px2rem(30);
      overflow: hidden;

      p {
        float: left;

        &:first-child {
          width: px2rem(60);
          margin-top: px2rem(4);

          span {
            font-weight: bold;
          }
        }

        &:last-child {
          width: px2rem(500);
          line-height: px2rem(46);

          span {
            line-height: px2rem(46);
            font-weight: 900;
            color: #042099;

            span {
              color: #35A4FE;
            }
          }
        }
      }

      .serial {
        display: inline-block;
        border-radius: 50%;
        background: #81D0FF;
        width: px2rem(36);
        color: #056EC3;
        line-height: px2rem(36);
        text-align: center;
      }

    }

    .apple {
      text-align: center;
      margin-top: px2rem(90);
      font-size: px2rem(24);
      color: #1D7DFF;
    }

    .gift {
      height: px2rem(420);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: px2rem(71);
      box-sizing: border-box;
      overflow: hidden;

      div {
        position: relative;

        span {
          position: absolute;
          width: px2rem(140);
          right: px2rem(-70);
          top: px2rem(-30);
          line-height: px2rem(50);
          background: #FFFF00;
          border-radius: px2rem(10);
          text-align: center;
          font-weight: bold;
        }
      }

      img {
        width: px2rem(240);
        height: px2rem(240);
      }

      p {
        font-size: px2rem(26);
        color: #031877;
        text-align: center;
        font-weight: bold;
        margin-top: px2rem(15);
      }

      // background: rgba(134, 38, 38, 0.6);
    }

    .explain {
      margin: px2rem(36) 0 px2rem(22);
      margin-left: px2rem(-17);
      display: block;
      width: px2rem(163);
      height: px2rem(60);
      background: url('../images/explain.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .user {
    width: px2rem(750);
    height: px2rem(180);
    position: fixed;
    background: #81d0ff;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    color: #15209e;
    border-top: 2px solid #15209e;

    img {
      width: px2rem(120);
      height: px2rem(120);
      overflow: hidden;
      border-radius: 50%;
      margin-left: px2rem(30);
    }

    .user-name {
      width: px2rem(240);
      // background: #000;
      font-size: px2rem(30);
      font-weight: bold;
      margin-left: px2rem(40);
    }

    .receive,
    .out {
      text-align: center;
      width: px2rem(150);

      span {
        display: block;
        font-weight: bold;
        font-size: px2rem(28);
        line-height: px2rem(40);
      }
    }
  }

}