admin/gr_report_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

修改登录界面

Browse Source
This commit is contained in:
chy
2026-02-12 14:25:27 +08:00
parent aa853f539b
commit dced583c7f
2 changed files with 12 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/imgs/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

102
src/views/Login/Login.vue
View File

@@ -1,79 +1,10 @@
<template>
<div :class="prefixCls" class="relative h-[100%]">
<div class="relative mx-auto h-full flex">
<div :class="prefixCls" class="relative h-[100%]" :style="{ backgroundImage: 'url(' + localImage + ')' }">
<div class="relative mx-auto h-full flex" style="float:left; margin-left: 200px;">
<div
v-if="!appStore.getMobile"
:class="`${prefixCls}__left flex-1 bg-#409eff dark:bg-[var(--login-bg-color)] relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
>
<!-- 左上角的 logo + 系统标题 -->
<div
class="relative flex items-center text-white mt-30px"
:style="{ marginTop: leftStyle.logo.mt }"
>
<img
alt=""
class="mr-10px"
:style="{ height: leftStyle.logo.height }"
src="@/assets/imgs/logo_white.png"
/>
</div>
<!-- 左边的背景图 + 欢迎语 -->
<Transition
appear
enter-active-class="animate__animated animate__bounceInLeft"
tag="div"
>
<div :style="{ marginTop: leftStyle.bottomText.textMt }">
<div
class="pos-relative w-100% overflow-hidden"
:style="{ height: leftStyle.lottie.boxHeight }"
>
<vue3-lottie
class="pos-absolute"
:style="{ left: leftStyle.lottie.left, top: leftStyle.lottie.top }"
:animation-data="loginAnimationData"
:height="leftStyle.lottie.height"
:width="leftStyle.lottie.width"
:auto-play="true"
:loop="true"
/>
</div>
<div
class="flex justify-center w-100%"
:style="{ marginTop: leftStyle.bottomText.textMt }"
>
<div
class="pos-relative overflow-hidden"
:style="{ width: leftStyle.bottomText.width, height: leftStyle.bottomText.height }"
>
<img
alt=""
class="pos-absolute top-0"
:style="{ width: leftStyle.bottomText.width, left: leftStyle.bottomText.left }"
src="@/assets/imgs/login/login_text.png"
/>
</div>
</div>
</div>
</Transition>
</div>
<div
class="relative flex-1 p-30px bg-#e3f0ff lt-sm:p-10px overflow-x-hidden overflow-y-auto"
:class="`${prefixCls}__right`"
>
<!-- 右上角的主题、语言选择 -->
<div
class="relative z-2 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-32px" src="@/assets/imgs/logo.png" />
</div>
<div class="flex items-center justify-end space-x-10px h-48px">
<ThemeSwitch />
<LocaleDropdown class="dark:text-white lt-xl:text-white" />
</div>
</div>
class="relative flex-1 p-30px lt-sm:p-10px overflow-x-hidden overflow-y-auto"
:class="`${prefixCls}__right`">
<!-- 右边的登录界面 -->
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
<div
@@ -83,24 +14,10 @@
<div class="bg-#fff dark:bg-[var(--login-bg-color)] b-rounded-20px px-20px">
<!-- 账号登录 -->
<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)" />
<!-- 三方登录 -->
<!-- <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> -->
</div>
</div>
</Transition>
</div>
<div
class="pos-fixed bottom-0px left-50% lt-md:left-0px lt-sm:left-0px lt-xl:left-0px lt-xl:left-0px z-1"
>
<img class="w-138px block" src="@/assets/imgs/login/login_right_bg_1.png" alt="" />
</div>
<div class="pos-fixed right--38px top--23px">
<img class="w-160px block" src="@/assets/imgs/login/login_right_bg_2.png" alt="" />
</div>
</div>
</div>
</template>
@@ -110,10 +27,12 @@ import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { useWindowSize } from '@vueuse/core'
import { LoginForm, MobileForm, QrCodeForm, SSOLoginVue } from './components'
import { LoginForm } from './components'
import * as loginAnimation from '@/assets/json/login_left.json'
// import { useRoute } from 'vue-router';
import localImage from '@/assets/imgs/background.jpg'
defineOptions({ name: 'Login' })
const { t } = useI18n()
@@ -157,6 +76,9 @@ const newClass = computed(() => {
const toggle = appStore.getFullscreen ? 'is-toggle' : ''
return toggle ? toggle : mobile
})
// const route = useRoute();
// console.log(route.query)
</script>
<style lang="scss" scoped>