| | |
| | | <template> |
| | | <Portal.Host> |
| | | <div :class="['page-layout-wrapper', { isWeb: isWeb, hasBgColor }]" v-bind="$attrs"> |
| | | <div :class="['page-layout-wrapper', { isWeb: isWeb, hasBgColor }]"> |
| | | <slot v-if="_showNavigationBar" name="navigationBar"> |
| | | <CommonNavigationBar v-bind="_commonNavigationBarProps" /> |
| | | </slot> |
| | | |
| | | <slot name="bg"> |
| | | <div |
| | | v-if="hasLinearBg" |
| | | class="page-layout-linear-bg" |
| | | :style="{ |
| | | height: '100%', |
| | | }" |
| | | ></div> |
| | | </slot> |
| | | |
| | | <div class="page-layout-scroll-view-wrapper" :style="{ height: scrollViewHeight }"> |
| | |
| | | import { isWeb, isInAlipay, isInWeChat } from '@/utils/env'; |
| | | //@ts-ignore |
| | | import { setPageTitle } from '@/utils'; |
| | | import { pageLayoutProps } from './layout'; |
| | | |
| | | defineOptions({ |
| | | name: 'PageLayout', |
| | | inheritAttrs: false, |
| | | }); |
| | | |
| | | const props = defineProps({ |
| | | ...commonNavigationBarProps, |
| | | needAuth: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | useView: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | hasLinearBg: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | linearBgHeight: { |
| | | type: Number, |
| | | default: 388, |
| | | }, |
| | | hasBgColor: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | }); |
| | | const props = defineProps(pageLayoutProps); |
| | | |
| | | setPageTitle(props.title); |
| | | |
| | |
| | | <style lang="scss"> |
| | | @import '@/styles/common.scss'; |
| | | |
| | | .page-layout-container { |
| | | height: 100%; |
| | | position: relative; |
| | | |
| | | .page-layout-wrapper { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: absolute; |
| | | z-index: 100; |
| | | } |
| | | } |
| | | |
| | | .page-layout-wrapper { |
| | | /* background-color: $body-background-color; */ |
| | | |