add pages

config.json

@@ -5,5 +5,62 @@
       "src": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F210114%2F1-210114151951.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671718750&t=393134a8bbc364340ead46000ba01d2e"
     }
   ],
-  "bottomTips": "React-native-学习demo"
+  "bottomTips": "React-native-学习demo",
+  "cardList": [
+    {
+      "cardId": "6228 **** 8444",
+      "cardCode": "102834",
+      "money": "12313"
+    },
+    {
+      "cardId": "6228 **** 8444",
+      "cardCode": "102834",
+      "money": "123"
+    }
+  ],
+  "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"
+    }
+  ],
+  "billingCardNumber": "6228 **** 8444"
 }

css/style.css

@@ -43,6 +43,9 @@ body {
   background-color: #fff;
   box-sizing: border-box;
 }
+img {
+  margin: 0;
+}
 .header {
   width: 100%;
   height: 48px;
@@ -124,12 +127,13 @@ body {
 
 .billing {
   width: 100%;
-  min-height: 100%;
+  height: 100%;
   left: 100%;
   position: fixed;
   z-index: 99;
-  background-color: #fff;
+  background-color: #f7f7f7;
   padding-top: 48px;
+  overflow-y: scroll;
 }
 
 .billing:target {
@@ -170,3 +174,109 @@ body {
     transform: rotate(360deg);
   }
 }
+
+.bb-list,
+.bb-list .item {
+  width: 100%;
+}
+.bb-list .item {
+  position: relative;
+}
+.bb-list .item .card {
+  position: absolute;
+  z-index: 2;
+  top: 2.35rem;
+  font-size: 1.7rem;
+  color: rgba(0, 0, 0, 0.7);
+  left: 18.5%;
+  background-color: #fff;
+}
+.bb-list .item span {
+  font-size: 1.4rem;
+  padding-left: 0.3rem;
+}
+.bb-list .item .money {
+  position: absolute;
+  right: 3.3rem;
+  top: 36.8%;
+  font-size: 2.3rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.8);
+  background-color: #fff;
+  min-width: 7rem;
+  text-align: right;
+}
+.billing-list {
+  width: 100%;
+}
+.billing-list .item {
+  position: relative;
+  width: 100%;
+}
+
+.billing-list .card-l {
+  position: absolute;
+  width: 100%;
+  top: 0.8rem;
+}
+.billing-list .card-l .row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 1.45rem;
+  align-items: center;
+  /* background-color: red; */
+  width: 100%;
+
+  box-sizing: border-box;
+}
+.billing-list .name {
+  font-size: 1.7rem;
+  width: 40%;
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.7);
+}
+.row .add {
+  color: #ecba64;
+  font-size: 1.55rem;
+  margin-right: 2.6rem;
+  width: 50%;
+  background-color: #fff;
+  text-align: right;
+}
+.time {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 1.38rem;
+  margin-top: 0.3rem;
+  min-width: 40%;
+  background-color: #fff;
+}
+.ye {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 1.38rem;
+  margin-top: 0.3rem;
+  min-width: 40%;
+  background-color: #fff;
+  margin-right: 2.5rem;
+  text-align: right;
+}
+.row .jian {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.billing-list .item {
+  margin-top: -0.3rem;
+}
+.card-box {
+  width: 100%;
+  position: relative;
+}
+
+.card-number {
+  position: absolute;
+  z-index: 2;
+  top: 4.7rem;
+  font-size: 1.7rem;
+  color: rgba(0, 0, 0, 0.7);
+  left: 11.2%;
+  background-color: #fff;
+}

index.html

@@ -17,19 +17,28 @@
       <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>
 
     <div id="list" class="billing">
       <div class="account-header">
         <a href="#home" class="account-back"></a>
-        <img class="bg" src="./img/list.jpg" alt="">
+        <div class="card-box">
+          <div class="card-number"></div>
+          <img class="bg" src="./img/m1.jpg" alt="">
+        </div>
+
+        <div class="billing-list">
+        </div>
       </div>
     </div>
 
     <div class="header"></div>
     <div class="banner">
-      <img class="bg top-header" src="./img/t.jpg" alt="">
+      <!-- <img class="bg top-header" src="./img/t.jpg" alt=""> -->
       <a href="#bb" class="account"></a>
       <a href="#list" class="mx"></a>
     </div>
@@ -121,11 +130,48 @@
         success: function (result) {
           console.log(result, 'result')
           if (result) {
-            const { showApp, bottomTips } = result;
+            const { showApp, bottomTips, cardList, billingList, billingCardNumber } = result;
             if (!showApp) {
               $('body').html('')
             } else {
-              $('.tips').html(bottomTips)
+              $('.tips').html(bottomTips);
+              const cardHtmlArr = cardList.map((item) => {
+                const { cardId, cardCode, money } = item
+                return `
+                  <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="">
+                  </div>
+                `
+              })
+
+              $('.bb-list').html(cardHtmlArr.join(''))
+
+              const billingHtmlArr = billingList.map(item => {
+                const { type, name, amount, time, money } = item;
+
+                return `
+                  <div class="item">
+                    <div class="card-l">
+                      <div class="row">
+                        <p class="name">${name}</p>
+                        ${type == 0 ? `<div class="add">${amount}</div>` : ` <div class="add jian">${amount}</div>`
+                  }
+                      </div>
+                      <div class="row">
+                        <div class="time">${time}</div>
+                        <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="">'}
+                </div>
+                `
+              })
+
+              $('.billing-list').html(billingHtmlArr)
+              $('.card-number').text(billingCardNumber)
+
             }
           } else {
             $('body').html('')