<template>
|
<div class="bei">
|
<div class="BeiArea">
|
<!-- 左侧图片 -->
|
<div class="Left-img" >
|
<img src="@/assets/imgs/bei6-1.png" alt=""/>
|
</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%;
|
height: 100%;
|
background-color: #061C43;
|
}
|
.bei .BeiArea{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
.bei .BeiArea .form-box{
|
width: 30%;
|
padding: 20px;
|
box-sizing: border-box;
|
background: #fff;
|
}
|
|
.bei .BeiArea .Left-img{
|
width: 677px;
|
}
|
|
.bei .BeiArea .Left-img img{
|
width: 100%;
|
}
|
|
@media screen and ( max-width: 1300px ) {
|
|
.form-box{
|
width: 80%;
|
}
|
|
.Left-img{
|
display: none;
|
}
|
|
}
|
|
</style>
|
