| | |
| | | <div class="main"> |
| | | <div class="header"> |
| | | <div class="top"> |
| | | <!-- <div class="title">丰都气体检测大屏</div> --> |
| | | <div class="title">化粪池安全监控智能处置系统</div> |
| | | <div class="time"> |
| | | <span>{{ nowTime.date }}</span> |
| | | <span>{{ nowTime.time }}</span> |
| | |
| | | const btnList = ref([ |
| | | {name:'首页总览',url:'/screen/home'}, |
| | | {name:'设备管理',url:'/screen/device'}, |
| | | {name:'报表管理',url:''}, |
| | | {name:'系统监管',url:'/user'}, |
| | | {name:'数据统计',url:'/screen/data'}, |
| | | {name:'平台配置',url:'/user'}, |
| | | ]) |
| | | |
| | | const navTo = (item) =>{ |
| | |
| | | height: 100%; |
| | | min-height: 1080px; |
| | | position: relative; |
| | | background-color: #000; |
| | | .header{ |
| | | width: 100%; |
| | | height: 10%; |
| | | height: 8%; |
| | | background-image: url("../assets/images/screen/head.png"); |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | position: relative; |
| | | z-index: 100; |
| | | .top{ |
| | | position: relative; |
| | | z-index: 100; |
| | | width: 100%; |
| | | height: 5.5rem; |
| | | background-image: url("../assets/images/screen/head.png"); |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | .title{ |
| | | width: 57rem; |
| | | height: 2rem; |
| | | width: 45rem; |
| | | height: 5rem; |
| | | position: absolute; |
| | | left:calc(50% - 28.5rem); |
| | | left:calc(50% - 22.5rem); |
| | | text-align: center; |
| | | font-size: 1.6rem; |
| | | font-weight: 800; |
| | | color: #F9FBFF; |
| | | line-height: 70px; |
| | | line-height: 5rem; |
| | | text-shadow:0 0 3px rgba(255,255,255,0.7); |
| | | } |
| | | .time{ |
| | | position: absolute; |
| | | width: 13rem; |
| | | top: 0.5rem; |
| | | top: 1rem; |
| | | left: 2rem; |
| | | display: flex; |
| | | justify-content: space-between; |
| | |
| | | position: absolute; |
| | | width: 3rem; |
| | | height: 2rem; |
| | | top: 0.5rem; |
| | | top: 1rem; |
| | | right: 2rem; |
| | | display: flex; |
| | | justify-content: space-between; |
| | |
| | | .nav{ |
| | | position: relative; |
| | | z-index: 110; |
| | | width: 80%; |
| | | margin: -4.5rem auto; |
| | | width: 63%; |
| | | margin: -3rem auto; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | |
| | | } |
| | | .plain{ |
| | | width: 10rem; |
| | | height: 3.5rem; |
| | | line-height: 3.5rem; |
| | | height: 3rem; |
| | | line-height: 3rem; |
| | | background-image: url("../assets/images/screen/btnbg.png"); |
| | | background-size: 100% 100%; |
| | | text-align: center; |
| | |
| | | } |
| | | .content{ |
| | | width: 100%; |
| | | height: 90%; |
| | | height: 92%; |
| | | background: url("../assets/images/screen/content_bg.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | padding: 1rem 1.5rem 1.5rem; |
| | | } |
| | | } |
| | | </style> |