...

config.json

@@ -18,7 +18,64 @@
       "money": "123"
     }
   ],
+  "fontAnimationList": ["滚动文字1", "滚动文字2"],
   "billingList": [
+    {
+      "type": "0",
+      "name": "转存",
+      "amount": "+10,201.62",
+      "time": "2022-02-18 05:23:01",
+      "money": "10,233.88"
+    },
+    {
+      "type": "1",
+      "name": "转存",
+      "amount": "-10,201.62",
+      "time": "2022-02-18 05:23:01",
+      "money": "00.00"
+    },
+    {
+      "type": "0",
+      "name": "转存",
+      "amount": "+10,201.62",
+      "time": "2022-02-18 05:23:01",
+      "money": "10,233.88"
+    },
+    {
+      "type": "1",
+      "name": "转存",
+      "amount": "-10,201.62",
+      "time": "2022-02-18 05:23:01",
+      "money": "00.00"
+    },
+    {
+      "type": "0",
+      "name": "转存",
+      "amount": "+10,201.62",
+      "time": "2022-02-18 05:23:01",
+      "money": "10,233.88"
+    },
+    {
+      "type": "1",
+      "name": "转存",
+      "amount": "-10,201.62",
+      "time": "2022-02-18 05:23:01",
+      "money": "00.00"
+    },
+    {
+      "type": "0",
+      "name": "转存",
+      "amount": "+10,201.62",
+      "time": "2022-02-18 05:23:01",
+      "money": "10,233.88"
+    },
+    {
+      "type": "1",
+      "name": "转存",
+      "amount": "-10,201.62",
+      "time": "2022-02-18 05:23:01",
+      "money": "00.00"
+    },
     {
       "type": "0",
       "name": "转存",

css/style.css

@@ -56,6 +56,9 @@ img {
 .container {
   width: 100%;
   padding-bottom: 6rem;
+  overflow: hidden;
+  height: 100vh;
+  box-sizing: border-box;
 }
 .bg {
   width: 100%;
@@ -136,12 +139,17 @@ img {
   background-color: #f7f7f7;
   padding-top: 48px;
   overflow-y: scroll;
+  box-sizing: border-box;
 }
 
 .billing:target {
   left: 0;
   transition: left 0.4s;
 }
+.list-class:target .billing-header {
+  left: 0;
+  transition: left 0.4s;
+}
 
 .account-header {
   position: relative;
@@ -161,6 +169,11 @@ img {
   position: fixed;
 }
 
+.container:target .billing-header {
+  left: 100%;
+  transition: left 0.4s;
+}
+
 .loading {
   width: 3rem;
   position: fixed;
@@ -230,7 +243,6 @@ img {
   align-items: center;
   /* background-color: red; */
   width: 100%;
-
   box-sizing: border-box;
 }
 .billing-list .name {
@@ -285,3 +297,60 @@ img {
   padding-right: 1rem;
   background-color: #fff;
 }
+
+.billing-header {
+  position: fixed;
+  top: 48px;
+  left: 100%;
+  z-index: 10;
+  width: 100%;
+}
+
+.home-box {
+  position: relative;
+}
+
+.font-animation-box {
+  position: absolute;
+  /* background-color: rgba(255, 255, 255, 0.7); */
+  width: 30%;
+  left: 25%;
+  height: 3.2rem;
+  top: 0.5rem;
+  font-size: 1.3rem;
+  color: #fff;
+  overflow: hidden;
+}
+.font-animation-box .box-list div {
+  height: 3.2rem;
+  display: flex;
+  align-items: center;
+}
+.font-animation-box .box-list {
+  width: 100%;
+  height: 6.4rem;
+  position: absolute;
+  top: 3.2rem;
+  animation: fonMoveTop 5s infinite backwards;
+}
+
+@keyframes fonMoveTop {
+  0% {
+    top: 3.2rem;
+  }
+  10% {
+    top: 0;
+  }
+  50% {
+    top: 0;
+  }
+  60% {
+    top: -3.2rem;
+  }
+  99.99999% {
+    top: -3.2rem;
+  }
+  100% {
+    top: 3.2rem;
+  }
+}

index.html

@@ -13,36 +13,46 @@
   <img class="loading" src="./img/loading.png" alt="">
 
   <div id="home" class="container">
-    <div id="bb" class="billing">
+    <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 class="bb-list">
-        </div>
-        <img class="bg" style="margin-top: 10px;" src="./img/IMG_3620.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">
+    <div id="list" class="billing list-class">
-      <div class="account-header">
+      <div class="account-header billing-header">
         <a href="#home" class="account-back"></a>
         <div class="card-box">
           <div class="card-number"></div>
-          <img class="bg" src="./img/m1.jpg" alt="">
+          <img class="bg" id="m1" src="./img/m1.png" alt="">
-        </div>
-
-        <div class="billing-list">
         </div>
       </div>
+      <div class="billing-list">
+      </div>
     </div>
 
-    <div class="header"></div>
+    <div class="header">
+
+    </div>
     <div class="banner">
       <!-- <img class="bg top-header" src="./img/t.jpg" alt=""> -->
       <a href="#bb" class="account"></a>
       <a href="#list" class="mx"></a>
     </div>
-    <img class="bg" src="./img/1.jpg" alt="">
+    <div class="home-box">
+      <img class="bg" src="./img/1.jpg" alt="">
+      <div class="font-animation-box">
+        <div class="box-list">
+          <div>21312312</div>
+          <div>--1231231</div>
+        </div>
+      </div>
+    </div>
+
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
@@ -85,52 +95,81 @@
     }
     hideLoading();
 
+    $("#m1").each(function () {
+      if (this.complete) {
+        console.log('complete', this.height)
+        $('.billing-list').css('paddingTop', this.height)
+
+        // console.log(111, this.height())
+        // $('.billing-list').css('paddingTop', '123px')
+        // this image already loaded
+        // do whatever you would do when it was loaded
+      } else {
+        $($(this)).on('load', function () {
+          // image now loaded
+          $('.billing-list').css('paddingTop', this.height)
+
+          console.log('load', this.height)
+
+        });
+      }
+    });
+
+    // $('').load = () => {
+    //   // $('#list').css('paddingTop', $('.card-box').height())
+
+    // }
+
     $('.account,.mx').on('click', () => {
       $('.loading').show()
       hideLoading();
     })
     $(function () {
 
-      function getPageScroll() {
+
-        var xScroll, yScroll;
+
-        if (self.pageYOffset) {
+
-          yScroll = self.pageYOffset;
+      // function getPageScroll() {
-          xScroll = self.pageXOffset;
+      //   var xScroll, yScroll;
-        } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
+      //   if (self.pageYOffset) {
-          yScroll = document.documentElement.scrollTop;
+      //     yScroll = self.pageYOffset;
-          xScroll = document.documentElement.scrollLeft;
+      //     xScroll = self.pageXOffset;
-        } else if (document.body) {// all other Explorers
+      //   } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
-          yScroll = document.body.scrollTop;
+      //     yScroll = document.documentElement.scrollTop;
-          xScroll = document.body.scrollLeft;
+      //     xScroll = document.documentElement.scrollLeft;
-        }
+      //   } else if (document.body) {// all other Explorers
-        arrayPageScroll = new Array(xScroll, yScroll);
+      //     yScroll = document.body.scrollTop;
-        return arrayPageScroll;
+      //     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')
+      // console.log('44')
-      document.addEventListener('scroll', () => {
+      // document.addEventListener('scroll', () => {
-        const pageScroll = getPageScroll();
+      //   const pageScroll = getPageScroll();
-        const isShow = $('.top-header').is(":visible")
+      //   const isShow = $('.top-header').is(":visible")
-        console.log('11', isShow)
+      //   console.log('11', isShow)
-
+
-        if (pageScroll[1] >= 48 && !isShow) {
+      //   if (pageScroll[1] >= 48 && !isShow) {
-          $('.top-header').show()
+      //     $('.top-header').show()
-        }
+      //   }
-        if (pageScroll[1] < 48 && isShow) {
+      //   if (pageScroll[1] < 48 && isShow) {
-          $('.top-header').hide()
+      //     $('.top-header').hide()
-        }
+      //   }
-      })
+      // })
+
       $.ajax({
         url: "./config.json",
         success: function (result) {
           console.log(result, 'result')
           if (result) {
-            const { showApp, bottomTips, cardList, billingList, billingCardNumber } = result;
+            const { showApp, fontAnimationList, bottomTips, cardList, billingList, billingCardNumber } = result;
             if (!showApp) {
               $('body').html('')
             } else {
@@ -141,7 +180,7 @@
                   <div class="item">
                     <div class="card">${cardId} <span>${cardCode}</span></div>
                     <div class="money">${money}</div>
-                    <img class="bg" src="./img/IMG_3619.jpg" alt="">
+                    <img class="bg" src="./img/IMG_3619.png" alt="">
                   </div>
                 `
               })
@@ -164,14 +203,14 @@
                         <div class="ye">余额：${money}</div>
                       </div>
                     </div>
-                    ${type == 0 ? ' <img class="bg" src="./img/m2.jpg" alt="">' : ' <img class="bg" src="./img/m3.jpg" alt="">'}
+                    <img class="bg" src="./img/m2.png" alt="">
                 </div>
                 `
               })
 
               $('.billing-list').html(billingHtmlArr)
               $('.card-number').text(billingCardNumber)
-
+              $('.box-list').html(`<div>${fontAnimationList[0]}</div><div>${fontAnimationList[1]}</div>`)
             }
           } else {
             $('body').html('')