add pages

2 years ago · 0bc342633d
5 changed files with 88 additions and 9 deletions
--- a/css/style.css
+++ b/css/style.css
@ -31,6 +31,14 @@ html,
 body {
  width: 100%;
  height: 100%;
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
 }
 body {
@ -100,20 +108,67 @@ body {
 .banner .account {
  position: absolute;
  background-color: red;
  z-index: 11;
  width: 4rem;
  height: 4rem;
  top: 17rem;
-  left: 5rem;
+  left: 13vw;
 }
 .mx {
  position: absolute;
  background-color: pink;
  z-index: 11;
  width: 4rem;
  height: 4rem;
  top: 17rem;
-  left: 20rem;
+  left: 55vw;
 }
 .billing {
  width: 100%;
  min-height: 100%;
  left: 100%;
  position: fixed;
  z-index: 99;
  background-color: #fff;
  padding-top: 48px;
 }
 .billing:target {
  left: 0;
  transition: left 0.4s;
 }
 .account-header {
  position: relative;
 }
 .account-back {
  width: 4rem;
  height: 4rem;
  position: absolute;
  left: 0;
  top: 0.5rem;
  z-index: 99;
 }
 .container:target .billing {
  left: 100%;
  transition: left 0.4s;
  position: fixed;
 }
 .loading {
  width: 3rem;
  position: fixed;
  z-index: 100;
  top: 48%;
  left: 50%;
  margin-left: -1.5rem;
  animation: move 2s linear infinite;
 }
@keyframes move {
  100% {
    transform: rotate(360deg);
  }
 }
--- a/img/account.jpg
+++ b/img/account.jpg
--- a/img/list.jpg
+++ b/img/list.jpg
--- a/img/loading.png
+++ b/img/loading.png
--- a/index.html
+++ b/index.html
@ -7,16 +7,31 @@
  <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">
+  <img class="loading" src="./img/loading.png" alt="">
  <div id="home" class="container">
    <div id="bb" class="billing">
      <div class="account-header">
        <a href="#home" class="account-back"></a>
        <img class="bg" src="./img/account.jpg" alt="">
      </div>
    </div>
    <div id="list" class="billing">
      <div class="account-header">
        <a href="#home" class="account-back"></a>
        <img class="bg" src="./img/list.jpg" alt="">
      </div>
    </div>
    <div class="header"></div>
    <div class="banner">
      <img class="bg top-header" src="./img/t.jpg" alt="">
-      <div class="account"></div>
+      <a href="#bb" class="account"></a>
-      <div class="mx"></div>
+      <a href="#list" class="mx"></a>
    </div>
    <img class="bg" src="./img/1.jpg" alt="">
    <div class="swiper-container">
@ -51,11 +66,20 @@
  </div>
  <script src="./js/swiper-3.4.2.min.js"></script>
  <script src="./js/jquery-3.6.1.min.js"></script>
  <script>
    function hideLoading() {
      setTimeout(() => {
        $('.loading').hide();
      }, 1000)
    }
    hideLoading();
    $('.account,.mx').on('click', () => {
      $('.loading').show()
      hideLoading();
    })
    $(function () {
      function getPageScroll() {