update

src/router/index.ts

@@ -16,6 +16,7 @@ const routes: Array<RouteConfig> = [
     {
         path: '/',
         name: 'Overview',
+        // redirect: '/otherMatter',
         component: () => import(/* webpackChunkName: "overview" */ '../views/overview/index.vue'),
         meta: {
             keepAlive: true,
@@ -56,7 +57,27 @@ const routes: Array<RouteConfig> = [
     {
         path: '/otherMatter',
         name: 'OtherMatter',
-        component: () => import(/* webpackChunkName: "otherMatter" */ '../views/OtherMatter.vue'),
+        component: () => import(/* webpackChunkName: "otherMatter" */ '../views/otherMatter/index.vue'),
+        meta: {
+            keepAlive: true,
+            showTabbar: true,
+        },
+    },
+    // 其他事项 --> 综合事项
+    {
+        path: '/comprehensiveMatter',
+        name: 'ComprehensiveMatter',
+        component: () => import(/* webpackChunkName: "comprehensiveMatter" */ '../views/otherMatter/ComprehensiveMatter.vue'),
+        meta: {
+            keepAlive: true,
+            showTabbar: true,
+        },
+    },
+    //  其他事项 --> 辅助用房
+    {
+        path: '/auxiliaryRoom',
+        name: 'AuxiliaryRoom',
+        component: () => import(/* webpackChunkName: "comprehensiveMatter" */ '../views/otherMatter/AuxiliaryRoom.vue'),
         meta: {
             keepAlive: true,
             showTabbar: true,

src/views/OtherMatter.vue

@@ -1,25 +1,18 @@
 <template>
-    <div class='other-matter'>
-        <p>OtherMatter</p>
-    </div>
+    <div>AuxiliaryRoom</div>
 </template>
 <script>
 export default {
-    name: 'OtherMatter',
+    name: 'AuxiliaryRoom',
     props: {},
+    components: {},
     data() {
         return {}
     },
-    components: {},
     beforeMount() {},
     mounted() {},
     methods: {},
 }
 </script>
 <style lang='less' scoped>
-.other-matter {
-    width: 100%;
-    height: calc(100% - 50px);
-    background-color: #d3d3d3;
-}
 </style>

src/views/otherMatter/ComprehensiveMatter.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class='comprehensive-matter'>
+        <van-list v-model='loading' :finished='finished' finished-text='没有更多了' @load='onLoad'>
+            <van-cell v-for='item in list' :key='item' :title='item' />
+        </van-list>
+    </div>
+</template>
+<script>
+/**
+ * 综合事项
+ */
+import Vue from 'vue'
+import { List, Cell } from 'vant'
+Vue.use(List).use(Cell)
+export default {
+    name: 'ComprehensiveMatter',
+    props: {},
+    components: {},
+    data() {
+        return {
+            list: [],
+            loading: false,
+            finished: false,
+        }
+    },
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        onLoad() {
+            // 异步更新数据
+            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+            setTimeout(() => {
+                for (let i = 0; i < 10; i++) {
+                    this.list.push(this.list.length + 1)
+                }
+
+                // 加载状态结束
+                this.loading = false
+
+                // 数据全部加载完成
+                if (this.list.length >= 40) {
+                    this.finished = true
+                }
+            }, 1000)
+        },
+    },
+}
+</script>
+<style lang='less' scoped>
+.comprehensive-matter {
+    width: 100%;
+    height: 100px;
+    background-color:lightblue;
+}
+</style>

src/views/otherMatter/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class='other-matter'>
+        <van-tabs v-model='active' class='other-tabs' color='#025BAA' title-active-color='#025BAA' :line-width='60'>
+            <van-tab title='综合事项'>
+                <ComprehensiveMatter />
+            </van-tab>
+            <van-tab title='辅助用房'>
+                <AuxiliaryRoom />
+            </van-tab>
+        </van-tabs>
+    </div>
+</template>
+<script>
+import Vue from 'vue'
+import { Tab, Tabs } from 'vant'
+Vue.use(Tab).use(Tabs)
+import ComprehensiveMatter from './ComprehensiveMatter'
+import AuxiliaryRoom from './AuxiliaryRoom'
+export default {
+    name: 'OtherMatter',
+    props: {},
+    components: { ComprehensiveMatter, AuxiliaryRoom },
+    data() {
+        return {
+            active: 1,
+        }
+    },
+    beforeMount() {},
+    mounted() {},
+    methods: {},
+}
+</script>
+<style lang='less' scoped>
+.other-matter {
+    width: 100%;
+    height: calc(100% - 50px);
+    background-color: #d3d3d3;
+    .other-tabs {
+        /deep/ .van-tab__text {
+            font-size: 16px;
+        }
+    }
+}
+</style>

src/views/overview/index.vue

@@ -90,7 +90,7 @@
                                     <div class='info'>
                                         <p class='company'>大连金帝建设工程有限公司</p>
                                         <p class='name-phone'>
-                                            <span>张伟</span>
+                                            <span>日立电梯（中国）有限公司</span>
                                             <span>0411-86666924</span>
                                         </p>
                                         <p class='name-phone'>
@@ -130,7 +130,15 @@
         </van-tabs>
         <div class='bottom'>
             <!-- <span v-if='false'>近一个月,重要维保8条,重要维修3条,其他事项5条,综合事项10条</span> -->
-            <van-notice-bar  v-if='true' class='bottom-notice' background='#e5eef6' color='#025baa' speed='50' scrollable text='近一个月,重要维保8条,重要维修3条,其他事项5条,综合事项10条' />
+            <van-notice-bar
+                v-if='true'
+                class='bottom-notice'
+                background='#e5eef6'
+                color='#025baa'
+                speed='50'
+                scrollable
+                text='近一个月,重要维保8条,重要维修3条,其他事项5条,综合事项10条'
+            />
             <span v-else>近一个月,说明书无更新</span>
             <van-icon v-show='true' class='building-arrow' name='arrow' size='14px' @click='goToUpdateRecord' />
         </div>
@@ -355,6 +363,17 @@ export default {
                                 font-size: 14px;
                                 font-weight: 400;
                                 color: #666666;
+                                height: auto;
+                                & > :nth-child(1) {
+                                    flex: 1;
+                                    padding-right: 10px;
+                                }
+                                & > :nth-child(2) {
+                                    width: auto;
+                                    height: auto;
+                                    display: flex;
+                                    align-items: center;
+                                }
                             }
                         }
                         .info + .info {