| | |
| | | <el-main> |
| | | <!-- <NavBar /> --> |
| | | <div class="content"> |
| | | <router-view></router-view> |
| | | <!-- 页面导航区域 --> |
| | | <div class="page-nav" v-if="navFlag"> |
| | | <div class="nav-item" v-for="item in navList" :key="item.id"> |
| | | <div class="nav-title">{{item.title}}</div> |
| | | <div class="nav-child" v-if="item.children && item.children.length!==0"> |
| | | <el-link :underline="false" class="child-item" v-for="child in item.children" @click="handleJump(child.link)" :key="child.id">{{child.label}}</el-link> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <router-view v-else></router-view> |
| | | <!-- 底部区域 --> |
| | | <!-- <MyFooter/> --> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import MyFooter from "../Footer" |
| | | // import MyFooter from "../Footer" |
| | | import NavBar from "../NavBar" |
| | | export default { |
| | | name: "Main", |
| | | components: { |
| | | MyFooter, |
| | | // MyFooter, |
| | | NavBar |
| | | }, |
| | | data() { |
| | | return { |
| | | navFlag: true, |
| | | navList:[ |
| | | { |
| | | id:1, |
| | | title:'系统设置', |
| | | children:[ |
| | | { |
| | | id:2, |
| | | label:'用户管理', |
| | | link:'/system/userSetting/user', |
| | | }, |
| | | { |
| | | id:3, |
| | | label:'角色管理', |
| | | link:'/system/userSetting/role', |
| | | }, |
| | | { |
| | | id:4, |
| | | label:'部门管理', |
| | | link:'/system/userSetting/department', |
| | | }, |
| | | { |
| | | id:5, |
| | | label:'卡口设备管理', |
| | | link:'/system/device/bayonet', |
| | | }, |
| | | { |
| | | id:6, |
| | | label:'点位管理', |
| | | link:'/system/device/point', |
| | | }, |
| | | ] |
| | | }, |
| | | { |
| | | id:7, |
| | | title:'运营管理', |
| | | children:[ |
| | | { |
| | | id:8, |
| | | label:'案件池', |
| | | link:'/operate/casepool/pool', |
| | | }, |
| | | { |
| | | id:9, |
| | | label:'上报管理', |
| | | link:'/operate/casepool/escalation', |
| | | }, |
| | | { |
| | | id:10, |
| | | label:'调度管理', |
| | | link:'/operate/casepool/dispatch', |
| | | }, |
| | | { |
| | | id:11, |
| | | label:'审核管理', |
| | | link:'/operate/management/myIndex', |
| | | }, |
| | | { |
| | | id:13, |
| | | label:'我的待办', |
| | | link:'/operate/myWait', |
| | | }, |
| | | { |
| | | id:14, |
| | | label:'案卷查询', |
| | | link:'/operate/viewEvent', |
| | | }, |
| | | { |
| | | id:15, |
| | | label:'车辆管理', |
| | | link:'/operate/car/carIndex', |
| | | }, |
| | | { |
| | | id:16, |
| | | label:'图片管理', |
| | | link:'/operate/images', |
| | | }, |
| | | { |
| | | id:17, |
| | | label:'视频管理', |
| | | link:'/operate/videoControl', |
| | | }, |
| | | { |
| | | id:18, |
| | | label:'消息管理', |
| | | link:'/operate/message/messageIndex', |
| | | }, |
| | | { |
| | | id:19, |
| | | label:'短信管理', |
| | | link:'/operate/sms/smsIndex', |
| | | }, |
| | | { |
| | | id:20, |
| | | label:'日志管理', |
| | | link:'/operate/log', |
| | | }, |
| | | ] |
| | | }, |
| | | { |
| | | id:21, |
| | | title:'视频巡查', |
| | | children:[ |
| | | { |
| | | id:22, |
| | | label:'视频巡查', |
| | | link:'/video', |
| | | }, |
| | | ] |
| | | }, |
| | | { |
| | | id:23, |
| | | title:'智能巡查', |
| | | children:[ |
| | | { |
| | | id:24, |
| | | label:'预警研判', |
| | | link:'/studyJudge', |
| | | }, |
| | | { |
| | | id:25, |
| | | label:'违规检索', |
| | | link:'/illegalSearch', |
| | | }, |
| | | { |
| | | id:26, |
| | | label:'趋势分析', |
| | | link:'/trendAnalysis', |
| | | }, |
| | | { |
| | | id:27, |
| | | label:'违章统计', |
| | | link:'/trendAnalysis', |
| | | }, |
| | | { |
| | | id:28, |
| | | label:'违法统计', |
| | | link:'/typeStatistics', |
| | | }, |
| | | ] |
| | | }, |
| | | ] |
| | | } |
| | | }, |
| | | watch: { |
| | | '$route.path'(newPath, oldPath) { |
| | | newPath === '/home' ? this.navFlag = true : this.navFlag = false |
| | | } |
| | | }, |
| | | created(){ |
| | | this.$route.path === '/home' ? this.navFlag = true : this.navFlag = false |
| | | }, |
| | | methods:{ |
| | | handleJump(url){ |
| | | const baseURL = '/home' |
| | | // 路由跳转 |
| | | this.$router.push({path:baseURL+url}) |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | |
| | | .el-main { |
| | | min-width: 1024px; |
| | | padding: 0; |
| | | |
| | | .content { |
| | | padding: 11px; |
| | | height: 100%; |
| | | .page-nav{ |
| | | padding: 40px 100px; |
| | | text-align: left; |
| | | .nav-item{ |
| | | line-height: 60px; |
| | | .nav-title{ |
| | | color: #4b9bb7; |
| | | } |
| | | .nav-child{ |
| | | display: flex; |
| | | // justify-content: space-between; |
| | | flex-wrap: wrap; |
| | | .el-link{ |
| | | justify-content: flex-start; |
| | | padding-left: 30px; |
| | | } |
| | | .child-item{ |
| | | width: 24%; |
| | | text-align: left; |
| | | margin-bottom: 22px; |
| | | margin-right: 1%; |
| | | border: 1px solid #17324c; |
| | | color: #4b9bb7; |
| | | position: relative; |
| | | &::after{ |
| | | content: ''; |
| | | display: block; |
| | | position: absolute; |
| | | left: 15px; |
| | | height: 8px; |
| | | width: 8px; |
| | | border-radius: 50%; |
| | | background-color: #4b9bb7; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |