顶部样式

snowy-admin-web/src/layout/menu/leftMenu.vue

@@ -1,184 +1,221 @@
 <template>
 	<a-layout>
-    <template v-if="isMobile">
-      <!-- 手机端情况下的左侧菜单 -->
-      <Side-m />
-      <!-- 右侧布局 -->
-      <a-layout>
-        <div id="snowyHeader" class="snowy-header">
-          <div class="snowy-header-left xn-pl0">
-            <img style="height: 40px; margin-left: 10px" src="/img/logo.png"/>
-            <moduleMenu v-if="moduleMenuShow" @switchModule="switchModule" />
-          </div>
-          <div class="snowy-header-right">
-            <user-bar />
-          </div>
-        </div>
-        <a-layout-content class="main-content-wrapper">
-          <div id="admin-ui-main" class="admin-ui-main">
-            <router-view v-slot="{ Component }">
-              <keep-alive :include="kStore.keepLiveRoute">
-                <component :is="Component" v-if="kStore.routeShow" :key="route.name" />
-              </keep-alive>
-            </router-view>
-            <iframe-view />
-            <div v-if="footerCopyrightOpen" class="main-bottom-wrapper">
-              <a class="xn-color-a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
-                  sysBaseConfig.SNOWY_SYS_COPYRIGHT
-                }}</a>
-            </div>
-          </div>
-        </a-layout-content>
-      </a-layout>
-    </template>
-    <template v-else>
-      <a-layout-sider
-        :collapsed="menuIsCollapse"
-        :trigger="null"
-        collapsible
-        :theme="sideTheme"
-        width="330"
-      >
-        <header id="snowyHeaderLogo" class="snowy-header-logo">
-          <div class="snowy-header-left">
-            <div class="logo-bar">
-              <img class="logo" :src="sysBaseConfig.SNOWY_SYS_LOGO" />
-              <span>{{ sysBaseConfig.SNOWY_SYS_NAME }}</span>
-            </div>
-          </div>
-        </header>
-        <div :class="menuIsCollapse ? 'admin-ui-side isCollapse' : 'admin-ui-side'">
-          <div class="admin-ui-side-scroll">
-            <a-menu
-              v-bind:openKeys="openKeys"
-              v-bind:selectedKeys="selectedKeys"
-              :theme="sideTheme"
-              mode="inline"
-              @select="onSelect"
-              @openChange="onOpenChange"
-            >
-              <NavMenu :nav-menus="menu" />
-            </a-menu>
-          </div>
-        </div>
-      </a-layout-sider>
-      <!-- 右侧布局 -->
-      <a-layout>
-        <div id="snowyHeader" class="snowy-header">
-          <div class="snowy-header-left xn-pl0">
-            <div v-if="!isMobile" class="panel-item hidden-sm-and-down" @click="menuIsCollapseClick">
-              <MenuUnfoldOutlined v-if="menuIsCollapse" />
-              <MenuFoldOutlined v-else />
-            </div>
-            <moduleMenu v-if="moduleMenuShow" @switchModule="switchModule" />
-          </div>
-          <div class="snowy-header-right">
-            <user-bar />
-          </div>
-        </div>
-        <Breadcrumb v-if="!isMobile && breadcrumbOpen" />
-        <!-- 多标签 -->
-        <Tags v-if="!isMobile && layoutTagsOpen" />
-        <a-layout-content class="main-content-wrapper">
-          <div id="admin-ui-main" class="admin-ui-main">
-            <router-view v-slot="{ Component }">
-              <keep-alive :include="kStore.keepLiveRoute">
-                <component :is="Component" v-if="kStore.routeShow" :key="route.name" />
-              </keep-alive>
-            </router-view>
-            <iframe-view />
-            <div v-if="footerCopyrightOpen" class="main-bottom-wrapper">
-              <a class="xn-color-a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
-                  sysBaseConfig.SNOWY_SYS_COPYRIGHT
-                }}</a>
-            </div>
-          </div>
-        </a-layout-content>
-      </a-layout>
-    </template>
+		<template v-if="isMobile">
+			<!-- 手机端情况下的左侧菜单 -->
+			<Side-m/>
+			<!-- 右侧布局 -->
+			<a-layout>
+				<div id="snowyHeader" class="snowy-header">
+					<div class="snowy-header-left xn-pl0">
+						<img style="height: 40px; margin-left: 10px" src="/img/logo.png"/>
+						<moduleMenu v-if="moduleMenuShow" @switchModule="switchModule"/>
+					</div>
+					<div class="snowy-header-right">
+						<user-bar/>
+					</div>
+				</div>
+				<a-layout-content class="main-content-wrapper">
+					<div id="admin-ui-main" class="admin-ui-main">
+						<router-view v-slot="{ Component }">
+							<keep-alive :include="kStore.keepLiveRoute">
+								<component :is="Component" v-if="kStore.routeShow" :key="route.name"/>
+							</keep-alive>
+						</router-view>
+						<iframe-view/>
+						<div v-if="footerCopyrightOpen" class="main-bottom-wrapper">
+							<a class="xn-color-a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
+									sysBaseConfig.SNOWY_SYS_COPYRIGHT
+								}}</a>
+						</div>
+					</div>
+				</a-layout-content>
+			</a-layout>
+		</template>
+		<template v-else>
+			<a-layout-header class="left-menu-header">
+				<div id="snowyHeader" class="snowy-header">
+					<div class="snowy-header-left xn-pl0">
+						<div class="logo-bar">
+							<img class="logo" :src="sysBaseConfig.SNOWY_SYS_LOGO"/>
+							<span>{{ sysBaseConfig.SNOWY_SYS_NAME }}</span>
+						</div>
+					</div>
+					<div class="snowy-header-right">
+						<user-bar/>
+					</div>
+				</div>
+			</a-layout-header>
+			<a-layout>
+				<a-layout-sider
+					:collapsed="menuIsCollapse"
+					:trigger="null"
+					collapsible
+					:theme="sideTheme"
+					width="330"
+				>
+					<div :class="menuIsCollapse ? 'admin-ui-side isCollapse' : 'admin-ui-side'">
+						<div class="admin-ui-side-scroll">
+							<a-menu
+								v-bind:openKeys="openKeys"
+								v-bind:selectedKeys="selectedKeys"
+								:theme="sideTheme"
+								mode="inline"
+								@select="onSelect"
+								@openChange="onOpenChange"
+							>
+								<NavMenu :nav-menus="menu"/>
+							</a-menu>
+						</div>
+					</div>
+				</a-layout-sider>
+				<!-- 右侧布局 -->
+				<a-layout>
+					<Breadcrumb v-if="!isMobile && breadcrumbOpen"/>
+					<!-- 多标签 -->
+					<Tags v-if="!isMobile && layoutTagsOpen"/>
+					<a-layout-content class="main-content-wrapper">
+						<div id="admin-ui-main" class="admin-ui-main">
+							<router-view v-slot="{ Component }">
+								<keep-alive :include="kStore.keepLiveRoute">
+									<component :is="Component" v-if="kStore.routeShow" :key="route.name"/>
+								</keep-alive>
+							</router-view>
+							<iframe-view/>
+							<div v-if="footerCopyrightOpen" class="main-bottom-wrapper">
+								<a class="xn-color-a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
+										sysBaseConfig.SNOWY_SYS_COPYRIGHT
+									}}</a>
+							</div>
+						</div>
+					</a-layout-content>
+				</a-layout>
+			</a-layout>
+		</template>
 	</a-layout>
 </template>
 
 <script setup>
