|
|
@@ -5,7 +5,7 @@
|
|
|
<div class="login-background" id="img">
|
|
|
<!-- <div id="img"> -->
|
|
|
<!-- <img src="./logo.png"
|
|
|
- alt="" />-->
|
|
|
+ alt="" />-->
|
|
|
<!-- </div> -->
|
|
|
</div>
|
|
|
<div class="login-content">
|
|
|
@@ -19,7 +19,13 @@
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
<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>
|
|
|
<img src="@/assets/images/password.png" alt />
|
|
|
</template>
|
|
|
@@ -38,7 +44,7 @@
|
|
|
</a-checkbox>
|
|
|
<router-link to="/resetPassword">《用户协议》</router-link>
|
|
|
</div>
|
|
|
- </a-form-item>-->
|
|
|
+ </a-form-item>-->
|
|
|
<a-form-item class="mt20">
|
|
|
<a-button @click="loginAction" :loading="loading" :disabled="goHomeloading">登录</a-button>
|
|
|
</a-form-item>
|
|
|
@@ -52,7 +58,7 @@
|
|
|
<script lang="ts">
|
|
|
import { defineComponent, reactive, ref, toRaw, onMounted } from 'vue';
|
|
|
import { globalDataRefresh } from '@/services/bus/index';
|
|
|
-import { login } from '@/services/bus/login';
|
|
|
+import { login, removeLoginData } from '@/services/bus/login';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
import { localStorageUtil } from '@/utils/storage/index';
|
|
|
@@ -136,6 +142,8 @@ export default defineComponent({
|
|
|
name: 'login',
|
|
|
components: {},
|
|
|
setup() {
|
|
|
+ // 回到登录页面就清除登录数据，防止出现意外
|
|
|
+ removeLoginData()
|
|
|
function setLogo() {
|
|
|
const img = document.querySelector('#logo_img') || document.createElement('img');
|
|
|
const obj = {
|
|
|
@@ -209,150 +217,150 @@ export default defineComponent({
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.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 {
|
|
|
- height: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
.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 {
|
|
|
- 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%);
|
|
|
- // }
|
|
|
- }
|
|
|
+ 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;
|
|
|
|
|
|
- // .ant-btn {
|
|
|
- // background: @cyan-color2;
|
|
|
- // border-color: @cyan-color2;
|
|
|
- // border-radius: 10px;
|
|
|
- // font-size: 14px;
|
|
|
- // color: @white;
|
|
|
- // margin-top: 90px;
|
|
|
- // margin-left: -60px;
|
|
|
+ // 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;
|
|
|
+ // }
|
|
|
}
|
|
|
.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 {
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ 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 {
|
|
|
- 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-input {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ .ant-form-explain {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
- .mt20 {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- .mb20 {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .ant-form-item,
|
|
|
- .ant-form label {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- .ant-form-item {
|
|
|
- margin-bottom: 10px;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
- p {
|
|
|
- font-size: 26px;
|
|
|
- text-align: left;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- font-weight: normal;
|
|
|
- color: @m-grey4;
|
|
|
- margin-top: 40px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .ant-input-affix-wrapper {
|
|
|
+ box-shadow: none;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0;
|
|
|
+ border-bottom: 1px solid @m-grey3;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
- img {
|
|
|
- width: 19px;
|
|
|
- height: 21px;
|
|
|
+ .ant-input-affix-wrapper:hover {
|
|
|
+ border-bottom: 1px solid @m-blue1;
|
|
|
}
|
|
|
- .login-remember-password {
|
|
|
- .flex();
|
|
|
- justify-content: space-between;
|
|
|
- a {
|
|
|
- color: @m-grey4;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .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-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>
|
