peko-h5/view/peko/new_home/css/index.scss

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

body,
html {
  width: 100%;
  height: 100%;
  font-family: "Heiti SC", "Microsoft Sans Serif";
  //overflow: hidden;
}

.m-bg {
  display: none;

  img {
    display: block;
  }
}

.m-button {
  display: none;
  position: absolute;
  width: 70%;
  left: 50%;
  margin-left: -35%;

  &.m-button1 {
    top: 17.5%;
  }

  &.m-button2 {
    bottom: 7.5%;
  }
}

.container {
  position: relative;
}

// .button-wrapper{
//   position: absolute;
//   left: 19%;
//   top: 12%;
//   width: 40%;
//   a{
//     display: inline-block;
//     width: 45%;
//   }
// }
.text-wrapper {
  position: absolute;
  bottom: 2%;
  width: 40%;
  left: 50%;
  margin-left: -20%;
  padding-left: 140px;
  box-sizing: border-box;

  .qrcode {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #000;
    left: 0;
    top: 0;
  }

  .text {
    .txt1 {
      line-height: 18px;
      margin-bottom: 20px;
      font-size: 14px;
    }

    .txt2 {
      line-height: 16px;

      span {
        color: #948aff;
      }
    }

  }
}

// .eori {
//   height: 60px;
//   width: 100%;
//   background: #FE759D;
//   color: rgb(255, 255, 255);
//   position: absolute;
//   left: 0;
//   bottom: px2rem(0);

//   p {
//     height: 100%;
//     width: 50%;
//     float: left;
//     text-align: center;
//     line-height: 60px;
//     font-size: 26px;

//     a {
//       color: #fff;
//     }
//   }

// }
.eori {
  height: 8.7%;
  width: 100%;
  background: #160243;
  color: #D1D1D1;
  position: absolute;
  left: 0;
  bottom: px2rem(0);

  p {
    height: 40px;
    width: 50%;
    float: left;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    text-align: right;
    padding-right: 20px;
    box-sizing: border-box;

    a {
      color: #666;
    }
  }

  .weixin-name {
    padding-top: px2rem(20);
  }

  .recordfoot {
    width: 100%;
    color: #000;
    text-align: left;
    display: flex;
    padding-left: 20px;
    justify-content: center;
    align-items: center;

    .record {
      display: inline-block;
      padding-right: px2rem(4);
      height: 16px;
      width: 16px;
      background: url(../images/icon_police.png) no-repeat;
      // background: #948aff;
    }
  }

  div {
    // height: 30px;
    width: 100%;
    text-align: center;
    // line-height: 30px;
    font-size: 16px;
  }

  .tit {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
  }
}

.footer {
  line-height: 70px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);

  span {
    margin: 0 6px;
  }

  a {
    color: #fff;
  }
}

.culture-icon {
  a {
    width: 100%;
    height: 100%;
  }

  img {
    width: 50px;
    height: 50px;
    vertical-align: middle;
  }
}

.button-wrapper {
  cursor: pointer;
  position: absolute;
  left: 68.55%;
  // top: 62.27%;
  top: 68%;
  width: 19.4%;
  height: 6.6%;
  background: rgba(253, 247, 247, 0);

  a {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}

.button2-wrapper {
  cursor: pointer;
  position: absolute;
  left: 45.55%;
  // top: 61.09%;
  top: 67%;
  width: 19.4%;
  height: 7.6%;
  // background: rgba(253, 247, 247, 0);

  a {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}
.button-wrapper, .button2-wrapper{
  display: none;
}

@media screen and (max-width:1300px) {
  .text-wrapper {
    bottom: 1%;

    .text {
      .txt1 {
        font-size: 12px;
      }

      font-size:12px;
    }
  }
  // .button-wrapper {
  //   cursor: pointer;
  //   left: 68.55%;
  //   // top: 62.27%;
  //   top: 68%;
  // }

  // .button2-wrapper {
  //   left: 57.55%;
  //   // top: 61.09%;
  //   top: 67%;
  // }

  // .button2-wrapper {
  //   cursor: pointer;
  //   left: 45.55%;
  //   width: 19.4%;
  //   // background: #000;
  //   // background: rgba(253, 247, 247, 0);

  //   a {
  //     display: inline-block;
  //     width: 100%;
  //     height: 100%;
  //   }
  // }
}


@media screen and (max-width:375px) {
  .text-wrapper {
    bottom: 0px;
  }
  .button-wrapper, .button-wrapper{
    display: block;
  }
}


@media screen and (max-width:729px) {
  body{
    background-color: #0C0122;
  }
  .pc-bg {
    display: none;
  }

  .m-bg {
    display: block;
  }

  // .button-wrapper{
  //   display: none;
  // }
  .button-wrapper {
    display: block;
    position: absolute;
    left: px2rem(154);
    top: px2rem(1134);
    width: px2rem(440);
    height: px2rem(92);
    // background: rgb(95, 42, 42);

    a {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }

  .button2-wrapper {
    display: block;
    position: absolute;
    left: px2rem(232);
    // top: px2rem(1208);
    bottom: px2rem(128);
    width: px2rem(300);
    height: px2rem(60);
    background: rgba(255, 255, 255, 0);

    a {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }

  .m-button {
    display: block;
  }

  .text-wrapper {
    padding-left: 0;
    width: 90%;
    margin-left: -45%;
    padding-top: 108px;

    // .qrcode{
    //   top: 0;
    //   left: 50%;
    //   margin-left: -50px;
    //   width: 100px;
    //   height: 100px;
    //   canvas{
    //     width: 100%;
    //     height: 100%;
    //   }
    // }
    .text {
      .txt1 {
        margin-bottom: 10px;
      }

    }

    .text1,
    p {
      text-align: center;
    }
  }

  .eori {
    display: none;
    height: px2rem(136);
    width: 100%;
    background: #972aee;
    color: rgb(255, 255, 255);
    // bottom: px2rem(-100);

    // bottom: -90px;
    p {
      height: px2rem(60);
      width: 53%;
      float: left;
      text-align: center;
      line-height: px2rem(60);
      font-size: 13px;
      padding-right: 0;

      a {
        color: rgb(255, 255, 255);
      }
    }



    .recordfoot {
      
      width: 47%;
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 0;

      .record {
        display: inline-block;
        padding-right: px2rem(4);
        height: 16px;
        width: 16px;
        background: url(../images/icon_police.png) no-repeat;
        // background: #948aff;
      }
    }

    div {
      // height: 30px;
      width: 100%;
      text-align: center;
      // line-height: 30px;
      font-size: 14px;
    }

    .tit {
      height: px2rem(120);
      line-height: px2rem(120);
      text-align: center;
      font-size: 20px;
    }


  }

}




.toast {
  background: rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  width: 100px;
  font-size: 16px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: none;
}

.tips {
  display: none;
  position: fixed;
  top: 0;
  right: px2rem(20);
  width: px2rem(460);
}