mirror of
https://github.com/FatttSnake/Pinnacle-OA.git
synced 2026-04-05 15:01:23 +08:00
Fixed scrollbar
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
--font-secondary-color: #9E9E9E;
|
||||
}
|
||||
|
||||
body {
|
||||
.body {
|
||||
color: var(--font-main-color);
|
||||
user-select: none;
|
||||
min-width: 1100px;
|
||||
|
||||
@@ -1,171 +1,190 @@
|
||||
<template>
|
||||
<el-backtop target=".main-box" :right="80" :bottom="80" />
|
||||
<div class="background">
|
||||
<el-container class="fill">
|
||||
<el-aside width="collapse" class="background-white aside">
|
||||
<el-scrollbar>
|
||||
<el-menu
|
||||
:collapse="isCollapsed"
|
||||
:unique-opened="true"
|
||||
:default-active="
|
||||
this.$route.path.indexOf('/', this.$route.path.indexOf('/') + 1) !== -1
|
||||
? this.$route.path.indexOf(
|
||||
'/',
|
||||
this.$route.path.indexOf(
|
||||
'/',
|
||||
this.$route.path.indexOf('/') + 1
|
||||
) + 1
|
||||
) !== -1
|
||||
? this.$route.path.substring(
|
||||
0,
|
||||
this.$route.path.indexOf(
|
||||
<el-scrollbar style="height: 100vh; width: 100vw">
|
||||
<div class="body">
|
||||
<div class="background">
|
||||
<el-container class="fill">
|
||||
<el-aside width="collapse" class="background-white aside">
|
||||
<el-scrollbar>
|
||||
<el-menu
|
||||
:collapse="isCollapsed"
|
||||
:unique-opened="true"
|
||||
:default-active="
|
||||
this.$route.path.indexOf(
|
||||
'/',
|
||||
this.$route.path.indexOf('/') + 1
|
||||
) !== -1
|
||||
? this.$route.path.indexOf(
|
||||
'/',
|
||||
this.$route.path.indexOf(
|
||||
'/',
|
||||
this.$route.path.indexOf('/') + 1
|
||||
) + 1
|
||||
)
|
||||
)
|
||||
: this.$route.path
|
||||
: this.$route.path
|
||||
"
|
||||
:router="true"
|
||||
class="menu"
|
||||
:text-color="COLOR_FONT_MAIN()"
|
||||
:active-text-color="COLOR_PRODUCTION()"
|
||||
>
|
||||
<el-menu-item
|
||||
@mousedown.left="changeCollapsed"
|
||||
:disabled="true"
|
||||
style="cursor: pointer; opacity: 1; border-bottom: 1px #ddd solid"
|
||||
>
|
||||
<el-icon :size="SIZE_ICON_LG()">
|
||||
<icon-pinnacle-pinnacle :color="COLOR_PRODUCTION()" />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<span class="menu-production-name">
|
||||
{{ PRODUCTION_NAME() }}
|
||||
</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<template v-for="(route, index) in routes">
|
||||
<el-menu-item
|
||||
v-if="!route.children"
|
||||
:key="index"
|
||||
:index="route.path ?? ''"
|
||||
) !== -1
|
||||
? this.$route.path.substring(
|
||||
0,
|
||||
this.$route.path.indexOf(
|
||||
'/',
|
||||
this.$route.path.indexOf(
|
||||
'/',
|
||||
this.$route.path.indexOf('/') + 1
|
||||
) + 1
|
||||
)
|
||||
)
|
||||
: this.$route.path
|
||||
: this.$route.path
|
||||
"
|
||||
:router="true"
|
||||
class="menu"
|
||||
:text-color="COLOR_FONT_MAIN()"
|
||||
:active-text-color="COLOR_PRODUCTION()"
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="route.meta.icon" />
|
||||
</el-icon>
|
||||
<template #title>{{ route.meta.title }}</template>
|
||||
</el-menu-item>
|
||||
<el-sub-menu
|
||||
v-if="route.children"
|
||||
:key="index"
|
||||
:index="route.path ?? ''"
|
||||
>
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="route.meta.icon" />
|
||||
</el-icon>
|
||||
<span>{{ route.meta.title }}</span>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="(sub, index) in route.children"
|
||||
:key="index"
|
||||
:index="
|
||||
sub.path
|
||||
? route.path
|
||||
? route.path + '/' + sub.path
|
||||
: ''
|
||||
: ''
|
||||
@mousedown.left="changeCollapsed"
|
||||
:disabled="true"
|
||||
style="
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
border-bottom: 1px #ddd solid;
|
||||
"
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="sub.meta.icon" />
|
||||
<el-icon :size="SIZE_ICON_LG()">
|
||||
<icon-pinnacle-pinnacle :color="COLOR_PRODUCTION()" />
|
||||
</el-icon>
|
||||
<template #title>{{ sub.meta.title }}</template>
|
||||
<template #title>
|
||||
<span class="menu-production-name">
|
||||
{{ PRODUCTION_NAME() }}
|
||||
</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header height="56px" class="background-white main-header">
|
||||
<el-badge is-dot>
|
||||
<el-icon
|
||||
:size="SIZE_ICON_MD()"
|
||||
:color="COLOR_PRODUCTION()"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<icon-pinnacle-chat />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
<el-badge is-dot>
|
||||
<el-icon
|
||||
:size="SIZE_ICON_MD()"
|
||||
:color="COLOR_PRODUCTION()"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<icon-pinnacle-notice />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
<el-divider direction="vertical" />
|
||||
<el-popover
|
||||
transition="el-zoom-in-top"
|
||||
popper-style="box-shadow: rgb(14 18 22 / 20%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px;"
|
||||
>
|
||||
<template #reference>
|
||||
<div style="display: flex">
|
||||
<div class="user-head">
|
||||
<el-avatar>
|
||||
<el-icon :size="SIZE_ICON_SM()" :color="COLOR_FONT_MAIN()">
|
||||
<icon-pinnacle-user />
|
||||
</el-icon>
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">
|
||||
<span>{{ username }}</span>
|
||||
</div>
|
||||
<div class="user-desc">
|
||||
<span>用户介绍</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div style="display: flex; gap: 10px; flex-direction: column">
|
||||
<div>
|
||||
<el-button @click="profile" style="width: 100%"
|
||||
>个人档案</el-button
|
||||
<template v-for="(route, index) in routes">
|
||||
<el-menu-item
|
||||
v-if="!route.children"
|
||||
:key="index"
|
||||
:index="route.path ?? ''"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click="logout" style="width: 100%">退出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-header>
|
||||
<ElScrollbar v-if="$route.meta.requiresScrollbar">
|
||||
<ElMain class="main-box" :class="{ noPadding: !$route.meta.requiresPadding }">
|
||||
<ElBacktop :right="100" :bottom="100" />
|
||||
<RouterView></RouterView>
|
||||
</ElMain>
|
||||
</ElScrollbar>
|
||||
<ElMain
|
||||
v-else
|
||||
class="main-box"
|
||||
:class="{ noPadding: !$route.meta.requiresPadding }"
|
||||
>
|
||||
<ElBacktop :right="100" :bottom="100" />
|
||||
<RouterView></RouterView>
|
||||
</ElMain>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
<el-icon>
|
||||
<component :is="route.meta.icon" />
|
||||
</el-icon>
|
||||
<template #title>{{ route.meta.title }}</template>
|
||||
</el-menu-item>
|
||||
<el-sub-menu
|
||||
v-if="route.children"
|
||||
:key="index"
|
||||
:index="route.path ?? ''"
|
||||
>
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="route.meta.icon" />
|
||||
</el-icon>
|
||||
<span>{{ route.meta.title }}</span>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="(sub, index) in route.children"
|
||||
:key="index"
|
||||
:index="
|
||||
sub.path
|
||||
? route.path
|
||||
? route.path + '/' + sub.path
|
||||
: ''
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="sub.meta.icon" />
|
||||
</el-icon>
|
||||
<template #title>{{ sub.meta.title }}</template>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header height="56px" class="background-white main-header">
|
||||
<el-badge is-dot>
|
||||
<el-icon
|
||||
:size="SIZE_ICON_MD()"
|
||||
:color="COLOR_PRODUCTION()"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<icon-pinnacle-chat />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
<el-badge is-dot>
|
||||
<el-icon
|
||||
:size="SIZE_ICON_MD()"
|
||||
:color="COLOR_PRODUCTION()"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<icon-pinnacle-notice />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
<el-divider direction="vertical" />
|
||||
<el-popover
|
||||
transition="el-zoom-in-top"
|
||||
popper-style="box-shadow: rgb(14 18 22 / 20%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px;"
|
||||
>
|
||||
<template #reference>
|
||||
<div style="display: flex">
|
||||
<div class="user-head">
|
||||
<el-avatar>
|
||||
<el-icon
|
||||
:size="SIZE_ICON_SM()"
|
||||
:color="COLOR_FONT_MAIN()"
|
||||
>
|
||||
<icon-pinnacle-user />
|
||||
</el-icon>
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">
|
||||
<span>{{ username }}</span>
|
||||
</div>
|
||||
<div class="user-desc">
|
||||
<span>用户介绍</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div style="display: flex; gap: 10px; flex-direction: column">
|
||||
<div>
|
||||
<el-button @click="profile" style="width: 100%"
|
||||
>个人档案</el-button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click="logout" style="width: 100%"
|
||||
>退出</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-header>
|
||||
<ElScrollbar v-if="$route.meta.requiresScrollbar">
|
||||
<ElMain
|
||||
class="main-box"
|
||||
:class="{ noPadding: !$route.meta.requiresPadding }"
|
||||
>
|
||||
<ElBacktop :right="100" :bottom="100" />
|
||||
<RouterView></RouterView>
|
||||
</ElMain>
|
||||
</ElScrollbar>
|
||||
<ElMain
|
||||
v-else
|
||||
class="main-box"
|
||||
:class="{ noPadding: !$route.meta.requiresPadding }"
|
||||
>
|
||||
<ElBacktop :right="100" :bottom="100" />
|
||||
<RouterView></RouterView>
|
||||
</ElMain>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -10,7 +10,7 @@ const infoRouter = {
|
||||
meta: {
|
||||
title: '员工信息管理',
|
||||
requiresMenu: true,
|
||||
requiresScrollbar: false,
|
||||
requiresScrollbar: true,
|
||||
requiresPadding: true
|
||||
}
|
||||
}
|
||||
@@ -19,8 +19,6 @@ const infoRouter = {
|
||||
title: '信息管理',
|
||||
icon: shallowRef(IconPinnacleInfo),
|
||||
requiresMenu: true,
|
||||
requiresScrollbar: false,
|
||||
requiresPadding: true,
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ const powerRouter = {
|
||||
meta: {
|
||||
title: '角色管理',
|
||||
requiresMenu: true,
|
||||
requiresScrollbar: false,
|
||||
requiresScrollbar: true,
|
||||
requiresPadding: true
|
||||
}
|
||||
},
|
||||
@@ -21,7 +21,7 @@ const powerRouter = {
|
||||
meta: {
|
||||
title: '用户组管理',
|
||||
requiresMenu: true,
|
||||
requiresScrollbar: false,
|
||||
requiresScrollbar: true,
|
||||
requiresPadding: true
|
||||
}
|
||||
},
|
||||
@@ -32,7 +32,7 @@ const powerRouter = {
|
||||
meta: {
|
||||
title: '用户管理',
|
||||
requiresMenu: true,
|
||||
requiresScrollbar: false,
|
||||
requiresScrollbar: true,
|
||||
requiresPadding: true
|
||||
}
|
||||
}
|
||||
@@ -41,8 +41,6 @@ const powerRouter = {
|
||||
title: '权限管理',
|
||||
icon: shallowRef(IconPinnaclePower),
|
||||
requiresMenu: true,
|
||||
requiresScrollbar: false,
|
||||
requiresPadding: true,
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user