-	import { useRoute } from 'vue-router'
-	const route = useRoute()
+import {useRoute} from 'vue-router'
 
-	import UserBar from '@/layout/components/userbar.vue'
-	import Tags from '@/layout/components/tags.vue'
-	import SideM from '@/layout/components/sideM.vue'
-	import NavMenu from '@/layout/components/NavMenu.vue'
-	import ModuleMenu from '@/layout/components/moduleMenu.vue'
-	import IframeView from '@/layout/components/iframeView.vue'
-	import Breadcrumb from '@/layout/components/breadcrumb.vue'
+const route = useRoute()
 
-	const props = defineProps({
-		layout: { type: String }, // 布局信息
-		isMobile: { type: Boolean }, // 是否移动端
-		menuIsCollapse: { type: Boolean }, // 菜单是否折叠
-		sideTheme: { type: String },
-		sysBaseConfig: { type: Object },
-		openKeys: { type: Array },
-		selectedKeys: { type: Array },
-		menu: { type: Array }, // 菜单
-		breadcrumbOpen: { type: Boolean }, //面包屑
-		layoutTagsOpen: { type: Boolean },
-		kStore: { type: Object }, // 获取的仓库数据
-		footerCopyrightOpen: { type: Boolean }, //页脚版权信息
-		moduleMenuShow: { type: Boolean }
-	})
+import UserBar from '@/layout/components/userbar.vue'
+import Tags from '@/layout/components/tags.vue'
+import SideM from '@/layout/components/sideM.vue'
+import NavMenu from '@/layout/components/NavMenu.vue'
+import ModuleMenu from '@/layout/components/moduleMenu.vue'
+import IframeView from '@/layout/components/iframeView.vue'
+import Breadcrumb from '@/layout/components/breadcrumb.vue'
 
