123

2 years ago · 84a216b23e
2 changed files with 71 additions and 28 deletions
--- a/css/style.css
+++ b/css/style.css
@ -140,11 +140,45 @@ img {
  /* padding-top: 48px; */
  overflow-y: scroll;
  box-sizing: border-box;
+  transition: left 0.4s;
+}
+.my-account {
+  width: 100%;
+  height: 100%;
+  left: 100%;
+  position: fixed;
+  z-index: 99;
+
+  background-color: #f7f7f7;
+  /* padding-top: 48px; */
+  overflow-y: scroll;
+  box-sizing: border-box;
+  transition: left 0.4s;
+}
+.my-account:target {
+  left: 0;
+}
+
+@keyframes moveLeft {
+  0% {
+    let: 100%;
+  }
+  100% {
+    let: 70%;
+  }
 }

+@keyframes moveRight {
+  0% {
+    let: 0%;
+  }
+  100% {
+    let: 100%;
+  }
+}
 .billing:target {
  left: 0;
-  transition: left 0.4s;
+  /* transition: left 0.4s; */
 }
 .list-class:target .billing-header {
  left: 0;
@ -163,16 +197,16 @@ img {
  z-index: 99;
 }

-.container:target .billing {
+/* .container:target .billing {
  left: 100%;
-  transition: left 0.4s;
+
  position: fixed;
 }

 .container:target .billing-header {
  left: 100%;
  transition: left 0.4s;
-}
+} */

 .loading {
  width: 3rem;
@ -392,3 +426,7 @@ img {
  background-color: #f3b046;
  color: #fff;
 }
+
+.moveRight {
+  left: 0 !important;
+}
--- a/index.html
+++ b/index.html
@ -11,34 +11,34 @@

 <body>
  <img class="loading" src="./img/loading.png" alt="">
-
-  <div id="home" class="container">
-    <div id="bb" class="billing my-account">
-      <div class="account-header">
-        <a href="#home" class="account-back"></a>
-        <img class="bg" src="./img/account.jpg" alt="">
-      </div>
-      <div class="bb-list">
-      </div>
-      <img class="bg" style="margin-top: 10px;" src="./img/IMG_3620.jpg" alt="">
+  <div id="bb" class="my-account">
+    <div class="account-header">
+      <a href="#home" class="account-back"></a>
+      <img class="bg" src="./img/account.jpg" alt="">
    </div>
+    <div class="bb-list">
+    </div>
+    <img class="bg" style="margin-top: 10px;" src="./img/IMG_3620.jpg" alt="">
+  </div>

-    <div id="list" class="billing list-class">
-      <div class="account-header billing-header">
-        <a href="javascript:history.back(-1)" class="account-back"></a>
-        <div class="card-box">
-          <div class="card-number"></div>
-          <img class="bg" id="m1" src="./img/m1.png" alt="">
-          <div class="filter">
-            <div class="filter-item active" data-query-key="nearlyWeek">近一周</div>
-            <div class="filter-item" data-query-key="nearlyMonth">近一月</div>
-            <div class="filter-item" data-query-key="lastThreeMonths">近三月</div>
-          </div>
+  <div id="list" class="billing list-class">
+    <div class="account-header billing-header">
+      <a href="javascript:history.back(-1)" class="account-back"></a>
+      <div class="card-box">
+        <div class="card-number"></div>
+        <img class="bg" id="m1" src="./img/m1.png" alt="">
+        <div class="filter">
+          <div class="filter-item active" data-query-key="nearlyWeek">近一周</div>
+          <div class="filter-item" data-query-key="nearlyMonth">近一月</div>
+          <div class="filter-item" data-query-key="lastThreeMonths">近三月</div>
        </div>
      </div>
-      <div class="billing-list">
-      </div>
    </div>
+    <div class="billing-list">
+    </div>
+  </div>
+
+  <div id="home" class="container">

    <div class="header">

@ -137,6 +137,7 @@

      $('.filter-item').click(function () {
        hideLoading();
+
        $('.loading').show();
        $('.filter-item').removeClass('active');
        const key = $(this).attr('data-query-key');
@ -179,7 +180,6 @@

        }
      })
-
      function renderBillingDom(arr) {
        const billingHtmlArr = arr.map(item => {
          const { type, name, amount, time, money } = item;
@ -202,6 +202,10 @@
        $('.billing-list').html(billingHtmlArr)
      }

+      $('.account-back').click(function () {
+        $('.my-account').removeClass('moveRight')
+      })
+

      $.ajax({
        url: "./config.json",
@ -230,6 +234,7 @@
              $('.box-list').html(`<div>${fontAnimationList[0]}</div><div>${fontAnimationList[1]}</div>`)
              $('.toList').each(function () {
                $(this).click(() => {
+                  $('.my-account ').addClass('moveRight')
                  console.log($(this).attr('data-index'), 'wwww')
                  $('.card-number').text(cardList[$(this).attr('data-index')]?.cardId)
                })