فهرست منبع

tabber高度问题

yunxing 4 سال پیش
والد
کامیت
1a2f92e892
5فایلهای تغییر یافته به همراه115 افزوده شده و 29 حذف شده
  1. 6 3
      src/App.vue
  2. 72 0
      src/components/systemMenu.vue
  3. 1 1
      src/router/index.ts
  4. 0 25
      src/views/EquipmentFacilities.vue
  5. 36 0
      src/views/equipmentFacilities/index.vue

+ 6 - 3
src/App.vue

@@ -16,7 +16,7 @@
                 <span>项目概况</span>
                 <template #icon='props'>
                     <!-- style='color:#ffffff;background-color:#1989fa' -->
-                    <i v-if='props.active' class='iconfont wanda-xiangmugaikuangactive1'  />
+                    <i v-if='props.active' class='iconfont wanda-xiangmugaikuangactive1' />
                     <!-- <i v-if='props.active' class='iconfont wanda-xiangmugaikuang' style='color:red;background:blue' /> -->
                     <i v-else class='iconfont wanda-xiangmugaikuang'></i>
                 </template>
@@ -103,7 +103,7 @@ export default {
         console.log('环境变量', process.env.VUE_APP_RealEnv)
         if (this.plazaId) {
             this.getFengMap()
-            store.dispatch("getBrand")
+            store.dispatch('getBrand')
         } else {
             window.fengmapData = null
         }
@@ -175,7 +175,7 @@ export default {
             if (plazaId) {
                 // 请求该项目下的楼层数据
                 this.getFengMap()
-                store.dispatch("getBrand")
+                store.dispatch('getBrand')
             } else {
                 window.fengmapData = null
             }
@@ -193,6 +193,9 @@ export default {
 .nav-bar {
     width: 100%;
     height: 50px;
+    /deep/.van-nav-bar {
+        height: 100%;
+    }
 }
 .fengMap {
     position: fixed;

+ 72 - 0
src/components/systemMenu.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class='system-menu'>
+        <div class='system' v-for='(system ,index) in systemData' :key='index' @click='changeSystem(system)' :class='system.active?"active":""'>
+            <i class='iconfont' :class='system.icon'></i>
+            <div>{{system.text}}</div>
+        </div>
+    </div>
+</template>
+<script>
+/**
+ * 设备设施左侧菜单
+ */
+export default {
+    name: 'systemMenu',
+    props: {},
+    components: {},
+    data() {
+        return {
+            systemData: [
+                { text: '供电', categoryId: 'GDXT', smsxt: '1001', icon: 'wanda-gongdian1', active: true },
+                { text: '暖通', categoryId: 'NTXT', smsxt: '1002', icon: 'wanda-nuantong1', active: false },
+                { text: '消防', categoryId: 'XFXT', smsxt: '1003', icon: 'wanda-xiaofang1', active: false },
+                { text: '弱电', categoryId: 'RDXT', smsxt: '1004', icon: 'wanda-ruodian1', active: false },
+                { text: '给排水', categoryId: 'JPSXT', smsxt: '1005', icon: 'wanda-geipaishui1', active: false },
+                { text: '电梯', categoryId: 'DTXT', smsxt: '1006', icon: 'wanda-dianti1', active: false },
+                { text: '燃气', categoryId: 'RQXT', smsxt: '1007', icon: 'wanda-ranqi1', active: false },
+                { text: '土建', categoryId: 'SCPZ', smsxt: '1008', icon: 'wanda-tujian1', active: false },
+            ],
+        }
+    },
+    create() {},
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        /**
+         * 点击系统,进行切换,并传回 父组件选中系统值
+         */
+        changeSystem(system) {
+            this.systemData.map((item) => {
+                item.active = false
+                if (item.categoryId === system.categoryId) {
+                    item.active = true
+                }
+            })
+        },
+    },
+}
+</script>
+<style lang='less' scoped>
+.system-menu {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    background-color: #f5f6f7;
+    flex-direction: column;
+    text-align: center;
+    .system {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    // 激活的系统图标颜色
+    .active {
+        background-color: #fff;
+        color: #025baa;
+        i {
+            color: #025baa;
+        }
+    }
+}
+</style>

+ 1 - 1
src/router/index.ts

@@ -49,7 +49,7 @@ const routes: Array<RouteConfig> = [
     {
         path: '/equipmentFacilities',
         name: 'EquipmentFacilities',
-        component: () => import(/* webpackChunkName: "equipmentFacilities" */ '../views/EquipmentFacilities.vue'),
+        component: () => import(/* webpackChunkName: "equipmentFacilities" */ '../views/equipmentFacilities/index.vue'),
         meta: {
             keepAlive: true,
             showTabbar: true,

+ 0 - 25
src/views/EquipmentFacilities.vue

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

+ 36 - 0
src/views/equipmentFacilities/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class='equipment-facilities'>
+        <SystemMenu class='left' />
+        <div class='right'></div>
+    </div>
+</template>
+<script>
+import SystemMenu from '@/components/systemMenu'
+export default {
+    name: 'EquipmentFacilities',
+    props: {},
+    data() {
+        return {}
+    },
+    components: { SystemMenu },
+    beforeMount() {},
+    mounted() {},
+    methods: {},
+}
+</script>
+<style lang='less' scoped>
+.equipment-facilities {
+    width: 100%;
+    height: calc(100% - 100px);
+    padding: 0;
+    display: flex;
+    .left {
+        width: 80px;
+        height: 100%;
+    }
+    .right {
+        flex: 1;
+        height: 100%;
+    }
+}
+</style>