feat: 升级vue3版本和router版本，主框架调整，页面样式统一
This commit is contained in:
rd
@ -17,7 +17,6 @@ const route = useRoute();
|
||||
|
||||
useResponsive(true);
|
||||
const navbarHeight = `52px`;
|
||||
const navbar = computed(() => appStore.navbar);
|
||||
const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
|
||||
const hideMenu = computed(() => appStore.hideMenu);
|
||||
|
||||
@ -33,8 +32,7 @@ const showSidebar = computed(() => {
|
||||
const paddingStyle = computed(() => {
|
||||
const paddingLeft =
|
||||
showSidebar.value && renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
|
||||
const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
|
||||
return { ...paddingLeft, ...paddingTop };
|
||||
return { ...paddingLeft };
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
@ -61,114 +59,100 @@ provide('toggleDrawerMenu', () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout :class="['layout', { mobile: appStore.hideMenu }]" class="h-100vh flex flex-col w-full">
|
||||
<a-layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
|
||||
<JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
|
||||
<div v-if="navbar" class="layout-navbar">
|
||||
<section class="layout-navbar-wrap">
|
||||
<base-navbar />
|
||||
</div>
|
||||
<a-layout>
|
||||
<a-layout>
|
||||
<a-layout-sider
|
||||
v-if="renderMenu && showSidebar"
|
||||
v-show="!hideMenu"
|
||||
class="layout-sider"
|
||||
breakpoint="xl"
|
||||
:collapsed="collapsed"
|
||||
:width="menuWidth"
|
||||
:style="{ paddingTop: navbar ? '72px' : '' }"
|
||||
collapsible
|
||||
hide-trigger
|
||||
@collapse="setCollapsed"
|
||||
>
|
||||
<div class="menu-wrapper">
|
||||
<base-menu />
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
<a-drawer
|
||||
v-if="hideMenu"
|
||||
:visible="drawerVisible"
|
||||
placement="left"
|
||||
:footer="false"
|
||||
mask-closable
|
||||
:closable="false"
|
||||
@cancel="drawerCancel"
|
||||
>
|
||||
</section>
|
||||
<a-layout class="flex layout-content-wrap">
|
||||
<a-layout-sider
|
||||
v-if="renderMenu && showSidebar"
|
||||
v-show="!hideMenu"
|
||||
class="layout-sider"
|
||||
breakpoint="xl"
|
||||
:collapsed="collapsed"
|
||||
:width="menuWidth"
|
||||
collapsible
|
||||
hide-trigger
|
||||
@collapse="setCollapsed"
|
||||
>
|
||||
<section class="menu-wrapper">
|
||||
<base-menu />
|
||||
</a-drawer>
|
||||
<a-layout class="layout-content" :style="paddingStyle">
|
||||
<base-tab-bar v-if="appStore.tabBar" />
|
||||
<a-layout-content class="px-5 py-5">
|
||||
<!-- <base-breadcrumb /> -->
|
||||
<layout-page />
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</section>
|
||||
</a-layout-sider>
|
||||
<a-drawer
|
||||
v-if="hideMenu"
|
||||
:visible="drawerVisible"
|
||||
placement="left"
|
||||
:footer="false"
|
||||
mask-closable
|
||||
:closable="false"
|
||||
@cancel="drawerCancel"
|
||||
>
|
||||
<base-menu />
|
||||
</a-drawer>
|
||||
<a-layout class="flex-1 layout-content">
|
||||
<a-layout-content class="px-24px py-16px">
|
||||
<layout-page />
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$layout-max-width: 1100px;
|
||||
|
||||
.layout {
|
||||
.layout-navbar {
|
||||
position: fixed;
|
||||
.layout-wrap {
|
||||
min-width: 1200px;
|
||||
.layout-navbar-wrap {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: $navbar-height;
|
||||
}
|
||||
.layout-sider {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
.layout-content-wrap {
|
||||
height: 100%;
|
||||
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: -1px;
|
||||
// display: block;
|
||||
// width: 1px;
|
||||
// height: 100%;
|
||||
// background-color: var(--color-border);
|
||||
// content: '';
|
||||
// }
|
||||
> :deep(.arco-layout-sider-children) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
.menu-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
:deep(.arco-menu) {
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
min-height: calc(100vh - $navbar-height);
|
||||
.layout-sider {
|
||||
position: sticky;
|
||||
top: $navbar-height;
|
||||
left: 0;
|
||||
// height: 100%;
|
||||
height: calc(100vh - $navbar-height);
|
||||
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
> :deep(.arco-layout-sider-children) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 4px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 7px;
|
||||
background-color: var(--color-text-4);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-text-3);
|
||||
.menu-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
:deep(.arco-menu) {
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 4px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 7px;
|
||||
background-color: var(--color-text-4);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-text-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-content {
|
||||
min-width: 1366px;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
padding-top: $navbar-height;
|
||||
.layout-content {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: auto;
|
||||
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user