chore: 📌 优化登录页面样式
This commit is contained in:
Stev_Wang
@@ -1,165 +1,195 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<div class="login-form">
|
<div class="login-form">
|
||||||
<div class="login-header">
|
<div class="login-header">
|
||||||
<h2>运营管理系统</h2>
|
<h2>运营管理系统</h2>
|
||||||
<p>欢迎登录游戏运营平台后台</p>
|
<p>欢迎登录游戏运营平台后台</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-form
|
<el-form
|
||||||
ref="loginFormRef"
|
ref="loginFormRef"
|
||||||
:model="loginForm"
|
:model="loginForm"
|
||||||
:rules="loginRules"
|
:rules="loginRules"
|
||||||
label-position="top"
|
label-position="left"
|
||||||
>
|
label-width="80px"
|
||||||
<el-form-item label="管理员账号" prop="username">
|
class="login-form-inner"
|
||||||
<el-input
|
>
|
||||||
v-model="loginForm.username"
|
<el-form-item label="管理员账号" prop="username">
|
||||||
placeholder="请输入管理员账号"
|
<el-input
|
||||||
size="large"
|
v-model="loginForm.username"
|
||||||
:prefix-icon="RiAdminLine"
|
placeholder="请输入管理员账号"
|
||||||
/>
|
size="large"
|
||||||
</el-form-item>
|
:prefix-icon="RiAdminLine"
|
||||||
|
/>
|
||||||
<el-form-item label="密码" prop="password">
|
</el-form-item>
|
||||||
<el-input
|
|
||||||
v-model="loginForm.password"
|
<el-form-item label="密码" prop="password">
|
||||||
type="password"
|
<el-input
|
||||||
placeholder="请输入管理员密码"
|
v-model="loginForm.password"
|
||||||
show-password
|
type="password"
|
||||||
size="large"
|
placeholder="请输入管理员账号密码"
|
||||||
:prefix-icon="RiLockLine"
|
show-password
|
||||||
/>
|
size="large"
|
||||||
</el-form-item>
|
:prefix-icon="RiLockLine"
|
||||||
|
/>
|
||||||
<el-form-item>
|
</el-form-item>
|
||||||
<el-button
|
|
||||||
type="primary"
|
<el-form-item class="login-button-item">
|
||||||
:loading="loading"
|
<el-button
|
||||||
@click="handleLogin"
|
type="primary"
|
||||||
size="large"
|
:loading="loading"
|
||||||
block
|
@click="handleLogin"
|
||||||
>
|
size="large"
|
||||||
登录
|
class="login-button"
|
||||||
</el-button>
|
>
|
||||||
</el-form-item>
|
登录
|
||||||
|
</el-button>
|
||||||
<div class="login-footer">
|
</el-form-item>
|
||||||
<el-link type="primary" :underline="false">忘记密码？</el-link>
|
|
||||||
<el-link type="primary" :underline="false">联系管理员</el-link>
|
<div class="login-footer">
|
||||||
</div>
|
<el-link type="primary" :underline="false">忘记密码？</el-link>
|
||||||
</el-form>
|
<el-link type="primary" :underline="false">联系管理员</el-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-form>
|
||||||
</template>
|
</div>
|
||||||
|
</div>
|
||||||
<script setup lang="ts">
|
</template>
|
||||||
import { ref, reactive } from 'vue'
|
|
||||||
import { ElMessage } from 'element-plus'
|
<script setup lang="ts">
|
||||||
import { useRouter } from 'vue-router'
|
import { ref, reactive } from 'vue'
|
||||||
import { useUserStore } from '@/store/user'
|
import { ElMessage } from 'element-plus'
|
||||||
import type { LoginForm } from '@/types/auth'
|
import { useRouter } from 'vue-router'
|
||||||
// 导入Remix Icon组件
|
import { useUserStore } from '@/store/user'
|
||||||
import { RiAdminLine, RiLockLine } from '@remixicon/vue'
|
import type { LoginForm } from '@/types/auth'
|
||||||
|
// 导入Remix Icon组件
|
||||||
const router = useRouter()
|
import { RiAdminLine, RiLockLine } from '@remixicon/vue'
|
||||||
const userStore = useUserStore()
|
|
||||||
|
const router = useRouter()
|
||||||
// 登录表单引用
|
const userStore = useUserStore()
|
||||||
const loginFormRef = ref()
|
|
||||||
|
// 登录表单引用
|
||||||
// 加载状态
|
const loginFormRef = ref()
|
||||||
const loading = ref(false)
|
|
||||||
|
// 加载状态
|
||||||
// 登录表单
|
const loading = ref(false)
|
||||||
const loginForm = reactive<LoginForm>({
|
|
||||||
username: '',
|
// 登录表单
|
||||||
password: ''
|
const loginForm = reactive<LoginForm>({
|
||||||
})
|
username: '',
|
||||||
|
password: ''
|
||||||
// 表单验证规则
|
})
|
||||||
const loginRules = {
|
|
||||||
username: [
|
// 表单验证规则
|
||||||
{ required: true, message: '请输入管理员账号', trigger: 'blur' },
|
const loginRules = {
|
||||||
{ min: 3, max: 20, message: '账号长度在 3 到 20 个字符', trigger: 'blur' }
|
username: [
|
||||||
],
|
{ required: true, message: '请输入管理员账号', trigger: 'blur' },
|
||||||
password: [
|
{ min: 3, max: 20, message: '账号长度在 3 到 20 个字符', trigger: 'blur' }
|
||||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
],
|
||||||
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
|
password: [
|
||||||
]
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||||
}
|
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
|
||||||
|
]
|
||||||
// 处理登录
|
}
|
||||||
const handleLogin = async () => {
|
|
||||||
// 表单验证
|
// 处理登录
|
||||||
if (!loginFormRef.value) return
|
const handleLogin = async () => {
|
||||||
|
// 表单验证
|
||||||
try {
|
if (!loginFormRef.value) return
|
||||||
await loginFormRef.value.validate()
|
|
||||||
loading.value = true
|
try {
|
||||||
|
await loginFormRef.value.validate()
|
||||||
// 调用userStore的登录方法
|
loading.value = true
|
||||||
await userStore.login(loginForm)
|
|
||||||
|
// 调用userStore的登录方法
|
||||||
// 检查是否为管理员
|
await userStore.login(loginForm)
|
||||||
if (!userStore.isAdmin) {
|
|
||||||
throw new Error('您不是管理员，无法登录运营管理系统')
|
// 检查是否为管理员
|
||||||
}
|
if (!userStore.isAdmin) {
|
||||||
|
throw new Error('您不是管理员，无法登录运营管理系统')
|
||||||
ElMessage.success('登录成功')
|
}
|
||||||
|
|
||||||
// 跳转到管理员首页
|
ElMessage.success('登录成功')
|
||||||
router.push('/admin')
|
|
||||||
} catch (error: any) {
|
// 跳转到管理员首页
|
||||||
ElMessage.error(error?.message || '登录失败，请稍后重试')
|
router.push('/admin')
|
||||||
console.error('登录失败:', error)
|
} catch (error: any) {
|
||||||
} finally {
|
ElMessage.error(error?.message || '登录失败，请稍后重试')
|
||||||
loading.value = false
|
console.error('登录失败:', error)
|
||||||
}
|
} finally {
|
||||||
}
|
loading.value = false
|
||||||
</script>
|
}
|
||||||
|
}
|
||||||
<style scoped>
|
</script>
|
||||||
.login-container {
|
|
||||||
display: flex;
|
<style scoped>
|
||||||
justify-content: center;
|
.login-container {
|
||||||
align-items: center;
|
display: flex;
|
||||||
min-height: 100vh;
|
justify-content: center;
|
||||||
background: linear-gradient(135deg, #1890ff 0%, #52c41a 100%);
|
align-items: center;
|
||||||
padding: 20px;
|
min-height: 100vh;
|
||||||
}
|
background: linear-gradient(135deg, #1890ff 0%, #52c41a 100%);
|
||||||
|
padding: 20px;
|
||||||
.login-form {
|
}
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
.login-form {
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
background: #fff;
|
||||||
padding: 40px;
|
border-radius: 12px;
|
||||||
width: 100%;
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
max-width: 400px;
|
padding: 40px;
|
||||||
}
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
.login-header {
|
}
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
.login-header {
|
||||||
}
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
.login-header h2 {
|
}
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
.login-header h2 {
|
||||||
color: #333;
|
font-size: 24px;
|
||||||
margin-bottom: 8px;
|
font-weight: 600;
|
||||||
}
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
.login-header p {
|
}
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
.login-header p {
|
||||||
}
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
.login-footer {
|
}
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
.login-footer {
|
||||||
margin-top: 20px;
|
display: flex;
|
||||||
}
|
justify-content: space-between;
|
||||||
|
margin-top: 20px;
|
||||||
/* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
|
}
|
||||||
|
|
||||||
|
/* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
|
||||||
|
|
||||||
|
/* 修复label和输入框水平居中对齐问题 */
|
||||||
|
.login-form-inner :deep(.el-form-item__label) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px; /* 与输入框高度一致 */
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-inner :deep(.el-form-item__content) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录按钮样式 */
|
||||||
|
.login-button-item {
|
||||||
|
margin-left: -80px; /* 抵消label宽度，使按钮在整个表单中居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button-item :deep(.el-form-item__content) {
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
margin-left: 80px; /* 重新添加左边距，使按钮内容居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
width: 100%; /* 按钮宽度占满容器 */
|
||||||
|
max-width: 280px; /* 最大宽度限制 */
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,169 +1,199 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<div class="login-form">
|
<div class="login-form">
|
||||||
<div class="login-header">
|
<div class="login-header">
|
||||||
<h2>一梦西游玩家服务中心</h2>
|
<h2>一梦西游玩家服务中心</h2>
|
||||||
<p>欢迎登录一梦西游一站式玩家服务中心</p>
|
<p>欢迎登录一梦西游一站式玩家服务中心</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-form
|
<el-form
|
||||||
ref="loginFormRef"
|
ref="loginFormRef"
|
||||||
:model="loginForm"
|
:model="loginForm"
|
||||||
:rules="loginRules"
|
:rules="loginRules"
|
||||||
label-position="top"
|
label-position="left"
|
||||||
>
|
label-width="80px"
|
||||||
<el-form-item label="游戏账号" prop="username">
|
class="login-form-inner"
|
||||||
<el-input
|
>
|
||||||
v-model="loginForm.username"
|
<el-form-item label="游戏账号" prop="username">
|
||||||
placeholder="请输入游戏账号"
|
<el-input
|
||||||
size="large"
|
v-model="loginForm.username"
|
||||||
:prefix-icon="RiUserLine"
|
placeholder="请输入游戏账号"
|
||||||
/>
|
size="large"
|
||||||
|
:prefix-icon="RiUserLine"
|
||||||
</el-form-item>
|
/>
|
||||||
|
|
||||||
<el-form-item label="密码" prop="password">
|
</el-form-item>
|
||||||
<el-input
|
|
||||||
v-model="loginForm.password"
|
<el-form-item label="密码" prop="password">
|
||||||
type="password"
|
<el-input
|
||||||
placeholder="请输入游戏密码"
|
v-model="loginForm.password"
|
||||||
size="large"
|
type="password"
|
||||||
show-password
|
placeholder="请输入游戏账号密码"
|
||||||
:prefix-icon="RiLockLine"
|
size="large"
|
||||||
/>
|
show-password
|
||||||
|
:prefix-icon="RiLockLine"
|
||||||
</el-form-item>
|
/>
|
||||||
|
|
||||||
<el-form-item>
|
</el-form-item>
|
||||||
<el-button
|
|
||||||
type="primary"
|
<el-form-item class="login-button-item">
|
||||||
:loading="loading"
|
<el-button
|
||||||
@click="handleLogin"
|
type="primary"
|
||||||
size="large"
|
:loading="loading"
|
||||||
block
|
@click="handleLogin"
|
||||||
>
|
size="large"
|
||||||
登录
|
class="login-button"
|
||||||
</el-button>
|
>
|
||||||
</el-form-item>
|
登录
|
||||||
|
</el-button>
|
||||||
<div class="login-footer">
|
</el-form-item>
|
||||||
<el-link type="primary" :underline="false">忘记密码？</el-link>
|
|
||||||
<el-link type="primary" :underline="false">注册账号</el-link>
|
<div class="login-footer">
|
||||||
</div>
|
<el-link type="primary" :underline="false">忘记密码？</el-link>
|
||||||
</el-form>
|
<el-link type="primary" :underline="false">注册游戏账号</el-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-form>
|
||||||
</template>
|
</div>
|
||||||
|
</div>
|
||||||
<script setup lang="ts">
|
</template>
|
||||||
import { ref, reactive } from 'vue'
|
|
||||||
import { ElMessage } from 'element-plus'
|
<script setup lang="ts">
|
||||||
import { useRouter } from 'vue-router'
|
import { ref, reactive } from 'vue'
|
||||||
import { playerLogin } from '@/api/auth'
|
import { ElMessage } from 'element-plus'
|
||||||
import type { LoginForm } from '@/types/auth'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { playerLogin } from '@/api/auth'
|
||||||
// 导入Remix Icon组件
|
import type { LoginForm } from '@/types/auth'
|
||||||
import { RiUserLine, RiLockLine } from '@remixicon/vue'
|
|
||||||
|
// 导入Remix Icon组件
|
||||||
const router = useRouter()
|
import { RiUserLine, RiLockLine } from '@remixicon/vue'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
// 登录表单引用
|
|
||||||
const loginFormRef = ref()
|
|
||||||
|
// 登录表单引用
|
||||||
// 加载状态
|
const loginFormRef = ref()
|
||||||
const loading = ref(false)
|
|
||||||
|
// 加载状态
|
||||||
// 登录表单
|
const loading = ref(false)
|
||||||
const loginForm = reactive<LoginForm>({
|
|
||||||
username: '',
|
// 登录表单
|
||||||
password: ''
|
const loginForm = reactive<LoginForm>({
|
||||||
})
|
username: '',
|
||||||
|
password: ''
|
||||||
// 表单验证规则
|
})
|
||||||
const loginRules = {
|
|
||||||
username: [
|
// 表单验证规则
|
||||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
const loginRules = {
|
||||||
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
|
username: [
|
||||||
],
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||||
password: [
|
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
|
||||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
],
|
||||||
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
|
password: [
|
||||||
]
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||||
}
|
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
|
||||||
|
]
|
||||||
// 处理登录
|
}
|
||||||
const handleLogin = async () => {
|
|
||||||
// 表单验证
|
// 处理登录
|
||||||
if (!loginFormRef.value) return
|
const handleLogin = async () => {
|
||||||
|
// 表单验证
|
||||||
try {
|
if (!loginFormRef.value) return
|
||||||
await loginFormRef.value.validate()
|
|
||||||
loading.value = true
|
try {
|
||||||
|
await loginFormRef.value.validate()
|
||||||
// 调用游戏服务端API登录（API层会自动处理存储）
|
loading.value = true
|
||||||
const response = await playerLogin(loginForm)
|
|
||||||
|
// 调用游戏服务端API登录（API层会自动处理存储）
|
||||||
// 检查响应是否成功（游戏服务端返回code=200表示成功）
|
const response = await playerLogin(loginForm)
|
||||||
if (response?.code === 200 && response?.success === true) {
|
|
||||||
ElMessage.success('登录成功')
|
// 检查响应是否成功（游戏服务端返回code=200表示成功）
|
||||||
|
if (response?.code === 200 && response?.success === true) {
|
||||||
// 跳转到玩家首页
|
ElMessage.success('登录成功')
|
||||||
router.push('/player')
|
|
||||||
} else {
|
// 跳转到玩家首页
|
||||||
throw new Error(response?.message || '登录失败，请稍后重试')
|
router.push('/player')
|
||||||
}
|
} else {
|
||||||
} catch (error: any) {
|
throw new Error(response?.message || '登录失败，请稍后重试')
|
||||||
ElMessage.error(error?.message || '登录失败，请稍后重试')
|
}
|
||||||
console.error('登录失败:', error)
|
} catch (error: any) {
|
||||||
console.log('详细错误信息:', JSON.stringify(error, null, 2))
|
ElMessage.error(error?.message || '登录失败，请稍后重试')
|
||||||
} finally {
|
console.error('登录失败:', error)
|
||||||
loading.value = false
|
console.log('详细错误信息:', JSON.stringify(error, null, 2))
|
||||||
}
|
} finally {
|
||||||
}
|
loading.value = false
|
||||||
</script>
|
}
|
||||||
|
}
|
||||||
<style scoped>
|
</script>
|
||||||
.login-container {
|
|
||||||
display: flex;
|
<style scoped>
|
||||||
justify-content: center;
|
.login-container {
|
||||||
align-items: center;
|
display: flex;
|
||||||
min-height: 100vh;
|
justify-content: center;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
align-items: center;
|
||||||
padding: 20px;
|
min-height: 100vh;
|
||||||
}
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
padding: 20px;
|
||||||
.login-form {
|
}
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
.login-form {
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
background: #fff;
|
||||||
padding: 40px;
|
border-radius: 12px;
|
||||||
width: 100%;
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
max-width: 400px;
|
padding: 40px;
|
||||||
}
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
.login-header {
|
}
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
.login-header {
|
||||||
}
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
.login-header h2 {
|
}
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
.login-header h2 {
|
||||||
color: #333;
|
font-size: 24px;
|
||||||
margin-bottom: 8px;
|
font-weight: 600;
|
||||||
}
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
.login-header p {
|
}
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
.login-header p {
|
||||||
}
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
.login-footer {
|
}
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
.login-footer {
|
||||||
margin-top: 20px;
|
display: flex;
|
||||||
}
|
justify-content: space-between;
|
||||||
|
margin-top: 20px;
|
||||||
/* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
|
}
|
||||||
|
|
||||||
|
/* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
|
||||||
|
|
||||||
|
/* 修复label和输入框水平居中对齐问题 */
|
||||||
|
.login-form-inner :deep(.el-form-item__label) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px; /* 与输入框高度一致 */
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-inner :deep(.el-form-item__content) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录按钮样式 */
|
||||||
|
.login-button-item {
|
||||||
|
margin-left: -80px; /* 抵消label宽度，使按钮在整个表单中居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button-item :deep(.el-form-item__content) {
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
margin-left: 80px; /* 重新添加左边距，使按钮内容居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
width: 100%; /* 按钮宽度占满容器 */
|
||||||
|
max-width: 280px; /* 最大宽度限制 */
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user