feat: 内容区域最小宽度滚动

This commit is contained in:
baiqi 2023-06-27 09:59:22 +08:00 committed by 刘瑞斌
parent 28525002f6
commit b73f2b3270
1 changed files with 13 additions and 7 deletions

View File

@ -35,11 +35,18 @@
</a-drawer> </a-drawer>
<a-layout class="layout-content" :style="paddingStyle"> <a-layout class="layout-content" :style="paddingStyle">
<a-spin :loading="appStore.loading" :tip="appStore.loadingTip"> <a-spin :loading="appStore.loading" :tip="appStore.loadingTip">
<a-scrollbar
:style="{
overflow: 'auto',
width: `calc(100vw - ${menuWidth}px)`,
}"
>
<TabBar v-if="appStore.tabBar" /> <TabBar v-if="appStore.tabBar" />
<a-layout-content> <a-layout-content>
<PageLayout /> <PageLayout />
</a-layout-content> </a-layout-content>
<Footer v-if="footer" /> <Footer v-if="footer" />
</a-scrollbar>
</a-spin> </a-spin>
</a-layout> </a-layout>
</a-layout> </a-layout>
@ -56,7 +63,6 @@
import Footer from '@/components/pure/footer/index.vue'; import Footer from '@/components/pure/footer/index.vue';
import TabBar from '@/components/pure/tab-bar/index.vue'; import TabBar from '@/components/pure/tab-bar/index.vue';
import usePermission from '@/hooks/usePermission'; import usePermission from '@/hooks/usePermission';
import useResponsive from '@/hooks/useResponsive';
import PageLayout from './page-layout.vue'; import PageLayout from './page-layout.vue';
const isInit = ref(false); const isInit = ref(false);
@ -65,7 +71,6 @@
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const permission = usePermission(); const permission = usePermission();
useResponsive(true);
const navbarHeight = `56px`; const navbarHeight = `56px`;
const navbar = computed(() => appStore.navbar); const navbar = computed(() => appStore.navbar);
const renderMenu = computed(() => appStore.menu); const renderMenu = computed(() => appStore.menu);
@ -164,6 +169,7 @@
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
.arco-layout-content { .arco-layout-content {
padding: 16px 16px 16px 0; padding: 16px 16px 16px 0;
min-width: 1000px;
} }
} }
</style> </style>