<!--
 * @Author: 半生瓜 1515706227@qq.com
 * @Date: 2024-04-21 17:20:21
 * @LastEditors: 半生瓜 1515706227@qq.com
 * @LastEditTime: 2024-05-16 18:01:39
 * @FilePath: \vue-element-plus-admin-mini\src\views\Login\Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { LoginForm } from './components'
// import { ThemeSwitch } from '@/components/ThemeSwitch'
import { LocaleDropdown } from '@/components/LocaleDropdown'
import { useDesign } from '@/hooks/web/useDesign'
import { ElScrollbar } from 'element-plus'

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>
<template>
  <div style="position: fixed; width: 100vw; height: 100vh">
    <img style="width: 100vw; height: 100vh" src="/src/assets/imgs/loginbg.png" alt="" srcset="" />
  </div>
  <div
    :class="prefixCls"
    class="h-[100%] relative lt-xl:bg-[var(--login-bg-color)] lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
  >
    <ElScrollbar class="h-full">
      <div class="relative flex mx-auto h-100vh">
        <div class="flex-1 p-30px lt-sm:p-10px dark:bg-[var(--login-bg-color)] relative">
          <div
            class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
          >
            <!-- 中英文切换 -->
            <div class="flex justify-end items-center space-x-10px">
              <!-- <ThemeSwitch @change="themeChange" /> -->
              <LocaleDropdown class="lt-xl:text-white dark:text-white" />
            </div>
          </div>
          <div style="position: fixed; bottom: 0; left: 0%">
            <img src="/src/assets/imgs/loginimg.png" alt="" srcset="" />
          </div>
          <Transition appear enter-active-class="animate__animated animate__bounceInRight">
            <div
              style="margin-right: 18vw"
              class="h-full flex items-center m-auto w-[100%] at-2xl:max-w-470px at-xl:max-w-500px at-md:max-w-500px at-lg:max-w-500px"
            >
              <LoginForm
                style="background-color: #d9e6ff; border-radius: 8px"
                class="p-25px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
              />
            </div>
          </Transition>
        </div>
      </div>
    </ElScrollbar>
  </div>
</template>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-login';

.@{prefix-cls} {
  overflow: auto;
}
</style>
