test/Jpom
1
0
Fork 0
mirror of https://gitee.com/dromara/Jpom.git synced 2024-12-02 11:58:01 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat: layout 中 sider 固定在左侧

Browse Source
This commit is contained in:
zhaozhongyang 2024-01-29 16:52:28 +08:00
parent 4e5cd1fd61
commit d51011336a
1 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web-vue/src/pages/layout/default-index.vue
View File

@ -1,17 +1,23 @@
<template>
<a-layout id="app-layout">
<a-layout-sider class="sider" :theme="menuTheme" v-model:collapsed="collapsed" :trigger="null" collapsible>
<a-tooltip placement="right" title="点击可以折叠左侧菜单栏">
<div
class="logo"
@click="changeCollapsed()"
:style="`color:${menuTheme === 'light' && theme === 'light' ? '#000' : '#fff'}`"
>
<img :src="logoUrl || defaultLogo" alt="logo" />
{{ !collapsed ? subTitle : '' }}
<a-layout-sider :theme="menuTheme" v-model:collapsed="collapsed" :trigger="null" collapsible>
<a-layout-sider class="sider" :theme="menuTheme" v-model:collapsed="collapsed" :trigger="null" collapsible>
<div class="sider-content">
<a-tooltip placement="right" title="点击可以折叠左侧菜单栏">
<div
class="logo"
@click="changeCollapsed()"
:style="`color:${menuTheme === 'light' && theme === 'light' ? '#000' : '#fff'}`"
>
<img :src="logoUrl || defaultLogo" alt="logo" />
{{ !collapsed ? subTitle : '' }}
</div>
</a-tooltip>
<div class="sider-menu">
<side-menu :mode="mode" :theme="menuTheme" />
</div>
</div>
</a-tooltip>
<side-menu :mode="mode" :theme="menuTheme" />
</a-layout-sider>
</a-layout-sider>
<a-layout>
<div class="app-header" :style="`background-color:${theme === 'light' ? '#fff' : ''}`">
@ -135,6 +141,7 @@ const changeCollapsed = () => {
color: #1890ff;
}
#app-layout .logo {
flex-shrink: 0;
width: 100%;
cursor: pointer;
height: 32px;
@ -160,6 +167,19 @@ const changeCollapsed = () => {
.sider {
border-inline-end: 1px solid rgba(5, 5, 5, 0.06);
position: fixed;
left: 0;
top: 0;
bottom: 0;
}
.sider-content {
display: flex;
flex-direction: column;
height: 100vh;
}
.sider-menu {
flex: 1;
overflow-y: auto;
}
.layout-content {
padding: 15px;