From 172d73cbe737c04b3d2c3fe8908db2460c241543 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 14 八月 2023 17:11:48 +0800
Subject: [PATCH] 油烟监测系统 Vue代码
---
src/components/layout/AppAside.vue | 125 ++++++++++++++---------------------------
1 files changed, 42 insertions(+), 83 deletions(-)
diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue
index f5ce42e..9cbde1f 100644
--- a/src/components/layout/AppAside.vue
+++ b/src/components/layout/AppAside.vue
@@ -8,30 +8,16 @@
menuHeight: '600px',
isCollapseAside: isCollapse,
selected: selectedName,
- // optionClick: [
- // '鍘嗗彶鏁版嵁',
- // '寮傚父鍒嗘瀽',
- // '瀹炴椂鐩戞帶',
- // '娌圭儫鏁版嵁',
- // '缁熻鍒嗘瀽',
- // '缁熻鏁版嵁',
- // '娌圭儫娴撳害鏃ユ暟鎹�',
- // '鐩戞祴璁惧鍦ㄧ嚎鐜�',
- // '鍑�鍖栧櫒寮�鍚巼',
- // '娌圭儫鏃舵瓒呮爣鐜�',
- // '娌圭儫娴撳害鍧囧��',
- // '鑾峰彇鏁版嵁'
- // ],
+
optionClick: [
'瀹炴椂鐩戞帶',
'寮傚父鍒嗘瀽',
- '鏁版嵁缁熻鍒嗘瀽',
+ '鏁版嵁璐ㄩ噺鍒嗘瀽',
'鍏ㄨ绱犲垎鏋�',
- '娌圭儫娴撳害鏃ユ暟鎹�',
+ '娌圭儫娴撳害鍒嗘瀽',
'鐩戞祴璁惧鍦ㄧ嚎鐜�',
'鍑�鍖栧櫒寮�鍚巼',
'娌圭儫鏃舵瓒呮爣鐜�',
- '娌圭儫娴撳害鍧囧��',
'绗笁鏂规暟鎹幏鍙�',
'鍘嗗彶鏁版嵁',
]
@@ -54,7 +40,8 @@
<el-aside>
<!-- text-color="#fff" -->
<el-menu
- background-color="#545c64"
+ background-color="rgb(50,155,185)"
+ active-text-color="rgb(255, 242, 0)"
class="el-menu-vertical-demo"
default-active="2"
@open="handleOpen"
@@ -76,13 +63,13 @@
<el-sub-menu index="1">
<template #title>
<el-icon><i-ep-Monitor /></el-icon>
- <span>鍦ㄧ嚎鐩戞帶</span>
+ <span class="menu-text">鍦ㄧ嚎鐩戞帶</span>
<!-- @click="handleClick(optionClick[0])" -->
</template>
<el-menu-item index="ndata" @click="selected = optionClick[0]">
<el-icon><i-ep-Stopwatch /></el-icon>
- <template #title>瀹炴椂鐩戞帶</template>
+ <template #title >瀹炴椂鐩戞帶</template>
</el-menu-item>
@@ -95,7 +82,7 @@
<el-menu-item index="analysisOrigin" @click="selected = optionClick[2]">
<el-icon><i-ep-Search /></el-icon>
- <template #title>鏁版嵁缁熻鍒嗘瀽</template>
+ <template #title>鏁版嵁璐ㄩ噺鍒嗘瀽</template>
</el-menu-item>
</el-sub-menu>
@@ -103,8 +90,8 @@
<el-sub-menu index="2">
<template #title>
- <el-icon><i-ep-Histogram /></el-icon>
- <span>鍒嗘椂娈靛垎鏋�</span>
+ <el-icon><i-ep-DataAnalysis /></el-icon>
+ <span class="menu-text">鍒嗘椂娈靛垎鏋�</span>
</template>
<el-menu-item index="allData" @click="selected = optionClick[3]">
@@ -113,7 +100,7 @@
</el-menu-item>
<el-sub-menu index="3">
<template #title>
- <el-icon><i-ep-DataLine /></el-icon>
+ <el-icon><i-ep-DataBoard /></el-icon>
<span>鍒嗚绱犲垎鏋�</span>
</template>
@@ -122,71 +109,35 @@
<span class="slot-lable"> 璇︾粏鏁版嵁</span>
</template> -->
<el-menu-item index="day" @click="selected = optionClick[4]">
- <el-icon><i-ep-Notebook /></el-icon>
- <template #title>娌圭儫娴撳害鏃ユ暟鎹�</template>
+ <el-icon><i-ep-TrendCharts /></el-icon>
+ <template #title>娌圭儫娴撳害鍒嗘瀽</template>
</el-menu-item>
<el-menu-item index="monitor" @click="selected = optionClick[5]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>鐩戞祴璁惧鍦ㄧ嚎鐜�</template>
</el-menu-item>
<el-menu-item index="purifier" @click="selected = optionClick[6]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>鍑�鍖栧櫒寮�鍚巼</template>
</el-menu-item>
<el-menu-item index="exceed" @click="selected = optionClick[7]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>娌圭儫鏃舵瓒呮爣鐜�</template>
</el-menu-item>
- <el-menu-item index="average" @click="selected = optionClick[8]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <!-- <el-menu-item index="average" @click="selected = optionClick[8]">
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>娌圭儫娴撳害鍧囧��</template>
- </el-menu-item>
+ </el-menu-item> -->
</el-menu-item-group>
</el-sub-menu>
</el-sub-menu>
-
- <!-- <el-sub-menu index="3">
- <template #title>
- <el-icon><i-ep-DataLine /></el-icon>
- <span>鍒嗚绱犲垎鏋�</span>
- </template>
-
- <el-menu-item-group>
-
- <el-menu-item index="day">
- <el-icon><i-ep-Notebook /></el-icon>
- <span @click="selected = optionClick[6]">娌圭儫娴撳害鏃ユ暟鎹�</span>
- </el-menu-item>
- <el-menu-item index="monitor">
- <el-icon><i-ep-Notebook /></el-icon>
- <span @click="selected = optionClick[7]">鐩戞祴璁惧鍦ㄧ嚎鐜�</span>
- </el-menu-item>
- <el-menu-item index="purifier">
- <el-icon><i-ep-Notebook /></el-icon>
- <span @click="selected = optionClick[8]">鍑�鍖栧櫒寮�鍚巼</span>
- </el-menu-item>
-
- <el-menu-item index="exceed">
- <el-icon><i-ep-Notebook /></el-icon>
- <span @click="selected = optionClick[9]">娌圭儫鏃舵瓒呮爣鐜�</span>
- </el-menu-item>
-
- <el-menu-item index="average">
- <el-icon><i-ep-Notebook /></el-icon>
- <span @click="selected = optionClick[10]">娌圭儫娴撳害鍧囧��</span>
- </el-menu-item>
- </el-menu-item-group>
- </el-sub-menu> -->
-
-
-
<el-sub-menu index="4">
<template #title>
- <el-icon><i-ep-Histogram /></el-icon>
- <span>澶氭簮鏁版嵁绠＄悊</span>
+ <el-icon><i-ep-DataLine /></el-icon>
+ <span class="menu-text">澶氭簮鏁版嵁绠＄悊</span>
</template>
@@ -194,18 +145,18 @@
<el-icon><i-ep-Bell/></el-icon> <span>鏁版嵁鑾峰彇TestWa</span>
</el-menu-item> -->
- <el-menu-item index="getdata" @click="selected = optionClick[9]">
- <el-icon><i-ep-Notebook /></el-icon>
+ <el-menu-item index="getdata" @click="selected = optionClick[8]">
+ <el-icon><i-ep-TrendCharts /></el-icon>
<template #title>绗笁鏂规暟鎹幏鍙�</template>
</el-menu-item>
- <el-menu-item index="hdata" @click="selected = optionClick[10]">
+ <el-menu-item index="hdata" @click="selected = optionClick[9]">
<el-icon><i-ep-Histogram /></el-icon>
<template #title>鍘嗗彶鏁版嵁</template>
</el-menu-item>
</el-sub-menu>
- <el-sub-menu index="5">
+ <!-- <el-sub-menu index="5">
<template #title>
<el-icon><i-ep-Histogram /></el-icon>
<span>娴嬭瘯</span>
@@ -217,8 +168,13 @@
<el-menu-item index="tsdata">
<el-icon><i-ep-Bell/></el-icon> <span>娴嬭瘯2</span>
</el-menu-item>
+
+ <el-menu-item index="test1">
+ <el-icon><i-ep-Bell/></el-icon> <span>娴嬭瘯3</span>
+ </el-menu-item>
+
- </el-sub-menu>
+ </el-sub-menu> -->
</el-scrollbar>
@@ -229,16 +185,17 @@
<style lang="scss" scoped>
.el-aside {
- background-color: #545c64;
+ // background-color: #013335;
+ background-color: rgb(50,155,185);
height: 100vh;
- // background-color: rgb(41,45,62);
+
width: auto;
}
.el-menu {
// background-color: rgb(41,45,62);
- background-color: #545c64;
- width: 220px;
+ background-color: rgb(50,155,185);
+ width: 200px;
border-right: none;
&.el-menu--collapse {
@@ -268,13 +225,15 @@
height: 32px;
}
}
-// .el-menu-item {
-// background-color: rgb(41,45,62);
-// }
+
* {
- color: white;
+ color: rgb(252, 255, 255);
}
.slot-lable {
color: bisque;
+ // color: rgb(13, 193, 224);
+}
+.menu-text {
+ font-size: 16px;
}
</style>
--
Gitblit v1.9.3