ucard-person-app-front/components/cwg-page-wrapper.vue

<template>
  <view class="page-wrapper">
    <cwg-progress />
    <cwg-header v-if="!isHeaderFixed" />
    <view :style="{ height: `calc(${statusBarHeight}px + 60px)` }" />
    <slot></slot>
    <view :style="{ height: isTabBarPage ? '60px' : '0px' }" />
    <cwg-tab-bar v-model:isTabBarPage="isTabBarPage" />
  </view>
</template>

<script setup>
import { ref, onMounted, computed, } from "vue";
import { onLoad, onShow } from '@dcloudio/uni-app'
import { updateRoute } from '@/hooks/useRoute'
import useGlobalStore from '@/stores/use-global-store'
const props = defineProps({
  isHeaderFixed: {
    type: Boolean,
    default: false
  }
})
const globalStore = useGlobalStore()
const statusBarHeight = computed(() => globalStore.statusBarHeight);
const isTabBarPage = ref(false)
onLoad(() => {
  updateRoute()
})

onShow(() => {
  updateRoute()
})

</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.page-wrapper {
  padding: 0 px2rpx(24) px2rpx(0) px2rpx(24);
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0);
}
</style>