|
@@ -1,123 +1,161 @@
|
|
|
<template>
|
|
<template>
|
|
|
-<div class='aside'>
|
|
|
|
|
- <div class="nav-menu">
|
|
|
|
|
- <div class="navigator_menu">
|
|
|
|
|
- <vcenter>
|
|
|
|
|
- <span>导航面板</span>
|
|
|
|
|
- </vcenter>
|
|
|
|
|
- </div>
|
|
|
|
|
- <ul class="aside-ul" v-if="roleType == -1">
|
|
|
|
|
- <li class="aside-li" v-for="(item,i) in aside" :key="i">
|
|
|
|
|
- <div @click="clickNav(item)" :class="{'aside-li-div':true,'active':item.id&&item.id===activeIdx}" >
|
|
|
|
|
- <vcenter>
|
|
|
|
|
- <i class="iconfont" :class="item.icon" style="float:left;width:27px;"></i>
|
|
|
|
|
- <span style="vertical-align: middle;">{{item.name}}</span>
|
|
|
|
|
- <i v-if="item.subItem" style="font-size:12px;vertical-align: middle;position:relative;top:2px;" :class="{'iconfont':true, 'icon-arrow':true,'fr':true,rotate:item.isShow}"></i>
|
|
|
|
|
- </vcenter>
|
|
|
|
|
- </div>
|
|
|
|
|
- <ul class="li-ul" v-if="item.subItem" :style="{maxHeight:item.isShow?'180px':'0'}">
|
|
|
|
|
- <li @click="navigate(sub)" v-for="(sub, idx) in item.subItem" :class="{'active':sub.id&&sub.id===activeIdx}" :key="idx">
|
|
|
|
|
|
|
+ <div class='aside'>
|
|
|
|
|
+ <div class="nav-menu">
|
|
|
|
|
+ <div class="navigator_menu">
|
|
|
|
|
+ <vcenter>
|
|
|
|
|
+ <span>导航面板</span>
|
|
|
|
|
+ </vcenter>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <ul class="aside-ul"
|
|
|
|
|
+ v-if="roleType == -1">
|
|
|
|
|
+ <li class="aside-li"
|
|
|
|
|
+ v-for="(item,i) in aside"
|
|
|
|
|
+ :key="i">
|
|
|
|
|
+ <div @click="clickNav(item)"
|
|
|
|
|
+ :class="{'aside-li-div':true,'active':item.id&&item.id===activeIdx}">
|
|
|
|
|
+ <vcenter>
|
|
|
|
|
+ <i class="iconfont"
|
|
|
|
|
+ :class="item.icon"
|
|
|
|
|
+ style="float:left;width:27px;"></i>
|
|
|
|
|
+ <span style="vertical-align: middle;">{{item.name}}</span>
|
|
|
|
|
+ <i v-if="item.subItem"
|
|
|
|
|
+ style="font-size:12px;vertical-align: middle;position:relative;top:2px;"
|
|
|
|
|
+ :class="{'iconfont':true, 'icon-arrow':true,'fr':true,rotate:item.isShow}"></i>
|
|
|
|
|
+ </vcenter>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <ul class="li-ul"
|
|
|
|
|
+ v-if="item.subItem"
|
|
|
|
|
+ :style="{maxHeight:item.isShow?'180px':'0'}">
|
|
|
|
|
+ <li @click="navigate(sub)"
|
|
|
|
|
+ v-for="(sub, idx) in item.subItem"
|
|
|
|
|
+ :class="{'active':sub.id&&sub.id===activeIdx}"
|
|
|
|
|
+ :key="idx">
|
|
|
|
|
+ <vcenter>
|
|
|
|
|
+ <span>{{sub.name}}</span>
|
|
|
|
|
+ <span v-if="sub.id==='1-2' && a_tips"
|
|
|
|
|
+ class="aside-tip">{{a_tips}}</span>
|
|
|
|
|
+ </vcenter>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <ul class="aside-ul"
|
|
|
|
|
+ v-if=" roleType != -1">
|
|
|
|
|
+ <li class="aside-li">
|
|
|
|
|
+ <div class="aside-li-div">
|
|
|
<vcenter>
|
|
<vcenter>
|
|
|
- <span>{{sub.name}}</span>
|
|
|
|
|
- <span v-if="sub.id==='1-2' && a_tips" class="aside-tip">{{a_tips}}</span>
|
|
|
|
|
|
|
+ <i class="el-icon-tickets"
|
|
|
|
|
+ style="float:left;width:27px;"></i>
|
|
|
|
|
+ <span style="vertical-align: middle;">场景管理</span>
|
|
|
</vcenter>
|
|
</vcenter>
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- <ul class="aside-ul" v-if=" roleType != -1">
|
|
|
|
|
- <li class="aside-li">
|
|
|
|
|
- <div class="aside-li-div">
|
|
|
|
|
- <vcenter>
|
|
|
|
|
- <i class="el-icon-tickets" style="float:left;width:27px;"></i>
|
|
|
|
|
- <span style="vertical-align: middle;">场景管理</span>
|
|
|
|
|
- </vcenter>
|
|
|
|
|
- </div>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
-</div>
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import vcenter from '@/components/vcenter'
|
|
import vcenter from '@/components/vcenter'
|
|
|
|
|
|
|
|
-const aside = [{
|
|
|
|
|
- name: '企业管理',
|
|
|
|
|
- id: '',
|
|
|
|
|
- icon: 'icon-renzheng',
|
|
|
|
|
- isShow: true,
|
|
|
|
|
- subItem: [{
|
|
|
|
|
- name: '企业账号',
|
|
|
|
|
- id: '1-1',
|
|
|
|
|
- url: '/home'
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '企业认证',
|
|
|
|
|
- id: '1-2',
|
|
|
|
|
- url: '/authentication'
|
|
|
|
|
- }]
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '信息发布',
|
|
|
|
|
- id: '',
|
|
|
|
|
- icon: 'icon-xinxifabu',
|
|
|
|
|
- isShow: false,
|
|
|
|
|
- subItem: [{
|
|
|
|
|
- name: '出租信息',
|
|
|
|
|
- id: '2-1',
|
|
|
|
|
- url: '/rental-info'
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '出售信息',
|
|
|
|
|
- id: '2-2',
|
|
|
|
|
- url: '/sell-info'
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '工地装修',
|
|
|
|
|
- id: '2-3',
|
|
|
|
|
- url: '/site-decoration'
|
|
|
|
|
- }]
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '广告位',
|
|
|
|
|
- id: '',
|
|
|
|
|
- icon: 'icon-guanggao',
|
|
|
|
|
- isShow: false,
|
|
|
|
|
- subItem: [{
|
|
|
|
|
- name: '轮播图',
|
|
|
|
|
- id: '3-1',
|
|
|
|
|
- url: '/z-carousel'
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '推荐位',
|
|
|
|
|
- id: '3-2',
|
|
|
|
|
- url: '/recommended'
|
|
|
|
|
- }]
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '场景下载',
|
|
|
|
|
- id: '4',
|
|
|
|
|
- icon: 'icon-xinxifabu',
|
|
|
|
|
- url: '/download',
|
|
|
|
|
- isShow: false
|
|
|
|
|
-},{
|
|
|
|
|
- name:'设备管理',
|
|
|
|
|
- id:'5',
|
|
|
|
|
- icon:'icon-xinxifabu',
|
|
|
|
|
- url:'/equipment',
|
|
|
|
|
- isShow:false
|
|
|
|
|
-},
|
|
|
|
|
-{
|
|
|
|
|
- name:'场景管理',
|
|
|
|
|
- id:'6',
|
|
|
|
|
- icon:'icon-guanggao',
|
|
|
|
|
- url:'/scene',
|
|
|
|
|
- isShow: false
|
|
|
|
|
-}]
|
|
|
|
|
|
|
+const aside = [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '企业管理',
|
|
|
|
|
+ id: '',
|
|
|
|
|
+ icon: 'icon-renzheng',
|
|
|
|
|
+ isShow: true,
|
|
|
|
|
+ subItem: [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '企业账号',
|
|
|
|
|
+ id: '1-1',
|
|
|
|
|
+ url: '/home',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '企业认证',
|
|
|
|
|
+ id: '1-2',
|
|
|
|
|
+ url: '/authentication',
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '信息发布',
|
|
|
|
|
+ id: '',
|
|
|
|
|
+ icon: 'icon-xinxifabu',
|
|
|
|
|
+ isShow: false,
|
|
|
|
|
+ subItem: [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '出租信息',
|
|
|
|
|
+ id: '2-1',
|
|
|
|
|
+ url: '/rental-info',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '出售信息',
|
|
|
|
|
+ id: '2-2',
|
|
|
|
|
+ url: '/sell-info',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '工地装修',
|
|
|
|
|
+ id: '2-3',
|
|
|
|
|
+ url: '/site-decoration',
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '广告位',
|
|
|
|
|
+ id: '',
|
|
|
|
|
+ icon: 'icon-guanggao',
|
|
|
|
|
+ isShow: false,
|
|
|
|
|
+ subItem: [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '轮播图',
|
|
|
|
|
+ id: '3-1',
|
|
|
|
|
+ url: '/z-carousel',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '推荐位',
|
|
|
|
|
+ id: '3-2',
|
|
|
|
|
+ url: '/recommended',
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '场景下载',
|
|
|
|
|
+ id: '4',
|
|
|
|
|
+ icon: 'icon-xinxifabu',
|
|
|
|
|
+ url: '/download',
|
|
|
|
|
+ isShow: false,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '设备管理',
|
|
|
|
|
+ id: '5',
|
|
|
|
|
+ icon: 'icon-xinxifabu',
|
|
|
|
|
+ url: '/equipment',
|
|
|
|
|
+ isShow: false,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '场景管理',
|
|
|
|
|
+ id: '6',
|
|
|
|
|
+ icon: 'icon-guanggao',
|
|
|
|
|
+ url: '/scene',
|
|
|
|
|
+ isShow: false,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: '绑定账号',
|
|
|
|
|
+ id: '7',
|
|
|
|
|
+ icon: 'icon-guanggao',
|
|
|
|
|
+ url: '/bindAccount',
|
|
|
|
|
+ isShow: false,
|
|
|
|
|
+ },
|
|
|
|
|
+]
|
|
|
export default {
|
|
export default {
|
|
|
-
|
|
|
|
|
name: 'm-aside',
|
|
name: 'm-aside',
|
|
|
- components: {vcenter},
|
|
|
|
|
|
|
+ components: { vcenter },
|
|
|
|
|
|
|
|
- data () {
|
|
|
|
|
|
|
+ data() {
|
|
|
return {
|
|
return {
|
|
|
aside,
|
|
aside,
|
|
|
a_tips: 0,
|
|
a_tips: 0,
|
|
|
- roleType: window.localStorage.getItem('zfb_roleType')
|
|
|
|
|
|
|
+ roleType: window.localStorage.getItem('zfb_roleType'),
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -125,15 +163,14 @@ export default {
|
|
|
get: function () {
|
|
get: function () {
|
|
|
return this.$route.meta.index
|
|
return this.$route.meta.index
|
|
|
},
|
|
},
|
|
|
- set: function () {
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ set: function () {},
|
|
|
},
|
|
},
|
|
|
- token () {
|
|
|
|
|
|
|
+ token() {
|
|
|
return window.localStorage.getItem('zfb_token')
|
|
return window.localStorage.getItem('zfb_token')
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
- mounted () {
|
|
|
|
|
- this.$bus.$on('refresh', data => {
|
|
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ this.$bus.$on('refresh', (data) => {
|
|
|
if (data) {
|
|
if (data) {
|
|
|
this._getTipsNum()
|
|
this._getTipsNum()
|
|
|
}
|
|
}
|
|
@@ -141,7 +178,7 @@ export default {
|
|
|
this._getTipsNum()
|
|
this._getTipsNum()
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- clickNav (item) {
|
|
|
|
|
|
|
+ clickNav(item) {
|
|
|
if (item.id) {
|
|
if (item.id) {
|
|
|
this.activeIdx = item.id
|
|
this.activeIdx = item.id
|
|
|
item.url && this.$router.push(item.url)
|
|
item.url && this.$router.push(item.url)
|
|
@@ -149,70 +186,70 @@ export default {
|
|
|
item.isShow = !item.isShow
|
|
item.isShow = !item.isShow
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- navigate (item) {
|
|
|
|
|
|
|
+ navigate(item) {
|
|
|
this._getTipsNum()
|
|
this._getTipsNum()
|
|
|
this.activeIdx = item.id
|
|
this.activeIdx = item.id
|
|
|
this.$router.push(item.url)
|
|
this.$router.push(item.url)
|
|
|
},
|
|
},
|
|
|
- async _getTipsNum () {
|
|
|
|
|
|
|
+ async _getTipsNum() {
|
|
|
let result = await this.$http({
|
|
let result = await this.$http({
|
|
|
method: 'post',
|
|
method: 'post',
|
|
|
url: '/company/selectAuditNum',
|
|
url: '/company/selectAuditNum',
|
|
|
headers: {
|
|
headers: {
|
|
|
- token: this.token
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ token: this.token,
|
|
|
|
|
+ },
|
|
|
})
|
|
})
|
|
|
this.a_tips = result.message
|
|
this.a_tips = result.message
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.aside {
|
|
.aside {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- .navigator_menu{
|
|
|
|
|
|
|
+ .navigator_menu {
|
|
|
height: 56px;
|
|
height: 56px;
|
|
|
- span{
|
|
|
|
|
|
|
+ span {
|
|
|
padding-left: 20px;
|
|
padding-left: 20px;
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
color: #999;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .aside-ul{
|
|
|
|
|
|
|
+ .aside-ul {
|
|
|
color: #999;
|
|
color: #999;
|
|
|
- .aside-li{
|
|
|
|
|
|
|
+ .aside-li {
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
- .aside-li-div{
|
|
|
|
|
|
|
+ .aside-li-div {
|
|
|
padding: 0 20px;
|
|
padding: 0 20px;
|
|
|
height: 56px;
|
|
height: 56px;
|
|
|
- .fr{
|
|
|
|
|
|
|
+ .fr {
|
|
|
float: right;
|
|
float: right;
|
|
|
transition: transform 0.3s ease;
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
}
|
|
|
- .rotate{
|
|
|
|
|
|
|
+ .rotate {
|
|
|
transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
|
}
|
|
}
|
|
|
- &:hover{
|
|
|
|
|
|
|
+ &:hover {
|
|
|
background-color: #f5f5f5;
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .active{
|
|
|
|
|
|
|
+ .active {
|
|
|
background-color: #f5f5f5;
|
|
background-color: #f5f5f5;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
- .iconfont{
|
|
|
|
|
|
|
+ .iconfont {
|
|
|
color: #333;
|
|
color: #333;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .li-ul{
|
|
|
|
|
|
|
+ .li-ul {
|
|
|
max-height: 180px;
|
|
max-height: 180px;
|
|
|
transition: max-height 0.3s ease;
|
|
transition: max-height 0.3s ease;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- li{
|
|
|
|
|
|
|
+ li {
|
|
|
height: 56px;
|
|
height: 56px;
|
|
|
padding: 0 47px;
|
|
padding: 0 47px;
|
|
|
- .aside-tip{
|
|
|
|
|
|
|
+ .aside-tip {
|
|
|
background: #ff0000;
|
|
background: #ff0000;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
@@ -224,7 +261,7 @@ export default {
|
|
|
line-height: 16px;
|
|
line-height: 16px;
|
|
|
margin-left: 4px;
|
|
margin-left: 4px;
|
|
|
}
|
|
}
|
|
|
- &:hover{
|
|
|
|
|
|
|
+ &:hover {
|
|
|
background-color: #f5f5f5;
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -232,5 +269,4 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
</style>
|
|
</style>
|