| | |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item> |
| | | <span @click="toUserDetail" >个人中心</span> |
| | | </el-dropdown-item> |
| | | <el-dropdown-item divided> |
| | | <span @click="loginOut">退出登录</span> |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | |
| | | <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> |
| | |
| | | }).catch(() => { }); |
| | | } |
| | | |
| | | const toUserDetail = () =>{ |
| | | router.push('/userCenter') |
| | | } |
| | | |
| | | const btnList = ref([]) |
| | | const btnList = ref([ |
| | | {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) =>{ |
| | | router.push(item.url) |
| | |
| | | display: flex; |
| | | } |
| | | .plain{ |
| | | width: 10rem; |
| | | width: 15rem; |
| | | height: 3.5rem; |
| | | line-height: 3.5rem; |
| | | background-image: url("../assets/images/screen/btnbg.png"); |
| | |
| | | height: 90%; |
| | | background: url("@/assets/images/screen/content_bg.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | padding: 0 1.5rem 1.5rem; |
| | | padding: 0 1.5rem 1rem; |
| | | } |
| | | } |
| | | </style> |