refactor: 手撸前端登录页面
This commit is contained in:
陈淳
@@ -138,7 +138,6 @@ namespace Yi.Abp.Web
|
||||
//options.TenantResolvers.RemoveAll(x => x.Name == CookieTenantResolveContributor.ContributorName);
|
||||
});
|
||||
|
||||
|
||||
//速率限制
|
||||
//每60秒限制100个请求，滑块添加，分6段
|
||||
service.AddRateLimiter(_ =>
|
||||
|
||||
@@ -1,210 +1,205 @@
|
||||
@charset "UTF-8";
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*公共CSS*/
|
||||
.box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #1d4359;
|
||||
}
|
||||
|
||||
.box .content {
|
||||
box-shadow: 0px 1px 6px #3b4859;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .login-form .form-item {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .login-form .form-item span {
|
||||
display: block;
|
||||
margin: 5px 20px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .login-form .form-item .input-item {
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .login-form .form-item .input-item:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .login-form .login-btn {
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
font-weight: 100;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .divider {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .divider span:nth-child(1) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .divider span:nth-child(3) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .divider .line {
|
||||
display: inline-block;
|
||||
max-width: 30%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .divider .divider-text {
|
||||
vertical-align: middle;
|
||||
margin: 0px 20px;
|
||||
line-height: 0px;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .other-login-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box .content .login-wrapper .other-login-item {
|
||||
cursor: pointer;
|
||||
border: 1px solid #d6dee4;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/*一般大于手机的尺寸CSS*/
|
||||
@media (min-width: 767px) {
|
||||
.box {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
.box .content {
|
||||
width: 85vw;
|
||||
height: 90vh;
|
||||
background: url("@/assets/login_images/login_two.jpg") no-repeat;
|
||||
background-size: 90% 100%;
|
||||
position: absolute;
|
||||
right: 15%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.box .content .login-wrapper {
|
||||
width: 25vw;
|
||||
position: absolute;
|
||||
right: 15%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.box .content .login-wrapper h1 {
|
||||
text-align: center;
|
||||
font-size: 45px;
|
||||
color: #516473;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.box .content .login-wrapper .login-form {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.box .content .login-wrapper .login-form .form-item span {
|
||||
color: #516473;
|
||||
}
|
||||
.box .content .login-wrapper .login-form .form-item .input-item {
|
||||
height: 60px;
|
||||
border: 1px solid #d6dee4;
|
||||
}
|
||||
.box .content .login-wrapper .login-form .login-btn {
|
||||
height: 50px;
|
||||
background-color: #3b4859;
|
||||
font-size: 20px;
|
||||
}
|
||||
.box .content .login-wrapper .divider .line {
|
||||
border-bottom: 1px solid #d6dee4;
|
||||
}
|
||||
.box .content .login-wrapper .other-login-item {
|
||||
border-radius: 20px;
|
||||
}
|
||||
.box .content .login-wrapper .other-login-item img {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/*手机端CSS*/
|
||||
@media (max-width: 768px) {
|
||||
.box .content {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url("@/assets/login_images/login_bg_phone.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
.box .content .login-wrapper {
|
||||
width: 70%;
|
||||
height: 60%;
|
||||
padding-top: 15%;
|
||||
}
|
||||
.box .content .login-wrapper h1 {
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
.box .content .login-wrapper .login-form .form-item {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.box .content .login-wrapper .login-form .form-item span {
|
||||
color: #71818d;
|
||||
}
|
||||
.box .content .login-wrapper .login-form .form-item .input-item {
|
||||
height: 30px;
|
||||
border: 1px solid #71818d;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.box .content .login-wrapper .login-form .login-btn {
|
||||
height: 40px;
|
||||
background-color: #eb5f5d;
|
||||
font-size: 16px;
|
||||
}
|
||||
.box .content .login-wrapper .divider .line {
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.box .content .login-wrapper .divider .divider-text {
|
||||
color: #fff;
|
||||
}
|
||||
.box .content .login-wrapper .other-login-item {
|
||||
border-radius: 15px;
|
||||
}
|
||||
.box .content .login-wrapper .other-login-item img {
|
||||
cursor: pointer;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-color: #272162;
|
||||
}
|
||||
|
||||
.div-content
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.div-left
|
||||
{
|
||||
width: 414px;
|
||||
height:522px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.div-right
|
||||
{
|
||||
width: 414px;
|
||||
height:522px;
|
||||
background-color:#4E2665;
|
||||
}
|
||||
.left-container
|
||||
{
|
||||
padding: 40px 60px;
|
||||
|
||||
}
|
||||
.title{
|
||||
margin: 5px;
|
||||
font-size: 35px;
|
||||
}
|
||||
.title-1 span
|
||||
{
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title-1
|
||||
{
|
||||
color: #7F438C;
|
||||
|
||||
font-weight: normal;
|
||||
}
|
||||
.title-2
|
||||
{
|
||||
color: #7F438C;
|
||||
font-weight:bolder;
|
||||
}
|
||||
.input-content
|
||||
{
|
||||
margin: 25px 0 10px 0;
|
||||
}
|
||||
.input
|
||||
{
|
||||
margin: 15px 0;
|
||||
}
|
||||
.input input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.input input
|
||||
{
|
||||
width: 100%;
|
||||
border: 1px solid #000;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
height: 25px;
|
||||
|
||||
}
|
||||
.input p
|
||||
{
|
||||
font-weight: bold;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.left-btn
|
||||
{
|
||||
margin: 20px 0;
|
||||
}
|
||||
.left-btn button
|
||||
{
|
||||
border: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-login
|
||||
{
|
||||
background-color: #EF6562;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
.btn-reg
|
||||
{
|
||||
margin-left: 20px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
}
|
||||
.left-lable
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.left-lable label{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.bottom-div
|
||||
{
|
||||
font-size: 12px;
|
||||
font-weight:bold;
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
.bottom-div span
|
||||
{
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
.bottom-div span img
|
||||
{
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.code{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.code-input
|
||||
{
|
||||
width: 60% !important;
|
||||
}
|
||||
.code-img
|
||||
{
|
||||
margin-left: 20px;
|
||||
border: 0.8px solid #000;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.div-bottom
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
color:#CAD2D9;
|
||||
font-size: 12px;
|
||||
}
|
||||
.div-bottom span{
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.phone-code{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.phone-code-input
|
||||
{
|
||||
width: 60% !important;
|
||||
}
|
||||
.phone-code-btn
|
||||
{
|
||||
border: 0.8px solid #000;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
background-color: #EF6562;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.register-title
|
||||
{
|
||||
color: #7F438C;
|
||||
font-weight:bolder;
|
||||
font-size: 30px;
|
||||
}
|
||||
.div-left-register
|
||||
{
|
||||
width: 414px;
|
||||
height:522px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
}
|
||||
.div-right-register
|
||||
{
|
||||
width: 414px;
|
||||
height:522px;
|
||||
background-color:#4E2665;
|
||||
|
||||
}
|
||||
|
||||
1
Yi.Bbs.Vue3/src/assets/styles/login.min.css
vendored
1
Yi.Bbs.Vue3/src/assets/styles/login.min.css
vendored
@@ -1 +0,0 @@
|
||||
*{margin:0;padding:0}.box{width:100vw;height:100vh;background-color:#1d4359}.box .content{box-shadow:0px 1px 6px #3b4859}.box .content .login-wrapper h1{text-align:center}.box .content .login-wrapper .login-form .form-item{margin:20px 0}.box .content .login-wrapper .login-form .form-item span{display:block;margin:5px 20px;font-weight:100}.box .content .login-wrapper .login-form .form-item .input-item{width:100%;border-radius:40px;padding:20px;box-sizing:border-box;font-size:20px;font-weight:200}.box .content .login-wrapper .login-form .form-item .input-item:focus{outline:none}.box .content .login-wrapper .login-form .login-btn{width:100%;border-radius:40px;color:#fff;border:0;font-weight:100;margin-top:10px;cursor:pointer}.box .content .login-wrapper .divider{width:100%;margin:20px 0;text-align:center;display:flex;align-items:center;justify-content:center}.box .content .login-wrapper .divider span:nth-child(1){flex:1}.box .content .login-wrapper .divider span:nth-child(3){flex:1}.box .content .login-wrapper .divider .line{display:inline-block;max-width:30%;width:30%}.box .content .login-wrapper .divider .divider-text{vertical-align:middle;margin:0px 20px;line-height:0px;display:inline-block;width:100px}.box .content .login-wrapper .other-login-wrapper{width:100%;display:flex;justify-content:center;align-items:center}.box .content .login-wrapper .other-login-item{cursor:pointer;border:1px solid #d6dee4;padding:10px;margin:10px}@media (min-width: 767px){.box{background-color:#f0f2f5}.box .content{width:85vw;height:90vh;background:url("@/assets/login_images/login_two.jpg") no-repeat;background-size:90% 100%;position:absolute;right:15%;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:20px;background-color:#fff}.box .content .login-wrapper{width:25vw;position:absolute;right:15%;top:50%;transform:translateY(-50%)}.box .content .login-wrapper h1{text-align:center;font-size:45px;color:#516473;margin-bottom:40px}.box .content .login-wrapper .login-form{margin:10px 0}.box .content .login-wrapper .login-form .form-item span{color:#516473}.box .content .login-wrapper .login-form .form-item .input-item{height:60px;border:1px solid #d6dee4}.box .content .login-wrapper .login-form .login-btn{height:50px;background-color:#3b4859;font-size:20px}.box .content .login-wrapper .divider .line{border-bottom:1px solid #d6dee4}.box .content .login-wrapper .other-login-item{border-radius:20px}.box .content .login-wrapper .other-login-item img{cursor:pointer;width:40px;height:40px}}@media (max-width: 768px){.box .content{width:100vw;height:100vh;background:url("@/assets/login_images/login_bg_phone.png") no-repeat;background-size:100% 100%;display:flex;align-items:flex-start;justify-content:center}.box .content .login-wrapper{width:70%;height:60%;padding-top:15%}.box .content .login-wrapper h1{font-size:30px;color:#fff}.box .content .login-wrapper .login-form .form-item{margin:10px 0}.box .content .login-wrapper .login-form .form-item span{color:#71818d}.box .content .login-wrapper .login-form .form-item .input-item{height:30px;border:1px solid #71818d;background-color:transparent;color:#fff}.box .content .login-wrapper .login-form .login-btn{height:40px;background-color:#eb5f5d;font-size:16px}.box .content .login-wrapper .divider .line{border-bottom:1px solid #fff}.box .content .login-wrapper .divider .divider-text{color:#fff}.box .content .login-wrapper .other-login-item{border-radius:15px}.box .content .login-wrapper .other-login-item img{cursor:pointer;width:35px;height:35px}}
|
||||
@@ -1,204 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/*公共CSS*/
|
||||
.box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgb(29, 67, 89);
|
||||
.content {
|
||||
box-shadow: 0px 1px 6px #3b4859;
|
||||
.login-wrapper {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
.login-form {
|
||||
.form-item {
|
||||
margin: 20px 0;
|
||||
span {
|
||||
display: block;
|
||||
margin: 5px 20px;
|
||||
font-weight: 100;
|
||||
}
|
||||
.input-item {
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
font-weight: 100;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
span:nth-child(1) {
|
||||
flex: 1;
|
||||
}
|
||||
span:nth-child(3) {
|
||||
flex: 1;
|
||||
}
|
||||
.line {
|
||||
display: inline-block;
|
||||
max-width: 30%;
|
||||
width: 30%;
|
||||
}
|
||||
.divider-text {
|
||||
vertical-align: middle;
|
||||
margin: 0px 20px;
|
||||
line-height: 0px;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
.other-login-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.other-login-item {
|
||||
border: 1px solid rgb(214, 222, 228);
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*一般大于手机的尺寸CSS*/
|
||||
@media (min-width: 767px) {
|
||||
.box {
|
||||
background-color: #f0f2f5;
|
||||
.content {
|
||||
width: 85vw;
|
||||
height: 90vh;
|
||||
background: url("@/assets/login_images/login_two.jpg") no-repeat;
|
||||
background-size: 90% 100%;
|
||||
position: absolute;
|
||||
right: 15%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
.login-wrapper {
|
||||
width: 25vw;
|
||||
position: absolute;
|
||||
right: 15%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 45px;
|
||||
color: rgb(81, 100, 115);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.login-form {
|
||||
margin: 10px 0;
|
||||
.form-item {
|
||||
span {
|
||||
color: rgb(81, 100, 115);
|
||||
}
|
||||
.input-item {
|
||||
height: 60px;
|
||||
border: 1px solid rgb(214, 222, 228);
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
height: 50px;
|
||||
background-color: rgb(59, 72, 89);
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
.line {
|
||||
border-bottom: 1px solid rgb(214, 222, 228);
|
||||
}
|
||||
}
|
||||
.other-login-item {
|
||||
border-radius: 20px;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*手机端CSS*/
|
||||
@media (max-width: 768px) {
|
||||
.box {
|
||||
.content {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url("@/assets/login_images/login_bg_phone.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
.login-wrapper {
|
||||
width: 70%;
|
||||
height: 60%;
|
||||
padding-top: 15%;
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
.login-form {
|
||||
.form-item {
|
||||
margin: 10px 0;
|
||||
span {
|
||||
color: rgb(113, 129, 141);
|
||||
}
|
||||
.input-item {
|
||||
height: 30px;
|
||||
border: 1px solid rgb(113, 129, 141);
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
height: 40px;
|
||||
background-color: rgb(235, 95, 93);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
.line {
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.divider-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.other-login-item {
|
||||
border-radius: 15px;
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
525
Yi.Bbs.Vue3/src/views/login/index.bak.vue
Normal file
525
Yi.Bbs.Vue3/src/views/login/index.bak.vue
Normal file
@@ -0,0 +1,525 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="login-box">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div class="header-box">
|
||||
<div class="text" @click="guestlogin" v-if="isRegister">返回首页</div>
|
||||
<div class="text" @click="handleSignInNow" v-else>
|
||||
已有账号立即登录
|
||||
</div>
|
||||
<el-icon size="15"><DArrowRight /></el-icon>
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="title" v-if="isRegister">意社区登录 | SIGN IN</div>
|
||||
<div class="title" v-else>意社区注册 | REGISTER</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="login-form">
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="rules"
|
||||
v-if="isRegister"
|
||||
>
|
||||
<el-form-item label="用户名" class="title-item"></el-form-item>
|
||||
<el-form-item prop="userName">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="loginForm.userName"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" class="title-item"></el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="loginForm.password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" class="title-item"></el-form-item>
|
||||
<div class="flex-between">
|
||||
<el-col :span="18">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model.trim="loginForm.code"
|
||||
placeholder="请输入验证码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-image
|
||||
@click="handleGetCodeImage"
|
||||
style="width: 120px; height: 40px; cursor: pointer"
|
||||
:src="codeImageURL"
|
||||
:fit="fit"
|
||||
/>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-form
|
||||
class="registerForm"
|
||||
ref="registerFormRef"
|
||||
:model="registerForm"
|
||||
:rules="registerRules"
|
||||
v-else
|
||||
>
|
||||
<el-form-item label="用户名" class="title-item"></el-form-item>
|
||||
<el-form-item prop="userName">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model.trim="registerForm.userName"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" class="title-item"></el-form-item>
|
||||
<div class="flex-between">
|
||||
<div class="item">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model.trim="registerForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="captcha"
|
||||
:disabled="isDisabledCode"
|
||||
>
|
||||
{{ codeInfo }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-form-item label="验证码" class="title-item"></el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model.trim="registerForm.code"
|
||||
placeholder="请输入验证码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" class="title-item"></el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model.trim="registerForm.password"
|
||||
placeholder="请输入新密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" class="title-item"></el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
type="password"
|
||||
v-model.trim="passwordConfirm"
|
||||
placeholder="请确认密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="link" v-if="isRegister">
|
||||
<div class="text" @click="handleRegister">没有账号？前往注册</div>
|
||||
</div>
|
||||
<div
|
||||
class="login-btn"
|
||||
@click="login(loginFormRef)"
|
||||
v-if="isRegister"
|
||||
>
|
||||
登 录
|
||||
</div>
|
||||
<div class="login-btn" @click="register(registerFormRef)" v-else>
|
||||
注 册
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" v-if="isRegister">
|
||||
<div class="title">
|
||||
<div>或者</div>
|
||||
<div>其他方式登录</div>
|
||||
</div>
|
||||
<div class="icon-list">
|
||||
<div class="icon" @click="handleQQLogin">
|
||||
<img src="@/assets/login_images/qq-setting.png" alt="" />
|
||||
</div>
|
||||
<div class="icon" @click="handleGiteeLogin">
|
||||
<img src="@/assets/login_images/gitee-setting.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-footer">
|
||||
<div class="info">站长：{{ configStore.author }}</div>
|
||||
<div class="info btn" @click="handleContact">联系我们</div>
|
||||
<div class="info btn">关于本站</div>
|
||||
<div class="info btn">建议反馈</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import useAuths from "@/hooks/useAuths";
|
||||
import { getCodePhone } from "@/apis/accountApi";
|
||||
import useUserStore from "@/stores/user";
|
||||
import useConfigStore from "@/stores/config";
|
||||
|
||||
const configStore = useConfigStore();
|
||||
const { loginFun, registerFun, loginSuccess } = useAuths();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const loginFormRef = ref();
|
||||
const rules = reactive({
|
||||
userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
|
||||
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
||||
});
|
||||
const loginForm = reactive({
|
||||
userName: "",
|
||||
password: "",
|
||||
uuid: "",
|
||||
code: "",
|
||||
});
|
||||
const guestlogin = async () => {
|
||||
const redirect = route.query?.redirect ?? "/index";
|
||||
router.push(redirect);
|
||||
};
|
||||
const codeUUid = computed(() => useUserStore().codeUUid);
|
||||
const login = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
loginForm.uuid = codeUUid.value;
|
||||
loginFun(loginForm);
|
||||
} catch (error) {
|
||||
console.log(error.message, "error.message");
|
||||
ElMessage({
|
||||
message: error.message,
|
||||
type: "error",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 注册逻辑
|
||||
const isRegister = ref(true);
|
||||
const registerFormRef = ref();
|
||||
// 确认密码
|
||||
const passwordConfirm = ref("");
|
||||
const registerForm = reactive({
|
||||
userName: "",
|
||||
phone: "",
|
||||
password: "",
|
||||
uuid: "",
|
||||
code: "",
|
||||
});
|
||||
const registerRules = reactive({
|
||||
userName: [
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
{ min: 2, message: "用户名需大于两位", trigger: "blur" },
|
||||
],
|
||||
phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
|
||||
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
|
||||
password: [
|
||||
{ required: true, message: "请输入新的密码", trigger: "blur" },
|
||||
{ min: 6, message: "密码需大于六位", trigger: "blur" },
|
||||
],
|
||||
});
|
||||
const handleRegister = () => {
|
||||
isRegister.value = !isRegister.value;
|
||||
};
|
||||
const register = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
if (registerForm.password != passwordConfirm.value) {
|
||||
ElMessage.error("两次密码输入不一致");
|
||||
return;
|
||||
}
|
||||
await registerFun(registerForm);
|
||||
handleRegister();
|
||||
} catch (error) {
|
||||
ElMessage({
|
||||
message: error.message,
|
||||
type: "error",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//验证码
|
||||
const codeInfo = ref("发送验证码");
|
||||
const isDisabledCode = ref(false);
|
||||
const captcha = async () => {
|
||||
if (registerForm.phone !== "") {
|
||||
const { data } = await getCodePhone(registerForm.phone);
|
||||
registerForm.uuid = data.uuid;
|
||||
ElMessage({
|
||||
message: `已向${registerForm.phone}发送验证码，请注意查收`,
|
||||
type: "success",
|
||||
});
|
||||
isDisabledCode.value = true;
|
||||
let time = 60; //定义剩下的秒数
|
||||
let timer = setInterval(function () {
|
||||
if (time == 0) {
|
||||
//清除定时器和复原按钮
|
||||
clearInterval(timer);
|
||||
codeInfo.value = "发送验证码";
|
||||
time = 60; //这个10是重新开始
|
||||
} else {
|
||||
codeInfo.value = "剩余" + time + "秒";
|
||||
time--;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage({
|
||||
message: `清先输入手机号`,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 立即登录
|
||||
const handleSignInNow = () => {
|
||||
isRegister.value = !isRegister.value;
|
||||
};
|
||||
// 获取图片验证码
|
||||
const codeImageURL = computed(() => useUserStore().codeImageURL);
|
||||
const handleGetCodeImage = () => {
|
||||
useUserStore().updateCodeImage();
|
||||
};
|
||||
onMounted(async () => {
|
||||
await useUserStore().updateCodeImage();
|
||||
});
|
||||
|
||||
// 联系我们跳转对应页面
|
||||
const handleContact = () => {
|
||||
router.push("/contact");
|
||||
};
|
||||
|
||||
const handleQQLogin = () => {
|
||||
window.open(
|
||||
"https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=102087446&redirect_uri=https://ccnetcore.com/auth/qq&state=0&scope=get_user_info",
|
||||
undefined,
|
||||
"width=500,height=500,left=50,top=50"
|
||||
);
|
||||
};
|
||||
|
||||
const handleGiteeLogin = () => {
|
||||
window.open(
|
||||
"https://gitee.com/oauth/authorize?client_id=949f3519969adc5cfe82c209b71300e8e0868e8536f3d7f59195c8f1e5b72502&redirect_uri=https%3A%2F%2Fccnetcore.com%2Fauth%2Fgitee&state=0&response_type=code",
|
||||
undefined,
|
||||
"width=500,height=500,left=50,top=50"
|
||||
);
|
||||
};
|
||||
|
||||
window.addEventListener("message", async (e) => {
|
||||
const { authData, type } = e.data;
|
||||
console.log(authData, "传到登录页的值");
|
||||
if (authData) {
|
||||
await loginSuccess({ data: JSON.parse(authData) });
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/login_images/login_bg.jpg") no-repeat;
|
||||
&-box {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
height: 80%;
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),
|
||||
inset 20px 20px 15px rgba(255, 255, 255, 0.7);
|
||||
.left {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: url("@/assets/login_images/welcome.jpg") no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: 50%;
|
||||
border-right: 2px solid #eeefef;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 45%;
|
||||
padding: 40px 30px 40px 30px;
|
||||
border-radius: 20px;
|
||||
// color: #06035a;
|
||||
|
||||
background-color: #fff;
|
||||
.header-box {
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
height: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
color: #409eff;
|
||||
}
|
||||
.top {
|
||||
height: 40px;
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.center {
|
||||
flex: 1;
|
||||
.login-form {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.input-item {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
outline: none;
|
||||
border: 2px solid #dde0df;
|
||||
border-radius: 5px;
|
||||
padding: 0 10px;
|
||||
&:hover {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
border-radius: 5px;
|
||||
background-color: #2282fe;
|
||||
}
|
||||
.link {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.text {
|
||||
cursor: pointer;
|
||||
color: #2282fe;
|
||||
}
|
||||
}
|
||||
.visitor {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.registerForm {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.title {
|
||||
> div {
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
.icon-list {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-footer {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
color: #eee;
|
||||
font-size: 14px;
|
||||
.info {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.title-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*手机端CSS*/
|
||||
@media (max-width: 768px) {
|
||||
.login {
|
||||
background: url("@/assets/login_images/phone_login_bg.jpg") no-repeat;
|
||||
&-box {
|
||||
.left {
|
||||
display: none;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
.top {
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.text {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,161 +1,131 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="login-box">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div class="header-box">
|
||||
<div class="text" @click="guestlogin" v-if="isRegister">返回首页</div>
|
||||
<div class="text" @click="handleSignInNow" v-else>
|
||||
已有账号立即登录
|
||||
</div>
|
||||
<el-icon size="15"><DArrowRight /></el-icon>
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="title" v-if="isRegister">意社区登录 | SIGN IN</div>
|
||||
<div class="title" v-else>意社区注册 | REGISTER</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="login-form">
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="rules"
|
||||
v-if="isRegister"
|
||||
>
|
||||
<el-form-item label="用户名" class="title-item"></el-form-item>
|
||||
<el-form-item prop="userName">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="loginForm.userName"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" class="title-item"></el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="loginForm.password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" class="title-item"></el-form-item>
|
||||
<div class="flex-between">
|
||||
<el-col :span="18">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model.trim="loginForm.code"
|
||||
placeholder="请输入验证码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-image
|
||||
@click="handleGetCodeImage"
|
||||
style="width: 120px; height: 40px; cursor: pointer"
|
||||
:src="codeImageURL"
|
||||
:fit="fit"
|
||||
/>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-form
|
||||
class="registerForm"
|
||||
ref="registerFormRef"
|
||||
:model="registerForm"
|
||||
:rules="registerRules"
|
||||
v-else
|
||||
>
|
||||
<el-form-item label="用户名" class="title-item"></el-form-item>
|
||||
<el-form-item prop="userName">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model.trim="registerForm.userName"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" class="title-item"></el-form-item>
|
||||
<div class="flex-between">
|
||||
<div class="item">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model.trim="registerForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="captcha"
|
||||
:disabled="isDisabledCode"
|
||||
<div class="container">
|
||||
<!-- 登录 -->
|
||||
<div class="div-content" v-if="isRegister">
|
||||
<div class="div-left">
|
||||
<div class="left-container">
|
||||
<p class="title title-1">Hello,<span @click="guestlogin">you can go to homepage >></span></p>
|
||||
<p class="title title-2">Welcome to Yi!</p>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="rules"
|
||||
>
|
||||
{{ codeInfo }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-form-item label="验证码" class="title-item"></el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model.trim="registerForm.code"
|
||||
placeholder="请输入验证码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" class="title-item"></el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model.trim="registerForm.password"
|
||||
placeholder="请输入新密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" class="title-item"></el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
type="password"
|
||||
v-model.trim="passwordConfirm"
|
||||
placeholder="请确认密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="link" v-if="isRegister">
|
||||
<div class="text" @click="handleRegister">没有账号？前往注册</div>
|
||||
|
||||
<div class="input-content">
|
||||
<div class="input">
|
||||
<p>用户名</p>
|
||||
<el-form-item prop="userName">
|
||||
<input type="text" v-model="loginForm.userName">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="input">
|
||||
<p>密码</p>
|
||||
<el-form-item prop="password">
|
||||
<input type="password" v-model="loginForm.password">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="input">
|
||||
<p>验证码</p>
|
||||
<el-form-item prop="code">
|
||||
<div class="code">
|
||||
<input class="code-input" type="text" v-model.trim="loginForm.code">
|
||||
<img class="code-img" alt="加载中" @click="handleGetCodeImage" :src="codeImageURL">
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="left-lable">
|
||||
<input type="checkbox">
|
||||
<label>记住我</label>
|
||||
</div>
|
||||
|
||||
<div class="left-btn">
|
||||
<button class="btn-login" @click="login(loginFormRef)">登录</button>
|
||||
<button class="btn-reg" @click="handleRegister">前往注册</button>
|
||||
</div>
|
||||
<div class="bottom-div">
|
||||
<p>其他方式: <span @click="handleQQLogin"><img src="@/assets/login_images/qq-setting.png" alt="QQ" /></span> <span @click="handleGiteeLogin"><img src="@/assets/login_images/gitee-setting.png" alt="Gitee" /></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="login-btn"
|
||||
@click="login(loginFormRef)"
|
||||
v-if="isRegister"
|
||||
>
|
||||
登 录
|
||||
<div class="div-right">
|
||||
|
||||
</div>
|
||||
<div class="login-btn" @click="register(registerFormRef)" v-else>
|
||||
注 册
|
||||
|
||||
<div class="div-bottom">
|
||||
<span>备案：赣ICP备20008025号-3</span>
|
||||
<span>站长：橙子</span>
|
||||
<span @click="handleContact">联系我们</span>
|
||||
<span>关于本站</span>
|
||||
<span>建议反馈</span>
|
||||
<span>原创站点</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" v-if="isRegister">
|
||||
<div class="title">
|
||||
<div>或者</div>
|
||||
<div>其他方式登录</div>
|
||||
</div>
|
||||
<div class="icon-list">
|
||||
<div class="icon" @click="handleQQLogin">
|
||||
<img src="@/assets/login_images/qq-setting.png" alt="" />
|
||||
<!-- 注册 -->
|
||||
<div class="div-content" v-else>
|
||||
<div class="div-right-register">
|
||||
|
||||
</div>
|
||||
<div class="icon" @click="handleGiteeLogin">
|
||||
<img src="@/assets/login_images/gitee-setting.png" alt="" />
|
||||
<div class="div-left-register">
|
||||
<div class="left-container">
|
||||
<p class="title register-title">Thank Join to Yi!</p>
|
||||
<el-form
|
||||
class="registerForm"
|
||||
ref="registerFormRef"
|
||||
:model="registerForm"
|
||||
:rules="registerRules"
|
||||
>
|
||||
<div class="input-content">
|
||||
<div class="input">
|
||||
<p>用户名</p>
|
||||
<el-form-item prop="userName">
|
||||
<input type="text" v-model.trim="registerForm.userName">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="input">
|
||||
<p>电话</p>
|
||||
<el-form-item prop="phone">
|
||||
<div class="phone-code">
|
||||
<input class="phone-code-input" type="text" v-model.trim="registerForm.phone">
|
||||
<button class="phone-code-btn" @click="captcha">{{codeInfo}}</button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="input">
|
||||
<p>电话验证码</p>
|
||||
<el-form-item prop="code">
|
||||
<input type="text" v-model.trim="registerForm.code">
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="input">
|
||||
<p>密码</p>
|
||||
<el-form-item prop="password">
|
||||
<input type="password" v-model.trim="registerForm.password">
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="input">
|
||||
<p>确认密码</p>
|
||||
<el-form-item>
|
||||
<input type="password" v-model.trim="passwordConfirm">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="left-btn">
|
||||
<button class="btn-login" @click="register(registerFormRef)">注册</button>
|
||||
<button class="btn-reg" @click="handleSignInNow">前往登录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-footer">
|
||||
<div class="info">站长：{{ configStore.author }}</div>
|
||||
<div class="info btn" @click="handleContact">联系我们</div>
|
||||
<div class="info btn">关于本站</div>
|
||||
<div class="info btn">建议反馈</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from "vue";
|
||||
@@ -234,6 +204,7 @@ const handleRegister = () => {
|
||||
const register = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate(async (valid) => {
|
||||
|
||||
if (valid) {
|
||||
try {
|
||||
if (registerForm.password != passwordConfirm.value) {
|
||||
@@ -254,7 +225,7 @@ const register = async (formEl) => {
|
||||
};
|
||||
|
||||
//验证码
|
||||
const codeInfo = ref("发送验证码");
|
||||
const codeInfo = ref("发送短信");
|
||||
const isDisabledCode = ref(false);
|
||||
const captcha = async () => {
|
||||
if (registerForm.phone !== "") {
|
||||
@@ -328,197 +299,5 @@ window.addEventListener("message", async (e) => {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/login_images/login_bg.jpg") no-repeat;
|
||||
&-box {
|
||||
display: flex;
|
||||
width: 70%;
|
||||
height: 80%;
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),
|
||||
inset 20px 20px 15px rgba(255, 255, 255, 0.7);
|
||||
.left {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: url("@/assets/login_images/welcome.jpg") no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: 50%;
|
||||
border-right: 2px solid #eeefef;
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 45%;
|
||||
padding: 40px 30px 40px 30px;
|
||||
border-radius: 20px;
|
||||
// color: #06035a;
|
||||
|
||||
background-color: #fff;
|
||||
.header-box {
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
height: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
color: #409eff;
|
||||
}
|
||||
.top {
|
||||
height: 40px;
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.center {
|
||||
flex: 1;
|
||||
.login-form {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.input-item {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
outline: none;
|
||||
border: 2px solid #dde0df;
|
||||
border-radius: 5px;
|
||||
padding: 0 10px;
|
||||
&:hover {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
border-radius: 5px;
|
||||
background-color: #2282fe;
|
||||
}
|
||||
.link {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.text {
|
||||
cursor: pointer;
|
||||
color: #2282fe;
|
||||
}
|
||||
}
|
||||
.visitor {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.registerForm {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.title {
|
||||
> div {
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
.icon-list {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-footer {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
color: #eee;
|
||||
font-size: 14px;
|
||||
.info {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.title-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*手机端CSS*/
|
||||
@media (max-width: 768px) {
|
||||
.login {
|
||||
background: url("@/assets/login_images/phone_login_bg.jpg") no-repeat;
|
||||
&-box {
|
||||
.left {
|
||||
display: none;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
.top {
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.text {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style src="@/assets/styles/login.css" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user