登录页，首页，个贷待办列表UI样式优化

src/views/home/components/NavBar.vue

@@ -68,15 +68,15 @@ export default {
 .navbarRelative {
   width: 100%;
   height: 60px;
-  position: relative;
-  background-color: #ffffff;
+  position: relative; 
+  background-color: #f2f2f2;
   border-bottom: 1px #d7d7d7 solid;
 }
 
 .navbarFixed {
   width: 100%;
   height: 60px;
-  background-color: #ffffff;
+  background-color: #f2f2f2;
   border-bottom: 1px #d7d7d7 solid;
   position: fixed;
   top: 0;

src/views/home/components/Tabbar.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
-    <van-tabbar v-model="active" @change="onChange()">
-      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
-      <van-tabbar-item name="todo" icon="edit">待办</van-tabbar-item>
-      <van-tabbar-item name="start" icon="guide-o">发起</van-tabbar-item>
+  <div >
+    <van-tabbar v-model="active" @change="onChange()" >
+      <van-tabbar-item name="home" icon="home-o" class="tabbar-meun">首页</van-tabbar-item>
+      <van-tabbar-item name="todo" icon="edit" class="tabbar-meun">待办</van-tabbar-item>
+      <van-tabbar-item name="start" icon="guide-o" class="tabbar-meun">发起</van-tabbar-item>
     </van-tabbar>
   </div>
 </template>
@@ -50,4 +50,11 @@ export default {
     },
   },
 };
-</script>
+</script>
+
+<style scoped>
+.tabbar-meun{
+  background-color: #f2f2f2;
+  border-top:1px #d7d7d7 solid;
+}
+</style>

src/views/home/home.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div class="bottom-layer">
     <div class="card">
-      <h3 class="businessTitle">个贷业务</h3>
+      <div class="businessTitle">个贷业务</div>
       <div class="icon-area">
-        <svg t="1713838252300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5893" width="48" height="48">
+        <svg t="1713838252300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5893" width="36" height="36">
           <path
             d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
             fill="#409EFF"
@@ -25,7 +25,7 @@
         <div class="icon-word">正在进行</div>
       </div>
       <div class="icon-area" @click="goBench('/index/personal/myOrder')">
-        <svg t="1748250501503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" id="mx_n_1748250501504" width="48" height="48">
+        <svg t="1748250501503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" id="mx_n_1748250501504" width="36" height="36">
           <path
             d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
             fill="#F75444"
@@ -51,9 +51,9 @@
       </div>
     </div>
     <div class="card">
-      <h3 class="businessTitle">大中型业务</h3>
+      <div class="businessTitle">大中型业务</div>
       <div class="icon-area">
-        <svg t="1713838139679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5142" width="48" height="48">
+        <svg t="1713838139679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5142" width="36" height="36">
           <path
             d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
             fill="#17abe3"
@@ -70,7 +70,7 @@
         <div class="icon-word">正在进行</div>
       </div>
       <div class="icon-area" @click="goBench('/index/major/myOrder')">
-        <svg t="1748250501503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" id="mx_n_1748250501504" width="48" height="48">
+        <svg t="1748250501503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" id="mx_n_1748250501504" width="36" height="36">
           <path
             d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
             fill="#F75444"
@@ -96,9 +96,9 @@
       </div>
     </div>
     <div class="card">
-      <h3 class="businessTitle">资产业务</h3>
+      <div class="businessTitle">资产业务</div>
       <div class="icon-area">
-        <svg t="1713838525654" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6320" width="48" height="48">
+        <svg t="1713838525654" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6320" width="36" height="36">
           <path
             d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
             fill="#F56C6C"
@@ -135,7 +135,7 @@
         <div class="icon-word">正在进行</div>
       </div>
       <div class="icon-area" @click="goBench('/index/assets/myOrder')">
-        <svg t="1748250501503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" id="mx_n_1748250501504" width="48" height="48">
+        <svg t="1748250501503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" id="mx_n_1748250501504" width="36" height="36">
           <path
             d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
             fill="#F75444"
@@ -161,9 +161,9 @@
       </div>
     </div>
     <div class="card">
-      <h3 class="businessTitle">土地规划业务</h3>
+      <div class="businessTitle">土地规划业务</div>
       <div class="icon-area">
-        <svg t="1713920171367" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1903" width="48" height="48">
+        <svg t="1713920171367" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1903" width="36" height="36">
           <path
             d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
             fill="#d81e06"
@@ -179,8 +179,8 @@
         </svg>
         <div class="icon-word">正在进行</div>
       </div>
-      <div class="icon-area" @click="goBench('/index/land/myOrder')">
-        <svg t="1748250501503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" id="mx_n_1748250501504" width="48" height="48">
+      <div class="icon-area">
+        <svg t="1748250501503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" id="mx_n_1748250501504" width="36" height="36">
           <path
             d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
             fill="#F75444"
