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

.container {
  position: relative;
}

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

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

// pc端
@media screen and (min-width:769px) {
  .m-bg {
    display: none;

    img {
      display: block;
    }
  }

  .homePc {
    width: 100%;
    height: 10rem;
    background: url(../images/homePc.png) no-repeat;
    background-size: 100% 100%;
    position: relative;

    .charge {
      width: 1.11rem;
      height: 0.5rem;
      background: rgb(255, 255, 255, 0.2);
      border-radius: .13rem;
      font-size: 0.24rem;
      color: #fff;
      text-align: center;
      line-height: 0.5rem;
      position: absolute;
      top: 0.16rem;
      right: 2.77rem;
    }

    .googlePlay {
      width: 2.2rem;
      height: 0.7rem;
      position: absolute;
      left: 2.4rem;
      bottom: 3.4rem;
    }
    .appleStore {
      width: 2.2rem;
      height: 0.7rem;
      position: absolute;
      left: 2.4rem;
      bottom: 2.5rem;
    }
    .apk {
      width: 2.2rem;
      height: 0.7rem;
      position: absolute;
      left: 2.4rem;
      bottom: 1.6rem;
    }
  }

  .eori {
    // height: 1.2rem;
    width: 100%;
    background: #30312C;
    color: rgb(255, 255, 255);
    padding: 0.2rem 0;
    vertical-align: top;
    // position: absolute;
    // top: 0.75rem;

    // .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: flex;
      justify-content: center;
      text-align: center;

      p {
        font-size: 0.2rem;

        &:nth-child(2) {
          margin: 0 0.2rem;
        }
      }
    }

  }

}

// 移动端
@media screen and (max-width:768px) {
  body {
    background-color: #0C0122;
  }

  .pc-bg {
    display: none;
  }

  .m-bg {
    display: block;
  }

  .homeM {
    width: 100%;
    // width: px2rem(750, );
    // height: px2rem(1489, );
    // height: 19.88rem;
    height: 14.89rem;
    background: url(../images/homeM.png) no-repeat;
    background-size: 100% 100%;
    position: relative;

    .charge {
      width: 1.11rem;
      height: 0.5rem;
      background: rgb(255, 255, 255, 0.2);
      border-radius: .13rem;
      font-size: 0.24rem;
      color: #fff;
      text-align: center;
      line-height: 0.5rem;
      position: absolute;
      top: 0.2rem;
      right: 0.4rem;
      // left: 50%;
      // transform: translateX(-50%);
    }

    .swiper {
      width: 100%;
      height: 8.6rem;
      position: absolute;
      top: 4.8rem;
      overflow: hidden;

      .swiper-wrapper {
        width: 60%;
        height: 100%;

        .swiper-slide {
          img {
            width: 100%;
            height: 100%;
          }
        }

        .swiper-slide-prev {
          width: 100%;
          height: 90%;
          margin-top: 0.6rem;
        }

        .swiper-slide-next {
          width: 100%;
          height: 90%;
          margin-top: 0.6rem;
        }
      }
    }

    .logo {
      position: absolute;
      bottom: 0.6rem;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-evenly;

      img {
        width: 2.2rem;
        height: 0.7rem;
      }
    }
  }

  .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: 1.2rem;
    width: 100%;
    background: #30312C;
    color: rgb(255, 255, 255);
    padding: 0.2rem 0;
    // position: absolute;
    // top: 0.75rem;

    .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;
        font-size: 0.2rem;

        &: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;
    }

  }

}

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

//   .button-wrapper,
//   .button-wrapper {
//     display: block;
//   }
// }


.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;
  z-index: 9;
}

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