xiangyuan-app/src/components/demo/DemoPage.vue

<script setup lang="ts">
import Text from '../basic/Text.vue';
import CommonRoot from '../dialog/CommonRoot.vue';
import FlexCol from '../layout/FlexCol.vue';
import StatusBarSpace from '../layout/space/StatusBarSpace.vue';
import NavBar from '../nav/NavBar.vue';

const props = defineProps<{	
  title?: string,
  desc?: string,
  isHome?: boolean,
}>();

</script>

<template>
  <CommonRoot>
    <FlexCol innerClass="nana-demo-page" backgroundColor="background.page">
      <StatusBarSpace />
      <NavBar :title="title" leftButton="back" :showLeftButton="!isHome" />
      <view v-if="title || desc" class="header">
        <Text color="primary" fontConfig="h3" :text="title" />
        <Text v-if="desc" color="text.second" :text="desc" />
      </view>
      <slot />
    </FlexCol>
  </CommonRoot>
</template>

<style lang="scss">
.nana-demo-page {
  /* #ifdef H5 */
  min-height: calc(100vh - 44px - env(safe-area-inset-top));
  /* #endif */
  /* #ifndef H5 */
  min-height: calc(100vh - 44px);
  /* #endif */

  & > .header {
    display: flex;
    flex-direction: column;
    margin: 40rpx 40rpx;
    flex-shrink: 0;
  }
}
</style>