add pages

2 years ago · 12dc899a1f
15 changed files with 271 additions and 1 deletions
--- a/config.json
+++ b/config.json
@ -5,5 +5,5 @@
      "src": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F210114%2F1-210114151951.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671718750&t=393134a8bbc364340ead46000ba01d2e"
    }
  ],
-  "bottom-tips": "React-native-学习demo"
+  "bottomTips": "React-native-学习demo"
 }
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,119 @@
@media screen and (min-width: 320px) {
  html {
    font-size: 62.5%;
  }
 }
@media screen and (min-width: 360px) {
  html {
    font-size: 65%;
  }
 }
@media screen and (min-width: 384px) {
  html {
    font-size: 67.5%;
  }
 }
@media screen and (min-width: 400px) {
  html {
    font-size: 70%;
  }
 }
 * {
  margin: 0;
  padding: 0;
 }
 html,
 body {
  width: 100%;
  height: 100%;
 }
 body {
  background-color: #fff;
  box-sizing: border-box;
 }
 .header {
  width: 100%;
  height: 48px;
  background-color: #000;
 }
 .container {
  width: 100%;
  padding-bottom: 6rem;
 }
 .bg {
  width: 100%;
 }
 .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
 }
 .swiper-container {
  width: 100%;
  padding-bottom: 1rem;
 }
 .swiper-container img {
  width: 100%;
 }
 .swiper-slide {
  box-sizing: border-box;
  padding: 1.2rem;
  /* background-color: pink; */
 }
 .swiper-pagination {
 }
 .swiper-pagination-bullet {
  width: 6px !important;
  height: 6px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
 }
 .swiper-pagination-bullet-active {
  width: 1rem !important;
  border-radius: 2.3rem !important;
  background-color: #ababab !important;
 }
 .tips {
  width: 100%;
  text-align: center;
  line-height: 2;
 }
 .top-header {
  display: none;
  width: 100%;
  position: fixed;
  top: -5px;
  left: 0;
  z-index: 2222;
 }
 .banner {
  position: relative;
 }
 .banner .account {
  position: absolute;
  background-color: red;
  z-index: 11;
  width: 4rem;
  height: 4rem;
  top: 17rem;
  left: 5rem;
 }
 .mx {
  position: absolute;
  background-color: pink;
  z-index: 11;
  width: 4rem;
  height: 4rem;
  top: 17rem;
  left: 20rem;
 }
--- a/css/swiper-3.4.2.min.css
+++ b/css/swiper-3.4.2.min.css
--- a/img/1.jpg
+++ b/img/1.jpg
--- a/img/2.jpg
+++ b/img/2.jpg
--- a/img/3.jpg
+++ b/img/3.jpg
--- a/img/4.jpg
+++ b/img/4.jpg
--- a/img/5.jpg
+++ b/img/5.jpg
--- a/img/6.jpg
+++ b/img/6.jpg
--- a/img/7.jpg
+++ b/img/7.jpg
--- a/img/lun.jpg
+++ b/img/lun.jpg
--- a/img/t.jpg
+++ b/img/t.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,115 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
  <title></title>
 </head>
 <body>
  <div class="container">
    <div class="header"></div>
    <div class="banner">
      <img class="bg top-header" src="./img/t.jpg" alt="">
      <div class="account"></div>
      <div class="mx"></div>
    </div>
    <img class="bg" src="./img/1.jpg" alt="">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./img/lun.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./img/lun.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./img/lun.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./img/lun.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./img/lun.jpg" alt="">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <img class="bg" src="./img/2.jpg" alt="">
    <img class="bg" src="./img/3.jpg" alt="">
    <img class="bg" src="./img/4.jpg" alt="">
    <img class="bg" src="./img/5.jpg" alt="">
    <img class="bg" src="./img/6.jpg" alt="">
    <img class="bg footer" src="./img/7.jpg" alt="">
    <p class="tips"></p>
  </div>
  <script src="./js/swiper-3.4.2.min.js"></script>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <script>
    $(function () {
      function getPageScroll() {
        var xScroll, yScroll;
        if (self.pageYOffset) {
          yScroll = self.pageYOffset;
          xScroll = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
          yScroll = document.documentElement.scrollTop;
          xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {// all other Explorers
          yScroll = document.body.scrollTop;
          xScroll = document.body.scrollLeft;
        }
        arrayPageScroll = new Array(xScroll, yScroll);
        return arrayPageScroll;
      };
      new Swiper('.swiper-container', {
        loop: true,
        pagination: '.swiper-pagination',
        autoplay: 3000,
        paginationClickable: true
      })
      console.log('44')
      document.addEventListener('scroll', () => {
        const pageScroll = getPageScroll();
        const isShow = $('.top-header').is(":visible")
        console.log('11', isShow)
        if (pageScroll[1] >= 48 && !isShow) {
          $('.top-header').show()
        }
        if (pageScroll[1] < 48 && isShow) {
          $('.top-header').hide()
        }
      })
      $.ajax({
        url: "./config.json",
        success: function (result) {
          console.log(result, 'result')
          if (result) {
            const { showApp, bottomTips } = result;
            if (!showApp) {
              $('body').html('')
            } else {
              $('.tips').html(bottomTips)
            }
          } else {
            $('body').html('')
          }
        }
      });
    })     
  </script>
 </body>
 </html>
--- a/js/jquery-3.6.1.min.js
+++ b/js/jquery-3.6.1.min.js
--- a/js/swiper-3.4.2.min.js
+++ b/js/swiper-3.4.2.min.js