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>
-      <div class="mx"></div>
+      <a href="#bb" class="account"></a>
+      <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() {