登陆页面更改
This commit is contained in:
XaoLi717
parent
99c18849ea
commit
40e439b1e5
@ -61,7 +61,9 @@
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.12.0",
|
||||
"steady-xml": "^0.1.0",
|
||||
"three": "^0.126.0",
|
||||
"url": "^0.11.3",
|
||||
"vanta": "^0.5.24",
|
||||
"video.js": "^7.21.5",
|
||||
"vue": "3.4.21",
|
||||
"vue-dompurify-html": "^4.1.4",
|
||||
@ -83,6 +85,7 @@
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"@types/qs": "^6.9.12",
|
||||
"@types/three": "^0.126.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
"@typescript-eslint/parser": "^7.1.0",
|
||||
"@unocss/transformer-variant-group": "^0.58.5",
|
||||
|
||||
@ -1,65 +1,100 @@
|
||||
<template>
|
||||
<div
|
||||
:class="prefixCls"
|
||||
class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
|
||||
>
|
||||
<div class="relative mx-auto h-full flex">
|
||||
<div
|
||||
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
|
||||
>
|
||||
<!-- 左上角的 logo + 系统标题 -->
|
||||
<div class="relative flex items-center text-white">
|
||||
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
|
||||
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
|
||||
</div>
|
||||
<!-- 左边的背景图 + 欢迎语 -->
|
||||
<div class="h-[calc(100%-60px)] flex items-center justify-center">
|
||||
<TransitionGroup
|
||||
appear
|
||||
enter-active-class="animate__animated animate__bounceInLeft"
|
||||
tag="div"
|
||||
>
|
||||
<img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
|
||||
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
|
||||
<div key="3" class="mt-5 text-14px font-normal text-white">
|
||||
{{ t('login.message') }}
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
<!-- <div-->
|
||||
<!-- :class="prefixCls"-->
|
||||
<!-- class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="relative mx-auto h-full flex">-->
|
||||
<!-- <div-->
|
||||
<!-- :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"-->
|
||||
<!-- >-->
|
||||
<!-- <!– 左上角的 logo + 系统标题 –>-->
|
||||
<!-- <div class="relative flex items-center text-white">-->
|
||||
<!-- <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />-->
|
||||
<!-- <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– 左边的背景图 + 欢迎语 –>-->
|
||||
<!-- <div class="h-[calc(100%-60px)] flex items-center justify-center">-->
|
||||
<!-- <TransitionGroup-->
|
||||
<!-- appear-->
|
||||
<!-- enter-active-class="animate__animated animate__bounceInLeft"-->
|
||||
<!-- tag="div"-->
|
||||
<!-- >-->
|
||||
<!-- <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />-->
|
||||
<!-- <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>-->
|
||||
<!-- <div key="3" class="mt-5 text-14px font-normal text-white">-->
|
||||
<!-- {{ t('login.message') }}-->
|
||||
<!-- </div>-->
|
||||
<!-- </TransitionGroup>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px"-->
|
||||
<!-- >-->
|
||||
<!-- <!– 右上角的主题、语言选择 –>-->
|
||||
<!-- <div-->
|
||||
<!-- class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="flex items-center at-2xl:hidden at-xl:hidden">-->
|
||||
<!-- <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />-->
|
||||
<!-- <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="flex items-center justify-end space-x-10px">-->
|
||||
<!-- <ThemeSwitch />-->
|
||||
<!-- <LocaleDropdown class="dark:text-white lt-xl:text-white" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– 右边的登录界面 –>-->
|
||||
<!-- <Transition appear enter-active-class="animate__animated animate__bounceInRight">-->
|
||||
<!-- <div-->
|
||||
<!-- class="m-auto h-full 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 class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
|
||||
<!-- <!– 手机登录 –>-->
|
||||
<!-- <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
|
||||
<!-- <!– 二维码登录 –>-->
|
||||
<!-- <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
|
||||
<!-- <!– 注册 –>-->
|
||||
<!-- <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
|
||||
<!-- <!– 三方登录 –>-->
|
||||
<!-- <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </Transition>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div ref="vanTaRef" style="height: 100vh; width: 100vw; position: absolute; top: 0; left: 0; overflow: hidden;">
|
||||
<!-- 右上角的主题、语言选择 -->
|
||||
<div
|
||||
class="flex items-center justify-between"
|
||||
style="color: var(--el-text-color-primary);"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img alt="" class="mr-10px h-48px w-48px" src="../../assets/imgs/logo.png" />
|
||||
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
|
||||
</div>
|
||||
<div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
|
||||
<!-- 右上角的主题、语言选择 -->
|
||||
<div
|
||||
class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
|
||||
>
|
||||
<div class="flex items-center at-2xl:hidden at-xl:hidden">
|
||||
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
|
||||
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-end space-x-10px">
|
||||
<ThemeSwitch />
|
||||
<LocaleDropdown class="dark:text-white lt-xl:text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边的登录界面 -->
|
||||
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
|
||||
<div
|
||||
class="m-auto h-full 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 class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 手机登录 -->
|
||||
<MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 二维码登录 -->
|
||||
<QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 注册 -->
|
||||
<RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 三方登录 -->
|
||||
<SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
</div>
|
||||
</Transition>
|
||||
<div class="flex items-center justify-end space-x-10px h-48px">
|
||||
<ThemeSwitch v-model="isDark"/>
|
||||
<LocaleDropdown />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边的登录界面 -->
|
||||
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
|
||||
<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 class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 手机登录 -->
|
||||
<MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 二维码登录 -->
|
||||
<QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 注册 -->
|
||||
<RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
<!-- 三方登录 -->
|
||||
<SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@ -71,6 +106,8 @@ import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
|
||||
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
|
||||
|
||||
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
|
||||
import * as THREE from 'three';
|
||||
import NET from 'vanta/src/vanta.net';
|
||||
|
||||
defineOptions({ name: 'Login' })
|
||||
|
||||
@ -78,6 +115,46 @@ const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
const { getPrefixCls } = useDesign()
|
||||
const prefixCls = getPrefixCls('login')
|
||||
const vanTaRef = ref<HTMLDivElement | null>(null);
|
||||
const vanTaEffect = ref<any>(null);
|
||||
//获取当前主图
|
||||
const isDark = ref(appStore.getIsDark)
|
||||
// 创建 VanTa 效果的函数
|
||||
const createVaTaEffect = () => {
|
||||
if (vanTaRef.value) {
|
||||
vanTaEffect.value = NET({
|
||||
el: vanTaRef.value,
|
||||
THREE: THREE,
|
||||
color: isDark.value ? 0xf8f8f8 : 0x2c8459,
|
||||
backgroundColor: isDark.value ? 0x707070 : 0xe8f5e9,
|
||||
mouseControls: true,
|
||||
touchControls: true,
|
||||
gyroControls: false,
|
||||
points: 8.00,
|
||||
maxDistance: 20.00,
|
||||
spacing: 15.00,
|
||||
minHeight: 200.00,
|
||||
minWidth: 200.00,
|
||||
scale: 1.0,
|
||||
scaleMobile: 1.0,
|
||||
});
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
createVaTaEffect();
|
||||
});
|
||||
// 监听 cr 的变化，更新 vanTaEffect
|
||||
watch(isDark, () => {
|
||||
if (vanTaEffect.value) {
|
||||
vanTaEffect.value.destroy(); // 销毁之前的实例
|
||||
createVaTaEffect(); // 重新创建实例
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (vanTaEffect) {
|
||||
vanTaEffect.value.destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user