1.调整样式将待办页面的icon与文字垂直对齐

src/views/home/todo.vue

@@ -1,105 +1,98 @@
 <template>
-    <van-tabs v-model:active="activeName" @change="tabChange()" :ellipsis="false">
-      <van-tab title="个贷待办" name="personal" >
-        <van-search v-model="personalListQuery.keyword" placeholder="请输入搜索关键词" @search="onPersonalSearch()" />
-        <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)">
-              <div class="businessTitle">
-                <van-icon name="link-o" />
-                &nbsp;{{ item.orderId }}
-              </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}}
-              </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>
-              </div>
+  <van-tabs v-model:active="activeName" @change="tabChange()" :ellipsis="false">
+    <van-tab title="个贷待办" name="personal">
+      <van-search v-model="personalListQuery.keyword" placeholder="请输入搜索关键词" @search="onPersonalSearch()" />
+      <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)">
+            <div class="businessTitle">
+              <van-icon name="link-o" />
+              {{ item.orderId }}
             </div>
-          </van-list>
-        </van-pull-refresh>
-        <van-back-top right="10vw" bottom="10vh" />
-      </van-tab>
-      <van-tab title="大中型待办" name="major" >
-        <van-search v-model="majorListQuery.keyword" placeholder="请输入搜索关键词" @search="onMajorSearch()" />
-        <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)">
-              <div class="businessTitle">
-                <van-icon name="link-o" />
-                &nbsp;{{ item.orderId }}
-              </div>
-              <div class="productionNo" v-if="item.statementNo || item.reportNo">
-                <van-icon name="coupon-o" />
-                &nbsp;
-                {{ item.statementNo }}
-                <!-- 产品号都不为空才显示中间的分割空格, 以保持页面间距统一 -->
-                <span v-if="item.statementNo && item.reportNo">&nbsp;&nbsp;</span>
-                {{ item.reportNo }}
-              </div>
-              <div class="projectName">
-                <div>
-                  <van-icon name="location-o" />
-                </div>
-                &nbsp;
-                <div>
-                  {{ item.productionName == null ? item.orderName : item.productionName }}
-                </div>
-              </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>
+            <div class="projectName">
+              <div class="locaiton">
+                <van-icon name="location-o" />
+                {{ item.location }}
               </div>
             </div>
-          </van-list>
-        </van-pull-refresh>
-        <van-back-top right="10vw" bottom="10vh" />
-      </van-tab>
-      <van-tab title="资产待办" name="assets">
-        <van-search v-model="assetsListQuery.keyWord" placeholder="请输入搜索关键词" @search="onAssetsSearch()" />
-        <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)">
-              <div class="businessTitle">
-                <van-icon name="link-o" />
-                &nbsp;{{ item.orderId }}
-              </div>
-              <div class="productionNo" v-if="item.statementNo || item.reportNo">
-                <van-icon name="coupon-o" />
-                &nbsp;
-                {{ item.statementNo }}
-                <!-- 产品号都不为空才显示中间的分割空格, 以保持页面间距统一 -->
-                <span v-if="item.statementNo && item.reportNo">&nbsp;&nbsp;</span>
-                {{ item.reportNo }}
-              </div>
-              <div class="projectName">
-                <div>
-                  <van-icon name="location-o" />
-                </div>
-                &nbsp;
-                <div>
-                  {{ item.reportName || item.statementName || item.name }}
-                </div>
+            <div class="clientInfo">
+              <van-icon name="contact-o" />
+              {{ item.clientName }}-{{ item.clientSubName}}
+            </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>
+            </div>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+      <van-back-top right="10vw" bottom="10vh" />
+    </van-tab>
+    <van-tab title="大中型待办" name="major">
+      <van-search v-model="majorListQuery.keyword" placeholder="请输入搜索关键词" @search="onMajorSearch()" />
+      <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)">
+            <div class="businessTitle">
+              <van-icon name="link-o" />
+              {{ item.orderId }}
+            </div>
+            <div class="productionNo" v-if="item.statementNo || item.reportNo">
+              <van-icon name="coupon-o" />
+              {{ item.statementNo }}
+              <!-- 产品号都不为空才显示中间的分割空格, 以保持页面间距统一 -->
+              <span v-if="item.statementNo && item.reportNo">&nbsp;&nbsp;</span>
+              {{ item.reportNo }}
+            </div>
+            <div class="projectName">
+              <div>
+                <van-icon name="location-o" />
+                {{ item.productionName == null ? item.orderName : item.productionName }}
               </div>
