| | |
| | | <template> |
| | | <Portal.Host> |
| | | <div :class="['page-layout-wrapper', { isWeb: isWeb }]" 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: Taro.pxTransform(props.linearBgHeight), |
| | | }" |
| | | ></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, |
| | | }, |
| | | }); |
| | | 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; */ |
| | | |
| | | &.hasBgColor { |
| | | background-color: $body-background-color; |
| | | } |
| | | |
| | | .page-layout-scroll-view-wrapper { |
| | | display: flex; |
| | |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | background: linear-gradient( |
| | | 180deg, |
| | | boleGetCssVar('color', 'primary') 0%, |
| | | #5a86f6 56%, |
| | | #f9f9fb 100% |
| | | ); |
| | | filter: blur(0px); |
| | | background: linear-gradient(180deg, #7cd0ff 0%, rgba(255, 255, 255, 0) 43%, #ffffff 100%); |
| | | border-radius: 0px 0px 20px 20px; |
| | | } |
| | | |