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 | 121 +++++++++++++--------------------------- 1 files changed, 40 insertions(+), 81 deletions(-) diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue index a23db30..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,12 +145,12 @@ <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> @@ -217,6 +168,11 @@ <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> --> @@ -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