From b5072d2f774a30b4e90458b09e34861e4c75f400 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 04 Aug 2022 17:32:45 +0800
Subject: [PATCH] 首页样式更改
---
public/img/icon/jksb-menu.png | 0
src/views/home/index.vue | 197 +++++++++++++++++++++++-------------------------
public/img/icon/nc-menu.png | 0
src/styles/element-ui.scss | 40 +++++++++
public/img/icon/jcsb-menu.png | 0
5 files changed, 133 insertions(+), 104 deletions(-)
diff --git a/public/img/icon/jcsb-menu.png b/public/img/icon/jcsb-menu.png
new file mode 100644
index 0000000..ebca036
--- /dev/null
+++ b/public/img/icon/jcsb-menu.png
Binary files differ
diff --git a/public/img/icon/jksb-menu.png b/public/img/icon/jksb-menu.png
new file mode 100644
index 0000000..30b2772
--- /dev/null
+++ b/public/img/icon/jksb-menu.png
Binary files differ
diff --git a/public/img/icon/nc-menu.png b/public/img/icon/nc-menu.png
new file mode 100644
index 0000000..1847c56
--- /dev/null
+++ b/public/img/icon/nc-menu.png
Binary files differ
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 51dc91e..2d104a8 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -6,7 +6,7 @@
}
}
-
+// icon图标
.el-icon-my-sy {
background: url('/img/icon/1016.png') center no-repeat;
// background-size: 100% 100%;
@@ -31,6 +31,44 @@
visibility: hidden;
}
+.el-icon-my-nc-menu {
+ background: url('/img/icon/nc-menu.png') center no-repeat;
+ // background-size: 100% 100%;
+ /* background-size: cover;*/
+}
+
+.el-icon-my-nc-menu:before {
+ content: "替";
+ font-size: 24px;
+ visibility: hidden;
+}
+
+.el-icon-my-jksb-menu {
+ background: url('/img/icon/jksb-menu.png') center no-repeat;
+ // background-size: 100% 100%;
+ /* background-size: cover;*/
+}
+
+.el-icon-my-jksb-menu:before {
+ content: "替";
+ font-size: 24px;
+ visibility: hidden;
+}
+
+.el-icon-my-jcsb-menu {
+ background: url('/img/icon/jcsb-menu.png') center no-repeat;
+ // background-size: 100% 100%;
+ /* background-size: cover;*/
+}
+
+.el-icon-my-jcsb-menu:before {
+ content: "替";
+ font-size: 24px;
+ visibility: hidden;
+}
+
+
+
.dialog-fixed {
margin: 0 !important;
position: fixed;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 20d0fa0..eb9c23e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -195,46 +195,24 @@
</div>
<div class="down-menu">
- <div
- class="nc"
- @click="
- ncListShow = !ncListShow;
- jkListShow = false;
- jcListShow = false;
- "
- >
- <span>农场</span>
- <i class="el-icon-caret-bottom"></i>
- </div>
- <div
- class="jk"
- @click="
- jkListShow = !jkListShow;
- ncListShow = false;
- jcListShow = false;
- "
- >
- <span>监控设备</span>
- <i class="el-icon-caret-bottom"></i>
- </div>
- <div
- class="jc"
- @click="
- jcListShow = !jcListShow;
- ncListShow = false;
- jkListShow = false;
- "
- >
- <span>监测设备</span>
- <i class="el-icon-caret-bottom"></i>
- </div>
+ <div>
+ <div
+ class="nc down-menu-item"
+ @click="
+ ncListShow = !ncListShow;
+ jkListShow = false;
+ jcListShow = false;
+ "
+ >
+ <div class="l">
+ <i class="el-icon-my-nc-menu"></i>
+ <span :class="{'checked': ncListShow}">农场</span>
+ </div>
- <div v-show="ncListShow" class="nc-list">
- <div class="title" @click="ncListShow = false">
- 农场
- <i class="el-icon-caret-top"></i>
+ <i :class="{'el-icon-arrow-down': !ncListShow, 'el-icon-arrow-up': ncListShow}"></i>
</div>
- <div class="content">
+
+ <div v-show="ncListShow" class="nc-list">
<div
v-for="(item, index) in farmNumArray"
:key="index"
@@ -245,12 +223,25 @@
>{{ item.farmName }}</div>
</div>
</div>
- <div v-show="jkListShow" class="jk-list">
- <div class="title" @click="jkListShow = false">
- 监控设备
- <i class="el-icon-caret-top"></i>
+
+ <div>
+ <div
+ class="jk down-menu-item"
+ @click="
+ jkListShow = !jkListShow;
+ ncListShow = false;
+ jcListShow = false;
+ "
+ >
+ <div class="l">
+ <i class="el-icon-my-jksb-menu"></i>
+ <span :class="{'checked': jkListShow}">监控设备</span>
+ </div>
+
+ <i :class="{'el-icon-arrow-down': !jkListShow, 'el-icon-arrow-up': jkListShow}"></i>
</div>
- <div class="content">
+
+ <div v-show="jkListShow" class="jk-list">
<div
v-for="(item, index) in equipmentList.vidList"
:key="index"
@@ -261,12 +252,25 @@
>{{ item.name }}</div>
</div>
</div>
- <div v-show="jcListShow" class="jc-list">
- <div class="title" @click="jcListShow = false">
- 监测设备
- <i class="el-icon-caret-top"></i>
+
+ <div>
+ <div
+ class="jc down-menu-item"
+ @click="
+ jcListShow = !jcListShow;
+ ncListShow = false;
+ jkListShow = false;
+ "
+ >
+ <div class="l">
+ <i class="el-icon-my-jcsb-menu"></i>
+ <span :class="{'checked': jcListShow}">监测设备</span>
+ </div>
+
+ <i :class="{'el-icon-arrow-down': !jcListShow, 'el-icon-arrow-up': jcListShow}"></i>
</div>
- <div class="content">
+
+ <div v-show="jcListShow" class="jc-list">
<div
v-for="(item, index) in equipmentList.staList"
:key="index"
@@ -1908,74 +1912,71 @@
}
}
.down-menu {
- display: flex;
// align-items: center;
- justify-content: space-around;
- flex-direction: column;
position: absolute;
top: 102px;
left: 438px;
- width: 146px;
- height: 156px;
+ width: 282px;
& > div {
- padding: 0 16px;
+ margin-top: 8px;
+ border-radius: 4px 4px 4px 4px;
+ overflow: hidden;
+ }
+
+ & > div:first-child {
+ margin-top: 0px;
+ }
+
+ .down-menu-item {
+ padding: 0 8px;
display: flex;
align-items: center;
justify-content: space-between;
height: 46px;
- background: rgba(3, 50, 82, 0.4);
- border-radius: 8px 8px 8px 8px;
- border: 1px solid #69e2ed;
+ background: rgba(15, 58, 78, 0.8);
+
box-sizing: border-box;
font-size: 18px;
- color: #6de9f3;
+ color: #d8ebee;
cursor: pointer;
+
+ .l {
+ display: flex;
+ align-items: center;
+
+ span {
+ margin-left: 8px;
+ }
+
+ .checked {
+ color: #6de9f3;
+ }
+ }
i {
font-size: 12px;
}
}
- & > .nc-list,
- & > .jk-list,
- & > .jc-list {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- position: absolute;
- top: 0;
- left: 172px;
- width: 144px;
- height: 224px;
+ .nc-list,
+ .jk-list,
+ .jc-list {
+ padding: 4px 15px 4px 40px;
+ max-height: 200px;
- background: rgba(6, 28, 29, 0.8);
- border-radius: 8px 8px 8px 8px;
- border: 1px solid #69e2ed;
+ background: rgba(15, 58, 78, 0.8);
box-sizing: border-box;
- .title {
- width: 100%;
- height: 46px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 20px;
- }
+ color: #d8ebee;
- .content {
- width: 100%;
- height: calc(100% - 46px);
- overflow-x: hidden;
- overflow-y: auto;
- }
+ overflow-x: hidden;
+ overflow-y: auto;
.box {
- margin-top: 16px;
- padding-left: 20px;
- width: 100%;
- // height: 24px;
- line-height: 24px;
+ padding: 0 5px;
+ height: 36px;
+ line-height: 36px;
text-align: left;
box-sizing: border-box;
white-space: nowrap;
@@ -1983,19 +1984,9 @@
text-overflow: ellipsis;
}
- .box.first {
- margin-top: 0 !important;
+ .box:hover {
+ background: rgba(105, 226, 237, 0.5);
}
-
- .box:last-child {
- margin-bottom: 15px;
- }
- }
- .jk-list {
- top: 55px;
- }
- .jc-list {
- top: 108px;
}
}
--
Gitblit v1.9.3