贷款-我的申请记录静态

htmldev/loan/src/router/index.js

@@ -14,7 +14,7 @@ const routes = [
     component: () => import(/* webpackChunkName: "pageNotFound" */ '../page/404')
   },
   {
-    path: '/loan', // 我的申请记录
+    path: '/', // 我的申请记录
     name: 'Loan',
     component: () => import(/* webpackChunkName: "loan_home" */ '../views/loan/home'),
     meta: {

htmldev/loan/src/views/loan/home/index.vue

@@ -1,31 +1,33 @@
 <template>
-  <div class="better-scroll wrapper" ref="wrapper">
-    <ul>
-      <li class="title">我的申请记录</li>
-      <li class="list fail" v-for="(item, index) in listData" :key="index" @click="funJumpDetail(item)">
-        <div class="top border-bottom-1px">
-          <div class="left-wrap">
-            <img src="" alt="">
+  <div class="container">
+    <h2 class="title">我的申请记录</h2>
+    <div class="better-scroll wrapper" ref="wrapper">
+      <ul>
+        <li class="list bg-1" v-for="(item, index) in listData" :key="index" @click="funJumpDetail(item)">
+          <div class="top border-bottom-1px">
+            <div class="left-wrap">
+              <img src="" alt="">
+            </div>
+            <div class="right-wrap">
+              <p>中行贷申请</p>
+              <p>
+                <span>需求金额：</span>
+                <span class="col-1">30</span>
+                <span class="col-1">万元</span>
+              </p>
+            </div>
           </div>
-          <div class="right-wrap">
-            <p>中行贷申请</p>
-            <p>
-              <span>需求金额：</span>
-              <span>30</span>
-              <span>万元</span>
-            </p>
-          </div>
-        </div>
-        <p class="bottom">
-          <span>2020-12-23 19:23</span>
-          <span>></span>
-        </p>
-      </li>
-      <li class="bitmap" v-if="!listData.length && booFetchData">
-        <img src="image/bitmap@2x.png" alt="">
-        <p>暂无申请记录</p>
-      </li>
-    </ul>
+          <p class="bottom">
+            <span>2020-12-23 19:23</span>
+            <span>></span>
+          </p>
+        </li>
+        <li class="bitmap" v-if="!listData.length && booFetchData">
+          <img src="./image/bitmap@2x.png" alt="">
+          <p>暂无申请记录</p>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -50,7 +52,7 @@
           pagesize: PAGESIZE,
           pagecount: 1
         },
-        listData: [1, 2, 3, 4],
+        listData: [],
         scroll: null,
         numFetchStatus: 0,
         arrFetchStatus: ['正在加载，请稍后～', '到底了'],
@@ -66,7 +68,6 @@
           pagecount: 1
         }
         this.listData = []
-        this.scroll = null
         this.numFetchStatus = 0
         this.booFetchData = false
         this.numPositionY = 0
@@ -132,58 +133,55 @@
 </script>
 
 <style lang="scss" scoped>
+  .container {
+    width: 100%;
+    padding-top: 25px;
+    background: #fff;
+  }
+
+  .title {
+    width: 343px;
+    padding-left: 8px;
+    line-height: 33px;
+    font-size: 24px;
+    font-weight: 500;
+    color: #333;
+  }
+
   .wrapper {
     position: relative;
     width: 100%;
-    height: 100vh;
+    height: calc(100vh - 82px);
+    margin-top: 25px;
     overflow: hidden;
-    background: #fff;
 
     ul {
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 100%;
-      padding: 24px 0 80px;
+      padding-bottom: 80px;
     }
   }
 
-  .title {
-    width: 343px;
-    line-height: 33px;
-    font-size: 24px;
-    font-weight: 500;
-    color: #333;
-  }
-
   .list {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 343px;
-    margin-top: 24px;
+    margin-top: 26px;
     border-radius: 4px;
 
     &:nth-of-type(1) {
-      margin-top: 26px;
+      margin-top: 0;
     }
 
-    &.success {
-      background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
-    }
-
-    &.fail {
+    &.bg-0 {
       background: linear-gradient(270deg, #E2E2E2 0%, #C7C7C7 100%);
+    }
 
-      .right-wrap {
-        p:nth-of-type(2) {
-
-          span:nth-of-type(2),
-          span:nth-of-type(3) {
-            color: #D6BDA1;
-          }
-        }
-      }
+    &.bg-1 {
+      background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
     }
   }
 
@@ -233,13 +231,19 @@
         line-height: 33px;
         font-size: 24px;
         font-weight: bold;
-        color: #D6BDA1;
       }
 
       span:nth-of-type(3) {
         line-height: 33px;
         font-size: 15px;
         font-weight: bold;
+      }
+
+      .col-0 {
+        color: #A7A7A7;
+      }
+
+      .col-1 {
         color: #D6BDA1;
       }
     }