|
|
|
@ -7,15 +7,11 @@
|
|
|
|
|
<div |
|
|
|
|
:class="`${prefixCls}__left flex-1 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`" |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<!-- 左边的背景图 + 欢迎语 --> |
|
|
|
|
<div class="h-[calc(100%-50px)] flex items-center justify-center"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<div class="h-[calc(100%-50px)] flex items-center justify-center"> </div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
class="relative flex-1 bg-#fff bg-opacity-90 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto" |
|
|
|
|
class="relative flex-1 bg-#fff bg-opacity-90 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto" |
|
|
|
|
> |
|
|
|
|
<!-- 右上角的主题、语言选择 --> |
|
|
|
|
<!-- <div |
|
|
|
@ -29,15 +25,21 @@
|
|
|
|
|
</div> |
|
|
|
|
</div> --> |
|
|
|
|
<!-- 右边的登录界面 --> |
|
|
|
|
<Transition appear enter-active-class="animate__animated animate__bounceInRight" class="rightLogin"> |
|
|
|
|
<Transition |
|
|
|
|
appear |
|
|
|
|
enter-active-class="animate__animated animate__bounceInRight" |
|
|
|
|
class="rightLogin" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px" |
|
|
|
|
> |
|
|
|
|
<!-- 账号登录 --> |
|
|
|
|
<LoginForm v-if="isIpAccess" class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> |
|
|
|
|
<!-- 二维码登录 --> |
|
|
|
|
<QrCodeForm v-else class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> |
|
|
|
|
|
|
|
|
|
<!-- 账号登录 --> |
|
|
|
|
<LoginForm |
|
|
|
|
v-if="isIpAccess" |
|
|
|
|
class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" |
|
|
|
|
/> |
|
|
|
|
<!-- 二维码登录 --> |
|
|
|
|
<QrCodeForm v-else class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> |
|
|
|
|
</div> |
|
|
|
|
</Transition> |
|
|
|
|
</div> |
|
|
|
@ -45,42 +47,37 @@
|
|
|
|
|
</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, ForgetPasswordForm } from './components' |
|
|
|
|
import { |
|
|
|
|
LoginForm, |
|
|
|
|
QrCodeForm, |
|
|
|
|
} from './components' |
|
|
|
|
|
|
|
|
|
defineOptions({ name: 'Login' }) |
|
|
|
|
const isIpAccess = ref(false) |
|
|
|
|
onMounted(() => { |
|
|
|
|
const hostname = window.location.hostname |
|
|
|
|
if(hostname == 'localhost'){ |
|
|
|
|
isIpAccess.value = true; |
|
|
|
|
} |
|
|
|
|
else{ |
|
|
|
|
isIpAccess.value = /^(\d{1,3}\.){3}\d{1,3}$/.test(hostname) |
|
|
|
|
} |
|
|
|
|
const hostname = window.location.hostname |
|
|
|
|
if (hostname == 'localhost') { |
|
|
|
|
isIpAccess.value = true |
|
|
|
|
} else { |
|
|
|
|
isIpAccess.value = /^(\d{1,3}\.){3}\d{1,3}$/.test(hostname) |
|
|
|
|
} |
|
|
|
|
// 判断是否为IP地址访问 |
|
|
|
|
}) |
|
|
|
|
const { t } = useI18n() |
|
|
|
|
const appStore = useAppStore() |
|
|
|
|
const { getPrefixCls } = useDesign() |
|
|
|
|
const prefixCls = getPrefixCls('login') |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
|
|
.loginBgCls{ |
|
|
|
|
.loginBgCls { |
|
|
|
|
background-image: url('@/assets/imgs/screen/login-left.jpg'); |
|
|
|
|
background-size: cover; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
} |
|
|
|
|
.rightLogin{ |
|
|
|
|
.rightLogin { |
|
|
|
|
transition: all 1s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -116,4 +113,4 @@ $prefix-cls: #{$namespace}-login;
|
|
|
|
|
background-color: var(--login-bg-color); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</style> |
|
|
|
|