zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: scrollbar is obscured (#3331)

This commit is contained in:
xachary 2023-11-24 00:04:34 +08:00 committed by GitHub
parent 42e9de50a2
commit 3f65baf503
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/design/index.less
View File

@ -23,8 +23,7 @@ body {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: visible; overflow: hidden;
overflow-x: hidden;
&.color-weak { &.color-weak {
filter: invert(80%); filter: invert(80%);

12
src/layouts/default/content/index.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading"> <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
<PageLayout /> <div :class="[prefixClsScroll]">
<PageLayout />
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -13,6 +15,7 @@
defineOptions({ name: 'LayoutContent' }); defineOptions({ name: 'LayoutContent' });
const { prefixCls } = useDesign('layout-content'); const { prefixCls } = useDesign('layout-content');
const { prefixCls: prefixClsScroll } = useDesign('layout-content-scroll');
const { getOpenPageLoading } = useTransitionSetting(); const { getOpenPageLoading } = useTransitionSetting();
const { getLayoutContentMode, getPageLoading } = useRootSetting(); const { getLayoutContentMode, getPageLoading } = useRootSetting();
@ -20,11 +23,14 @@
</script> </script>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-layout-content'; @prefix-cls: ~'@{namespace}-layout-content';
@prefix-cls-scroll: ~'@{namespace}-layout-content-scroll';
.@{prefix-cls} { .@{prefix-cls} {
position: relative; flex-grow: 1;
flex: 1 1 auto; width: 100%;
height: 0;
min-height: 0; min-height: 0;
overflow: auto;
// begin: 下面这块代码 在我的项目打包后在比较宽的屏幕(2K 31 寸)有显示 bug 有偶发性 清缓存首次进入会出现 , 刷新就没了, 这里为什么要指定宽度 ? // begin: 下面这块代码 在我的项目打包后在比较宽的屏幕(2K 31 寸)有显示 bug 有偶发性 清缓存首次进入会出现 , 刷新就没了, 这里为什么要指定宽度 ?
&.fixed { &.fixed {