| 提交 | 用户 | age | ||
| dddda5 | 1 | <template> |
| 6f4bda | 2 | <div |
| X | 3 | :class="[prefixCls, getLayoutContentMode]" |
| 4 | v-loading="getOpenPageLoading && getPageLoading" | |
| 5 | ref="content" | |
| 6 | > | |
| 49fdb6 | 7 | <PageLayout /> |
| 6f4bda | 8 | <BackTop v-if="getUseOpenBackTop" :target="() => content" :visibilityHeight="100" /> |
| dddda5 | 9 | </div> |
| V | 10 | </template> |
| 0cfaa4 | 11 | <script lang="ts" setup> |
| 6f4bda | 12 | import { ref } from 'vue'; |
| X | 13 | import { BackTop } from 'ant-design-vue'; |
| 14 | ||
| 0cfaa4 | 15 | import PageLayout from '@/layouts/page/index.vue'; |
| X | 16 | import { useDesign } from '@/hooks/web/useDesign'; |
| 17 | import { useRootSetting } from '@/hooks/setting/useRootSetting'; | |
| 18 | import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'; | |
| 31ff05 | 19 | import { useContentViewHeight } from './useContentViewHeight'; |
| dddda5 | 20 | |
| 0cfaa4 | 21 | defineOptions({ name: 'LayoutContent' }); |
| 31ff05 | 22 | |
| 0cfaa4 | 23 | const { prefixCls } = useDesign('layout-content'); |
| X | 24 | const { getOpenPageLoading } = useTransitionSetting(); |
| 6f4bda | 25 | const { getLayoutContentMode, getPageLoading, getUseOpenBackTop } = useRootSetting(); |
| 0cfaa4 | 26 | |
| X | 27 | useContentViewHeight(); |
| 6f4bda | 28 | |
| X | 29 | const content = ref(); |
| dddda5 | 30 | </script> |
| V | 31 | <style lang="less"> |
| 32 | @prefix-cls: ~'@{namespace}-layout-content'; | |
| 33 | ||
| 34 | .@{prefix-cls} { | |
| 49fdb6 | 35 | display: flex; |
| X | 36 | position: relative; |
| 37 | flex-direction: column; | |
| 3f65ba | 38 | flex-grow: 1; |
| X | 39 | width: 100%; |
| 40 | height: 0; | |
| dddda5 | 41 | min-height: 0; |
| 3f65ba | 42 | overflow: auto; |
| ba2415 | 43 | |
| 6af828 | 44 | // begin: 下面这块代码 在我的项目打包后在比较宽的屏幕(2K 31 寸)有显示 bug 有偶发性 清缓存首次进入会出现 , 刷新就没了, 这里为什么要指定宽度 ? |
| dddda5 | 45 | &.fixed { |
| V | 46 | width: 1200px; |
| 47 | margin: 0 auto; | |
| 48 | } | |
| 6af828 | 49 | // end |
| dddda5 | 50 | |
| 27e50b | 51 | &-loading { |
| dddda5 | 52 | position: absolute; |
| V | 53 | z-index: @page-loading-z-index; |
| ba2415 | 54 | top: 200px; |
| dddda5 | 55 | } |
| V | 56 | } |
| 57 | </style> | |
