<template>
|
<div class="bei">
|
<div class="BeiArea">
|
<!-- 左侧图片 -->
|
<div class="Left-Area">
|
<div class="TitleText">
|
<h1>数字人</h1>
|
<h1>智能交互平台</h1>
|
</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>
|
.bei .BeiArea .form-box > .el-form {
|
height: 100%;
|
}
|
.bei .BeiArea .form-box > .el-form > div {
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
</style>
|
|
<style scoped>
|
* {
|
margin: 0;
|
padding: 0;
|
}
|
|
.bei {
|
width: 100%;
|
min-height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.bei .BeiArea {
|
width: auto;
|
max-width: 100%;
|
height: auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 8px;
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
overflow: hidden;
|
}
|
|
.bei .BeiArea .Left-Area {
|
width: 420px;
|
height: 450px;
|
display: flex;
|
justify-content: center;
|
align-content: center;
|
background: linear-gradient(to bottom right, #1b6ac2, #57b5f2);
|
}
|
|
.bei .BeiArea .Left-Area .TitleText {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.bei .BeiArea .Left-Area .TitleText h1 {
|
color: #fff;
|
font-size: 2.6rem;
|
text-align: center;
|
}
|
|
.bei .BeiArea .Left-Area .TitleText h1:first-of-type{
|
margin-bottom: 20px;
|
}
|
|
.bei .BeiArea .form-box {
|
box-sizing: border-box;
|
background: #fff;
|
/* width: calc(400px + (100vw - 1900px) * 0.5); */
|
width: 420px;
|
height: 450px;
|
padding: 20px 40px;
|
}
|
|
|
/* @media ( max-width:1300px ) and (min-width:1000px) {
|
.bei .BeiArea .form-box{
|
width: 45%;
|
height: 90vh;
|
}
|
.bei .BeiArea .Left-Area{
|
width: 45%;
|
height: 90vh;
|
}
|
} */
|
|
/* @media ( max-width:1000px ){
|
.bei .BeiArea .form-box{
|
width: 50%;
|
height: 100vh;
|
}
|
.bei .BeiArea .Left-Area{
|
width: 50%;
|
height: 100vh;
|
}
|
} */
|
|
@media ( max-width:1550px ){
|
.bei .BeiArea .Left-Area .TitleText h1{
|
font-size: 2.6rem !important;
|
}
|
}
|
|
@media ( max-width:1050px ){
|
.bei .BeiArea .Left-Area .TitleText h1{
|
font-size: 2.6rem !important;
|
}
|
}
|
|
</style>
|
