|
@@ -1,449 +1,423 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div class="nav">
|
|
|
- <div
|
|
|
- v-for="(item,index) in navList"
|
|
|
- :key="index"
|
|
|
- class="nav-item"
|
|
|
- :class='{"icon-active":active[index]}'
|
|
|
- @click="handleClick(item,index)"
|
|
|
- >
|
|
|
- <img
|
|
|
- class="icon"
|
|
|
- :src="item.src"
|
|
|
- />
|
|
|
- <span class="nav-text">{{item.text}}</span>
|
|
|
- <div
|
|
|
- class="nav-sec"
|
|
|
- v-if="index==2 && isGeneralShow"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="nav-item "
|
|
|
- v-for="(item,i) in generalList"
|
|
|
- :class='{"sec-active":secActive[i]}'
|
|
|
- :key="i"
|
|
|
- @click="handleOpen(item.name)"
|
|
|
- @mouseover="handSecMouseOver(i,2)"
|
|
|
- @mouseleave="handSecMouseLeave"
|
|
|
- >
|
|
|
- <span class="nav-radio"></span>
|
|
|
- <span class="nav-text">{{item.text}}</span>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="nav-sec"
|
|
|
- v-if="index==3 && isFireShow"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="nav-item "
|
|
|
- v-for="(item,i) in fireList"
|
|
|
- :class='{"sec-active":secActive[i]}'
|
|
|
- :key="i"
|
|
|
- @click="handleOpen(item.name)"
|
|
|
- @mouseover="handSecMouseOver(i,1)"
|
|
|
- @mouseleave="handSecMouseLeave"
|
|
|
- >
|
|
|
- <span class="nav-radio"></span>
|
|
|
- <span class="nav-text">{{item.text}}</span>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
+ <div>
|
|
|
+ <div class='nav'>
|
|
|
+ <div
|
|
|
+ v-for='(item,index) in navList'
|
|
|
+ :key='index'
|
|
|
+ class='nav-item'
|
|
|
+ :class='{"icon-active":active[index]}'
|
|
|
+ @click='handleClick(item,index)'
|
|
|
+ >
|
|
|
+ <img class='icon' :src='item.src' />
|
|
|
+ <span class='nav-text'>{{item.text}}</span>
|
|
|
+ <div class='nav-sec' v-if='index==2 && isGeneralShow'>
|
|
|
+ <div
|
|
|
+ class='nav-item'
|
|
|
+ v-for='(item,i) in generalList'
|
|
|
+ :class='{"sec-active":secActive[i]}'
|
|
|
+ :key='i'
|
|
|
+ @click='handleOpen(item.name)'
|
|
|
+ @mouseover='handSecMouseOver(i,2)'
|
|
|
+ @mouseleave='handSecMouseLeave'
|
|
|
+ >
|
|
|
+ <span class='nav-radio'></span>
|
|
|
+ <span class='nav-text'>{{item.text}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='nav-sec' v-if='index==3 && isFireShow'>
|
|
|
+ <div
|
|
|
+ class='nav-item'
|
|
|
+ v-for='(item,i) in fireList'
|
|
|
+ :class='{"sec-active":secActive[i]}'
|
|
|
+ :key='i'
|
|
|
+ @click='handleOpen(item.name)'
|
|
|
+ @mouseover='handSecMouseOver(i,1)'
|
|
|
+ @mouseleave='handSecMouseLeave'
|
|
|
+ >
|
|
|
+ <span class='nav-radio'></span>
|
|
|
+ <span class='nav-text'>{{item.text}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
+ <img v-show='isFireShow||isGeneralShow' src='../../assets/images/device/nav-bg.png' alt='nav-bg' class='nav-bg' />
|
|
|
</div>
|
|
|
-
|
|
|
- <img
|
|
|
- v-show="isFireShow||isGeneralShow"
|
|
|
- src="../../assets/images/device/nav-bg.png"
|
|
|
- alt="nav-bg"
|
|
|
- class="nav-bg"
|
|
|
- >
|
|
|
- </div>
|
|
|
-
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: "Dnav",
|
|
|
- props: {
|
|
|
- routerName: {
|
|
|
- type: String
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- navList: [
|
|
|
- {
|
|
|
- text: "全部",
|
|
|
- src: require("../../assets/images/device/icon1.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "供电系统",
|
|
|
- src: require("../../assets/images/device/icon2.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "暖通系统",
|
|
|
- src: require("../../assets/images/device/icon3-active.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "消防系统",
|
|
|
- src: require("../../assets/images/device/icon4.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "弱电系统",
|
|
|
- src: require("../../assets/images/device/icon5.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "给排水",
|
|
|
- src: require("../../assets/images/device/icon6.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "电梯系统",
|
|
|
- src: require("../../assets/images/device/icon7.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "燃气系统",
|
|
|
- src: require("../../assets/images/device/icon8.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "土建系统",
|
|
|
- src: require("../../assets/images/device/icon9.png")
|
|
|
- }
|
|
|
- ],
|
|
|
- fireList: [
|
|
|
- {
|
|
|
- text: "消防系统原理图",
|
|
|
- name: "fire-system"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "主要设备清单",
|
|
|
- name: "fire-mainlist"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "维修维保事项(内)",
|
|
|
- name: "fire-inner"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "维修维保事项(外)",
|
|
|
- name: "fire-outer"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "专项维修及其他事项",
|
|
|
- name: "fire-other"
|
|
|
+ name: 'Dnav',
|
|
|
+ props: {
|
|
|
+ routerName: {
|
|
|
+ type: String
|
|
|
}
|
|
|
- ],
|
|
|
- generalList: [
|
|
|
- {
|
|
|
- text: "空调系统原理图",
|
|
|
- name: "air-system"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "分水器支路分布明细",
|
|
|
- name: "water-layout"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "主要设备清单",
|
|
|
- name: "main-list"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "维修维保事项(内)",
|
|
|
- name: "maintain-inner"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "维修维保事项(外)",
|
|
|
- name: "maintain-outer"
|
|
|
- },
|
|
|
- {
|
|
|
- text: "专项维修及其他事项",
|
|
|
- name: "maintain-other"
|
|
|
- }
|
|
|
- ],
|
|
|
- active: [false, false, true, false, false, false, false, false],
|
|
|
- secActive: [],
|
|
|
- isFireShow: false,
|
|
|
- isGeneralShow: true
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {},
|
|
|
- methods: {
|
|
|
- handleOpen(name) {
|
|
|
- if (
|
|
|
- name == "air-system" ||
|
|
|
- name == "buseiness" ||
|
|
|
- name == "main-list" ||
|
|
|
- name == "buseiness" ||
|
|
|
- name == "fire-system" ||
|
|
|
- name == "buseiness" ||
|
|
|
- name == "buseiness"
|
|
|
- ) {
|
|
|
- this.$emit("handleEmit", { show: true, src: name, istab: true });
|
|
|
- } else {
|
|
|
- this.$emit("handleEmit", { show: true, src: name, istab: false });
|
|
|
- }
|
|
|
},
|
|
|
- mouseOver(index) {
|
|
|
- this.navList = [
|
|
|
- {
|
|
|
- text: "全部",
|
|
|
- src: require("../../assets/images/device/icon1.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "供电系统",
|
|
|
- src: require("../../assets/images/device/icon2.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "暖通系统",
|
|
|
- src: require("../../assets/images/device/icon3.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "消防系统",
|
|
|
- src: require("../../assets/images/device/icon4.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "弱电系统",
|
|
|
- src: require("../../assets/images/device/icon5.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "给排水",
|
|
|
- src: require("../../assets/images/device/icon6.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "电梯系统",
|
|
|
- src: require("../../assets/images/device/icon7.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "燃气系统",
|
|
|
- src: require("../../assets/images/device/icon8.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "土建系统",
|
|
|
- src: require("../../assets/images/device/icon9.png")
|
|
|
- }
|
|
|
- ];
|
|
|
- this.isFireShow = false;
|
|
|
- this.isGeneralShow = false;
|
|
|
- this.active = [false, false, false, false, false, false, false, false];
|
|
|
- this.navList = this.navList.map((item, i) => {
|
|
|
- if (i == index) {
|
|
|
- item = {
|
|
|
- text: item.text,
|
|
|
- src: require("../../assets/images/device/icon" +
|
|
|
- (index + 1) +
|
|
|
- "-active.png")
|
|
|
- };
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ navList: [
|
|
|
+ {
|
|
|
+ text: '全部',
|
|
|
+ src: require('../../assets/images/device/icon1.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '供电系统',
|
|
|
+ src: require('../../assets/images/device/icon2.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '暖通系统',
|
|
|
+ src: require('../../assets/images/device/icon3-active.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '消防系统',
|
|
|
+ src: require('../../assets/images/device/icon4.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '弱电系统',
|
|
|
+ src: require('../../assets/images/device/icon5.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '给排水',
|
|
|
+ src: require('../../assets/images/device/icon6.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '电梯系统',
|
|
|
+ src: require('../../assets/images/device/icon7.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '燃气系统',
|
|
|
+ src: require('../../assets/images/device/icon8.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '土建装饰',
|
|
|
+ src: require('../../assets/images/device/icon9.png')
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ fireList: [
|
|
|
+ {
|
|
|
+ text: '消防系统原理图',
|
|
|
+ name: 'fire-system'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '主要设备清单',
|
|
|
+ name: 'fire-mainlist'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '维修维保事项(内)',
|
|
|
+ name: 'fire-inner'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '维修维保事项(外)',
|
|
|
+ name: 'fire-outer'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '专项维修及其他事项',
|
|
|
+ name: 'fire-other'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ generalList: [
|
|
|
+ {
|
|
|
+ text: '空调系统原理图',
|
|
|
+ name: 'air-system'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '分水器支路分布明细',
|
|
|
+ name: 'water-layout'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '主要设备清单',
|
|
|
+ name: 'main-list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '维修维保事项(内)',
|
|
|
+ name: 'maintain-inner'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '维修维保事项(外)',
|
|
|
+ name: 'maintain-outer'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '专项维修及其他事项',
|
|
|
+ name: 'maintain-other'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ active: [false, false, true, false, false, false, false, false],
|
|
|
+ secActive: [],
|
|
|
+ isFireShow: false,
|
|
|
+ isGeneralShow: true
|
|
|
}
|
|
|
- return item;
|
|
|
- });
|
|
|
- this.$set(this.active, index, true);
|
|
|
- if (index == 2) {
|
|
|
- this.isGeneralShow = true;
|
|
|
- }
|
|
|
- if (index == 3) {
|
|
|
- this.isFireShow = true;
|
|
|
- }
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ handleOpen(name) {
|
|
|
+ if (
|
|
|
+ name == 'air-system' ||
|
|
|
+ name == 'buseiness' ||
|
|
|
+ name == 'main-list' ||
|
|
|
+ name == 'buseiness' ||
|
|
|
+ name == 'fire-system' ||
|
|
|
+ name == 'buseiness' ||
|
|
|
+ name == 'buseiness'
|
|
|
+ ) {
|
|
|
+ this.$emit('handleEmit', { show: true, src: name, istab: true })
|
|
|
+ } else {
|
|
|
+ this.$emit('handleEmit', { show: true, src: name, istab: false })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mouseOver(index) {
|
|
|
+ this.navList = [
|
|
|
+ {
|
|
|
+ text: '全部',
|
|
|
+ src: require('../../assets/images/device/icon1.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '供电系统',
|
|
|
+ src: require('../../assets/images/device/icon2.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '暖通系统',
|
|
|
+ src: require('../../assets/images/device/icon3.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '消防系统',
|
|
|
+ src: require('../../assets/images/device/icon4.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '弱电系统',
|
|
|
+ src: require('../../assets/images/device/icon5.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '给排水',
|
|
|
+ src: require('../../assets/images/device/icon6.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '电梯系统',
|
|
|
+ src: require('../../assets/images/device/icon7.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '燃气系统',
|
|
|
+ src: require('../../assets/images/device/icon8.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '土建装饰',
|
|
|
+ src: require('../../assets/images/device/icon9.png')
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.isFireShow = false
|
|
|
+ this.isGeneralShow = false
|
|
|
+ this.active = [false, false, false, false, false, false, false, false]
|
|
|
+ this.navList = this.navList.map((item, i) => {
|
|
|
+ if (i == index) {
|
|
|
+ item = {
|
|
|
+ text: item.text,
|
|
|
+ src: require('../../assets/images/device/icon' + (index + 1) + '-active.png')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ this.$set(this.active, index, true)
|
|
|
+ if (index == 2) {
|
|
|
+ this.isGeneralShow = true
|
|
|
+ }
|
|
|
+ if (index == 3) {
|
|
|
+ this.isFireShow = true
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- handSecMouseOver(i, type) {
|
|
|
- if (type == 2) {
|
|
|
- this.secActive = this.generalList.map((item, index) => {
|
|
|
- if (index == i) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
- });
|
|
|
- }
|
|
|
- this.secActive = this.fireList.map((item, index) => {
|
|
|
- if (index == i) {
|
|
|
- return true;
|
|
|
+ handSecMouseOver(i, type) {
|
|
|
+ if (type == 2) {
|
|
|
+ this.secActive = this.generalList.map((item, index) => {
|
|
|
+ if (index == i) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.secActive = this.fireList.map((item, index) => {
|
|
|
+ if (index == i) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handSecMouseLeave() {
|
|
|
+ this.secActive = []
|
|
|
+ },
|
|
|
+ handleNav(index) {
|
|
|
+ this.navList = this.navList.map((item, i) => {
|
|
|
+ if (i == index) {
|
|
|
+ item = {
|
|
|
+ text: item.text,
|
|
|
+ src: require('../../assets/images/device/icon' + (index + 1) + '-active.png')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ this.$set(this.active, index, true)
|
|
|
+ },
|
|
|
+ handleClick(item, index) {
|
|
|
+ this.navList = [
|
|
|
+ {
|
|
|
+ text: '全部',
|
|
|
+ src: require('../../assets/images/device/icon1.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '供电系统',
|
|
|
+ src: require('../../assets/images/device/icon2.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '暖通系统',
|
|
|
+ src: require('../../assets/images/device/icon3.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '消防系统',
|
|
|
+ src: require('../../assets/images/device/icon4.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '弱电系统',
|
|
|
+ src: require('../../assets/images/device/icon5.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '给排水',
|
|
|
+ src: require('../../assets/images/device/icon6.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '电梯系统',
|
|
|
+ src: require('../../assets/images/device/icon7.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '燃气系统',
|
|
|
+ src: require('../../assets/images/device/icon8.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '土建装饰',
|
|
|
+ src: require('../../assets/images/device/icon9.png')
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.isFireShow = false
|
|
|
+ this.isGeneralShow = false
|
|
|
+ this.active = [false, false, false, false, false, false, false, false]
|
|
|
+ this.navList = this.navList.map((item, i) => {
|
|
|
+ if (i == index) {
|
|
|
+ item = {
|
|
|
+ text: item.text,
|
|
|
+ src: require('../../assets/images/device/icon' + (index + 1) + '-active.png')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ this.$set(this.active, index, true)
|
|
|
+ if (index == 2) {
|
|
|
+ this.isGeneralShow = true
|
|
|
+ }
|
|
|
+ if (index == 3) {
|
|
|
+ this.isFireShow = true
|
|
|
+ }
|
|
|
+ if (item.text == '消防系统') {
|
|
|
+ this.$emit('handleEmit', { show: true, src: 'Fire', istab: true })
|
|
|
+ }
|
|
|
+ if (item.text == '暖通系统') {
|
|
|
+ this.$emit('handleEmit', { show: true, src: 'General', istab: true })
|
|
|
+ }
|
|
|
}
|
|
|
- return false;
|
|
|
- });
|
|
|
},
|
|
|
- handSecMouseLeave() {
|
|
|
- this.secActive = [];
|
|
|
- },
|
|
|
- handleNav(index) {
|
|
|
- this.navList = this.navList.map((item, i) => {
|
|
|
- if (i == index) {
|
|
|
- item = {
|
|
|
- text: item.text,
|
|
|
- src: require("../../assets/images/device/icon" +
|
|
|
- (index + 1) +
|
|
|
- "-active.png")
|
|
|
- };
|
|
|
+ watch: {
|
|
|
+ routerName(val) {
|
|
|
+ if (val == 'device') {
|
|
|
+ this.handleClick(
|
|
|
+ {
|
|
|
+ text: '暖通系统',
|
|
|
+ src: require('../../assets/images/device/icon3-active.png')
|
|
|
+ },
|
|
|
+ 2
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
- return item;
|
|
|
- });
|
|
|
- this.$set(this.active, index, true);
|
|
|
- },
|
|
|
- handleClick(item, index) {
|
|
|
- this.navList = [
|
|
|
- {
|
|
|
- text: "全部",
|
|
|
- src: require("../../assets/images/device/icon1.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "供电系统",
|
|
|
- src: require("../../assets/images/device/icon2.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "暖通系统",
|
|
|
- src: require("../../assets/images/device/icon3.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "消防系统",
|
|
|
- src: require("../../assets/images/device/icon4.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "弱电系统",
|
|
|
- src: require("../../assets/images/device/icon5.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "给排水",
|
|
|
- src: require("../../assets/images/device/icon6.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "电梯系统",
|
|
|
- src: require("../../assets/images/device/icon7.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "燃气系统",
|
|
|
- src: require("../../assets/images/device/icon8.png")
|
|
|
- },
|
|
|
- {
|
|
|
- text: "土建系统",
|
|
|
- src: require("../../assets/images/device/icon9.png")
|
|
|
- }
|
|
|
- ];
|
|
|
- this.isFireShow = false;
|
|
|
- this.isGeneralShow = false;
|
|
|
- this.active = [false, false, false, false, false, false, false, false];
|
|
|
- this.navList = this.navList.map((item, i) => {
|
|
|
- if (i == index) {
|
|
|
- item = {
|
|
|
- text: item.text,
|
|
|
- src: require("../../assets/images/device/icon" +
|
|
|
- (index + 1) +
|
|
|
- "-active.png")
|
|
|
- };
|
|
|
- }
|
|
|
- return item;
|
|
|
- });
|
|
|
- this.$set(this.active, index, true);
|
|
|
- if (index == 2) {
|
|
|
- this.isGeneralShow = true;
|
|
|
- }
|
|
|
- if (index == 3) {
|
|
|
- this.isFireShow = true;
|
|
|
- }
|
|
|
- if (item.text == "消防系统") {
|
|
|
- this.$emit("handleEmit", { show: true, src: "Fire", istab: true });
|
|
|
- }
|
|
|
- if (item.text == "暖通系统") {
|
|
|
- this.$emit("handleEmit", { show: true, src: "General", istab: true });
|
|
|
- }
|
|
|
}
|
|
|
- },
|
|
|
- watch: {
|
|
|
- routerName(val) {
|
|
|
- if (val == "device") {
|
|
|
- this.handleClick(
|
|
|
- {
|
|
|
- text: "暖通系统",
|
|
|
- src: require("../../assets/images/device/icon3-active.png")
|
|
|
- },
|
|
|
- 2
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.nav {
|
|
|
- position: absolute;
|
|
|
- top: 188px;
|
|
|
- left: 0;
|
|
|
- z-index: 1000;
|
|
|
- // border: 1px solid yellow;
|
|
|
- .nav-item {
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 50px;
|
|
|
- padding-right: 40px;
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 188px;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ // border: 1px solid yellow;
|
|
|
+ .nav-item {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ padding-right: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
|
|
|
- .nav-text {
|
|
|
- margin-left: 22px;
|
|
|
+ .nav-text {
|
|
|
+ margin-left: 22px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
.nav-bg {
|
|
|
- position: absolute;
|
|
|
- top: 62px;
|
|
|
- left: 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 62px;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
.nav-sec {
|
|
|
- position: absolute;
|
|
|
- width: 244px;
|
|
|
- z-index: 1000;
|
|
|
- // border: 1px solid red;
|
|
|
- top: 0;
|
|
|
- left: 100%;
|
|
|
- // display: none;
|
|
|
- // border: 1px solid blue;
|
|
|
- .nav-radio {
|
|
|
- width: 5px;
|
|
|
- height: 5px;
|
|
|
- background: red;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- .nav-item {
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 25px;
|
|
|
- padding-right: 0;
|
|
|
- &:nth-child(1) {
|
|
|
- margin-left: 36px;
|
|
|
- }
|
|
|
- &:nth-child(2) {
|
|
|
- margin-left: 54px;
|
|
|
- }
|
|
|
- &:nth-child(3) {
|
|
|
- margin-left: 60px;
|
|
|
- }
|
|
|
- &:nth-child(4) {
|
|
|
- margin-left: 58px;
|
|
|
- }
|
|
|
- &:nth-child(5) {
|
|
|
- margin-left: 48px;
|
|
|
- }
|
|
|
- &:nth-child(6) {
|
|
|
- margin-left: 28px;
|
|
|
+ position: absolute;
|
|
|
+ width: 244px;
|
|
|
+ z-index: 1000;
|
|
|
+ // border: 1px solid red;
|
|
|
+ top: 0;
|
|
|
+ left: 100%;
|
|
|
+ // display: none;
|
|
|
+ // border: 1px solid blue;
|
|
|
+ .nav-radio {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ background: red;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
- .nav-text {
|
|
|
- margin-left: 12px;
|
|
|
+ .nav-item {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ padding-right: 0;
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-left: 36px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-left: 54px;
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ margin-left: 60px;
|
|
|
+ }
|
|
|
+ &:nth-child(4) {
|
|
|
+ margin-left: 58px;
|
|
|
+ }
|
|
|
+ &:nth-child(5) {
|
|
|
+ margin-left: 48px;
|
|
|
+ }
|
|
|
+ &:nth-child(6) {
|
|
|
+ margin-left: 28px;
|
|
|
+ }
|
|
|
+ .nav-text {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .sec-active {
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
- .nav-radio {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
+ .sec-active {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ .nav-radio {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
|
- width: 18px;
|
|
|
- height: 14px;
|
|
|
- margin-left: 30px;
|
|
|
+ width: 18px;
|
|
|
+ height: 14px;
|
|
|
+ margin-left: 30px;
|
|
|
}
|
|
|
.icon-active {
|
|
|
- background: url("../../assets/images/device/active.png");
|
|
|
+ background: url('../../assets/images/device/active.png');
|
|
|
}
|
|
|
</style>
|