pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录界面更新

Browse Source
main
QMZ 2 weeks ago
parent 6a3ade387b
commit 968b81ea7c
5 changed files with 378 additions and 20 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/pictures/background.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 294 KiB

BIN
src/assets/pictures/welcome.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

BIN
src/assets/pictures/yanzheng.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

18
src/views/Main.vue
Unescape View File

@ -1,20 +1,6 @@
<template>
<div class="common-layout">
<el-container>
<el-header><heade/></el-header>
<el-container>
<!-- <el-aside width="250px">aa</el-aside> -->
<!-- <el-main style="padding: 0px">
<background/>
</el-main> -->
<!-- <el-aside width="250px">aa</el-aside> -->
<router-view></router-view>
</el-container>
</el-container>
</div>
<heade/>
<div></div>

378
src/views/login/login.vue
Unescape View File

@ -1,9 +1,381 @@
<template>
<div class="base">
<!-- 注册登录界面 -->
<div class="loginAndRegist">
<!--登录表单-->
<div class="loginArea">
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__fadeInUp"
leave-active-class="animate__zoomOut"
appear
>
<!-- 标语 -->
<div v-show="isShow" class="title">
登录
</template>
</div>
</transition>
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__fadeInUp"
leave-active-class="animate__zoomOut"
appear
>
<!-- 密码框和用户名框 -->
<div v-show="isShow" class="pwdArea">
<div style="flex: 1;justify-content: center;display: flex;align-items: center">
用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;&nbsp;&nbsp;
<el-input class="username" v-model="loginUser.name" style="width: 185px;" placeholder="请输入用户名"></el-input>
</div>
<div style="flex: 1;justify-content: center;display: flex;align-items: center">
密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;
<el-input placeholder="请输入密码" v-model="loginUser.password" style="width: 185px" show-password></el-input>
</div>
<div style="flex: 1;justify-content: center;display: flex;align-items: center">
验&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;
<el-input placeholder="请输入验证码" v-model="loginUser.password" style="width: 125px" show-password></el-input>
<img src="../../assets/pictures/yanzheng.png" style="width: 60px" alt="假验证码" />
</div>
</div>
</transition>
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__fadeInUp"
leave-active-class="animate__zoomOut"
appear
>
<!-- 登录注册按钮 -->
<div v-show="isShow" class="btnArea">
<el-button
type="success"
round
style="background-color: #E44B9D; letter-spacing: 5px; height: 40px; width: 100px; font-size: 14px;"
@click="UserLogin">
登录
</el-button>
</div>
</transition>
</div>
<!-- 注册表单 -->
<div class="registArea">
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__fadeInUp"
leave-active-class="animate__zoomOut"
appear
>
<!-- 注册表头-->
<div v-show="!isShow" class="rigestTitle">
注册
</div>
</transition>
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__fadeInUp"
leave-active-class="animate__zoomOut"
appear
>
<!-- 注册表单-->
<div v-show="!isShow" class="registForm">
<div style="flex: 1;display: flex;justify-content: center;align-items: center">
用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名:
<el-input
placeholder="请输入用户名"
v-model="regUser.regUsername"
style="width: 165px;margin-left: 10px"
clearable
>
</el-input>
</div>
<div style="flex: 1;display: flex;justify-content: center;align-items: center">
密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
<el-input placeholder="请输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regPwd" show-password></el-input>
</div>
<div style="flex: 1;display: flex;justify-content: center;align-items: center;">
确&nbsp;认&nbsp;密&nbsp;码:
<el-input placeholder="请再次输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regRePwd" show-password></el-input>
</div>
<div style="flex: 1;display: flex;align-items: center">
验&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;码:
<el-input placeholder="请输入验证码" v-model="loginUser.password" style="width: 105px;margin-left: 10px" show-password></el-input>
<img src="../../assets/pictures/yanzheng.png" style="width: 60px" alt="假验证码" />
</div>
</div>
</transition>
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__fadeInUp"
leave-active-class="animate__zoomOut"
appear
>
<!-- 注册按钮-->
<div v-show="!isShow" class="registBtn">
<el-button type="success" round style="background-color: #E44B9D;letter-spacing: 5px ;height: 40px; width: 100px; font-size: 14px" @click="userRegister">注册</el-button>
</div>
</transition>
</div>
<!-- 信息展示界面 -->
<div id="aaa" class="showInfo"
:style="{
borderTopRightRadius:styleObj.bordertoprightradius,
borderBottomRightRadius:styleObj.borderbottomrightradius,
borderTopLeftRadius:styleObj.bordertopleftradius,
borderBottomLeftRadius:styleObj.borderbottomleftradius,
right:styleObj.rightDis
}"
ref="showInfoView">
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__fadeInUp"
leave-active-class="animate__zoomOut"
appear
>
<!-- 没有用户输入用户名或者找不到用户名的时候 -->
<div v-show="isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
<!-- 欢迎语 -->
<div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #E44B9D;font-weight: bold">
欢迎你加入恋爱森林！
</div>
<!-- 欢迎图片 -->
<div style="flex: 2">
<el-button type="success" style="background-color:#E44B9D;border: 1px solid #ffffff; height: 40px; width: 180px; font-size: 14px" round @click="changeToRegiest">还没有账户？点击注册</el-button>
</div>
</div>
</transition>
<!-- 用户输入用户名时展示头像以及姓名 -->
<!-- <div>-->
<!-- </div>-->
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__fadeInUp"
leave-active-class="animate__zoomOut"
appear
>
<!-- 用户注册的时候展示信息 -->
<div v-show="!isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
<!-- 欢迎语 -->
<div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #E44B9D;font-weight: bold">
欢迎注册
</div>
<!-- 欢迎图片 -->
<div style="flex: 2">
<el-button type="success" style="background-color:#E44B9D;border: 1px solid #ffffff;height: 40px; width: 180px; font-size: 14px" round @click="changeToLogin">已有账户？点击登录</el-button>
</div>
</div>
</transition>
</div>
</div>
</div>
</template>
<style>
/* @import '../assets/css/Login.css' */
.base{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url("../../assets/pictures/background.png");
background-size: 100%;
}
.loginAndRegist{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
right:6%;
top:35%;
}
.loginArea{
background-color: rgba(255,255,255,0.8);
opacity: 0.8;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
height: 400px;
width: 400px;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.registArea{
opacity: 0.8;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
height: 400px;
width: 400px;
background-color: rgba(255,255,255,0.8);
z-index: 1;
display: flex;
flex-direction: column;
justify-content:center ;
align-items: center;
}
.showInfo{
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
position: absolute;
height: 400px;
width: 400px;
z-index:2;
top: 0;
right: 0;
background-image: url("../../assets/pictures/welcome.png");
background-size: 90%;
}
.showInfo:hover{
background-size: 100%;
background-position: -50px -50px;
}
.title{
width: 80%;
flex:1;
border-bottom: 1px solid #E44B9D;
display: flex;
align-items: center;
color: #E44B9D;
font-weight: bold;
font-size: 24px;
display: flex;
justify-content: center;
}
#aaa{
transition: 0.3s linear;
}
.pwdArea{
width: 100%;
flex:2;
display: flex;
flex-direction: column;
color: #E44B9D;
font-size: 20px;
font-weight: bold;
}
.pwdArea input{
height: 30px;
border-radius:15px ;
padding-left: 10px;
font-size: 13px;
border: 3px solid #EAF2FF;
}
.pwdArea input:focus{
border: 2px solid #E44B9D;
}
.btnArea{
flex:1;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.rigestTitle{
width: 70%;
flex: 1;
color: #E44B9D;
font-weight: bold;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #E44B9D;
}
.registForm{
flex: 2;
display: flex;
flex-direction: column;
color: #E44B9D;
font-size: 20px;
font-weight: bold;
}
.registForm input{
outline: none;
height: 30px;
border-radius:13px ;
padding-left: 10px;
font-size: 12px;
border: 1px solid gray;
}
.registForm input:focus{
border: 2px solid #E44B9D;
}
#elselect:focus{
border: 2px solid #E44B9D;
}
.registBtn{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<script>
import 'animate.css';
// eslint-disable-next-line no-unused-vars
import {Axios as request} from "axios";
export default {
name: 'loginIndex', // 添加组件名称
// 其他组件选项
name:'loginIndex',
data(){
return{
//看看用不用转成用户对象
loginUser:{
name:"",
password:""
},
admins:{},
////看看用不用转成用户对象
regUser:{
regUsername:'',
regRePwd:'',
regPwd:'',
selectValue:"",
},
styleObj:{
bordertoprightradius:'15px',
borderbottomrightradius: '15px',
bordertopleftradius:'0px',
borderbottomleftradius:'0px',
rightDis:'0px'
},
isShow:true
}
},
methods:{
changeToRegiest(){
this.styleObj.bordertoprightradius= '0px'
this.styleObj.borderbottomrightradius='0px'
this.styleObj.bordertopleftradius='15px'
this.styleObj.borderbottomleftradius='15px'
this.styleObj.rightDis='50%'
this.isShow = !this.isShow
},
changeToLogin(){
this.styleObj.bordertoprightradius= '15px'
this.styleObj.borderbottomrightradius='15px'
this.styleObj.bordertopleftradius='0px'
this.styleObj.borderbottomleftradius='0px'
this.styleObj.rightDis='0px'
this.isShow = !this.isShow
},
},
}
</script>
Write Preview
Loading…
Cancel
Save