[update] 完善系统、登录页
This commit is contained in:
danshihao
+136
-143
@@ -1,117 +1,71 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="login-box">
|
||||
<div class="login-left">
|
||||
<div class="logo-image">
|
||||
<!-- <img src='@/assets/logo.png' alt=''>-->
|
||||
<!-- <img src='@/assets/logo_name.png' alt=''>-->
|
||||
<a-form v-if="!mobile" :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
|
||||
<div class="user-box">
|
||||
<div class="login-header">账号登录</div>
|
||||
<div class="login-body">
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<label class="lable-font">账号</label>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="18">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
|
||||
type="text"
|
||||
placeholder="请输入帐号">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<label class="lable-font">密码</label>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="18">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
|
||||
size="large"
|
||||
:type="passwordType"
|
||||
autocomplete="false"
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<a-icon title="显示密码" @click="passwordType='text'" slot="suffix" v-if="passwordType==='password'" type="eye" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
|
||||
<a-icon title="隐藏密码" @click="passwordType='password'" slot="suffix" v-else type="eye-invisible" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
|
||||
<!-- <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>-->
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
<a-row class="login-btn">
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="18">
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
:loading="loginBtn"
|
||||
@click.stop.prevent="handleSubmit"
|
||||
:disabled="loginBtn">
|
||||
{{ loginBtn ? "登录中" : "登录" }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
<a-form v-if="!mobile" :form="form" class="user-layout-login login-right" ref="formLogin" id="formLogin">
|
||||
<div class="user-box">
|
||||
<span class="title">账号登录</span>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<label class="lable-font">账号</label>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="18">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
|
||||
type="text"
|
||||
placeholder="请输入帐号">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<label class="lable-font">密码</label>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="18">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
|
||||
size="large"
|
||||
:type="passwordType"
|
||||
autocomplete="false"
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<a-icon title="显示密码" @click="passwordType='text'" slot="suffix" v-if="passwordType==='password'" type="eye" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
|
||||
<a-icon title="隐藏密码" @click="passwordType='password'" slot="suffix" v-else type="eye-invisible" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
|
||||
<!-- <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>-->
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="3"></a-col>
|
||||
<label class="lable-font">验证码</label>
|
||||
</a-row>
|
||||
<a-row style="margin-bottom: 0;">
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['inputCode',validatorRules.inputCode]"
|
||||
size="large"
|
||||
type="text"
|
||||
@change="inputCodeChange"
|
||||
autocomplete="off"
|
||||
placeholder="请输入验证码">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6" style="text-align: right">
|
||||
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode" alt=""/>
|
||||
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode" alt=""/>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
<a-row style="margin-bottom: 2%;">
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="7">
|
||||
<a-form-item>
|
||||
<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">记住用户名密码</a-checkbox>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6"></a-col>
|
||||
<a-col :span="5" style="text-align: right;color: #1891FF;">
|
||||
<!-- <a-form-item>-->
|
||||
<!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">-->
|
||||
<!-- 忘记密码-->
|
||||
<!-- </router-link>-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="login-btn">
|
||||
<a-col :span="3"></a-col>
|
||||
<a-col :span="18">
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
:loading="loginBtn"
|
||||
@click.stop.prevent="handleSubmit"
|
||||
:disabled="loginBtn">
|
||||
{{ loginBtn ? "登录中" : "登录" }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="3"></a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -355,6 +309,7 @@ function isMobile () {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/assets/less/modifyLessVars.less";
|
||||
.ant-input-affix-wrapper/deep/ .ant-input:not(:first-child){
|
||||
padding-left: 40px;
|
||||
}
|
||||
@@ -364,40 +319,63 @@ function isMobile () {
|
||||
.main{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: url(~@/assets/login-bg.png);
|
||||
background-size: cover;
|
||||
.login-box{
|
||||
margin:9% auto;
|
||||
width: 62%;
|
||||
height: 64%;
|
||||
display: flex;
|
||||
background: #001125 url("~@/assets/mobile-login-bg.png") no-repeat;
|
||||
background-position: left top;
|
||||
background-size: 50%;
|
||||
|
||||
.login-right,.login-left{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
.user-layout-login {
|
||||
position: absolute;
|
||||
right: 8vw;
|
||||
top: 20vh;
|
||||
width: 600px;
|
||||
border: 1px solid rgba(0, 148, 255, 0.24);
|
||||
border-bottom: 1px @primary-color solid;
|
||||
// 左下右下高亮边框
|
||||
&::before, &::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 3%;
|
||||
min-width: 16px;
|
||||
height: 1px;
|
||||
bottom: -1px;
|
||||
background-color: #2EE4FD;
|
||||
}
|
||||
.login-right{
|
||||
border-top-right-radius: 2%;
|
||||
border-bottom-right-radius: 2%;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
.login-left{
|
||||
border-top-left-radius: 2%;
|
||||
border-bottom-left-radius: 2%;
|
||||
background: url(~@/assets/login-left.png);
|
||||
background-size: cover;
|
||||
.logo-image{
|
||||
margin: 15px;
|
||||
display: flex;
|
||||
&>img{
|
||||
margin-right:8px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
background-image: url("~@/assets/images/componentImg/header-bg-side.png"),
|
||||
url("~@/assets/images/componentImg/header-bg-center.png"),
|
||||
url("~@/assets/images/componentImg/header-bg-side.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left, center, right;
|
||||
background-size: 1px 100%, calc(100% - 2px) 100%, 1px 100%;
|
||||
border: none;
|
||||
line-height: 80px;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
min-height: 100px;
|
||||
height: 100px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.login-body {
|
||||
padding: 20px 0;
|
||||
|
||||
.ant-form label {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1370px) {
|
||||
.user-layout-login {
|
||||
background-color: #fff;
|
||||
padding: 5% 3%;
|
||||
.user-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -408,12 +386,12 @@ function isMobile () {
|
||||
flex-direction: column;
|
||||
.lable-font{
|
||||
font-weight: 500;
|
||||
color:#000;
|
||||
//color:#000;
|
||||
}
|
||||
.title{
|
||||
position:relative;
|
||||
display: block;
|
||||
color: #000;
|
||||
//color: #000;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 3% 0;
|
||||
@@ -429,7 +407,7 @@ function isMobile () {
|
||||
//}
|
||||
}
|
||||
.login-btn{
|
||||
margin-top: 10px;
|
||||
margin-top: 20px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.ant-row{
|
||||
@@ -441,8 +419,23 @@ function isMobile () {
|
||||
}
|
||||
@media screen and (max-width: 1366px) {
|
||||
.user-layout-login {
|
||||
background-color: #fff;
|
||||
padding: 4% 3% 0;
|
||||
width: 500px;
|
||||
|
||||
.login-header {
|
||||
line-height: 50px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
min-height: 60px;
|
||||
height: 60px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.login-body {
|
||||
|
||||
.ant-form label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.user-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -452,12 +445,12 @@ function isMobile () {
|
||||
flex-direction: column;
|
||||
.lable-font{
|
||||
font-weight: 700;
|
||||
color:#000;
|
||||
//color:#000;
|
||||
}
|
||||
.title{
|
||||
position:relative;
|
||||
display: block;
|
||||
color: #000;
|
||||
//color: #000;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 5% 0;
|
||||
@@ -477,7 +470,7 @@ function isMobile () {
|
||||
font-size: 10px;
|
||||
}
|
||||
.ant-row{
|
||||
margin-bottom: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user