update

src/App.vue

@@ -2,7 +2,7 @@
     <!-- ios头部padding适配 -->
     <div id='app' :class='isIOS?"ios-padding":""'>
         <!-- 顶部navbar -->
-        <NarBar class='nav-bar' />
+        <NarBar class='nav-bar' v-if='!$route.meta.hideNarBar' />
         <!-- <div class='container'> -->
         <keep-alive>
             <router-view v-if='$route.meta.keepAlive' />

src/router/index.ts

@@ -62,6 +62,17 @@ const routes: Array<RouteConfig> = [
             showTabbar: true,
         },
     },
+    // 说明书更新记录
+    {
+        path: '/updateRecord',
+        name: 'UpdateRecord',
+        component: () => import(/* webpackChunkName: "updateRecord" */ '../views/overview/UpdateRecord.vue'),
+        meta: {
+            keepAlive: false,
+            showTabbar: false,
+            hideNarBar: true,
+        },
+    },
 ]
 
 const router = new VueRouter({

src/views/overview/UpdateRecord.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class='update-record'>
+        <van-nav-bar title='说明书更新记录' left-arrow @click-left='backPage' />
+        <van-dropdown-menu active-color='#1989fa'>
+            <van-dropdown-item v-model='value1' :options='option1' />
+        </van-dropdown-menu>
+        <div class='record'>
+            <div class='info' v-for='i in 5' :key='i'>
+                <div class='left'>
+                    <div class='dot'></div>
+                    <div class='line'></div>
+                </div>
+                <div class='right'>
+                    <div class='title'>
+                        <span class='date'>2020.08.19</span>
+                        <span class='type'>重要维保</span>
+                    </div>
+                    <div class='content'>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+/**
+ * 说明书更新记录
+ */
+import Vue from 'vue'
+import { NavBar, DropdownMenu, DropdownItem } from 'vant'
+Vue.use(NavBar)
+Vue.use(DropdownMenu).use(DropdownItem)
+export default {
+    name: 'UpdateRecord',
+    props: {},
+    components: {},
+    data() {
+        return {
+            value1: 0,
+            option1: [
+                { text: '全部', value: 0 },
+                { text: '重要维保', value: 1 },
+                { text: '重要维修', value: 2 },
+                { text: '其他事项', value: 3 },
+                { text: '综合事项', value: 4 },
+            ],
+        }
+    },
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        backPage() {
+            this.$router.go(-1)
+        },
+    },
+}
+</script>
+<style lang='less' scoped>
+.update-record {
+    width: 100%;
+    height: 100%;
+    // background-color: lightblue;
+    // 下拉菜单
+    /deep/.van-dropdown-menu__item {
+        justify-content: flex-start !important;
+        padding-left: 8px;
+    }
+    // 主体内容
+    .record {
+        width: 100%;
+        height: calc(100% - 100px);
+        padding: 15px;
+        // background-color: lightblue;
+        overflow: auto;
+        .info {
+            width: 100%;
+            height: 105px;
+            display: flex;
+            .left {
+                width: 8px;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                .dot {
+                    margin-top: 6px;
+                    width: 8px;
+                    height: 8px;
+                    background-color: #025baa;
+                    border-radius: 50%;
+                }
+                .line {
+                    margin: 0 auto;
+                    width: 2px;
+                    flex: 1;
+                    margin-top: 6px;
+                    background: #dcdcdc;
+                    // background-color: red;
+                }
+            }
+            .right {
+                flex: 1;
+                padding-left: 10px;
+                .title {
+                    width: 100%;
+                    height: 20px;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #666666;
+                    .type {
+                        margin-left: 15px;
+                    }
+                }
+                .content {
+                    width: 100%;
+                    height: auto;
+                    margin-top: 8px;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #333333;
+                    line-height: 25px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/overview/index.vue

@@ -54,12 +54,84 @@
                     </div>
                 </div>
             </van-tab>
-            <van-tab title='施工单位信息'></van-tab>
+            <!-- 施工单位信息 -->
+            <van-tab title='施工单位信息' class='sgdw-info'>
+                <van-tabs type='card' color='#E5EEF6' title-active-color='#025baa' title-inactive-color='#666666'>
+                    <van-tab title='总包'>
+                        <ul class='zb'>
+                            <li class='title'>
+                                <i>icon</i>中国建筑第二工程局有限公司
+                            </li>
+                            <li class='system'>
+                                <span class='card'>消防电</span>
+                                <span class='card'>土建</span>
+                                <span class='card'>弱电</span>
+                                <span class='card'>机电</span>
+                                <span class='card'>给排水</span>
+                                <!-- <span class='card'>消防电</span>
+                                <span class='card'>土建</span>
+                                <span class='card'>弱电</span>
+                                <span class='card'>机电</span>
+                                <span class='card'>给排水</span>-->
+                            </li>
+                            <li class='name'>
+                                <i>icon</i>张三
+                            </li>
+                            <li class='phone'>
+                                <i>icon</i>19220010211
+                            </li>
+                        </ul>
+                    </van-tab>
+                    <van-tab title='分包'>
+                        <ul class='fb'>
+                            <li class='fb-card' v-for='i in 5' :key='i'>
+                                <div class='card-left'>消防水</div>
+                                <div class='card-right'>
+                                    <div class='info'>
+                                        <p class='company'>大连金帝建设工程有限公司</p>
+                                        <p class='name-phone'>
+                                            <span>张伟</span>
+                                            <span>0411-86666924</span>
+                                        </p>
+                                        <p class='name-phone'>
+                                            <span>张伟</span>
+                                            <span>0411-86666924</span>
+                                        </p>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class='fb-card'>
+                                <div class='card-left'>幕墙</div>
+                                <div class='card-right'>
+                                    <div class='info'>
+                                        <p class='company'>大连建工机电安装工程有限公司</p>
+                                        <p class='name-phone'>
+                                            <span>张伟</span>
+                                            <span>18612349786</span>
+                                        </p>
+                                        <p class='name-phone'>
+                                            <span>张伟</span>
+                                            <span>18612349786</span>
+                                        </p>
+                                    </div>
+                                    <div class='info'>
+                                        <p class='company'>大连建工机电安装工程有限公司</p>
+                                        <p class='name-phone'>
+                                            <span>张伟</span>
+                                            <span>18612349786</span>
+                                        </p>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </van-tab>
+                </van-tabs>
+            </van-tab>
         </van-tabs>
         <div class='bottom'>
             <span v-if='false'>近一个月,重要维保8条,重要维修3条</span>
             <span v-else>近一个月,说明书无更新</span>
-            <van-icon v-show='false' class='building-arrow' name='arrow' size='14px' />
+            <van-icon v-show='true' class='building-arrow' name='arrow' size='14px' @click='goToUpdateRecord' />
         </div>
     </div>
 </template>
@@ -109,6 +181,13 @@ export default {
                 'https://img.yzcdn.cn/vant/apple-2.jpg',
             ].slice(0, parseInt(Math.random() * 8 + 1))
         },
+        /**
+         * 跳转说明书更新记录
+         */
+        goToUpdateRecord() {
+            
+            this.$router.push({ name: 'UpdateRecord' })
+        },
     },
 }
 </script>
@@ -171,6 +250,120 @@ export default {
                 }
             }
         }
+        // 施工单位信息
+        .sgdw-info {
+            margin-top: 10px;
+            height: calc(100% - 10px);
+            // tab样式修改
+            /deep/.van-tabs__nav {
+                width: 50%;
+                margin: 0 auto;
+                border-color: #d4d4d4;
+                .van-tab--active {
+                    border: 1px solid #025baa !important;
+                    background-color: rgb(229, 238, 246);
+                }
+            }
+            & > .van-tabs {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                .van-tabs__content {
+                    flex: 1;
+                    overflow: auto;
+                }
+            }
+            // 总包
+            .zb {
+                padding: 10px 18px;
+                li {
+                    height: 25px;
+                    line-height: 25px;
+                    margin-bottom: 10px;
+                }
+                i {
+                    display: inline-block;
+                    overflow: hidden;
+                    width: 15px;
+                    height: 15px;
+                    margin-right: 5px;
+                }
+
+                .title {
+                    color: #333333;
+                    font-size: 16px;
+                    font-weight: 600;
+                }
+                .system {
+                    padding-left: 20px;
+                    height: auto;
+                    .card {
+                        display: inline-block;
+                        height: 25px;
+                        background-color: #eff0f1;
+                        border-radius: 2px;
+                        color: #666;
+                        padding: 0 10px;
+                        margin-right: 5px;
+                        margin-bottom: 5px;
+                    }
+                }
+                .name,
+                .phone {
+                    color: #333333;
+                    font-size: 14px;
+                }
+            }
+            // 分包
+            .fb {
+                padding: 10px 18px;
+                .fb-card {
+                    width: 100%;
+                    height: auto;
+                    display: flex;
+                    border-radius: 4px;
+                    border: 1px solid #d4d4d4;
+                    margin-bottom: 13px;
+                    .card-left {
+                        width: 65px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        background: #eff0f1;
+                        border-radius: 4px 0px 0px 4px;
+                        padding: 8px;
+                        font-size: 16px;
+                        font-weight: 500;
+                        color: #333333;
+                    }
+                    .card-right {
+                        padding: 8px 16px;
+                        flex: 1;
+                        .info {
+                            .company {
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #333333;
+                                padding: 3px 0;
+                            }
+                            .name-phone {
+                                display: flex;
+                                justify-content: space-between;
+                                padding: 3px 0;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #666666;
+                            }
+                        }
+                        .info + .info {
+                            border-top: 1px solid #aaa;
+                            margin-top: 5px;
+                            padding-top: 5px;
+                        }
+                    }
+                }
+            }
+        }
     }
 
     // 底部固定条
@@ -183,7 +376,7 @@ export default {
         left: 0;
         height: 44px;
         padding: 0 16px;
-        background: #fff;
+        background: #e5eef6;
         color: #025baa;
         font-size: 14px;
         .building-arrow {