|
|
@@ -12,14 +12,15 @@
|
|
|
<p>账号登录</p>
|
|
|
<a-form ref="formDom" :model="form" :rules="rules">
|
|
|
<a-form-item name="account">
|
|
|
- <a-input placeholder="用户名/账号/手机号" v-model:value="form.account">
|
|
|
+ <a-input placeholder="账号/手机号" v-model:value="form.account">
|
|
|
<template #prefix>
|
|
|
<img src="@/assets/images/user.png" />
|
|
|
</template>
|
|
|
</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" />
|
|
|
</template>
|
|
|
@@ -45,7 +46,8 @@
|
|
|
<a-checkbox v-model:checked="isReadAgreement">已阅读并同意</a-checkbox>
|
|
|
</div>
|
|
|
<div class="agreement">
|
|
|
- <a v-for="item in agreementList" @click="showModal(item)" :key="item.agreementid">《{{ item.agreementname }}》</a>
|
|
|
+ <a v-for="item in agreementList" @click="showModal(item)" :key="item.agreementid">《{{ item.agreementname
|
|
|
+ }}》</a>
|
|
|
</div>
|
|
|
<!-- <div class="register" v-if="isOpenUrl">
|
|
|
还没有账号，
|
|
|
@@ -56,7 +58,8 @@
|
|
|
</div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
- <a-modal class="commonModal" v-if="visible" :title="selectedAgreement?.agreementname" v-model:visible="visible" centered @cancel="closeModel" :footer="null" width="890px">
|
|
|
+ <a-modal class="commonModal" v-if="visible" :title="selectedAgreement?.agreementname" v-model:visible="visible"
|
|
|
+ centered @cancel="closeModel" :footer="null" width="890px">
|
|
|
<div class="agreement-content" v-html="formateWord(selectedAgreement.agreementcontent)"></div>
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
@@ -212,158 +215,181 @@ export default defineComponent({
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.agreement-header {
|
|
|
- margin-top: -30px;
|
|
|
+ margin-top: -30px;
|
|
|
}
|
|
|
+
|
|
|
.agreement {
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
}
|
|
|
+
|
|
|
.register {
|
|
|
- cursor: pointer;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.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: 800px;
|
|
|
- height: 450px;
|
|
|
- background: @m-white0;
|
|
|
- border-radius: 5px;
|
|
|
- box-shadow: 0px 5px 10px 0px rgba(18, 22, 24, 0.18);
|
|
|
- .flex();
|
|
|
+ width: 800px;
|
|
|
+ height: 450px;
|
|
|
+ background: @m-white0;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 5px 10px 0px rgba(18, 22, 24, 0.18);
|
|
|
+ .flex();
|
|
|
}
|
|
|
|
|
|
.agreement-content {
|
|
|
- font-size: 14px;
|
|
|
- color: @m-grey25;
|
|
|
+ font-size: 14px;
|
|
|
+ color: @m-grey25;
|
|
|
}
|
|
|
+
|
|
|
.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;
|
|
|
|
|
|
- // .ant-btn {
|
|
|
- // background: @cyan-color2;
|
|
|
- // border-color: @cyan-color2;
|
|
|
- // border-radius: 10px;
|
|
|
- // font-size: 14px;
|
|
|
- // color: @white;
|
|
|
- // margin-top: 90px;
|
|
|
- // margin-left: -60px;
|
|
|
+ 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%);
|
|
|
// }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .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;
|
|
|
- ::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: 154px;
|
|
|
- height: 40px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- }
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 53px;
|
|
|
+ padding-right: 53px;
|
|
|
+ min-width: 405px;
|
|
|
+
|
|
|
+ ::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;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-form-explain {
|
|
|
text-align: left;
|
|
|
- font-family: Adobe Heiti Std;
|
|
|
- font-weight: normal;
|
|
|
- color: @m-grey4;
|
|
|
- margin-top: 40px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ padding-left: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
- img {
|
|
|
- width: 19px;
|
|
|
- height: 21px;
|
|
|
+
|
|
|
+ .ant-input {
|
|
|
+ border: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ width: 154px;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
}
|
|
|
- .login-remember-password {
|
|
|
- .flex();
|
|
|
- justify-content: space-between;
|
|
|
- a {
|
|
|
- color: @m-grey4;
|
|
|
- }
|
|
|
+
|
|
|
+ .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;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
|
|
|
- .ant-btn {
|
|
|
- width: 100%;
|
|
|
- font-size: 16px;
|
|
|
- background: @m-blue1;
|
|
|
- border-radius: 3px;
|
|
|
- color: @m-white0;
|
|
|
- height: 50px;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 43px;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
