[update] 移动端登录
This commit is contained in:
danshihao
@@ -269,7 +269,7 @@ export default {
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
align: 'center',
|
||||
width: '20%'
|
||||
width: 120
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
@@ -645,9 +645,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1367px) {
|
||||
.device-table/deep/.ant-table.ant-table-fixed-header .ant-table-scroll .ant-table-header {
|
||||
margin-right: -2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+122
-21
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main" :class="{ 'main-mobile': mobile }">
|
||||
<a-form v-if="!mobile" :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
|
||||
<div class="user-box">
|
||||
<div class="login-header">账号登录</div>
|
||||
@@ -16,7 +16,7 @@
|
||||
size="large"
|
||||
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
|
||||
type="text"
|
||||
placeholder="请输入帐号">
|
||||
placeholder="请输入账号">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
@@ -66,6 +66,54 @@
|
||||
</div>
|
||||
</div>
|
||||
</a-form>
|
||||
<a-form v-else :form="form" class="user-layout-login-mobile">
|
||||
<div class="system-title">
|
||||
<img :src="require('@assets/images/system-title.png')" alt="昆鸿设备管理系统">
|
||||
</div>
|
||||
<a-row class="login-form">
|
||||
<a-col :span="24">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
|
||||
type="text"
|
||||
placeholder="请输入账号">
|
||||
<img slot="prefix" class="prefix-icon" :src="require('@assets/images/icon/account.png')" alt="账号"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
|
||||
size="large"
|
||||
:type="passwordType"
|
||||
autocomplete="false"
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<img slot="prefix" class="prefix-icon" :src="require('@assets/images/icon/password.png')" alt="密码"/>
|
||||
<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="24" class="login-btn">
|
||||
<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-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -222,7 +270,12 @@ export default {
|
||||
})
|
||||
},
|
||||
loginSuccess () {
|
||||
this.$router.push({ path: '/' }).catch((/* res */) => {})
|
||||
// pc端跳转根路径，移动端跳转移动端路径
|
||||
if (this.mobile) {
|
||||
this.$router.push({ path: '/mobile' }).catch((/* res */) => {})
|
||||
} else {
|
||||
this.$router.push({ path: '/' }).catch((/* res */) => {})
|
||||
}
|
||||
this.$notification.success({
|
||||
message: '欢迎',
|
||||
description: `${timeFix()}，欢迎回来`
|
||||
@@ -316,12 +369,15 @@ function isMobile () {
|
||||
.ant-row{
|
||||
margin-bottom: 4%;
|
||||
}
|
||||
.main{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// pc端背景
|
||||
.main:not(.main-mobile) {
|
||||
background: #001125 url("~@/assets/mobile-login-bg.png") no-repeat;
|
||||
background-position: left top;
|
||||
background-size: 50%;
|
||||
}
|
||||
.main{
|
||||
height: 100%;
|
||||
background-color: #001125;
|
||||
overflow: hidden;
|
||||
|
||||
.user-layout-login {
|
||||
position: absolute;
|
||||
@@ -483,20 +539,65 @@ function isMobile () {
|
||||
}
|
||||
}
|
||||
|
||||
.user-layout-login-mobile{
|
||||
right: 0;
|
||||
width: 100%;
|
||||
min-width: 0 !important;
|
||||
height: 46% !important;
|
||||
background: transparent;
|
||||
min-height: 0;
|
||||
padding: 0 2rem 0 2rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: 6rem;
|
||||
transform: translateY(-50%);
|
||||
.ant-row{
|
||||
margin-bottom: 0;
|
||||
.user-layout-login-mobile {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
background: url("~@/assets/mobile-login-bg.png") no-repeat;
|
||||
background-position-y: -0.88rem;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.system-title {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 4rem;
|
||||
width: 3.84rem;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端登录表单样式
|
||||
.login-form {
|
||||
padding: 5.62rem 0.48rem 0;
|
||||
|
||||
/deep/.ant-input-affix-wrapper .ant-input-prefix {
|
||||
left: 0;
|
||||
.prefix-icon {
|
||||
width: .48rem;
|
||||
}
|
||||
}
|
||||
/deep/.ant-input {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none !important;
|
||||
border-bottom: 0.02rem solid rgba(0,148,255,0.4);
|
||||
box-shadow: none;
|
||||
height: .96rem;
|
||||
padding-left: .72rem;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.32rem;
|
||||
line-height: 0.48rem;
|
||||
}
|
||||
.login-btn {
|
||||
.ant-btn {
|
||||
background: url("~@assets/images/login-btn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 0.96rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user