manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/components/layout/Page.vue

<template>
    <div :class="`page ${!props.title? 'page-no-title':''} ${styleReset}`">
        <van-nav-bar class="header"
                     v-bind:title="props.title"
                     v-if="showHeader"
                     :border="!!props.title"
                     :style="`height:${usePxToVwView(headerHeight)}`">
            <template v-slot:left>
                <!-- <van-icon @click="goBack" name="revoke" size="1.29rem" color="#000000" class="font-bold" v-if="routerStore.currentPages?.length>1"/> -->
                <img src="/src/assets/image/back.png" @click="goBack" class="headerBack" v-if="routerStore.currentPages?.length>1">
                <slot name="headerLeft"></slot>
            </template>
            <template v-slot:title>
                <span v-if="props.title" class="text-size-large">{{ props.title }}</span>
                <slot v-else name="title"></slot>
            </template>
            <template v-slot:right>
                <slot name="headerRight"></slot>
            </template>
        </van-nav-bar>
        <slot name="top"></slot>
        <div class="body">
            <slot name="body"></slot>
        </div>
        <slot name="footer"></slot>
    </div>
</template>

<script setup>
import useRouterStore from "@/store/useRouterStore.js";
import usePxToVwView from "@hooks/usePxTransform.js";

const routerStore = useRouterStore();

/**
 * @description 组件参数
 * */
const props = defineProps({
    /**
     * @property showHeader {Boolean} 是否显示header
     * @desc header 页面顶部标题
     * */
    showHeader: {
        type: Boolean,
        default: true
    },
    /**
     * @property headerHeight {Number || String} 页面顶部标题高度
     * */
    headerHeight: {
        type: [String, Number],
        default: 44
    },
    /**
     * @property headerHeight {String} 外盒子样式重置
     * */
    styleReset: {
      type: String,
      default: ''
    },
    /**
     * @property title {String} 页面顶部标题
     * */
    title: String,
});

const goBack = ()=>{
    history.back();
}

</script>

<style lang="scss" scoped>
.headerBack {
  width: 18px;
  height: 18px;
}

.page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 14px;
    color: #333333;
    background: #F8F8F8;
}

.body {
  height: 100%;
  flex: 1;
  overflow-x: auto;
}

.no-data, .loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-loading-complete {
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
}

.page-no-title {
  .header {

    .back {
      color: #ffffff;
    }
  }
}
:deep(.van-nav-bar__content) {
  height: 100% !important;
}

.headerClass {
  :deep(.van-nav-bar__content) {
    background: $themeColor;
  }
}

.headerNoBack {
  :deep(.van-nav-bar) {
    background: none !important;
  }
}
</style>