peko-h5/view/peko/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;
}

.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: 8.7%;
  width: 100%;
  background: #000;
  // color: #D1D1D1;
  position: absolute;
  left: 0;
  padding: px2rem(10, ) 0;
  // p {
  //   height: 40px;
  //   width: 50%;
  //   float: left;
  //   text-align: center;
  //   line-height: 40px;
  //   font-size: 10px;
  //   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;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    margin-bottom: px2rem(6, );
    .record {
      display: inline-block;
      padding-right: px2rem(4);
      width: px2rem(14, );
      height: px2rem(16, );
      background: url(../images/icon_police.png) no-repeat;
      // background: #948aff;
    }
    a{
      color: #fff;
    }
  }

  .gongsi{
    display: flex;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    p{
      &:nth-child(2){
        margin: 0 14px;
      }
    }
  }

  // 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: block;
    position: absolute;
    left: px2rem(96);
    top: px2rem(1314);
    width: px2rem(560);
    height: px2rem(92);
    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;
    .text {
      .txt1 {
        margin-bottom: 10px;
      }

    }

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

  .eori {
    height: px2rem(136);
    width: 100%;
    background: #30312C;
    color: rgb(255, 255, 255);
    padding: px2rem(20, ) 0; 
    .recordfoot {
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;

      .record {
        display: inline-block;
        padding-right: px2rem(4);
        height: px2rem(28, );
        width: px2rem(32, );
        background: url(../images/icon_police.png) no-repeat;
      }
    }

    .gongsi{
      display: block;
      text-align: center;
      p{
        line-height: 1.3;
        &:nth-child(2){
          margin: 0;
        }
      }
    }

    // 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);
}