123

3 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,9 +11,7 @@

 <body>
  <img class="loading" src="./img/loading.png" alt="">
-
-  <div id="home" class="container">
-    <div id="bb" class="billing my-account">
+  <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="">
@ -40,6 +38,8 @@
    </div>
  </div>

+  <div id="home" class="container">
+
    <div class="header">

    </div>
@ -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)
                })