| | |
| | | <div class="nav"> |
| | | <div class="nav-content"> |
| | | <div class="nav-content-l"> |
| | | <div v-for="(item,index) in btnList.slice(0,4)" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div> |
| | | <div v-for="(item,index) in btnList.slice(0,3)" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div> |
| | | </div> |
| | | <div class="nav-content-r"> |
| | | <div v-for="(item,index) in btnList.slice(4,8)" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div> |
| | | <div v-for="(item,index) in btnList.slice(3,6)" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | } |
| | | |
| | | const btnList = ref([ |
| | | // {name:'系统监管',url:'/user'}, |
| | | {name:'首页总览',url:'/screen/home'}, |
| | | {name:'数据详情',url:'/screen/pumpInfo'}, |
| | | {name:'泵站监控',url:'/screen/monitor'}, |
| | | {name:'报表管理',url:'/screen/report'}, |
| | | {name:'报警监管',url:'/screen/operation'}, |
| | | {name:'系统监管',url:'/user'}, |
| | | ]) |
| | | |
| | | const navTo = (item) =>{ |
| | |
| | | display: flex; |
| | | } |
| | | .plain{ |
| | | width: 10rem; |
| | | width: 15rem; |
| | | height: 3.5rem; |
| | | line-height: 3.5rem; |
| | | background-image: url("../assets/images/screen/btnbg.png"); |