feat: UI

wupengfei

2 天以前 758d8056dc3dbc6bf92c298aa3627e66b933b5a0

 apps/h5/src/components/Layout/PageLayout.vue

New file
@@ -0,0 +1,68 @@
<template>
  <div class="page-layout-wrapper">
    <slot v-if="showNavigationBar" name="navigationBar">
      <CommonNavigationBar v-bind="props" />
    </slot>
    <div class="page-layout-scroll-view-wrapper">
      <slot></slot>
    </div>
    <div class="safe-area-bottom"></div>
  </div>
</template>

<script setup lang="ts">
import CommonNavigationBar from '../NavigationBar/CommonNavigationBar.vue';
import { commonNavigationBarProps } from '../NavigationBar/commonNavigationBar';

defineOptions({
  name: 'PageLayout',
});

const props = defineProps({
  ...commonNavigationBarProps,
  hasLinearBg: {
    type: Boolean,
    default: false,
  },
  linearBgHeight: {
    type: Number,
    default: 199,
  },
});
</script>

<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.page-layout-wrapper {
  display: flex;
  height: 100%;
  flex-direction: column;

  .navigation-bar {
    height: 88px;
  }

  .page-layout-scroll-view-wrapper {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;

    :deep() {
      .loading-layout-wrapper {
        display: flex;
        min-height: 0;
        flex: 1;
        flex-direction: column;
      }
    }
  }

  .safe-area-bottom {
    padding-bottom: 20px; /* 默认值 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>