<template>
|
<div class="bei">
|
<div class="BeiArea">
|
<!-- 左侧图片 -->
|
<div class="Left-img">
|
<div class="TitleText" >
|
<text> 数字人 </text>智能交互平台
|
</div>
|
</div>
|
<!-- 右边的登录界面 -->
|
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
|
<div class="form-box">
|
<!-- 账号登录 -->
|
<LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
|
<!-- 手机登录 -->
|
<MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
|
<!-- 二维码登录 -->
|
<QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
|
<!-- 注册 -->
|
<RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
|
<!-- 三方登录 -->
|
<SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
|
</div>
|
</Transition>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { underlineToHump } from '@/utils'
|
import { useDesign } from '@/hooks/web/useDesign'
|
import { useAppStore } from '@/store/modules/app'
|
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
|
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
|
|
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
|
import * as ConfigApi from "@/api/infra/config";
|
|
defineOptions({ name: 'Login' })
|
|
const { t } = useI18n()
|
const appStore = useAppStore()
|
const { getPrefixCls } = useDesign()
|
const prefixCls = getPrefixCls('login')
|
const passwordLoginSwitch = ref(undefined)
|
|
|
onMounted(async ()=>{
|
const data = await ConfigApi.getConfigKey('password-login-switch')
|
if (data && data.length > 0) {
|
passwordLoginSwitch.value = data
|
}
|
})
|
</script>
|
<style scoped>
|
*{
|
margin: 0;
|
padding: 0;
|
}
|
.bei{
|
width: 100%;
|
min-height: 100%;
|
background-color: #000;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
overflow-y: scroll;
|
}
|
.bei .BeiArea{
|
width: 100%;
|
height: 100vh;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-color: #000a25;
|
}
|
.bei .BeiArea .form-box{
|
/* width: 25%; */
|
width: 400px;
|
margin-top: -36px;
|
padding: 70px 30px;
|
box-sizing: border-box;
|
background: #fff;
|
margin-left: 300px;
|
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
|
}
|
.bei .BeiArea .Left-img{
|
width: 729px;
|
height: 655px;
|
margin-top: 138px;
|
margin-left: -74px;
|
background-image:url( "@/assets/imgs/bei3-1.png" );
|
/* background-size: 100%; */
|
background-size: contain;
|
background-repeat: no-repeat;
|
background-position: center center;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.bei .BeiArea .Left-img .TitleText{
|
margin-top: calc( -85% );
|
margin-left: -60px;
|
color: #fff;
|
width: 100%;
|
text-align: left;
|
font-size: 48px;
|
padding-left: 10%;
|
box-sizing: border-box;
|
}
|
.bei .BeiArea .Left-img .TitleText text{
|
color: #2d84fa;
|
}
|
|
@media screen and ( max-width: 1300px ) {
|
|
.form-box{
|
width: 50% !important;
|
margin: 0 auto !important;
|
}
|
|
.Left-img{
|
display: none !important;
|
}
|
|
}
|
|
@media (max-width:1650px) and ( min-width: 1300px ) {
|
.bei .BeiArea .Left-img{
|
margin-left: 0;
|
}
|
}
|
|
@media (max-height:500px){
|
.bei .BeiArea{
|
align-items: flex-start;
|
}
|
}
|
|
|
</style>
|
