rebuild login page

src/styles/theme/color.scss

@@ -6,7 +6,7 @@ html {
 
   --kungalgame-white: #ffffff;
 
-  --kungalgame-gray-4: #8c959f;
+  --kungalgame-gray-4: #bcc8d4;
 
   --kungalgame-blue-0: #ddf4ff;
   --kungalgame-blue-1: #b6e3ff;

src/views/login/Login.vue

@@ -1,26 +1,16 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
-import { useRouter } from 'vue-router'
 
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 
-// 使用全局通知
+// 导入登录面板
-import { useKUNGalgameMessageStore } from '@/store/modules/message'
+import Login from './components/Login.vue'
 
-const info = useKUNGalgameMessageStore()
+// 导入注册面板
+import Register from './components/Register.vue'
 
 const isShowPanel = ref('')
 
-const loginForm = reactive({
-  username: '',
-  password: '',
-})
-
-const useStore = useKUNGalgamerStore()
-
-const router = useRouter()
-
 // 点击登录，面板滑动
 const handleClickSignIn = () => {
   isShowPanel.value = ''
@@ -28,112 +18,36 @@ const handleClickSignIn = () => {
 
 // 点击注册，面板滑动
 const handleClickRegister = () => {
-  isShowPanel.value = 'right-panel-active'
+  isShowPanel.value = 'active'
 }
-
-const handleLogin = () => {
-  useStore.login(loginForm).then((res) => {
-    if (res.success) {
-      router.push('/')
-      info.info('AlertInfo.login')
-    }
-  })
-}
-
-const handleRegister = () => {}
 </script>
 
 <template>
   <div class="root">
     <div class="container" :class="isShowPanel">
-      <!-- 登陆 -->
+      <!-- 登录面板 -->
-      <div class="container__form container--signin">
+      <Login class="login" />
-        <form action="#" class="form" id="form1" @submit.prevent="handleLogin">
+      <!-- 注册面板 -->
-          <h2 class="form__title">登陆</h2>
+      <Register class="register" />
-          <input
-            v-model="loginForm.username"
-            type="email"
-            placeholder="用户名或邮箱"
-            class="input"
-          />
-          <input
-            v-model="loginForm.password"
-            type="password"
-            placeholder="密码"
-            class="input"
-          />
-          <a href="#" class="link">忘记密码? 点击发送重置邮件</a>
-          <button class="btn" type="submit">登陆</button>
-        </form>
-      </div>
-
-      <!-- 注册 -->
-      <div class="container__form container--signup">
-        <form
-          action="#"
-          class="form"
-          id="form2"
-          @submit.prevent="handleRegister"
-        >
-          <h2 class="form__title">注册</h2>
-          <input
-            v-model="loginForm.username"
-            type="text"
-            placeholder="用户名"
-            class="input"
-          />
-          <input
-            v-model="loginForm.email"
-            type="email"
-            placeholder="邮箱"
-            class="input"
-          />
-          <input
-            v-model="loginForm.password"
-            type="password"
-            placeholder="密码"
-            class="input"
-          />
-          <input
-            v-model="loginForm.verificationCode"
-            type="text"
-            placeholder="验证码"
-            class="input"
-          />
-          <button class="mail-confirm">发送验证码</button>
-          <button class="btn" type="submit">注册</button>
-          <span class="user-agreement"
-            >点击注册表示您已经同意我们的<router-link to="/licence"
-              ><span>用户协议</span></router-link
-            >和<router-link to="/privacy"
-              ><span>隐私政策</span></router-link
-            ></span
-          >
-        </form>
-      </div>
 
       <!-- 侧边 -->
-      <div class="container__overlay">
+      <div class="container-overlay">
         <div class="overlay">
-          <div class="overlay__panel overlay--left">
+          <div class="panel left">
             <h2>
               欢迎注册 KUNgalgame <br /><br />—— 世界上最<span>萌</span>的
               galgame 论坛
             </h2>
             <br />
-            <button class="btn" id="signIn" @click="handleClickSignIn">
+            <button class="btn" @click="handleClickSignIn">登陆</button>
-              登陆
-            </button>
           </div>
-          <div class="overlay__panel overlay--right">
+          <div class="panel right">
             <h2>
               欢迎回家 <br />
               <br />
               KUNgalgame 给你最温暖的拥抱
             </h2>
-            <button class="btn" id="signUp" @click="handleClickRegister">
+            <button class="btn" @click="handleClickRegister">注册</button>
-              注册
-            </button>
           </div>
         </div>
       </div>
@@ -162,51 +76,7 @@ const handleRegister = () => {}
   position: relative;
   background-color: var(--kungalgame-white);
 }
-/* 登录和注册的字体 */
-.form__title {
-  font-weight: 300;
-  font-weight: bold;
-  margin-bottom: 1.25rem;
-  color: var(--kungalgame-font-color-2);
-}
 
-/* 获取验证码 */
-.mail-confirm,
-.link {
-  text-decoration: none;
-  font-size: small;
-  color: var(--kungalgame-blue-4);
-}
-.mail-confirm {
-  position: absolute;
-  padding: 5px;
-  height: 30px;
-  bottom: 22%;
-  right: 15%;
-  border: 1px solid var(--kungalgame-blue-1);
-  background-color: var(--kungalgame-white);
-  cursor: pointer;
-}
-.mail-confirm:hover {
-  background-color: var(--kungalgame-blue-4);
-  color: var(--kungalgame-white);
-}
-/* 忘记密码 */
-.link {
-  margin: 20px 0;
-}
-/* 用户协议 */
-.user-agreement {
-  position: absolute;
-  bottom: 2%;
-  font-size: x-small;
-  color: var(--kungalgame-font-color-1);
-  text-decoration: none;
-}
-.user-agreement span {
-  color: var(--kungalgame-red-4);
-  font-style: oblique;
-}
 /* 总容器 */
 .container {
   /* 背景图片 */
@@ -226,31 +96,11 @@ const handleRegister = () => {}
   width: 100%;
 }
 
-.container__form {
+.container.active .login {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  transition: all 0.6s ease-in-out;
-}
-
-.container--signin {
-  left: 0;
-  width: 50%;
-  z-index: 2;
-}
-
-.container.right-panel-active .container--signin {
   transform: translateX(100%);
 }
 
-.container--signup {
+.container.active .register {
-  left: 0;
-  opacity: 0;
-  width: 50%;
-  z-index: 1;
-}
-
-.container.right-panel-active .container--signup {
   animation: show 0.6s;
   opacity: 1;
   transform: translateX(100%);
@@ -270,7 +120,23 @@ const handleRegister = () => {}
   }
 }
 
-.container__overlay {
+.container.active .container-overlay {
+  transform: translateX(-100%);
+}
+
+.container.active .overlay {
+  transform: translateX(50%);
+}
+
+.container.active .left {
+  transform: translateX(0);
+}
+
+.container.active .right {
+  transform: translateX(20%);
+}
+
+.container-overlay {
   height: 100%;
   left: 50%;
   overflow: hidden;
@@ -281,15 +147,7 @@ const handleRegister = () => {}
   z-index: 100;
 }
 
-.container.right-panel-active .container__overlay {
-  transform: translateX(-100%);
-}
-
 .overlay {
-  background-attachment: fixed;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
   height: 100%;
   left: -100%;
   position: relative;
@@ -298,10 +156,6 @@ const handleRegister = () => {}
   width: 200%;
 }
 
-.container.right-panel-active .overlay {
-  transform: translateX(50%);
-}
-
 .btn {
   position: absolute;
   bottom: 7%;
@@ -323,7 +177,7 @@ const handleRegister = () => {}
   color: var(--kungalgame-white);
 }
 /* 交互页面的盒子 */
-.overlay__panel {
+.panel {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -337,7 +191,7 @@ const handleRegister = () => {}
   width: 50%;
   background-color: var(--kungalgame-trans-white-5);
 }
-.overlay__panel .btn {
+.btn {
   /* 红色按钮距离底部的距离 */
   position: absolute;
   bottom: 7%;
@@ -345,47 +199,32 @@ const handleRegister = () => {}
   border: 1px solid var(--kungalgame-red-4);
   color: var(--kungalgame-red-4);
 }
-.overlay__panel .btn:hover {
+.btn:hover {
   background-color: var(--kungalgame-red-4);
   color: var(--kungalgame-white);
 }
 
-.overlay__panel h2 {
+h2 {
   margin-top: 150px;
   font-size: medium;
   color: var(--kungalgame-font-color-2);
 }
-.overlay__panel h2 span {
+
+h2 span {
   color: var(--kungalgame-red-4);
   padding: 0 5px;
-  font-size: large;
+  font-size: 20px;
 }
 
-.overlay--left {
+.left {
   transform: translateX(-20%);
 }
 
-.container.right-panel-active .overlay--left {
+.right {
-  transform: translateX(0);
-}
-
-.overlay--right {
   right: 0;
   transform: translateX(0);
 }
 
-.container.right-panel-active .overlay--right {
-  transform: translateX(20%);
-}
-
-.form > .btn {
-  margin-top: 1.5rem;
-}
-/* 注册按钮的位置 */
-.container--signup .btn {
-  margin-top: 30px;
-}
-
 .btn:active {
   transform: scale(0.95);
 }
@@ -393,30 +232,4 @@ const handleRegister = () => {}
 .btn:focus {
   outline: none;
 }
-/* 表单的设置 */
-.form {
-  background-color: var(--kungalgame-white);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 0 3rem;
-  height: 100%;
-  text-align: center;
-}
-
-.input {
-  border: none;
-  outline: none;
-  border-bottom: 1.5px solid var(--kungalgame-blue-0);
-  padding: 0.9rem 0.9rem;
-  margin: 0.5rem 0;
-  width: 100%;
-  background-color: var(--kungalgame-white);
-  color: var(--kungalgame-font-color-3);
-}
-.input:focus {
-  border-bottom: 1.5px solid var(--kungalgame-blue-4);
-  transition: 0.2s linear;
-}
 </style>

src/views/login/components/Flipped.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="card" :class="{ flipped: isFlipped }">
+      <div class="front">
+        <button @click="flipCard">正面按钮</button>
+      </div>
+      <div class="back">
+        <button @click="flipCard">背面按钮</button>
+        <div class="back-content">
+          <p>这是背面的内容</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 使用ref创建一个响应式变量
+const isFlipped = ref(false)
+
+// 点击按钮翻转卡片
+const flipCard = () => {
+  isFlipped.value = !isFlipped.value
+}
+</script>
+
+<style>
+.card {
+  width: 200px;
+  height: 200px;
+  perspective: 800px;
+  transition: transform 0.6s;
+}
+
+.flipped {
+  transform: rotateY(180deg);
+}
+
+.front,
+.back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: hidden;
+}
+
+.front {
+  background-color: #e9e9e9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.back {
+  background-color: #ccc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: rotateY(180deg);
+}
+
+.back-content {
+  padding: 10px;
+  text-align: center;
+}
+</style>

src/views/login/components/Login.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
+import { useRouter } from 'vue-router'
+// 使用全局通知
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
+
+const router = useRouter()
+
+const info = useKUNGalgameMessageStore()
+
+const useStore = useKUNGalgamerStore()
+
+const loginForm = reactive({
+  username: '',
+  password: '',
+})
+
+const handleLogin = () => {
+  useStore.login(loginForm).then((res) => {
+    if (res.success) {
+      router.push('/')
+      info.info('AlertInfo.login')
+    }
+  })
+}
+</script>
+
+<template>
+  <!-- 登陆 -->
+  <div class="login">
+    <form class="form" @submit.prevent="handleLogin">
+      <h2 class="title">登陆</h2>
+      <input
+        v-model="loginForm.username"
+        type="email"
+        placeholder="用户名或邮箱"
+        class="input"
+      />
+      <input
+        v-model="loginForm.password"
+        type="password"
+        placeholder="密码"
+        class="input"
+      />
+      <span class="forget">忘记密码? 点击发送重置邮件</span>
+      <button class="btn" type="submit">登陆</button>
+    </form>
+  </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;
+}
+
+/* 表单的设置 */
+.form {
+  background-color: var(--kungalgame-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 3rem;
+  height: 100%;
+  text-align: center;
+}
+
+/* 登录和注册的字体 */
+.title {
+  font-weight: 300;
+  font-weight: bold;
+  margin-bottom: 1.25rem;
+  color: var(--kungalgame-font-color-2);
+}
+
+.input {
+  border: none;
+  outline: none;
+  border-bottom: 1.5px solid var(--kungalgame-blue-0);
+  padding: 0.9rem 0.9rem;
+  margin: 0.5rem 0;
+  width: 100%;
+  background-color: var(--kungalgame-white);
+  color: var(--kungalgame-font-color-3);
+}
+.input:focus {
+  border-bottom: 1.5px solid var(--kungalgame-blue-4);
+  transition: 0.2s linear;
+}
+
+/* 获取验证码 */
+.forget {
+  text-decoration: none;
+  font-size: small;
+  color: var(--kungalgame-blue-4);
+  margin: 20px 0;
+}
+
+.btn {
+  position: absolute;
+  bottom: 7%;
+  border-radius: 50px;
+  background-color: var(--kungalgame-trans-white-5);
+  border: 1px solid var(--kungalgame-blue-4);
+  color: var(--kungalgame-blue-4);
+  cursor: pointer;
+  font-size: 0.9em;
+  letter-spacing: 0.1rem;
+  padding: 0.6rem 4rem;
+  text-transform: uppercase;
+  transition: transform 80ms ease-in;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.btn:hover {
+  background-color: var(--kungalgame-blue-4);
+  color: var(--kungalgame-white);
+}
+
+.form > .btn {
+  margin-top: 1.5rem;
+}
+
+.btn:active {
+  transform: scale(0.95);
+}
+
+.btn:focus {
+  outline: none;
+}
+</style>

src/views/login/components/Register.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const loginForm = reactive({
+  username: '',
+  email: '',
+  password: '',
+  code: '',
+})
+
+const handleRegister = () => {}
+</script>
+
+<template>
+  <!-- 注册 -->
+  <div class="register">
+    <form action="#" class="form" id="form2" @submit.prevent="handleRegister">
+      <h2 class="title">注册</h2>
+      <input
+        v-model="loginForm.username"
+        type="text"
+        placeholder="用户名"
+        class="input"
+      />
+      <input
+        v-model="loginForm.email"
+        type="email"
+        placeholder="邮箱"
+        class="input"
+      />
+      <input
+        v-model="loginForm.password"
+        type="password"
+        placeholder="密码"
+        class="input"
+      />
+      <input
+        v-model="loginForm.code"
+        type="text"
+        placeholder="邮箱验证码"
+        class="input"
+      />
+      <button class="mail-confirm">发送验证码</button>
+      <button class="btn" type="submit">注册</button>
+      <span class="user-agreement"
+        >点击注册表示您已经同意我们的<router-link to="/licence"
+          ><span>用户协议</span></router-link
+        >和<router-link to="/privacy"><span>隐私政策</span></router-link></span
+      >
+    </form>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 登录和注册的字体 */
+.title {
+  font-weight: 300;
+  font-weight: bold;
+  margin-bottom: 1.25rem;
+  color: var(--kungalgame-font-color-2);
+}
+
+.mail-confirm {
+  position: absolute;
+  padding: 5px;
+  height: 30px;
+  bottom: 22%;
+  right: 15%;
+  border: 1px solid var(--kungalgame-blue-1);
+  background-color: var(--kungalgame-white);
+  cursor: pointer;
+}
+.mail-confirm:hover {
+  background-color: var(--kungalgame-blue-4);
+  color: var(--kungalgame-white);
+}
+
+/* 用户协议 */
+.user-agreement {
+  position: absolute;
+  bottom: 2%;
+  font-size: x-small;
+  color: var(--kungalgame-font-color-1);
+  text-decoration: none;
+}
+.user-agreement span {
+  color: var(--kungalgame-red-4);
+  font-style: oblique;
+}
+
+.register {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  transition: all 0.6s ease-in-out;
+  left: 0;
+  opacity: 0;
+  width: 50%;
+  z-index: 1;
+}
+
+.btn {
+  position: absolute;
+  bottom: 7%;
+  border-radius: 50px;
+  background-color: var(--kungalgame-trans-white-5);
+  border: 1px solid var(--kungalgame-blue-4);
+  color: var(--kungalgame-blue-4);
+  cursor: pointer;
+  font-size: 0.9em;
+  letter-spacing: 0.1rem;
+  padding: 0.6rem 4rem;
+  text-transform: uppercase;
+  transition: transform 80ms ease-in;
+}
+.btn:hover {
+  background-color: var(--kungalgame-blue-4);
+  color: var(--kungalgame-white);
+}
+
+.btn {
+  margin-top: 1.5rem;
+}
+/* 注册按钮的位置 */
+.btn {
+  margin-top: 30px;
+}
+
+.btn:active {
+  transform: scale(0.95);
+}
+
+.btn:focus {
+  outline: none;
+}
+/* 表单的设置 */
+.form {
+  background-color: var(--kungalgame-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 3rem;
+  height: 100%;
+  text-align: center;
+}
+
+.input {
+  border: none;
+  outline: none;
+  border-bottom: 1.5px solid var(--kungalgame-blue-0);
+  padding: 0.9rem 0.9rem;
+  margin: 0.5rem 0;
+  width: 100%;
+  background-color: var(--kungalgame-white);
+  color: var(--kungalgame-font-color-3);
+}
+.input:focus {
+  border-bottom: 1.5px solid var(--kungalgame-blue-4);
+  transition: 0.2s linear;
+}
+</style>