github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Login/Login.vue (about)

     1  <script setup lang="ts">
     2  import { LoginForm } from './components'
     3  import { useI18n } from '@/hooks/web/useI18n'
     4  import { underlineToHump } from '@/utils'
     5  import { useAppStore } from '@/store/modules/app'
     6  import { useDesign } from '@/hooks/web/useDesign'
     7  import { ref } from 'vue'
     8  import RegisterForm from "@/views/Login/components/RegisterForm.vue";
     9  import { ThemeSwitch } from '@/components/ThemeSwitch'
    10  import { LocaleDropdown } from '@/components/LocaleDropdown'
    11  
    12  const { getPrefixCls } = useDesign()
    13  const prefixCls = getPrefixCls('login')
    14  const appStore = useAppStore()
    15  const { t } = useI18n()
    16  
    17  const isLogin = ref(true)
    18  
    19  const toRegister = () => {
    20    isLogin.value = false
    21  }
    22  
    23  const toLogin = () => {
    24    isLogin.value = true
    25  }
    26  </script>
    27  
    28  <template>
    29    <div
    30      :class="prefixCls"
    31      class="h-[100%] relative <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px"
    32    >
    33      <div class="relative h-full flex mx-auto">
    34        <div
    35          :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px <xl:hidden`"
    36        >
    37  <!--        <div class="flex items-center relative text-white">-->
    38  <!--          <img src="../../assets/svgs/logo-w.svg" alt="" class="w-48px h-48px mr-10px" />-->
    39  <!--          <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>-->
    40  <!--        </div>-->
    41          <div class="flex justify-center items-center h-[calc(100%-60px)]">
    42            <TransitionGroup
    43              appear
    44              tag="div"
    45              enter-active-class="animate__animated animate__bounceInLeft"
    46            >
    47              <img src="@/assets/svgs/banner-v4.svg" key="1" alt="" class="w-400px" />
    48  <!--            <div class="text-3xl text-white" key="2">{{ t('login.welcome') }}</div>-->
    49  <!--            <div class="mt-5 font-normal text-white text-14px" key="3">-->
    50  <!--              {{ t('login.message') }}-->
    51  <!--            </div>-->
    52            </TransitionGroup>
    53          </div>
    54        </div>
    55        <div class="flex-1 p-30px <sm:p-10px dark:bg-v-dark relative">
    56          <div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end">
    57            <div class="flex items-center @2xl:hidden @xl:hidden">
    58              <img src="../../assets/svgs/logo-w.svg" alt="" class="w-48px h-48px mr-10px" />
    59              <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
    60            </div>
    61  
    62            <div class="flex justify-end items-center space-x-10px">
    63              <ThemeSwitch />
    64              <LocaleDropdown class="<xl:text-white dark:text-white" />
    65            </div>
    66          </div>
    67          <Transition appear enter-active-class="animate__animated animate__bounceInRight">
    68            <div
    69              class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px @lg:max-w-500px"
    70            >
    71              <LoginForm
    72                v-if="isLogin"
    73                class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"
    74                @to-restore="toRegister"
    75              />
    76              <RegisterForm
    77                v-else
    78                class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"
    79                @to-login="toLogin"
    80              />
    81            </div>
    82          </Transition>
    83        </div>
    84      </div>
    85    </div>
    86  </template>
    87  
    88  <style lang="less" scoped>
    89  @prefix-cls: ~'@{namespace}-login';
    90  
    91  .@{prefix-cls} {
    92    &__left {
    93      &::before {
    94        position: absolute;
    95        top: 0;
    96        left: 0;
    97        z-index: -1;
    98        width: 100%;
    99        height: 100%;
   100        background-image: url('@/assets/svgs/login-bg.svg');
   101        background-position: center;
   102        background-repeat: no-repeat;
   103        content: '';
   104      }
   105    }
   106  }
   107  </style>