| | |
| | | <template> |
| | | <div class="main"> |
| | | <div class="header"> |
| | | <div class="top">金川水电站生态流量监测系统 </div> |
| | | <div class="top">金川水电站水温监测系统 </div> |
| | | <div class="nav"> |
| | | <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div> |
| | | </div> |
| | |
| | | const route = ref(useRoute()) |
| | | const btnList = ref([ |
| | | {name:'总览',url:'/temp/home'}, |
| | | {name:'设备管理',url:''}, |
| | | {name:'实时监测', url:''}, |
| | | {name:'图形分析',url:''}, |
| | | {name:'汇总统计',url:''}, |
| | | {name:'报表管理',url:''}, |
| | | {name:'设备管理',url:'/temp/shebei'}, |
| | | {name:'实时监测', url:'/temp/monitor'}, |
| | | {name:'图形分析',url:'/temp/graphic'}, |
| | | {name:'汇总统计',url:'/temp/statics'}, |
| | | {name:'报表管理',url:'/temp/report'}, |
| | | {name:'系统管理',url:'/user'}, |
| | | ]) |
| | | const navTo = (item) =>{ |
| | |
| | | .header{ |
| | | width: 100%; |
| | | height: 14%; |
| | | background-color: rgb(82, 120, 128); |
| | | position: relative; |
| | | .top{ |
| | | height: 60%; |
| | | display: flex; |
| | |
| | | font-size: 38px; |
| | | font-weight: 700; |
| | | color: #fff; |
| | | position: relative; |
| | | z-index: 100; |
| | | } |
| | | .nav{ |
| | | display: flex; |
| | | height: 40%; |
| | | position: relative; |
| | | z-index: 100; |
| | | .plain{ |
| | | flex-grow: 1; |
| | | height: 100%; |