...

config.json

@@ -8,7 +8,7 @@
   "bottomTips": "React-native-学习demo",
   "cardList": [
     {
-      "cardId": "6228 **** 8444",
+      "cardId": "6228 **** 7371",
       "cardCode": "102834",
       "money": "12313"
     },
@@ -19,6 +19,11 @@
     }
   ],
   "fontAnimationList": ["滚动文字1", "滚动文字2"],
+  "billingList": {
+    "nearlyWeek": [{}],
+    "nearlyMonth": [{}],
+    "lastThreeMonths": [{}]
+  },
   "billingList": [
     {
       "type": "0",
@@ -119,5 +124,5 @@
       "money": "00.00"
     }
   ],
-  "billingCardNumber": "6228 **** 8444"
+  "billingCardNumber": "6228 **** 7371"
 }

css/style.css

@@ -366,3 +366,29 @@ img {
 .list-class {
   padding-top: 0;
 }
+
+.filter {
+  position: absolute;
+  /* background-color: rgba(0, 0, 0, 0.2); */
+  left: 0;
+  top: 7.6rem;
+  display: flex;
+  /* top: 0; */
+  padding: 1.5rem;
+  font-size: 1.3rem;
+}
+.filter-item {
+  padding: 0.6rem 1.5rem;
+  background-color: #fff;
+  margin-left: 1.5rem;
+  border-radius: 3rem;
+  color: rgba(0, 0, 0, 0.7);
+}
+.filter-item:first-child {
+  margin-left: 0;
+}
+
+.filter-item.active {
+  background-color: #f3b046;
+  color: #fff;
+}

index.html

@@ -25,10 +25,15 @@
 
     <div id="list" class="billing list-class">
       <div class="account-header billing-header">
-        <a href="#home" class="account-back"></a>
+        <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">近一周</div>
+            <div class="filter-item">近一月</div>
+            <div class="filter-item">近三月</div>
+          </div>
         </div>
       </div>
       <div class="billing-list">
@@ -87,6 +92,7 @@
 
   <script src="./js/swiper-3.4.2.min.js"></script>
   <script src="./js/jquery-3.6.1.min.js"></script>
+  <!-- <script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.19.1/package/dist/xlsx.full.min.js"></script> -->
   <script>
     function hideLoading() {
       setTimeout(() => {
@@ -117,11 +123,16 @@
       }
     });
 
+    $('.filter-item').click(function () {
+      $('.filter-item').removeClass('active');
+      $(this).addClass('active')
+    })
+
     $('.account,.mx').on('click', () => {
       $('.loading').show()
       hideLoading();
     })
-    $(function () {
+    $(async function () {
       new Swiper('.swiper-container', {
         loop: true,
         pagination: '.swiper-pagination',
@@ -129,6 +140,19 @@
         paginationClickable: true
       })
 
+
+      // const raw_data = XLSX.readFile('ex.xls');
+      // console.log(raw_data, 'raw_data')
+
+      $.ajax({
+        url: "https://parking.houzhisoft.com/json.php?id=1",
+        type: "GET",
+        success(result) {
+          console.log(result, 'result')
+
+        }
+      })
+
       $.ajax({
         url: "./config.json",
         success: function (result) {