Browse Source

注册、登录界面调整

master
秦汉 5 days ago
parent
commit
9a3f7ed630
  1. 8
      Build_God_Game/src/views/LoginView.vue
  2. 36
      Build_God_Game/src/views/RegisterView.vue

8
Build_God_Game/src/views/LoginView.vue

@ -133,12 +133,10 @@ const handleLogin = async () => {
.blur-title {
justify-content: center;
/* 水平居中 flex 项目 */
text-align: center;
/* 文字居中 */
color: white;
width: 100%;
/* 确保占满宽度 */
font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
}
.title-glow {
@ -161,6 +159,7 @@ const handleLogin = async () => {
font-size: 0.875rem;
letter-spacing: 0.1em;
margin-top: 8px;
font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
}
.login-form {
@ -210,6 +209,7 @@ const handleLogin = async () => {
background: transparent;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
letter-spacing: 2px;
font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
}
.login-footer {
@ -223,6 +223,7 @@ const handleLogin = async () => {
.footer-text {
color: #444444;
font-size: 0.8rem;
font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
}
.footer-link {
@ -230,6 +231,7 @@ const handleLogin = async () => {
font-size: 0.8rem;
text-decoration: none;
transition: color 0.3s ease;
font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
}
.footer-link:hover {

36
Build_God_Game/src/views/RegisterView.vue

@ -3,7 +3,7 @@ import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import Particles from '@/components/Particles/Particles.vue'
import Shuffle from '@/components/Shuffle/Shuffle.vue'
import BlurText from '@/components/BlurText/BlurText.vue'
import InkButton from '@/components/InkButton/InkButton.vue'
import InkInput from '@/components/InkInput/InkInput.vue'
@ -86,31 +86,26 @@ const handleRegister = async () => {
<div class="register-container">
<div class="register-card">
<div class="register-header">
<Shuffle text="创建账号" shuffle-direction="right" :duration="0.35" animation-mode="evenodd" :shuffle-times="1"
ease="power3.out" :stagger="0.03" :threshold="0.1" :trigger-once="true" :trigger-on-hover="true"
class="shuffle-title" :respect-reduced-motion="true" />
<p class="subtitle">开启游戏之旅</p>
<BlurText text="注 册 账 号" animate-by="words" direction="top" :delay="200" class="blur-title"
class-name="text-2xl font-semibold text-center" />
<!-- <p class="subtitle">开启游戏之旅</p> -->
</div>
<form class="register-form" @submit.prevent="handleRegister">
<div class="form-group">
<label class="form-label">用户名</label>
<InkInput v-model="username" placeholder="3-30个字符,仅限字母数字下划线" type="text" autocomplete="username" />
<InkInput v-model="username" placeholder="用户名(字母数字下划线)" type="text" autocomplete="username" />
</div>
<div class="form-group">
<label class="form-label">邮箱</label>
<InkInput v-model="email" placeholder="请输入邮箱地址" type="email" autocomplete="email" />
<InkInput v-model="email" placeholder="邮箱地址" type="email" autocomplete="email" />
</div>
<div class="form-group">
<label class="form-label">密码</label>
<InkInput v-model="password" placeholder="至少4个字符" type="password" autocomplete="new-password" />
<InkInput v-model="password" placeholder="密码" type="password" autocomplete="new-password" />
</div>
<div class="form-group">
<label class="form-label">确认密码</label>
<InkInput v-model="confirmPassword" placeholder="请再次输入密码" type="password" autocomplete="new-password" />
<InkInput v-model="confirmPassword" placeholder="确认密码" type="password" autocomplete="new-password" />
</div>
<div v-if="errorMsg" class="error-message">
@ -179,14 +174,15 @@ const handleRegister = async () => {
color: white;
width: 100%;
font-size: 30px;
font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
}
.title {
font-size: 1.5rem;
font-weight: 300;
color: #ffffff;
letter-spacing: 0.15em;
margin-bottom: 8px;
.blur-title {
justify-content: center;
text-align: center;
color: white;
width: 100%;
font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
}
.subtitle {
@ -259,6 +255,7 @@ const handleRegister = async () => {
.footer-text {
color: #444444;
font-size: 0.8rem;
font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
}
.footer-link {
@ -266,6 +263,7 @@ const handleRegister = async () => {
font-size: 0.8rem;
text-decoration: none;
transition: color 0.3s ease;
font-family: "STKaiti", "KaiTi", "华文楷体", "Microsoft YaHei", cursive;
}
.footer-link:hover {

Loading…
Cancel
Save