feat(login): 添加租户名称获取功能并优化前端布局
- 在登录控制器中注入租户服务并获取租户名称信息 - 添加租户名称到登录响应结果中 - 更新样式变量定义侧边栏宽度和Logo高度 - 重构公告面板组件统一公告通知显示逻辑 - 简化公告类型图标和样式映射关系 - 更新侧边栏为垂直菜单布局并添加折叠功能 - 优化Logo组件显示租户名称和系统标题 - 调整导航栏布局结构和响应式样式 - 重构主应用容器样式和标签页显示逻辑
This commit is contained in:
@@ -20,26 +20,17 @@ const tagsViewStore = useTagsViewStore()
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-main {
|
||||
/* 50= navbar 50 */
|
||||
min-height: calc(100vh - 50px);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 50px;
|
||||
.fixed-header ~ .app-main {
|
||||
padding-top: 34px;
|
||||
}
|
||||
|
||||
.hasTagsView {
|
||||
.app-main {
|
||||
/* 84 = navbar + tags-view = 50 + 34 */
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 84px;
|
||||
}
|
||||
.hasTagsView .app-main {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,17 +1,29 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="right-menu">
|
||||
<template v-if="appStore.device !== 'mobile'">
|
||||
<header-search id="header-search" class="right-menu-item" />
|
||||
</template>
|
||||
<!-- 公告和通知按钮 -->
|
||||
<el-tooltip content="公告/通知" placement="bottom">
|
||||
<div class="right-menu-item notice-btn" @click="openNoticePanel">
|
||||
<el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notice-badge">
|
||||
<el-icon><Bell /></el-icon>
|
||||
</el-badge>
|
||||
<div class="left-menu">
|
||||
<div class="hamburger-container">
|
||||
<div class="hamburger" @click="toggleSideBar">
|
||||
<el-icon :size="20">
|
||||
<component :is="sidebar.opened ? 'Fold' : 'Expand'" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 搜索和公告通知 -->
|
||||
<div class="left-actions">
|
||||
<template v-if="appStore.device !== 'mobile'">
|
||||
<header-search id="header-search" class="left-action-item" />
|
||||
</template>
|
||||
<!-- 公告和通知按钮 -->
|
||||
<el-tooltip content="公告/通知" placement="bottom">
|
||||
<div class="left-action-item notice-btn" @click="openNoticePanel">
|
||||
<el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notice-badge">
|
||||
<el-icon><Bell /></el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-menu">
|
||||
<div class="avatar-container">
|
||||
<div class="avatar-wrapper">
|
||||
<el-dropdown
|
||||
@@ -40,9 +52,6 @@
|
||||
<router-link to="/user/profile">
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
</router-link>
|
||||
<!-- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
|
||||
<span>布局设置</span>
|
||||
</el-dropdown-item> -->
|
||||
<el-dropdown-item divided command="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
@@ -86,8 +95,8 @@
|
||||
</el-select>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submit">确 定</el-button>
|
||||
<el-button @click="showDialog = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submit">确定</el-button>
|
||||
<el-button @click="showDialog = false">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@@ -98,9 +107,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from 'vue';
|
||||
import {onMounted, ref, computed} from 'vue';
|
||||
import {ElMessageBox} from 'element-plus';
|
||||
import {Bell} from '@element-plus/icons-vue';
|
||||
import {Fold, Expand, Bell} from '@element-plus/icons-vue';
|
||||
import HeaderSearch from '@/components/HeaderSearch';
|
||||
import NoticePanel from '@/components/NoticePanel';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
@@ -108,16 +117,19 @@ import useUserStore from '@/store/modules/user';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import {getOrg, switchOrg} from '@/api/login';
|
||||
import {getUnreadCount} from '@/api/system/notice';
|
||||
import {useRouter} from 'vue-router';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const userStore = useUserStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const router = useRouter();
|
||||
const orgOptions = ref([]);
|
||||
const showDialog = ref(false);
|
||||
const orgId = ref('');
|
||||
const noticePanelRef = ref(null);
|
||||
const unreadCount = ref(0);
|
||||
|
||||
const sidebar = computed(() => appStore.sidebar);
|
||||
|
||||
// 加载未读数量
|
||||
function loadUnreadCount() {
|
||||
getUnreadCount().then(res => {
|
||||
@@ -132,6 +144,11 @@ function updateUnreadCount() {
|
||||
loadUnreadCount();
|
||||
}
|
||||
|
||||
// 切换侧边栏
|
||||
function toggleSideBar() {
|
||||
appStore.toggleSideBar();
|
||||
}
|
||||
|
||||
function loadOrgList() {
|
||||
getOrg().then((res) => {
|
||||
orgOptions.value = res.data;
|
||||
@@ -220,16 +237,78 @@ function openNoticePanel() {
|
||||
<style lang='scss' scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 10px;
|
||||
flex-shrink: 0;
|
||||
min-width: 200px;
|
||||
z-index: 1002;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
|
||||
.left-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
|
||||
.hamburger-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.hamburger {
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background 0.3s;
|
||||
color: #5a5e66;
|
||||
|
||||
&:hover {
|
||||
background-color: #f6f6f6;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.left-action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.notice-badge {
|
||||
:deep(.el-badge__content) {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
display: flex;
|
||||
@@ -241,49 +320,6 @@ function openNoticePanel() {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-btn {
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.notice-badge {
|
||||
:deep(.el-badge__content) {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
color: #606266;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
@@ -313,8 +349,8 @@ function openNoticePanel() {
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -364,8 +400,21 @@ function openNoticePanel() {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-width: 150px;
|
||||
padding-right: 5px;
|
||||
padding: 0 10px;
|
||||
|
||||
.left-menu {
|
||||
.hamburger-container {
|
||||
.hamburger {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-actions {
|
||||
.left-action-item {
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
.avatar-container {
|
||||
@@ -388,8 +437,8 @@ function openNoticePanel() {
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -397,8 +446,21 @@ function openNoticePanel() {
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
min-width: 120px;
|
||||
padding-right: 5px;
|
||||
padding: 0 8px;
|
||||
|
||||
.left-menu {
|
||||
.hamburger-container {
|
||||
.hamburger {
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-actions {
|
||||
.left-action-item {
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
.avatar-container {
|
||||
@@ -415,6 +477,11 @@ function openNoticePanel() {
|
||||
max-width: 80px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,36 +7,25 @@
|
||||
sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
|
||||
}"
|
||||
>
|
||||
<!-- <el-image
|
||||
:src="sideTheme === 'theme-dark' ? Logo : Logo"
|
||||
class="sidebar-logo"
|
||||
fit="scale-down"
|
||||
/> -->
|
||||
<!-- <transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<el-image
|
||||
v-if="logo"
|
||||
:src="sideTheme === 'theme-dark' ? logoNew : logoBlack"
|
||||
class="sidebar-logo"
|
||||
fit="scale-down"
|
||||
/>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<el-image
|
||||
v-if="logo"
|
||||
:src="sideTheme === 'theme-dark' ? logoNew : logoBlack"
|
||||
class="sidebar-logo"
|
||||
fit="scale-down"
|
||||
/>
|
||||
</router-link>
|
||||
</transition> -->
|
||||
<router-link class="sidebar-logo-link" to="/index">
|
||||
<el-image
|
||||
:src="logoImage"
|
||||
class="sidebar-logo"
|
||||
fit="contain"
|
||||
/>
|
||||
<div v-if="!collapse" class="logo-text" :style="{ color: textColor }">
|
||||
<h1 class="sidebar-title">{{ title }}</h1>
|
||||
<p v-if="displayName" class="hospital-name">{{ displayName }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import variables from '@/assets/styles/variables.module.scss';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import {computed, ref} from 'vue';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import {computed} from 'vue';
|
||||
|
||||
defineProps({
|
||||
collapse: {
|
||||
@@ -45,64 +34,99 @@ defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const title = import.meta.env.VITE_APP_TITLE;
|
||||
const title = import.meta.env.VITE_APP_TITLE || '医院管理系统';
|
||||
const settingsStore = useSettingsStore();
|
||||
const userStore = useUserStore();
|
||||
const sideTheme = computed(() => settingsStore.sideTheme);
|
||||
const logo = ref(true);
|
||||
const displayName = computed(() => userStore.tenantName || userStore.hospitalName || userStore.orgName || '');
|
||||
|
||||
const textColor = computed(() => {
|
||||
return sideTheme.value === 'theme-dark' ? '#fff' : '#303133';
|
||||
});
|
||||
|
||||
const logoImage = computed(() => {
|
||||
return new URL('@/assets/logo/LOGO.jpg', import.meta.url).href;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebarLogoFade-enter-active {
|
||||
transition: opacity 1.5s;
|
||||
}
|
||||
|
||||
.sidebarLogoFade-enter,
|
||||
.sidebarLogoFade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-logo-container {
|
||||
position: relative;
|
||||
width: auto;
|
||||
min-width: 120px;
|
||||
max-width: 160px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
padding: 0 8px;
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& .sidebar-logo-link {
|
||||
.sidebar-logo-link {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 12px;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
& .sidebar-logo {
|
||||
width: auto;
|
||||
max-width: 120px;
|
||||
height: 28px;
|
||||
vertical-align: middle;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
display: inline-block;
|
||||
.sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hospital-name {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2;
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
.sidebar-logo {
|
||||
margin-right: 0px;
|
||||
.sidebar-logo-link {
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,50 +1,49 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{ 'has-logo': showLogo }"
|
||||
class="sidebar-wrapper"
|
||||
:class="[
|
||||
'sidebar-wrapper',
|
||||
{ 'has-logo': showLogo },
|
||||
{ 'is-collapse': isCollapse }
|
||||
]"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
|
||||
}"
|
||||
>
|
||||
<!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
|
||||
<div class="menu-container">
|
||||
<div class="menu-scrollbar">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="
|
||||
sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground
|
||||
"
|
||||
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||
:unique-opened="true"
|
||||
:active-text-color="theme"
|
||||
:collapse-transition="false"
|
||||
mode="horizontal"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
<navbar @setLayout="setLayout" class="navbar-container" />
|
||||
<settings ref="settingRef" />
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar class="sidebar-scrollbar">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="
|
||||
sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground
|
||||
"
|
||||
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||
:unique-opened="true"
|
||||
:active-text-color="theme"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Logo from './Logo';
|
||||
import SidebarItem from './SidebarItem';
|
||||
import variables from '@/assets/styles/variables.module.scss';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
import {computed, ref} from 'vue';
|
||||
import {computed} from 'vue';
|
||||
import {useRoute} from 'vue-router';
|
||||
import {Navbar, Settings} from '@/layout/components';
|
||||
|
||||
const route = useRoute();
|
||||
const appStore = useAppStore();
|
||||
@@ -65,134 +64,122 @@ const activeMenu = computed(() => {
|
||||
}
|
||||
return path;
|
||||
});
|
||||
const settingRef = ref(null);
|
||||
function setLayout() {
|
||||
settingRef.value.openSetting();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/styles/variables.module.scss';
|
||||
|
||||
.sidebar-wrapper {
|
||||
width: $sideBarWidth;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
flex: 1;
|
||||
height: 50px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-scrollbar {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--horizontal {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
border-bottom: none !important;
|
||||
background-color: transparent !important;
|
||||
min-width: auto;
|
||||
flex-wrap: nowrap;
|
||||
height: 50px;
|
||||
|
||||
& > .el-menu-item,
|
||||
& > .el-sub-menu {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: #fff;
|
||||
padding: 0 15px !important;
|
||||
font-size: 14px;
|
||||
min-width: 120px !important;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.svg-icon) {
|
||||
margin-right: 8px !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title) {
|
||||
padding-right: 25px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__icon-arrow) {
|
||||
right: 8px !important;
|
||||
}
|
||||
|
||||
:deep(.menu-title) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
transition: width 0.28s;
|
||||
flex-shrink: 0;
|
||||
height: 50px;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
/* 响应式处理 */
|
||||
@media (max-width: 768px) {
|
||||
.menu-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
&.is-collapse {
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
.el-menu--horizontal {
|
||||
& > .el-menu-item,
|
||||
& > .el-sub-menu {
|
||||
padding: 0 12px !important;
|
||||
min-width: 80px !important;
|
||||
font-size: 12px;
|
||||
.mobile & {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.28s;
|
||||
}
|
||||
|
||||
.is-collapse.mobile & {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.has-logo {
|
||||
.sidebar-scrollbar {
|
||||
height: calc(100% - #{$logoHeight});
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-scrollbar {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.sidebar-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sidebar-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item),
|
||||
:deep(.el-sub-menu__title) {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
&.is-active {
|
||||
background-color: var(--current-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu) {
|
||||
.el-menu-item {
|
||||
min-width: $sideBarWidth !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
> .el-sub-menu__title {
|
||||
color: var(--current-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.el-menu--horizontal {
|
||||
& > .el-menu-item,
|
||||
& > .el-sub-menu {
|
||||
padding: 0 8px !important;
|
||||
min-width: 60px !important;
|
||||
font-size: 11px;
|
||||
:deep(.el-menu--collapse) {
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
padding: 0 20px !important;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
&.is-opened {
|
||||
> .el-sub-menu__title .el-icon-arrow-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user