|
@@ -19,13 +19,7 @@
|
|
|
</a-input>
|
|
</a-input>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item name="password" class="mb20">
|
|
<a-form-item name="password" class="mb20">
|
|
|
- <a-input
|
|
|
|
|
- @keyup.enter="loginAction"
|
|
|
|
|
- placeholder="请输入您的登录密码"
|
|
|
|
|
- type="password"
|
|
|
|
|
- v-model:value="form.password"
|
|
|
|
|
- autocomplete
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <a-input @keyup.enter="loginAction" placeholder="请输入您的登录密码" type="password" v-model:value="form.password" autocomplete>
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
|
<img src="@/assets/images/password.png" alt />
|
|
<img src="@/assets/images/password.png" alt />
|
|
|
</template>
|
|
</template>
|
|
@@ -33,7 +27,7 @@
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item>
|
|
<a-form-item>
|
|
|
<div class="login-remember-password">
|
|
<div class="login-remember-password">
|
|
|
- <a-checkbox v-model:checked="form.isRemember">记住账号</a-checkbox>
|
|
|
|
|
|
|
+ <a-checkbox v-model:checked="form.isRemember" @change="rememberChange">记住账号</a-checkbox>
|
|
|
<!-- <router-link to="/resetPassword">忘记密码?</router-link> -->
|
|
<!-- <router-link to="/resetPassword">忘记密码?</router-link> -->
|
|
|
</div>
|
|
</div>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
@@ -76,19 +70,12 @@ interface Form {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const initForm: Form = {
|
|
const initForm: Form = {
|
|
|
- account: '',
|
|
|
|
|
|
|
+ account: window.localStorage.getItem('rememberAccount') ?? '',
|
|
|
password: '',
|
|
password: '',
|
|
|
- isRemember: false,
|
|
|
|
|
|
|
+ isRemember: window.localStorage.getItem('isRememberAccount') ? true : false,
|
|
|
isRead: false,
|
|
isRead: false,
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-function setRememberAccount(): void {
|
|
|
|
|
- const account: string = localStorageUtil.getItem('loginAccount');
|
|
|
|
|
- if (account) {
|
|
|
|
|
- Object.assign(initForm, { account, isRemember: true });
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
// declare global {
|
|
// declare global {
|
|
|
// interface Window {
|
|
// interface Window {
|
|
|
// qt: {
|
|
// qt: {
|
|
@@ -166,10 +153,18 @@ export default defineComponent({
|
|
|
};
|
|
};
|
|
|
const formDom: any = ref(null);
|
|
const formDom: any = ref(null);
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
- form.password = '';
|
|
|
|
|
- // setRememberAccount();
|
|
|
|
|
// qt
|
|
// qt
|
|
|
const { getQtInfo } = qtAction();
|
|
const { getQtInfo } = qtAction();
|
|
|
|
|
+
|
|
|
|
|
+ function rememberChange() {
|
|
|
|
|
+ if (form.isRemember) {
|
|
|
|
|
+ window.localStorage.setItem('isRememberAccount', 'true');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ window.localStorage.removeItem('rememberAccount');
|
|
|
|
|
+ window.localStorage.removeItem('isRememberAccount');
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
function loginAction() {
|
|
function loginAction() {
|
|
|
formDom.value.validate().then(() => {
|
|
formDom.value.validate().then(() => {
|
|
|
loading.value = true;
|
|
loading.value = true;
|
|
@@ -181,8 +176,9 @@ export default defineComponent({
|
|
|
setLoadComplete(true);
|
|
setLoadComplete(true);
|
|
|
const { account, isRemember } = toRaw(form);
|
|
const { account, isRemember } = toRaw(form);
|
|
|
if (isRemember) {
|
|
if (isRemember) {
|
|
|
- localStorageUtil.setItem('loginAccount', account); // 缓存登录账号
|
|
|
|
|
|
|
+ window.localStorage.setItem('rememberAccount', account); // 缓存登录账号
|
|
|
}
|
|
}
|
|
|
|
|
+ form.password = '';
|
|
|
eventBus.$emit('loginSuccess', true);
|
|
eventBus.$emit('loginSuccess', true);
|
|
|
router.push({ name: 'home' });
|
|
router.push({ name: 'home' });
|
|
|
loading.value = false;
|
|
loading.value = false;
|
|
@@ -210,157 +206,157 @@ export default defineComponent({
|
|
|
goHomeloading.value = false;
|
|
goHomeloading.value = false;
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
- return { form, loginAction, rules, formDom, loading, goHomeloading, goHome };
|
|
|
|
|
|
|
+ return { form, loginAction, rememberChange, rules, formDom, loading, goHomeloading, goHome };
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
.login {
|
|
.login {
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- background: url(../../assets/images/loginBackground.png) no-repeat scroll 0 0;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: url(../../assets/images/loginBackground.png) no-repeat scroll 0 0;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
}
|
|
|
.ant-row {
|
|
.ant-row {
|
|
|
- height: 100%;
|
|
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
.ant-col {
|
|
.ant-col {
|
|
|
- width: 690px;
|
|
|
|
|
- height: 450px;
|
|
|
|
|
- border-radius: 5px;
|
|
|
|
|
- box-shadow: 0px 5px 10px 0px rgba(18, 22, 24, 0.18);
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- .flex();
|
|
|
|
|
|
|
+ width: 690px;
|
|
|
|
|
+ height: 450px;
|
|
|
|
|
+ border-radius: 5px;
|
|
|
|
|
+ box-shadow: 0px 5px 10px 0px rgba(18, 22, 24, 0.18);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ .flex();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.login-background {
|
|
.login-background {
|
|
|
- width: 275px;
|
|
|
|
|
- background: url("../../assets/images/logoBackground.png") no-repeat scroll 0 0;
|
|
|
|
|
- background-size: cover;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- div {
|
|
|
|
|
- // margin-top: 120px;
|
|
|
|
|
- // margin-left: 69.5px; // 企业风管logo
|
|
|
|
|
- // margin-left: 33px; // 云融
|
|
|
|
|
- width: 136px;
|
|
|
|
|
- height: 136px;
|
|
|
|
|
- min-width: 136px;
|
|
|
|
|
- min-height: 136px;
|
|
|
|
|
- position: relative;
|
|
|
|
|
|
|
+ width: 275px;
|
|
|
|
|
+ background: url('../../assets/images/logoBackground.png') no-repeat scroll 0 0;
|
|
|
|
|
+ background-size: cover;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ div {
|
|
|
|
|
+ // margin-top: 120px;
|
|
|
|
|
+ // margin-left: 69.5px; // 企业风管logo
|
|
|
|
|
+ // margin-left: 33px; // 云融
|
|
|
|
|
+ width: 136px;
|
|
|
|
|
+ height: 136px;
|
|
|
|
|
+ min-width: 136px;
|
|
|
|
|
+ min-height: 136px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
|
|
|
- // img {
|
|
|
|
|
- // max-width: 100%;
|
|
|
|
|
- // max-height: 100%;
|
|
|
|
|
- // .position(absolute, 0%, auto, auto, 50%);
|
|
|
|
|
- // z-index: 10;
|
|
|
|
|
- // transform: translate(-50%, -50%);
|
|
|
|
|
- // }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // img {
|
|
|
|
|
+ // max-width: 100%;
|
|
|
|
|
+ // max-height: 100%;
|
|
|
|
|
+ // .position(absolute, 0%, auto, auto, 50%);
|
|
|
|
|
+ // z-index: 10;
|
|
|
|
|
+ // transform: translate(-50%, -50%);
|
|
|
|
|
+ // }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- // .ant-btn {
|
|
|
|
|
- // background: @cyan-color2;
|
|
|
|
|
- // border-color: @cyan-color2;
|
|
|
|
|
- // border-radius: 10px;
|
|
|
|
|
- // font-size: 14px;
|
|
|
|
|
- // color: @white;
|
|
|
|
|
- // margin-top: 90px;
|
|
|
|
|
- // margin-left: -60px;
|
|
|
|
|
- // }
|
|
|
|
|
|
|
+ // .ant-btn {
|
|
|
|
|
+ // background: @cyan-color2;
|
|
|
|
|
+ // border-color: @cyan-color2;
|
|
|
|
|
+ // border-radius: 10px;
|
|
|
|
|
+ // font-size: 14px;
|
|
|
|
|
+ // color: @white;
|
|
|
|
|
+ // margin-top: 90px;
|
|
|
|
|
+ // margin-left: -60px;
|
|
|
|
|
+ // }
|
|
|
}
|
|
}
|
|
|
.login-content {
|
|
.login-content {
|
|
|
- flex: 1;
|
|
|
|
|
- padding-left: 53px;
|
|
|
|
|
- padding-right: 53px;
|
|
|
|
|
- min-width: 405px;
|
|
|
|
|
- background: @m-white0;
|
|
|
|
|
- ::v-deep(.ant-form) {
|
|
|
|
|
- margin-top: 20px;
|
|
|
|
|
- .ant-form-item-control-wrapper {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-form-item-control.has-error {
|
|
|
|
|
- .ant-form-item-children {
|
|
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding-left: 53px;
|
|
|
|
|
+ padding-right: 53px;
|
|
|
|
|
+ min-width: 405px;
|
|
|
|
|
+ background: @m-white0;
|
|
|
|
|
+ ::v-deep(.ant-form) {
|
|
|
|
|
+ margin-top: 20px;
|
|
|
|
|
+ .ant-form-item-control-wrapper {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ .ant-form-item-control.has-error {
|
|
|
|
|
+ .ant-form-item-children {
|
|
|
|
|
+ .ant-input-affix-wrapper {
|
|
|
|
|
+ .ant-input {
|
|
|
|
|
+ background: transparent !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .ant-form-explain {
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ padding-left: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .ant-input {
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ border-radius: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
|
|
+
|
|
|
|
|
+ &:-webkit-autofill {
|
|
|
|
|
+ box-shadow: 0 0 0 1000px #fff inset;
|
|
|
|
|
+ -webkit-text-fill-color: @m-black;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
.ant-input-affix-wrapper {
|
|
.ant-input-affix-wrapper {
|
|
|
- .ant-input {
|
|
|
|
|
- background: transparent !important;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ box-shadow: none;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 0;
|
|
|
|
|
+ border-bottom: 1px solid @m-grey3;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .ant-input-affix-wrapper:hover {
|
|
|
|
|
+ border-bottom: 1px solid @m-blue1;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- .ant-form-explain {
|
|
|
|
|
- text-align: left;
|
|
|
|
|
- padding-left: 24px;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
- .ant-input {
|
|
|
|
|
- border: 0;
|
|
|
|
|
- border-radius: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 40px;
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
|
|
-
|
|
|
|
|
- &:-webkit-autofill {
|
|
|
|
|
- box-shadow: 0 0 0 1000px #fff inset;
|
|
|
|
|
- -webkit-text-fill-color: @m-black;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .mt20 {
|
|
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
}
|
|
|
- .ant-input-affix-wrapper {
|
|
|
|
|
- box-shadow: none;
|
|
|
|
|
- border: none;
|
|
|
|
|
- border-radius: 0;
|
|
|
|
|
- border-bottom: 1px solid @m-grey3;
|
|
|
|
|
- padding: 0;
|
|
|
|
|
|
|
+ .mb20 {
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
}
|
|
|
- .ant-input-affix-wrapper:hover {
|
|
|
|
|
- border-bottom: 1px solid @m-blue1;
|
|
|
|
|
|
|
+ .ant-form-item,
|
|
|
|
|
+ .ant-form label {
|
|
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- .mt20 {
|
|
|
|
|
- margin-top: 20px;
|
|
|
|
|
- }
|
|
|
|
|
- .mb20 {
|
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-form-item,
|
|
|
|
|
- .ant-form label {
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- }
|
|
|
|
|
- .ant-form-item {
|
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
- }
|
|
|
|
|
- p {
|
|
|
|
|
- font-size: 26px;
|
|
|
|
|
- text-align: left;
|
|
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
|
|
- font-weight: normal;
|
|
|
|
|
- color: @m-grey4;
|
|
|
|
|
- margin-top: 40px;
|
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
- }
|
|
|
|
|
- img {
|
|
|
|
|
- width: 19px;
|
|
|
|
|
- height: 21px;
|
|
|
|
|
- }
|
|
|
|
|
- .login-remember-password {
|
|
|
|
|
- .flex();
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- a {
|
|
|
|
|
- color: @m-grey4;
|
|
|
|
|
|
|
+ .ant-form-item {
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ p {
|
|
|
|
|
+ font-size: 26px;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ color: @m-grey4;
|
|
|
|
|
+ margin-top: 40px;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 19px;
|
|
|
|
|
+ height: 21px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .login-remember-password {
|
|
|
|
|
+ .flex();
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ a {
|
|
|
|
|
+ color: @m-grey4;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .ant-btn {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- background: @m-blue1;
|
|
|
|
|
- border-radius: 3px;
|
|
|
|
|
- color: @m-white0;
|
|
|
|
|
- height: 50px;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- line-height: 43px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .ant-btn {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ background: @m-blue1;
|
|
|
|
|
+ border-radius: 3px;
|
|
|
|
|
+ color: @m-white0;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ line-height: 43px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|