zhengyiming
2 天以前 e662aa7d894a0b259dc1816e79514c1f0d38da9f
apps/taro/src/components/Layout/PageLayout.vue
@@ -1,18 +1,8 @@
<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 }">
@@ -48,31 +38,14 @@
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);
@@ -118,8 +91,24 @@
<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;
  /* background-color: $body-background-color; */
  &.hasBgColor {
    background-color: $body-background-color;
  }
  .page-layout-scroll-view-wrapper {
    display: flex;
@@ -136,13 +125,7 @@
    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;
  }