@@ -202,7 +202,7 @@
             p-id="2188"
           />
         </svg>
-        <div class="icon-word">我的项目</div>
+        <div class="icon-word">我的订单</div>
       </div>
     </div>
   </div>
@@ -222,22 +222,29 @@ export default {
 </script>
 
 <style scoped>
+.bottom-layer{
+  height: 550px;
+}
 .card {
   background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  padding: 16px;
+  border-radius: 5px;
+  padding: 10px;
   margin: 10px;
+  width: 89%;
+}
+
+.icon-word{
+  font-size: 10px;
 }
 
 .businessTitle {
   margin-top: 0px;
+  margin-bottom: 5px;
 }
 
 .icon-area {
   display: inline-block;
-  margin-top: 1%;
-  width: 25%;
   text-align: center;
+  margin-right: 10px;
 }
 </style>

src/views/home/index.vue

@@ -1,19 +1,14 @@
 <template>
   <div class="base">
-    <div>
       <NavBar></NavBar>
-    </div>
-    <router-view v-slot="{ Component }">
+      <router-view v-slot="{ Component }">
       <transition>
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
       </transition>
     </router-view>
-    <div style="height: 5rem;"></div>
-    <div>
       <Tabbar></Tabbar>
-    </div>
   </div>
 </template>
 
@@ -61,6 +56,8 @@ export default {
 </script>
 <style scoped>
 .base {
+  background-color: #f2f2f2; 
+  width: 100%; 
 }
 </style>
 

src/views/home/todo.vue

@@ -5,23 +5,24 @@
       <van-pull-refresh v-model="loading" @refresh="onPersonalRefresh()">
         <van-list v-model:loading="loading" :finished="personalFinished" finished-text="没有待办了" @load="personalTodoList()">
           <div class="card" v-for="item in personalListData" :key="item.id" @click="toPersonalDetail(item)">
-            <h3>
+            <div class="businessTitle">
               <van-icon name="link-o" />
               &nbsp;{{ item.orderId }}
-            </h3>
-            <p class="projectName">
-              <van-icon name="location-o" />
-              &nbsp;{{ item.location }}
-            </p>
-            <p>
+            </div>
+            <div class="projectName">
+              <div class="location-icon"><van-icon name="location-o" /></div>
+              &nbsp;
+              <div class="locaiton">{{ item.location }}</div>
+            </div>
+            <div class="clientInfo">
               <van-icon name="contact-o" />
               &nbsp;{{ item.clientName }}-{{ item.clientSubName}}
-            </p>
-            <p>
+            </div>
+            <div class="otherInfo">
               <van-tag type="primary" size="medium" class="van-tag">{{ item.nodeName }}</van-tag>
               <van-tag type="success" size="medium" class="van-tag">{{ item.clientManager }}</van-tag>
               <van-tag color="#969799" size="medium" class="van-tag">{{ item.created }}</van-tag>
-            </p>
+            </div>
           </div>
         </van-list>
       </van-pull-refresh>
@@ -32,10 +33,10 @@
       <van-pull-refresh v-model="loading" @refresh="onMajorRefresh()">
         <van-list v-model:loading="loading" :finished="majorFinished" finished-text="没有待办了" @load="majorTodoList()">
           <div class="card" v-for="item in majorListData" :key="item.id" @click="toMajorDetail(item)">
-            <h3>
+            <div class="businessTitle">
               <van-icon name="link-o" />
               &nbsp;{{ item.orderId }}
-            </h3>
+            </div>
             <p class="productionNo" v-if="item.statementNo || item.reportNo">
               <van-icon name="coupon-o" />
               &nbsp;
@@ -63,10 +64,10 @@
       <van-pull-refresh v-model="loading" @refresh="onAssetsRefresh()">
         <van-list v-model:loading="loading" :finished="assetsFinished" finished-text="没有待办了" @load="assetsTodoList()">
           <div class="card" v-for="item in assetsListData" :key="item.id" @click="toAssetsDetail(item)">
-            <h3>
+            <div class="businessTitle">
               <van-icon name="link-o" />
               &nbsp;{{ item.orderId }}
-            </h3>
+            </div>
             <p class="productionNo" v-if="item.statementNo || item.reportNo">
               <van-icon name="coupon-o" />
               &nbsp;
@@ -380,9 +381,8 @@ export default {
 <style scoped>
 .card {
   background-color: white;
-  border-radius: 12px;
-  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
-  padding: 16px;
+  border-radius: 5px;
+  padding: 10px;
   margin: 10px;
 }
 
@@ -393,6 +393,8 @@ export default {
 
 .projectName {
   width: 100%;
+  margin-bottom: 5px;
+  display: flex;
   /* overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis; */
@@ -401,4 +403,13 @@ export default {
 .van-tag {
   margin: 2px;
 }
+
+.businessTitle {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+.clientInfo{
+  margin-bottom: 5px;
+}
+
 </style>