shuguang/Code-Master
1
0
Fork 0
mirror of https://github.com/shuguangnet/Code-Master.git synced 2025-01-23 16:08:45 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化登录注册弹窗

Browse Source
This commit is contained in:
曙光 2024-09-28 22:16:53 +08:00
parent 9ee847038f
commit 19f535c028
2 changed files with 103 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layouts/UserLayout.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div id="userLayout"> <div id="userLayout">
<a-layout style="min-height: 100vh"> <a-layout style="min-height: 100vh">
<a-layout-header class="header"> <a-layout-header class="header">
<a-space> <a-space>
<img src="../assets/logo.png" class="logo" /> <img src="../assets/logo.png" class="logo" />
@ -49,5 +51,6 @@
right: 0; right: 0;
text-align: center; text-align: center;
} }
</style> </style>
<script></script> <script></script>

124
src/views/user/UserLoginView.vue
View File

@ -1,28 +1,43 @@
<template> <template>
<div id="userLoginView"> <div id="userLoginView">
<h2 style="margin-bottom: 16px">用户登录</h2> <!-- 添加阴影和圆角使其更具卡片效果 -->
<a-form <div class="login-container">
style="max-width: 480px; margin: 0 auto" <h2>用户登录</h2>
label-align="left" <a-form
auto-label-width layout="vertical"
:model="form" :model="form"
@submit="handleSubmit" @submit="handleSubmit"
> class="login-form"
<a-form-item field="userAccount" label="账号"> >
<a-input v-model="form.userAccount" placeholder="请输入账号" /> <a-form-item field="userAccount" label="账号">
</a-form-item> <a-input
<a-form-item field="userPassword" tooltip="密码不少于 8 位" label="密码"> v-model="form.userAccount"
<a-input-password placeholder="请输入账号"
v-model="form.userPassword" size="large"
placeholder="请输入密码" allow-clear
/> />
</a-form-item> </a-form-item>
<a-form-item> <a-form-item field="userPassword" label="密码">
<a-button type="primary" html-type="submit" style="width: 120px"> <a-input-password
登录 v-model="form.userPassword"
</a-button> placeholder="请输入密码"
</a-form-item> size="large"
</a-form> allow-clear
/>
</a-form-item>
<a-form-item>
<!-- 提供更大的点击区域，调整按钮大小 -->
<a-button
type="primary"
html-type="submit"
size="large"
class="login-button"
>
登录
</a-button>
</a-form-item>
</a-form>
</div>
</div> </div>
</template> </template>
@ -54,7 +69,7 @@ const handleSubmit = async () => {
if (res.code === 0) { if (res.code === 0) {
await store.dispatch("user/getLoginUser"); await store.dispatch("user/getLoginUser");
router.push({ router.push({
path: "/", path: "/question",
replace: true, replace: true,
}); });
} else { } else {
@ -62,6 +77,65 @@ const handleSubmit = async () => {
} }
}; };
</script> </script>
<style scoped>
<style scoped>
/* 样式优化 */
#userLoginView {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.login-container {
background: #fff;
padding: 40px 30px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
animation: fadeIn 0.5s ease;
}
h2 {
text-align: center;
font-size: 24px;
color: #0052d9;
margin-bottom: 24px;
}
.login-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.login-button {
width: 100%;
}
/* 动画效果 */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式优化 */
@media (max-width: 600px) {
.login-container {
padding: 30px 20px;
}
h2 {
font-size: 20px;
}
}
</style> </style>