refactor: login page

components/forgot/Password.vue

@@ -165,7 +165,7 @@ const handleChangePassword = async () => {
     cursor: pointer;
     width: 110px;
     height: 33px;
-    padding: 7px 10px;
+    padding: 8px 12px;
     border: 1px solid var(--kungalgame-blue-5);
     border-radius: 5px;
     background-color: transparent;

components/kun/Button.vue

@@ -27,7 +27,7 @@ const { ripples, onClick } = useRipple()
 .kun-button {
   border: 1.5px solid var(--kungalgame-blue-5);
   background-color: transparent;
-  padding: 7px 10px;
+  padding: 8px 12px;
   border-radius: 10px;
   color: var(--kungalgame-blue-5);
   cursor: pointer;

components/kun/Divider.vue

@@ -5,7 +5,7 @@ const props = withDefaults(
     color?: string
   }>(),
   {
-    margin: '33px 0',
+    margin: '32px 0',
     color: 'var(--kungalgame-trans-blue-2)'
   }
 )

components/kun/Input.vue

@@ -8,7 +8,7 @@ const value = defineModel<string | number>({ required: true })
 
 <style lang="scss" scoped>
 .kun-input {
-  padding: 7px 10px;
+  padding: 8px 12px;
   border: 1px solid var(--kungalgame-trans-blue-2);
   color: var(--kungalgame-font-color-3);
   border-radius: 10px;

components/login/Login.vue

@@ -4,10 +4,6 @@ import type { Pinia } from 'pinia'
 
 const localePath = useLocalePath()
 
-const props = defineProps<{
-  isLogin: boolean
-}>()
-
 const info = useComponentMessageStore()
 const { isShowCapture, isCaptureSuccessful } = storeToRefs(
   useComponentMessageStore()
@@ -33,7 +29,7 @@ const handleLogin = () => {
 watch(
   () => isCaptureSuccessful.value,
   async () => {
-    if (!isCaptureSuccessful.value || props.isLogin) {
+    if (!isCaptureSuccessful.value) {
       return
     }
 
@@ -52,136 +48,125 @@ watch(
     isCaptureSuccessful.value = false
   }
 )
-
-const handleClickForgotPassword = () => {
-  navigateTo(localePath('/forgot'))
-}
 </script>
 
 <template>
   <div class="login">
     <slot />
 
     <form class="form" @submit.prevent>
-      <span class="title">{{ $t('login.login.loginTitle') }}</span>
-      <input
-        v-model="loginForm.name"
-        autocomplete="username"
-        type="text"
-        :placeholder="`${$t('login.login.loginUsername')}`"
-        class="input"
-      />
-      <input
-        v-model="loginForm.password"
-        autocomplete="current-password"
-        type="password"
-        :placeholder="`${$t('login.login.loginPassword')}`"
-        class="input"
+      <NuxtImg
+        preload
+        src="/placeholder.webp"
+        placeholder="/placeholder.webp"
       />
 
-      <span @click="handleClickForgotPassword" class="forget">
-        {{ $t('login.login.forget') }}
-      </span>
-
-      <button @click="handleLogin" class="btn" type="submit">
+      <div>
+        <label for="username">
+          {{ $t('login.login.loginUsername') }}
+        </label>
+        <KunInput
+          id="username"
+          v-model="loginForm.name"
+          autocomplete="username"
+          type="text"
+        />
+      </div>
+
+      <div>
+        <label for="password">
+          {{ $t('login.login.loginPassword') }}
+        </label>
+        <KunInput
+          id="password"
+          v-model="loginForm.password"
+          autocomplete="current-password"
+          type="password"
+        />
+      </div>
+
+      <KunButton @click="handleLogin" class="btn">
         {{ $t('login.login.loginTitle') }}
-      </button>
+      </KunButton>
     </form>
+
+    <KunDivider margin="16px 0">
+      <span>{{ $t('login.or') }}</span>
+    </KunDivider>
+
+    <div class="more">
+      <NuxtLinkLocale to="/register">
+        {{ $t('login.register.title') }}
+      </NuxtLinkLocale>
+
+      <NuxtLinkLocale to="/forgot">
+        {{ $t('login.login.forget') }}
+      </NuxtLinkLocale>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .login {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50%;
-  z-index: 2;
-  transition: all 0.6s ease-in-out;
+  width: 360px;
+  padding: 32px;
+  margin-bottom: 32px;
+  user-select: none;
+  @include kun-blur;
 }
 
 .form {
-  background-color: var(--kungalgame-white);
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   flex-direction: column;
-  padding: 0 50px;
   height: 100%;
-  text-align: center;
-}
 
-.title {
-  font-weight: bold;
-  font-size: 24px;
-  margin: 20px;
-  color: var(--kungalgame-font-color-2);
-}
+  img {
+    width: 100%;
+  }
 
-.input {
-  border: none;
-  outline: none;
-  border-bottom: 1.5px solid var(--kungalgame-blue-0);
-  padding: 15px;
-  margin: 7px 0;
-  width: 100%;
-  background-color: var(--kungalgame-white);
-  color: var(--kungalgame-font-color-3);
-  border-bottom: 2px solid var(--kungalgame-trans-blue-2);
-
-  &:focus {
-    border-bottom: 2px solid var(--kungalgame-blue-5);
+  & > div {
+    width: 100%;
+
+    label {
+      font-size: 14px;
+    }
   }
-}
 
-.forget {
-  cursor: pointer;
-  font-size: small;
-  color: var(--kungalgame-blue-5);
-  margin: 20px 0;
-}
+  .kun-input {
+    width: 100%;
+    margin-bottom: 16px;
+    margin-top: 8px;
+    padding: 12px;
+  }
 
-.btn {
-  width: 150px;
-  position: absolute;
-  bottom: 10%;
-  border-radius: 50px;
-  background-color: var(--kungalgame-trans-white-5);
-  border: 1px solid var(--kungalgame-blue-5);
-  color: var(--kungalgame-blue-5);
-  cursor: pointer;
-  font-size: 15px;
-  letter-spacing: 2px;
-  padding: 7px 0px;
-  text-transform: uppercase;
-  transition: all 0.2s;
-  overflow: hidden;
-  white-space: nowrap;
-
-  &:hover {
+  .kun-button {
+    width: 100%;
     background-color: var(--kungalgame-blue-5);
     color: var(--kungalgame-white);
+    font-size: 16px;
+    border-radius: 24px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
   }
+}
 
-  &:active {
-    transform: scale(0.95);
+.kun-divider {
+  span {
+    margin: 0 8px;
   }
 }
 
-@media (max-width: 700px) {
-  .login {
-    width: 90%;
-    transition: none;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 7px;
-    box-shadow: var(--kungalgame-shadow-1);
-  }
+.more {
+  display: flex;
+  flex-direction: column;
 
-  .form {
-    border-radius: 5px;
+  a {
+    margin-bottom: 16px;
+    color: var(--kungalgame-blue-5);
+    text-decoration: underline;
+    text-underline-offset: 3px;
   }
 }
 </style>

language/en.json

@@ -328,6 +328,7 @@
     }
   },
   "login": {
+    "or": "OR",
     "login": {
       "loginTitle": "Login",
       "forget": "Forgot your password?",

language/ja-JP.json

@@ -326,6 +326,7 @@
     }
   },
   "login": {
+    "or": "または",
     "login": {
       "loginTitle": "ログイン",
       "forget": "パスワードを忘れましたか？",

language/zh-CN.json

@@ -326,6 +326,7 @@
     }
   },
   "login": {
+    "or": "或",
     "login": {
       "loginTitle": "登录",
       "forget": "忘记密码?",

language/zh-TW.json

@@ -326,6 +326,7 @@
     }
   },
   "login": {
+    "or": "或",
     "login": {
       "loginTitle": "登入",
       "forget": "忘記密碼?",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kun-galgame-nuxt3",
-  "version": "2.18.37",
+  "version": "2.18.38",
   "packageManager": "[email protected]",
   "private": true,
   "scripts": {

pages/donate/index.vue

@@ -152,7 +152,7 @@ const isShowOR = ref(false)
   justify-content: space-between;
 
   span {
-    padding: 7px 10px;
+    padding: 8px 12px;
     border-radius: 5px;
 
     &:nth-child(1) {