登录页
This commit is contained in:
parent
059da317fe
commit
3e39f6c34e
BIN
src/assets/images/user/bg-login.png
Normal file
BIN
src/assets/images/user/bg-login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
BIN
src/assets/images/user/bg.jpg
Normal file
BIN
src/assets/images/user/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
src/assets/images/user/btn-login.png
Normal file
BIN
src/assets/images/user/btn-login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,12 +1,11 @@
|
|||
<template>
|
||||
|
||||
<div id="userLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
|
||||
<img style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover" :src="bg" alt="" />
|
||||
<div class="container">
|
||||
<div class="user-layout-lang">
|
||||
<select-lang class="select-lang-trigger" />
|
||||
</div>
|
||||
<div class="user-layout-content">
|
||||
|
||||
<router-view />
|
||||
|
||||
<div class="footer">
|
||||
|
|
@ -26,22 +25,27 @@ import SelectLang from '@/components/SelectLang'
|
|||
export default {
|
||||
name: 'UserLayout',
|
||||
components: {
|
||||
SelectLang
|
||||
SelectLang,
|
||||
},
|
||||
mixins: [deviceMixin],
|
||||
data() {
|
||||
return {
|
||||
bg: require('@/assets/images/user/bg.jpg'),
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.body.classList.add('userLayout')
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.body.classList.remove('userLayout')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#userLayout.user-layout-wrapper {
|
||||
height: 100%;
|
||||
|
||||
position: relative;
|
||||
&.mobile {
|
||||
.container {
|
||||
.main {
|
||||
|
|
@ -54,7 +58,7 @@ export default {
|
|||
.container {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: #f0f2f5 url(~@/assets/background.png) no-repeat 50%;
|
||||
// background: #f0f2f5 url(~@/assets/background.png) no-repeat 50%;
|
||||
background-size: 100%;
|
||||
//padding: 50px 0 84px;
|
||||
position: relative;
|
||||
|
|
@ -106,7 +110,7 @@ export default {
|
|||
|
||||
.title {
|
||||
font-size: 33px;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
|
|
@ -156,7 +160,6 @@ export default {
|
|||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export default {
|
|||
async getSystemModules({ commit }, payload) {
|
||||
try {
|
||||
const res = await request({ url: '/baseData/moduleStatus/list' })
|
||||
commit('setSystemModules', res.data.data)
|
||||
commit('setSystemModules', res.data)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,43 @@
|
|||
<template>
|
||||
<div style="width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;position: fixed;left: 0;top: 0;">
|
||||
<div style="width: 908px; height: 490px;" class="flexRowStart">
|
||||
<div style="width: 50%;height: 100%;background-color: rgba(255, 255, 255, 0.4);" class="flexColumnCenterCenter">
|
||||
<img src="@/assets/loginLeft.png" alt="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
<div style="width: 50%;height: 100%;background-color: #fff;padding: 70px 50px;">
|
||||
<div class="main">
|
||||
<a-form
|
||||
id="formLogin"
|
||||
class="user-layout-login"
|
||||
ref="formLogin"
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
<div class="flexColumnCenterCenter" style="width: 100%; height: 100vh; position: fixed; left: 0; top: 0">
|
||||
<div
|
||||
style="
|
||||
height: 36px;
|
||||
font-size: 36px;
|
||||
line-height: 1;
|
||||
font-weight: bolder;
|
||||
letter-spacing: 7px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 75px;
|
||||
"
|
||||
>
|
||||
|
||||
某仿真分析方法工具
|
||||
</div>
|
||||
<div style="width: 917px; height: 445px; position: relative; overflow: hidden" class="flexRowStart">
|
||||
<img
|
||||
style="position: absolute; left: -10px; top: -8px; z-index: 1; width: 937px; height: 465px"
|
||||
:src="bgLogin"
|
||||
alt=""
|
||||
/>
|
||||
<div style="width: 524px; height: 100%; position: relative; z-index: 2" class="flexColumnCenterCenter">
|
||||
<!-- <img src="@/assets/loginLeft.png" alt="" style="width: 100%;height: 100%;"> -->
|
||||
</div>
|
||||
<div style="width: 393px; height: 100%; padding: 48px 32px; position: relative; z-index: 3">
|
||||
<div class="main">
|
||||
<div
|
||||
style="
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
font-weight: bolder;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 5px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 27px;
|
||||
"
|
||||
>
|
||||
用户登录
|
||||
</div>
|
||||
<a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
|
||||
<!-- <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" :message="$t('user.login.message-invalid-credentials')" /> -->
|
||||
<a-form-item>
|
||||
<a-input
|
||||
|
|
@ -22,7 +46,13 @@
|
|||
placeholder="请输入用户名"
|
||||
v-decorator="[
|
||||
'username',
|
||||
{rules: [{ required: true, message: $t('user.userName.required') }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
|
||||
{
|
||||
rules: [
|
||||
{ required: true, message: $t('user.userName.required') },
|
||||
{ validator: handleUsernameOrEmail },
|
||||
],
|
||||
validateTrigger: 'change',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
|
||||
|
|
@ -35,7 +65,7 @@
|
|||
placeholder="请输入密码"
|
||||
v-decorator="[
|
||||
'password',
|
||||
{rules: [{ required: true, message: $t('user.password.required') }], validateTrigger: 'blur'}
|
||||
{ rules: [{ required: true, message: $t('user.password.required') }], validateTrigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
|
||||
|
|
@ -70,7 +100,7 @@
|
|||
>{{ $t('user.login.forgot-password') }}</router-link>
|
||||
</a-form-item> -->
|
||||
|
||||
<a-form-item style="margin-top:104px">
|
||||
<a-form-item style="margin-top: 16px">
|
||||
<a-button
|
||||
size="large"
|
||||
type="primary"
|
||||
|
|
@ -78,9 +108,9 @@
|
|||
class="login-button"
|
||||
:loading="state.loginBtn"
|
||||
:disabled="state.loginBtn"
|
||||
>{{ $t('user.login.login') }}</a-button>
|
||||
>{{ $t('user.login.login') }}</a-button
|
||||
>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
|
||||
<two-step-captcha
|
||||
|
|
@ -104,10 +134,11 @@ import { getSmsCaptcha } from '@/api/login'
|
|||
|
||||
export default {
|
||||
components: {
|
||||
TwoStepCaptcha
|
||||
TwoStepCaptcha,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgLogin: require('@/assets/images/user/bg-login.png'),
|
||||
customActiveKey: 'tab1',
|
||||
loginBtn: false,
|
||||
// login type: 0 email, 1 username, 2 telephone
|
||||
|
|
@ -121,7 +152,7 @@ export default {
|
|||
loginBtn: false,
|
||||
// login type: 0 email, 1 username, 2 telephone
|
||||
loginType: 0,
|
||||
smsSendBtn: false
|
||||
smsSendBtn: false,
|
||||
},
|
||||
clientCode: '',
|
||||
codeImg: '',
|
||||
|
|
@ -165,7 +196,7 @@ export default {
|
|||
form: { validateFields },
|
||||
state,
|
||||
customActiveKey,
|
||||
Login
|
||||
Login,
|
||||
} = this
|
||||
|
||||
state.loginBtn = true
|
||||
|
|
@ -183,7 +214,7 @@ export default {
|
|||
.then((res) => {
|
||||
this.loginSuccess(res)
|
||||
})
|
||||
.catch(err => {
|
||||
.catch((err) => {
|
||||
this.requestFailed(err)
|
||||
console.log(err)
|
||||
})
|
||||
|
|
@ -199,7 +230,10 @@ export default {
|
|||
},
|
||||
getCaptcha(e) {
|
||||
e.preventDefault()
|
||||
const { form: { validateFields }, state } = this
|
||||
const {
|
||||
form: { validateFields },
|
||||
state,
|
||||
} = this
|
||||
|
||||
validateFields(['mobile'], { force: true }, (err, values) => {
|
||||
if (!err) {
|
||||
|
|
@ -214,14 +248,16 @@ export default {
|
|||
}, 1000)
|
||||
|
||||
const hide = this.$message.loading('验证码发送中..', 0)
|
||||
getSmsCaptcha({ mobile: values.mobile }).then(res => {
|
||||
getSmsCaptcha({ mobile: values.mobile })
|
||||
.then((res) => {
|
||||
setTimeout(hide, 2500)
|
||||
this.$notification['success']({
|
||||
message: '提示',
|
||||
description: '验证码获取成功，您的验证码为：' + res.result.captcha,
|
||||
duration: 8
|
||||
duration: 8,
|
||||
})
|
||||
}).catch(err => {
|
||||
})
|
||||
.catch((err) => {
|
||||
setTimeout(hide, 1)
|
||||
clearInterval(interval)
|
||||
state.time = 60
|
||||
|
|
@ -258,7 +294,7 @@ export default {
|
|||
setTimeout(() => {
|
||||
this.$notification.success({
|
||||
message: '欢迎',
|
||||
description: `${timeFix()}，欢迎回来`
|
||||
description: `${timeFix()}，欢迎回来`,
|
||||
})
|
||||
}, 1000)
|
||||
this.isLoginError = false
|
||||
|
|
@ -268,10 +304,10 @@ export default {
|
|||
this.$notification['error']({
|
||||
message: '错误',
|
||||
description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
|
||||
duration: 4
|
||||
duration: 4,
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -285,7 +321,7 @@ export default {
|
|||
#logo-login {
|
||||
background: rgba(48, 65, 96, 0.8);
|
||||
border-radius: 3px 3px 0 0;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding: 1px 0 14px 25px;
|
||||
}
|
||||
.f-item {
|
||||
|
|
@ -295,7 +331,9 @@ export default {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
width: 50%;
|
||||
height: 52px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.account-box {
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
|
|
@ -304,7 +342,7 @@ export default {
|
|||
border-radius: 0 0 4px 4px;
|
||||
z-index: 3;
|
||||
font-size: 13px !important;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -328,6 +366,9 @@ export default {
|
|||
font-size: 16px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
background-image: url(../../assets/images/user/btn-login.png);
|
||||
border: none;
|
||||
background-position: -2px 0px;
|
||||
}
|
||||
|
||||
.user-login-other {
|
||||
|
|
@ -353,5 +394,33 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ant-input-lg {
|
||||
height: 52px;
|
||||
background-color: #0b293a;
|
||||
border: solid 1px #1d5777;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ant-input-lg:-webkit-autofill {
|
||||
-webkit-text-fill-color: #fff !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
caret-color: #acfff2;
|
||||
}
|
||||
.ant-input-prefix .anticon {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.ant-input-suffix {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ant-input-suffix .anticon:hover {
|
||||
color: #ffffffcc;
|
||||
}
|
||||
.has-error .ant-input-lg:hover {
|
||||
background-color: #0b293a;
|
||||
}
|
||||
.has-error .ant-input-affix-wrapper .ant-input-lg,
|
||||
.has-error .ant-input-affix-wrapper .ant-input-lg:hover {
|
||||
background-color: #0b293a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user