优化完善玩家服务中心登录页和运营管理系统后台登录页
This commit is contained in:
Stev_Wang
@@ -1,44 +1,107 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<div class="admin-login">
|
||||||
<n-card title="管理员登录" style="width: 400px;">
|
<div class="login-background">
|
||||||
<n-form ref="formRef" :model="formValue" :rules="rules" size="large">
|
<div class="circle circle-1"></div>
|
||||||
<n-form-item path="username" label="用户名">
|
<div class="circle circle-2"></div>
|
||||||
<n-input v-model:value="formValue.username" placeholder="请输入用户名" />
|
<div class="circle circle-3"></div>
|
||||||
</n-form-item>
|
<div class="line line-1"></div>
|
||||||
<n-form-item path="password" label="密码">
|
<div class="line line-2"></div>
|
||||||
<n-input
|
<div class="line line-3"></div>
|
||||||
v-model:value="formValue.password"
|
<div class="square square-1"></div>
|
||||||
type="password"
|
<div class="square square-2"></div>
|
||||||
show-password-on="click"
|
</div>
|
||||||
placeholder="请输入密码"
|
<div class="login-container animate__animated animate__fadeInUp">
|
||||||
/>
|
<div class="login-header">
|
||||||
</n-form-item>
|
<div class="login-logo">
|
||||||
<n-form-item v-if="captchaEnabled" path="captchaCode" label="验证码">
|
<img :src="logoImage" alt="运营管理系统" />
|
||||||
<n-space style="width: 100%">
|
</div>
|
||||||
|
<h1 class="login-title">梦幻西游运营管理系统</h1>
|
||||||
|
<p class="login-subtitle">管理员登录</p>
|
||||||
|
</div>
|
||||||
|
<div class="login-form-wrapper">
|
||||||
|
<n-form ref="formRef" :model="formValue" :rules="rules" size="large" class="login-form">
|
||||||
|
<n-form-item path="username" class="form-item">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.username"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
class="login-input"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon size="18" color="#808695">
|
||||||
|
<PersonOutline />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item path="password" class="form-item">
|
||||||
<n-input
|
<n-input
|
||||||
v-model:value="formValue.captchaCode"
|
v-model:value="formValue.password"
|
||||||
placeholder="请输入验证码"
|
type="password"
|
||||||
@keyup.enter="handleLogin"
|
show-password-on="click"
|
||||||
/>
|
placeholder="请输入密码"
|
||||||
<div class="captcha-image" @click="handleRefreshCaptcha" v-html="captchaSvg"></div>
|
class="login-input"
|
||||||
</n-space>
|
>
|
||||||
</n-form-item>
|
<template #prefix>
|
||||||
<n-form-item>
|
<n-icon size="18" color="#808695">
|
||||||
<n-button type="primary" block @click="handleLogin" :loading="loading">
|
<LockClosedOutline />
|
||||||
登录
|
</n-icon>
|
||||||
</n-button>
|
</template>
|
||||||
</n-form-item>
|
</n-input>
|
||||||
</n-form>
|
</n-form-item>
|
||||||
</n-card>
|
<n-form-item v-if="captchaEnabled" path="captchaCode" class="form-item">
|
||||||
|
<n-space style="width: 100%">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.captchaCode"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
class="login-input"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon size="18" color="#808695">
|
||||||
|
<ShieldOutline />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<div class="captcha-image" @click="handleRefreshCaptcha" v-html="captchaSvg"></div>
|
||||||
|
</n-space>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item class="form-item remember-forgot">
|
||||||
|
<div class="flex-between-wrapper">
|
||||||
|
<div class="left">
|
||||||
|
<n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<a href="javascript:" class="forgot-link">忘记密码</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item class="form-item">
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
block
|
||||||
|
@click="handleLogin"
|
||||||
|
:loading="loading"
|
||||||
|
class="login-button"
|
||||||
|
>
|
||||||
|
登录
|
||||||
|
</n-button>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</div>
|
||||||
|
<div class="login-footer">
|
||||||
|
<p>© 2024 梦幻西游运营管理系统</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { NCard, NForm, NFormItem, NInput, NButton, NSpace, useMessage } from 'naive-ui'
|
import { NForm, NFormItem, NInput, NButton, NSpace, NIcon, NCheckbox, useMessage } from 'naive-ui'
|
||||||
|
import { PersonOutline, LockClosedOutline, ShieldOutline } from '@vicons/ionicons5'
|
||||||
import { useAdminStore } from '@/stores/admin'
|
import { useAdminStore } from '@/stores/admin'
|
||||||
import { generateCaptcha, checkCaptchaEnabled } from '@/api/admin'
|
import { generateCaptcha, checkCaptchaEnabled } from '@/api/admin'
|
||||||
|
import logoImage from '../../../assets/logo.png'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const message = useMessage()
|
const message = useMessage()
|
||||||
@@ -49,6 +112,7 @@ const loading = ref(false)
|
|||||||
const captchaEnabled = ref(false)
|
const captchaEnabled = ref(false)
|
||||||
const captchaSvg = ref('')
|
const captchaSvg = ref('')
|
||||||
const captchaId = ref('')
|
const captchaId = ref('')
|
||||||
|
const autoLogin = ref(false)
|
||||||
|
|
||||||
const formValue = ref({
|
const formValue = ref({
|
||||||
username: '',
|
username: '',
|
||||||
@@ -143,33 +207,361 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="less" scoped>
|
||||||
.login-container {
|
.admin-login {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
min-height: 100vh;
|
||||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMiIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIiAvPgo8L3N2Zz4=');
|
||||||
|
opacity: 0.3;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-background {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
|
||||||
|
|
||||||
|
&-1 {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
top: -100px;
|
||||||
|
right: -100px;
|
||||||
|
animation: float 20s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-2 {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
bottom: -50px;
|
||||||
|
left: -50px;
|
||||||
|
animation: float 15s ease-in-out infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-3 {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
top: 50%;
|
||||||
|
left: 10%;
|
||||||
|
animation: float 18s ease-in-out infinite 2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
position: absolute;
|
||||||
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
|
||||||
|
|
||||||
|
&-1 {
|
||||||
|
width: 200px;
|
||||||
|
height: 2px;
|
||||||
|
top: 20%;
|
||||||
|
left: 20%;
|
||||||
|
transform: rotate(-30deg);
|
||||||
|
animation: pulse 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-2 {
|
||||||
|
width: 150px;
|
||||||
|
height: 2px;
|
||||||
|
bottom: 30%;
|
||||||
|
right: 15%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
animation: pulse 6s ease-in-out infinite 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-3 {
|
||||||
|
width: 100px;
|
||||||
|
height: 2px;
|
||||||
|
top: 60%;
|
||||||
|
left: 30%;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
animation: pulse 7s ease-in-out infinite 2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.square {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
&-1 {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
top: 15%;
|
||||||
|
left: 10%;
|
||||||
|
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
|
||||||
|
transform: rotate(30deg);
|
||||||
|
animation: rotate 15s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-2 {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
bottom: 20%;
|
||||||
|
right: 20%;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: transparent;
|
||||||
|
animation: rotate 12s linear infinite reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0) rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px) rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
padding: 40px;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
.login-logo {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
/* &::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 60px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(to right, #18a058, #36ad6a);
|
||||||
|
border-radius: 2px;
|
||||||
|
} */
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin: 20px 0 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-wrapper {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
:deep(.n-form-item-feedback-wrapper) {
|
||||||
|
min-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
:deep(.n-form-item-blank) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.remember-forgot {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
.flex-between-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-link {
|
||||||
|
color: #606266;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-input {
|
||||||
|
:deep(.n-input__input-el) {
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-input-wrapper) {
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
:deep(.n-input-wrapper) {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
:deep(.n-input-wrapper) {
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
height: 48px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
:deep(.n-button__border),
|
||||||
|
:deep(.n-button__state-border) {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 20px rgba(24, 160, 88, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-image {
|
.captcha-image {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 40px;
|
height: 48px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid #dcdfe6;
|
border: 1px solid #dcdfe6;
|
||||||
border-radius: 4px;
|
border-radius: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
transition: all 0.3s;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-image:hover {
|
.captcha-image:hover {
|
||||||
border-color: #409eff;
|
border-color: #667eea;
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||||
|
transform: scale(1.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
.captcha-image :deep(svg) {
|
.captcha-image :deep(svg) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.login-container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header {
|
||||||
|
.login-logo img {
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -349,7 +349,7 @@ onMounted(() => {
|
|||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
/* &::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -10px;
|
bottom: -10px;
|
||||||
@@ -359,7 +359,7 @@ onMounted(() => {
|
|||||||
height: 2px;
|
height: 2px;
|
||||||
background: linear-gradient(to right, #2d8cf0, #0081ff);
|
background: linear-gradient(to right, #2d8cf0, #0081ff);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-welcome {
|
.login-welcome {
|
||||||
|
|||||||
Reference in New Issue
Block a user