<template> 
 | 
  <PageLayout v-bind="props"> 
 | 
    <template #navigationBar> 
 | 
      <TransparentNavigationBar :title="title" :is-absolute="false"> 
 | 
        <template #left> 
 | 
          <slot name="left"></slot> 
 | 
        </template> 
 | 
      </TransparentNavigationBar> 
 | 
    </template> 
 | 
    <template #bg> 
 | 
      <img :src="OssAssets.common.CommonPageBg" class="common-page-bg" /> 
 | 
    </template> 
 | 
    <template #default="{ scrollViewHeight }"> 
 | 
      <slot :scrollViewHeight="scrollViewHeight" /> 
 | 
    </template> 
 | 
  </PageLayout> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import PageLayout from './PageLayout.vue'; 
 | 
import TransparentNavigationBar from '../NavigationBar/TransparentNavigationBar.vue'; 
 | 
import _ from 'lodash'; 
 | 
import { OssAssets } from '@/constants'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'PageLayoutWithBg', 
 | 
}); 
 | 
  
 | 
type Props = { 
 | 
  title?: string; 
 | 
}; 
 | 
  
 | 
const props = withDefaults(defineProps<Props>(), {}); 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.common-page-bg { 
 | 
  position: fixed; 
 | 
  z-index: -1; 
 | 
  top: 0; 
 | 
  left: 0; 
 | 
  width: 100%; 
 | 
  height: 516px; 
 | 
  object-fit: cover; 
 | 
} 
 | 
</style> 
 |