rebuild login page
This commit is contained in:
KUN1007
parent
f2d5d4410e
commit
b380d37d8f
|
|
@ -6,7 +6,7 @@ html {
|
|||
|
||||
--kungalgame-white: #ffffff;
|
||||
|
||||
--kungalgame-gray-4: #8c959f;
|
||||
--kungalgame-gray-4: #bcc8d4;
|
||||
|
||||
--kungalgame-blue-0: #ddf4ff;
|
||||
--kungalgame-blue-1: #b6e3ff;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<form action="#" class="form" id="form1" @submit.prevent="handleLogin">
|
||||
<h2 class="form__title">登陆</h2>
|
||||
<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>
|
||||
<!-- 登录面板 -->
|
||||
<Login class="login" />
|
||||
<!-- 注册面板 -->
|
||||
<Register class="register" />
|
||||
|
||||
<!-- 侧边 -->
|
||||
<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>
|
||||
<button class="btn" @click="handleClickSignIn">登陆</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>
|
||||
<button class="btn" @click="handleClickRegister">注册</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 {
|
||||
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 {
|
||||
.container.active .login {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.container--signup {
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
width: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container.right-panel-active .container--signup {
|
||||
.container.active .register {
|
||||
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 {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.overlay--right {
|
||||
.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>
|
||||
|
|
|
|||
68
src/views/login/components/Flipped.vue
Normal file
68
src/views/login/components/Flipped.vue
Normal file
|
|
@ -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>
|
||||
138
src/views/login/components/Login.vue
Normal file
138
src/views/login/components/Login.vue
Normal file
|
|
@ -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>
|
||||
162
src/views/login/components/Register.vue
Normal file
162
src/views/login/components/Register.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue