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