From 55bf797dcc730b37bc691ebab2b51ff9db8ed245 Mon Sep 17 00:00:00 2001
From: zs <zhousong@weben-smart.com>
Date: 周二, 06 5月 2025 17:37:23 +0800
Subject: [PATCH] 修改代码样式
---
HIAWms/web/src/components/Menu/index.vue | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 100 insertions(+), 0 deletions(-)
diff --git a/HIAWms/web/src/components/Menu/index.vue b/HIAWms/web/src/components/Menu/index.vue
new file mode 100644
index 0000000..0b65363
--- /dev/null
+++ b/HIAWms/web/src/components/Menu/index.vue
@@ -0,0 +1,100 @@
+<template>
+ <el-menu
+ :default-active="defaultActive"
+ class="cs-menu-vertical-demo"
+ :collapse="isCollapse"
+ active-text-color="#fff"
+ background-color="#545c64"
+ text-color="#fff"
+ @select="handleSelected"
+ @open="handleOpen"
+ @close="handleClose"
+ >
+ <el-menu-item v-for="item in routes" :index="item.path">
+ <div class="menu-li">
+ <div class="icon">
+ <img
+ width="16"
+ v-if="!item.icon.includes('icon-')"
+ :src="
+ item.icon.includes('icon-')
+ ? item.icon
+ : `../../../src/assets/svg/${item.icon}.svg`
+ "
+ />
+ <i
+ v-else-if="item.icon"
+ :class="{
+ iconfont: true,
+ [item.icon]: true,
+ }"
+ ></i>
+ <el-icon v-else><document /></el-icon>
+ </div>
+ {{ item.name }}
+ </div>
+ </el-menu-item>
+ </el-menu>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { Document, Menu as IconMenu } from '@element-plus/icons-vue'
+import { routeInfo } from '@/router'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const routes = computed(() => {
+ return routeInfo.routes || []
+})
+const isCollapse = ref(true)
+
+const defaultActive = computed(() => {
+ return location.hash.split('#')[1]
+})
+
+const handleSelected = (index: string) => {
+ router.push(index)
+}
+const handleOpen = (key: string, keyPath: string[]) => {
+ console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+ console.log(key, keyPath)
+}
+</script>
+
+<style lang="scss" scoped>
+.cs-menu-vertical-demo {
+ position: relative;
+ width: 201px;
+ height: 100%;
+ background-color: #000000 !important;
+ overflow-y: auto;
+ // overflow-x: inherit;
+
+ :deep(.is-active) {
+ background-color: #292929;
+ border-right: 5px solid #5a84ff;
+ }
+ :deep(.cs-menu-item) {
+ &:hover {
+ background-color: #292929;
+ }
+ }
+}
+
+.menu-li {
+ width: 100%;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ .icon {
+ margin-right: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+}
+</style>
--
Gitblit v1.9.3