-	const emit = defineEmits(['onSelect', 'onOpenChange', 'switchModule', 'menuIsCollapseClick'])
-	const onSelect = (obj) => {
-		emit('onSelect', obj)
-	}
-	const onOpenChange = (keys) => {
-		emit('onOpenChange', keys)
-	}
-	const switchModule = (id) => {
-		emit('switchModule', id)
-	}
-	const menuIsCollapseClick = () => {
-		emit('menuIsCollapseClick')
-	}
+const props = defineProps({
+	layout: {type: String}, // 布局信息
+	isMobile: {type: Boolean}, // 是否移动端
+	menuIsCollapse: {type: Boolean}, // 菜单是否折叠
+	sideTheme: {type: String},
+	sysBaseConfig: {type: Object},
+	openKeys: {type: Array},
+	selectedKeys: {type: Array},
+	menu: {type: Array}, // 菜单
+	breadcrumbOpen: {type: Boolean}, //面包屑
+	layoutTagsOpen: {type: Boolean},
+	kStore: {type: Object}, // 获取的仓库数据
+	footerCopyrightOpen: {type: Boolean}, //页脚版权信息
+	moduleMenuShow: {type: Boolean}
+})
+
+const emit = defineEmits(['onSelect', 'onOpenChange', 'switchModule', 'menuIsCollapseClick'])
+const onSelect = (obj) => {
+	emit('onSelect', obj)
+}
+const onOpenChange = (keys) => {
+	emit('onOpenChange', keys)
+}
+const switchModule = (id) => {
+	emit('switchModule', id)
+}
+const menuIsCollapseClick = () => {
+	emit('menuIsCollapseClick')
+}
 </script>
 <style lang="less" scoped>
-	.xn-color-fff {
-		color: #fff;
-	}
-	.xn-pdl25 {
-		padding-left: 11px;
-	}
-	.xn-menu-line {
-		text-align: center;
-		height: auto;
-		line-height: 20px;
-		flex: none;
-		display: block;
-		padding: 12px 0 !important;
-	}
-	.xn-navmenu-line {
-		min-width: 0;
-		flex: 1 1 0%;
-		overflow: hidden;
-	}
-	.xn-bb0 {
-		border-bottom: none;
-		position: relative;
-	}
-	.ant-layout-content {
-		display: flex;
-		flex-direction: column;
-	}
-	.xn-pd1180 {
-		padding: 10px 150px 0 150px;
-	}
-	.xn-pd050 {
-		padding: 0 50px;
-	}
-	.xn-pl10 {
-		padding-left: 10px;
-	}
-	.xn-mg050 {
-		margin: 0px 150px;
+.xn-color-fff {
+	color: #fff;
+}
+
+.xn-pdl25 {
+	padding-left: 11px;
+}
+
+.xn-menu-line {
+	text-align: center;
+	height: auto;
+	line-height: 20px;
+	flex: none;
+	display: block;
+	padding: 12px 0 !important;
+}
+
+.xn-navmenu-line {
+	min-width: 0;
+	flex: 1 1 0%;
+	overflow: hidden;
+}
+
+.xn-bb0 {
+	border-bottom: none;
+	position: relative;
+}
+
+.ant-layout-content {
+	display: flex;
+	flex-direction: column;
+}
+
+.xn-pd1180 {
+	padding: 10px 150px 0 150px;
+}
+
+.xn-pd050 {
+	padding: 0 50px;
+}
+
+.xn-pl10 {
+	padding-left: 10px;
+}
+
+.xn-mg050 {
+	margin: 0px 150px;
+}
+.left-menu-header {
+	padding: 0;
+	height: auto;
+	.snowy-header {
+		height: 100%;
+		background-color: #2C83E9;
+		border: none;
+		.snowy-header-left {
+			.logo-bar {
+				display: flex;
+				align-items: center;
+				margin-left: 16px;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 600;
+				font-size: 24px;
+				color: #FFFFFF;
+				line-height: 28px;
+				.logo {
+					margin-right: 10px;
+				}
+			}
+		}
+		.snowy-header-right {
+			color: #ffffff;
+			:deep(.user-bar) {
+				>* {
+					font-size: 18px;
+				}
+			}
+		}
 	}
+}
 </style>