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')
-
-
-
- 
+
+
+
+
@@ -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%);
}
}
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index e632421..6101367 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -1,18 +1,42 @@
-
+
+
-
+ 
+ ButterflyAdmin
+
+
+ ButterflyAdmin
+
+
+
+ {{ t('login.message1') }}
+ {{ t('login.message2') }}
+
-
-
-
- Card name
-
-
+
+