|  |  |  | @ -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> | 
			
		
	
	
		
			
				
					|  |  |  | 
 |