|
@@ -1,88 +1,116 @@
|
|
|
<template>
|
|
|
- <div class="menu">
|
|
|
- <div class="home" @click="$emit('update:modelNum', 0)"></div>
|
|
|
- <div>
|
|
|
- <div
|
|
|
- v-for="(item, index) in list"
|
|
|
- :key="index"
|
|
|
- :class="{ 'is-active': item.state }"
|
|
|
- @click="clickEventAcitve(item, index)"
|
|
|
- >{{ item.name }}</div>
|
|
|
+ <div class='menu'>
|
|
|
+ <div class='home' @click='$emit("update:modelNum", 0)'>福建三明万达广场</div>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ v-for='(item, index) in list'
|
|
|
+ :key='index'
|
|
|
+ :class='{ "is-active": item.state }'
|
|
|
+ @click='clickEventAcitve(item, index)'
|
|
|
+ >{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class='home-right'>
|
|
|
+ <img class='img1' src='../assets/imgs/favorites.svg' alt />
|
|
|
+ <img class='img2' src='../assets/imgs/file.svg' alt />
|
|
|
+ <img class='img3' src='../assets/imgs/clock.svg' alt />
|
|
|
+ <span>{{times}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { formatTime } from '@/utils/format.js'
|
|
|
export default {
|
|
|
- props: ["modelNum"],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [
|
|
|
- { name: "项目概况", state: false, route: "overview" },
|
|
|
- { name: "楼层功能", state: false, route: "floorFunc" }, //楼层功能
|
|
|
- { name: "设备设施", state: false, route: "equipment" }, //设备设施
|
|
|
- { name: "其他事项", state: false, route: "other" } //其他
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {},
|
|
|
- created() {},
|
|
|
- mounted() {},
|
|
|
- watch: {
|
|
|
- modelNum(val) {
|
|
|
- this.list = this.list.map((item, index) => {
|
|
|
- if (val == index + 1) {
|
|
|
- item.state = true;
|
|
|
- } else {
|
|
|
- item.state = false;
|
|
|
+ props: ['modelNum'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [
|
|
|
+ { name: '首页', state: false, route: 'first' },
|
|
|
+ { name: '项目概况', state: false, route: 'overview' },
|
|
|
+ { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
|
|
|
+ { name: '设备设施', state: false, route: 'equipment' }, //设备设施
|
|
|
+ { name: '其他事项', state: false, route: 'other' }, //其他
|
|
|
+ { name: '分析 | 报表', state: false, route: 'analysis' }
|
|
|
+ ],
|
|
|
+ times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
|
|
|
+ new Date().getHours()
|
|
|
+ )}:${formatTime(new Date().getMinutes())}`
|
|
|
}
|
|
|
- return item;
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- clickEventAcitve(item) {
|
|
|
- this.list.forEach(ele => {
|
|
|
- ele.state = false;
|
|
|
- });
|
|
|
- item.state = true;
|
|
|
- this.$router.push({ path: `/home/${item.route}` });
|
|
|
- }
|
|
|
- },
|
|
|
- components: {}
|
|
|
-};
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ watch: {
|
|
|
+ modelNum(val) {
|
|
|
+ this.list = this.list.map((item, index) => {
|
|
|
+ if (val == index + 1) {
|
|
|
+ item.state = true
|
|
|
+ } else {
|
|
|
+ item.state = false
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clickEventAcitve(item) {
|
|
|
+ this.list.forEach(ele => {
|
|
|
+ ele.state = false
|
|
|
+ })
|
|
|
+ item.state = true
|
|
|
+ this.$router.push({ path: `/home/${item.route}` })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.menu {
|
|
|
- height: 42px;
|
|
|
- padding-top: 33px;
|
|
|
- padding-left: 500px;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- position: relative;
|
|
|
- .home {
|
|
|
- width: 430px;
|
|
|
- height: 75px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- & > div:nth-of-type(2) {
|
|
|
- & > div {
|
|
|
- line-height: 42px;
|
|
|
- text-align: center;
|
|
|
- background: url("../assets/images/topbar1.png") no-repeat;
|
|
|
- float: left;
|
|
|
- width: 132px;
|
|
|
- height: 42px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s;
|
|
|
+ min-width: 1366px;
|
|
|
+ height: 48px;
|
|
|
+ color: #1f2429;
|
|
|
+ font-size: 16px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
|
|
|
+ .home {
|
|
|
+ width: 430px;
|
|
|
+ height: 48px;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 48px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #ffffff;
|
|
|
+ float: left;
|
|
|
+ margin-right: 83px;
|
|
|
+ background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
|
|
|
}
|
|
|
- .is-active {
|
|
|
- background: url("../assets/images/topbar2.png") no-repeat;
|
|
|
+ & > div:nth-of-type(2) {
|
|
|
+ & > div {
|
|
|
+ line-height: 48px;
|
|
|
+ text-align: center;
|
|
|
+ //background: url('../assets/images/topbar1.png') no-repeat;
|
|
|
+ float: left;
|
|
|
+ width: 88px;
|
|
|
+ height: 48px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+ .is-active {
|
|
|
+ // background: url('../assets/images/topbar2.png') no-repeat;
|
|
|
+ color: #025baa;
|
|
|
+ background: linear-gradient(180deg, rgba(2, 91, 170, 1) 0%, rgba(2, 91, 170, 0) 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-right {
|
|
|
+ float: right;
|
|
|
+ margin-right: 20px;
|
|
|
+ line-height: 48px;
|
|
|
+ color: #646c73;
|
|
|
+ font-size: 14px;
|
|
|
+ img {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|