<template> 
 | 
  <PageLayout :needAuth="false" class="login-page-layout"> 
 | 
    <template #navigationBar> 
 | 
      <TransparentNavigationBar :title="title" :is-absolute="false"></TransparentNavigationBar> 
 | 
    </template> 
 | 
    <template #bg> 
 | 
      <img :src="OssAssets.login.AuthBg" class="authorization-page-auth" /> 
 | 
    </template> 
 | 
  
 | 
    <div class="authorization-page-title">欢迎使用灵工达</div> 
 | 
  
 | 
    <slot></slot> 
 | 
  </PageLayout> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { PageLayout, TransparentNavigationBar } from '@/components'; 
 | 
import { OssAssets } from '@12333/constants'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'LoginPageLayout', 
 | 
}); 
 | 
  
 | 
type Props = { 
 | 
  title?: string; 
 | 
}; 
 | 
  
 | 
const props = withDefaults(defineProps<Props>(), { 
 | 
  title: '登录', 
 | 
}); 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.login-page-layout { 
 | 
  .authorization-page-title { 
 | 
    font-size: 60px; 
 | 
    color: boleGetCssVar('text-color', 'primary'); 
 | 
    font-weight: bold; 
 | 
    text-align: center; 
 | 
    margin-bottom: 108px; 
 | 
    margin-top: 136px; 
 | 
    line-height: 84px; 
 | 
    @include ellipsis; 
 | 
  } 
 | 
} 
 | 
  
 | 
.authorization-page-auth { 
 | 
  position: fixed; 
 | 
  z-index: -1; 
 | 
  top: 0; 
 | 
  left: 0; 
 | 
  width: 750px; 
 | 
  height: 1624px; 
 | 
  object-fit: cover; 
 | 
} 
 | 
</style> 
 |