From d67f0836bd910f171c33d6f49d625e8f79aaf05b Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期六, 14 六月 2025 17:12:32 +0800
Subject: [PATCH] fix:修改框架
---
src/screen/index.vue | 81 ++++++++++++++++++++--------------------
1 files changed, 40 insertions(+), 41 deletions(-)
diff --git a/src/screen/index.vue b/src/screen/index.vue
index 0205337..aa309d1 100644
--- a/src/screen/index.vue
+++ b/src/screen/index.vue
@@ -2,18 +2,17 @@
<div class="main">
<div class="header">
<div class="top">
- <div class="title">xxxxxxxxxxxxx大屏</div>
<div class="time">
<span>{{ nowTime.date }}</span>
<span>{{ nowTime.time }}</span>
</div>
<div class="user-image">
- <div>
- <img src="../assets/images/screen/userImg.png" alt="">
- </div>
<div class="loginOut">
<el-dropdown trigger="click">
- <img src="../assets/images/screen/loginOut.png" alt="">
+ <div class="imgBox">
+ <img class="user" src="../assets/images/screen/userImg.png" alt="">
+ <img class="icon" src="../assets/images/screen/loginOut.png" alt="">
+ </div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
@@ -30,12 +29,7 @@
</div>
<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>
- <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>
+ <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
</div>
</div>
</div>
@@ -66,7 +60,13 @@
}
const btnList = ref([
- {name:'首页总览',url:'/screen/home'},
+ {name:'综合调度',url:'/screen/home'},
+ {name:'生产监控',url:''},
+ {name:'净水厂',url:''},
+ {name:'取水泵站',url:''},
+ {name:'高位水池',url:''},
+ {name:'刘李河水库',url:''},
+ {name:'水质检测',url:''},
{name:'系统监管',url:'/user'},
])
@@ -112,13 +112,14 @@
background-size: 100% 100%;
width: 100%;
height: 100%;
+ min-height: 1080px;
.header{
width: 100%;
- height: 10%;
+ height: 7.4rem;
.top{
position: relative;
width: 100%;
- height: 6.5rem;
+ height: 4rem;
background-image: url("../assets/images/screen/head.png");
background-size: 100% 100%;
background-repeat: no-repeat;
@@ -137,7 +138,7 @@
.time{
position: absolute;
width: 13rem;
- top: 0.5rem;
+ top: 0.8rem;
left: 2rem;
display: flex;
justify-content: space-between;
@@ -154,7 +155,7 @@
width: 8rem;
height: 2rem;
position: absolute;
- top: 0.1rem;
+ top: 0.5rem;
right: 8rem;
.select-item {
:deep(.el-select__wrapper) {
@@ -177,10 +178,20 @@
display: flex;
justify-content: space-between;
align-items: center;
- .loginOut img{
- margin-top: 0.1rem;
- width: 0.8rem;
- height: 0.6rem;
+ .loginOut{
+ .imgBox{
+ display: flex;
+ align-items: center;
+ .user{
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+ .icon{
+ width: 0.6rem;
+ height: 0.4rem;
+ margin-left: 0.3rem;
+ }
+ }
}
}
.left-icon{
@@ -205,36 +216,26 @@
.nav{
position: relative;
z-index: 100;
- margin-top: -4.5rem;
width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
+ height: 2.8rem;
+ margin-top: 0.4rem;
}
.nav-content{
width: 100%;
display: flex;
- align-items: center;
justify-content: space-between;
+ align-items: center;
font-weight: 400;
font-size: 1.1rem;
color: #FFFFFF;
- line-height: 3rem;
- &-l{
- width: 35%;
- display: flex;
- }
- &-r{
- width: 35%;
- display: flex;
- }
.plain{
- width: 10rem;
- height: 3.5rem;
- line-height: 3.5rem;
+ width: 11%;
+ height: 2.8rem;
+ line-height: 2.9rem;
background-image: url("../assets/images/screen/btnbg.png");
background-size: 100% 100%;
text-align: center;
+ letter-spacing: 0.8rem;
}
.active{
background-image: url("../assets/images/screen/btnbg-active.png");
@@ -243,10 +244,8 @@
}
.content{
width: 100%;
- height: 90%;
- background: url("../assets/images/screen/content_bg.png") no-repeat;
- background-size: 100% 100%;
- padding: 0 1.5rem 1.2rem;
+ height: calc(100% - 7.4rem);
+ padding: 0 1rem;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3