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