| | |
| | | <div class="main"> |
| | | <div class="header"> |
| | | <div class="top"> |
| | | <div class="title">xxxxxxxxxxxxx大屏</div> |
| | | <!-- <div class="title">丰都气体检测大屏</div> --> |
| | | <div class="time"> |
| | | <span>{{ nowTime.date }}</span> |
| | | <span>{{ nowTime.time }}</span> |
| | |
| | | <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,2)" :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(2,4)" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | }).then((e) => { |
| | | removeToken() |
| | | window.location.reload(); |
| | | |
| | | }).catch(() => { }); |
| | | } |
| | | |
| | |
| | | |
| | | const btnList = ref([ |
| | | {name:'首页总览',url:'/screen/home'}, |
| | | {name:'设备管理',url:'/screen/device'}, |
| | | {name:'报表管理',url:''}, |
| | | {name:'系统监管',url:'/user'}, |
| | | ]) |
| | | |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .main{ |
| | | background:rgba(8,28,65,1); |
| | | //background-image:url("../assets/images/screen/bcg.png"); |
| | | background-size: 100% 100%; |
| | | width: 100%; |
| | | height: 100%; |
| | | min-height: 1080px; |
| | | position: relative; |
| | | .header{ |
| | | width: 100%; |
| | | height: 10%; |
| | | .top{ |
| | | position: relative; |
| | | z-index: 100; |
| | | width: 100%; |
| | | height: 6.5rem; |
| | | height: 5.5rem; |
| | | background-image: url("../assets/images/screen/head.png"); |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | |
| | | } |
| | | .nav{ |
| | | position: relative; |
| | | z-index: 100; |
| | | margin-top: -4.5rem; |
| | | width: 100%; |
| | | z-index: 110; |
| | | width: 80%; |
| | | margin: -4.5rem auto; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | |
| | | &-r{ |
| | | width: 35%; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | } |
| | | .plain{ |
| | | width: 10rem; |
| | |
| | | .content{ |
| | | width: 100%; |
| | | height: 90%; |
| | | background: url("../assets/images/screen/content_bg.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | padding: 0 1.5rem 1.5rem; |
| | | } |
| | | } |
| | | </style> |