wip(Login): Login developing

src/views/Login/Login.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { LoginForm } from './components'
-import { ElCard } from 'element-plus'
+// import { ElCard } from 'element-plus'
 // import { ThemeSwitch } from '@/components/ThemeSwitch'
 // import { LocaleDropdown } from '@/components/LocaleDropdown'
 // import { SizeDropdown } from '@/components/SizeDropdown'
 import { useDesign } from '@/hooks/web/useDesign'
-// import { useI18n } from '@/hooks/web/useI18n'
+import { useI18n } from '@/hooks/web/useI18n'
 
-// const { t } = useI18n()
+const { t } = useI18n()
 
 const { getPrefixCls } = useDesign()
 
@@ -15,22 +15,26 @@ const prefixCls = getPrefixCls('login')
 </script>
 
 <template>
-  <div :class="prefixCls" class="h-[calc(100%)] relative">
-    <div
-      class="container relative h-full py-2 mx-auto flex @2xl:max-w-1600px @xl:max-w-1000px @lg:max-w-600px @md:max-w-500px @sm:max-w-500px"
-    >
-      <div class="flex-1 <lg:hidden">
-        <img src="@/assets/svgs/login-box-bg.svg" alt="" class="w-1/2 m-auto" />
+  <div :class="prefixCls" class="h-[100%] relative">
+    <div class="relative h-full flex mx-auto border-dark-50 border-2px">
+      <div
+        :class="`${prefixCls}__left`"
+        class="flex-1 bg-gray-500 bg-opacity-20 relative p-30px <xl:hidden"
+      >
+        <div class="flex items-center text-white">
+          <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
+          <span class="text-20px font-bold">ButterflyAdmin</span>
+        </div>
+        <div :class="`${prefixCls}__left--message`" class="absolute top-[50%] left-[50%]">
+          <img src="@/assets/svgs/login-box-bg.svg" alt="" class="w-350px" />
+          <div class="text-3xl text-white">{{ t('login.message1') }}</div>
+          <div class="mt-5 font-normal text-white text-14px"> {{ t('login.message2') }} </div>
+        </div>
       </div>
-      <div class="flex-1">
-        <ElCard>
-          <template #header>
-            <div>
-              <span>Card name</span>
-            </div>
-          </template>
+      <div :class="`${prefixCls}__right`" class="flex-1 p-30px relative">
+        <div :class="`${prefixCls}__form`" class="absolute top-[50%] left-[50%] w-[40%]">
           <LoginForm />
-        </ElCard>
+        </div>
       </div>
     </div>
   </div>
@@ -40,25 +44,27 @@ const prefixCls = getPrefixCls('login')
 @prefix-cls: ~'@{namespace}-login';
 
 .@{prefix-cls} {
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    background-image: url('@/assets/svgs/login-light-bg.svg');
-    background-position: center;
-    background-repeat: no-repeat;
-    content: '';
-  }
-}
-
-.dark {
-  .@{prefix-cls} {
+  &__left {
     &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
       background-image: url('@/assets/svgs/login-dark-bg.svg');
+      background-position: center;
+      background-repeat: no-repeat;
+      content: '';
     }
+
+    &--message {
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__form {
+    transform: translate(-50%, -50%);
   }
 }
 </style>

src/views/Login/components/LoginForm.vue

@@ -1,18 +1,42 @@
 <script setup lang="ts">
 import { Form } from '@/components/Form'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ElButton } from 'element-plus'
+
+const { t } = useI18n()
 
 const schema: FormSchema[] = [
   {
     field: 'username',
-    component: 'Input'
+    label: t('login.username'),
+    component: 'Input',
+    colProps: {
+      span: 24
+    }
   },
   {
     field: 'password',
-    component: 'InputPassword'
+    label: t('login.password'),
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      }
+    }
+  },
+  {
+    field: 'login'
   }
 ]
 </script>
 
 <template>
-  <Form :schema="schema" :label-width="0" />
+  <Form :schema="schema" label-position="top">
+    <template #login>
+      <ElButton type="primary" class="w-[100%]">{{ t('login.login') }}</ElButton>
+    </template>
+  </Form>
 </template>