From c45cbdd1fb5e1c491a58f24be403b97999c1a9ec Mon Sep 17 00:00:00 2001 From: web <candymxq888@outlook.com> Date: 星期四, 17 七月 2025 17:31:59 +0800 Subject: [PATCH] fix:shuju --- src/screen/index.vue | 57 ++++++++++++++++++++++++++++++--------------------------- 1 files changed, 30 insertions(+), 27 deletions(-) diff --git a/src/screen/index.vue b/src/screen/index.vue index 0a44f93..643c9a8 100644 --- a/src/screen/index.vue +++ b/src/screen/index.vue @@ -2,7 +2,7 @@ <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> @@ -31,10 +31,10 @@ <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> @@ -57,7 +57,6 @@ }).then((e) => { removeToken() window.location.reload(); - }).catch(() => { }); } @@ -67,7 +66,9 @@ const btnList = ref([ {name:'首页总览',url:'/screen/home'}, - {name:'系统监管',url:'/user'}, + {name:'设备管理',url:'/screen/device'}, + {name:'数据统计',url:'/screen/data'}, + {name:'平台配置',url:'/user'}, ]) const navTo = (item) =>{ @@ -107,37 +108,38 @@ <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; + 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; width: 100%; - height: 6.5rem; - background-image: url("../assets/images/screen/head.png"); - background-size: 100% 100%; - background-repeat: no-repeat; + height: 5.5rem; .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; @@ -172,7 +174,7 @@ position: absolute; width: 3rem; height: 2rem; - top: 0.5rem; + top: 1rem; right: 2rem; display: flex; justify-content: space-between; @@ -214,9 +216,9 @@ } .nav{ position: relative; - z-index: 100; - margin-top: -4.5rem; - width: 100%; + z-index: 110; + width: 63%; + margin: -3rem auto; display: flex; justify-content: space-between; align-items: center; @@ -237,11 +239,12 @@ &-r{ width: 35%; display: flex; + justify-content: flex-end; } .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; @@ -253,10 +256,10 @@ } .content{ width: 100%; - height: 90%; + height: 92%; background: url("../assets/images/screen/content_bg.png") no-repeat; background-size: 100% 100%; - padding: 0 1.5rem 1.5rem; + padding: 1rem 1.5rem 1.5rem; } } </style> \ No newline at end of file -- Gitblit v1.9.3