......

config.json

@@ -13,7 +13,7 @@
       "money": "12313"
     },
     {
-      "cardId": "6228 **** 8444",
+      "cardId": "6228 **** 9999",
       "cardCode": "102834",
       "money": "123"
     }

css/style.css

@@ -354,3 +354,12 @@ img {
     top: 3rem;
   }
 }
+.toList {
+  display: block;
+  position: absolute;
+  bottom: 2rem;
+  left: 5%;
+  width: 11rem;
+  height: 4rem;
+  z-index: inherit;
+}

index.html

@@ -102,16 +102,10 @@
       window?.ReactNativeWebView?.postMessage(0)
     })
 
-
     $("#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
@@ -123,54 +117,17 @@
       }
     });
 
-    // $('').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;
-      //     xScroll = self.pageXOffset;
-      //   } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
-      //     yScroll = document.documentElement.scrollTop;
-      //     xScroll = document.documentElement.scrollLeft;
-      //   } else if (document.body) {// all other Explorers
-      //     yScroll = document.body.scrollTop;
-      //     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')
-      // document.addEventListener('scroll', () => {
-      //   const pageScroll = getPageScroll();
-      //   const isShow = $('.top-header').is(":visible")
-      //   console.log('11', isShow)
-
-      //   if (pageScroll[1] >= 48 && !isShow) {
-      //     $('.top-header').show()
-      //   }
-      //   if (pageScroll[1] < 48 && isShow) {
-      //     $('.top-header').hide()
-      //   }
-      // })
 
       $.ajax({
         url: "./config.json",
@@ -182,12 +139,13 @@
               $('body').html('')
             } else {
               $('.tips').html(bottomTips);
-              const cardHtmlArr = cardList.map((item) => {
+              const cardHtmlArr = cardList.map((item, index) => {
                 const { cardId, cardCode, money } = item
                 return `
-                  <div class="item">
+                  <div class="item card-item">
                     <div class="card">${cardId} <span>${cardCode}</span></div>
                     <div class="money">${money}</div>
+                    <a class="toList" data-index=${index} href="#list"></a>
                     <img class="bg" src="./img/IMG_3619.png" alt="">
                   </div>
                 `
@@ -219,6 +177,12 @@
               $('.billing-list').html(billingHtmlArr)
               $('.card-number').text(billingCardNumber)
               $('.box-list').html(`<div>${fontAnimationList[0]}</div><div>${fontAnimationList[1]}</div>`)
+              $('.toList').each(function () {
+                $(this).click(() => {
+                  console.log($(this).attr('data-index'), 'wwww')
+                  $('.card-number').text(cardList[$(this).attr('data-index')]?.cardId)
+                })
+              })
             }
           } else {
             $('body').html('')