-              <div class="otherInfo">
-                <van-tag type="primary" size="medium" class="van-tag">{{ item.currentNodeName }}</van-tag>
-                <van-tag type="success" size="medium" class="van-tag">{{ item.clientManagerName }}</van-tag>
-                <van-tag color="#969799" size="medium" class="van-tag">{{ item.created }}</van-tag>
+            </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>
+            </div>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+      <van-back-top right="10vw" bottom="10vh" />
+    </van-tab>
+    <van-tab title="资产待办" name="assets">
+      <van-search v-model="assetsListQuery.keyWord" placeholder="请输入搜索关键词" @search="onAssetsSearch()" />
+      <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)">
+            <div class="businessTitle">
+              <van-icon name="link-o" />
+              {{ item.orderId }}
+            </div>
+            <div class="productionNo" v-if="item.statementNo || item.reportNo">
+              <van-icon name="coupon-o" />
+              {{ item.statementNo }}
+              <!-- 产品号都不为空才显示中间的分割空格, 以保持页面间距统一 -->
+              <span v-if="item.statementNo && item.reportNo">&nbsp;&nbsp;</span>
+              {{ item.reportNo }}
+            </div>
+            <div class="projectName">
+              <div>
+                <van-icon name="location-o" />
+                {{ item.reportName || item.statementName || item.name }}
               </div>
             </div>
-          </van-list>
-        </van-pull-refresh>
-        <van-back-top right="10vw" bottom="10vh" />
-      </van-tab>
+            <div class="otherInfo">
+              <van-tag type="primary" size="medium" class="van-tag">{{ item.currentNodeName }}</van-tag>
+              <van-tag type="success" size="medium" class="van-tag">{{ item.clientManagerName }}</van-tag>
+              <van-tag color="#969799" size="medium" class="van-tag">{{ item.created }}</van-tag>
+            </div>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+      <van-back-top right="10vw" bottom="10vh" />
+    </van-tab>
   </van-tabs>
 </template>
 
@@ -372,14 +365,26 @@ export default {
         default:
           if (row.statementNo && row.reportNo) {
             this.$router.push(
-              `/index/assets/todoDetail?assetsId=${row.assetsId}&statementNo=${row.statementNo}&reportNo=${row.reportNo}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${row.reportName || row.statementName || row.name}`
+              `/index/assets/todoDetail?assetsId=${row.assetsId}&statementNo=${row.statementNo}&reportNo=${row.reportNo}&currentNodeCode=${row.currentNodeCode}&handlerName=${
+                row.handlerName
+              }&projectName=${row.reportName || row.statementName || row.name}`
             );
           } else if (row.statementNo && !row.reportNo) {
-            this.$router.push(`/index/assets/todoDetail?assetsId=${row.assetsId}&statementNo=${row.statementNo}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${row.reportName || row.statementName || row.name}`);
+            this.$router.push(
+              `/index/assets/todoDetail?assetsId=${row.assetsId}&statementNo=${row.statementNo}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${
+                row.reportName || row.statementName || row.name
+              }`
+            );
           } else if (!row.statementNo && row.reportNo) {
-            this.$router.push(`/index/assets/todoDetail?assetsId=${row.assetsId}&reportNo=${row.reportNo}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${row.reportName || row.statementName || row.name}`);
+            this.$router.push(
+              `/index/assets/todoDetail?assetsId=${row.assetsId}&reportNo=${row.reportNo}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${
+                row.reportName || row.statementName || row.name
+              }`
+            );
           } else {
-            this.$router.push(`/index/assets/todoDetail?assetsId=${row.assetsId}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${row.reportName || row.statementName || row.name}`);
+            this.$router.push(
+              `/index/assets/todoDetail?assetsId=${row.assetsId}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${row.reportName || row.statementName || row.name}`
+            );
           }
           break;
       }
@@ -415,10 +420,10 @@ export default {
   font-weight: bold;
   margin-bottom: 5px;
 }
-.clientInfo{
+.clientInfo {
   margin-bottom: 5px;
 }
 /deep/ .van-tabs__wrap {
-    width: 100%;
-  }
+  width: 100%;
+}
 </style>