Skip to content

V
vue-gjjs
Commit 87add234 by yangxiaolei
Options

新增登录页面

parent 03014330
Showing with 429 additions and 119 deletions
src/views/Login/index.vue
<template>
<div class="loginContainer">
<div id="loginForamWrapper">
<div class="company-desc">
<div>
<img src="../../assets/logo.png" style="height: 60px" alt="" />
</div>
<h2>国际结算系统</h2>
</div>
<div id="loginForm">
<!--div class="en-title">International Trade Financing</div-->
<el-form
:model="loginForm"
status-icon
:rules="rules"
ref="loginForm"
size="small"
:hide-required-asterisk="true"
>
<el-form-item prop="username" label="用户名" style="margin-top: 50px">
<el-input
prefix-icon="el-icon-user"
:placeholder="$t('login.namePlaceholder')"
v-model="loginForm.username"
></el-input>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input
prefix-icon="el-icon-lock"
:placeholder="$t('login.pwdPlaceholder')"
type="password"
v-model="loginForm.password"
autocomplete="off"
></el-input>
</el-form-item>
<el-button
style="width: 100%; height: 40px; margin: 20px 0 0"
type="primary"
@click="submitForm('loginForm')"
>
登录<!--{{ $t("login.loginBtn") }}-->
</el-button>
</el-form>
<div class="loginWrapper">
<div class="loginHead">
<div class="logo"></div>
<div class="line"></div>
</div>
<div class="loginBox">
<div class="loginBoxTitle">
<div class="bigTitle">Trade Finance System</div>
<div class="smallTitle">Use a valid login ID and password to gain access to the operation console of TFS.</div>
</div>
<div class="loginBoxForm">
<div id="loginForm">
<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" size="small"
:hide-required-asterisk="true">
<el-form-item prop="username" label="Username" style="margin-top: 40px">
<el-input :placeholder="$t('login.namePlaceholder')" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item prop="password" label="Password">
<el-input :placeholder="$t('login.pwdPlaceholder')" type="password" v-model="loginForm.password"
autocomplete="off"></el-input>
</el-form-item>
<div class="copy-right">
<span>
<span class="copyright-icon">©</span>
2022 新晨公司版权所有
</span>
<el-button class="loginClass" type="primary" @click="submitForm('loginForm')">
LOGIN
</el-button>
<el-button class="resetClass" type="primary" @click="resetForm('loginForm')">
Reset
</el-button>
</el-form>
</div>
</div>
</div>
</div>
<div class="loginTitle">
<h1 style="color: white; font-size: 40px">国际结算系统</h1>
<span style="color: white; font-size: 25px; font-weight: bold"
>International Settlement System</span
>
<div class="loginRight">COPYRIGHT BOC(HK）2023</div>
</div>
</div>
</template>
......@@ -65,7 +42,7 @@
import Utils from "~/utils";
import { createNamespacedHelpers } from "vuex";
import axios from "axios";
import EventService, {LOGIN} from "~/service/EventService";
import EventService, { LOGIN } from "~/service/EventService";
const { mapState, mapMutations, mapActions } =
......@@ -169,91 +146,163 @@ export default {
};
</script>
<style scoped>
<style lang="less" scoped>
.loginContainer {
background: #F5F5F5;
flex: 1;
background-image: url("../../assets/login_bg.png");
/* background-size: cover; */
background-size: 50% 100%;
background-position-x: 100%;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.loginContainer .en-title {
font-weight: 600;
font-size: 0.4em;
text-align: center;
margin: 10px 0px 20px;
color: #0000005e;
.loginContainer .loginWrapper {
width: 724px;
}
#loginForamWrapper {
width: 20%;
margin-left: 15%;
height: 100%;
background-color: white;
z-index: 2;
position: absolute;
.loginHead {
width: 724px;
}
#loginForamWrapper h2 {
font-size: 20px;
text-align: center;
font-family: 宋体;
.loginHead .logo {
width: 269px;
height: 57px;
opacity: 1;
background-image: url("../../assets/banklogo.png");
background-size: cover;
}
.company-desc {
height: 32%;
display: flex;
flex-direction: column;
justify-content: flex-end;
.loginHead .line {
width: 724px;
height: 10px;
opacity: 1;
background-image: url("../../assets/Line.png");
margin-top: 18px;
margin-bottom: 7px;
}
.company-desc div {
.loginBox {
width: 724px;
height: 360px;
opacity: 1;
background: #FFFFFF;
box-sizing: border-box;
border: 1px solid #E4E4E4;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15%;
}
.company-desc h2 {
.loginRight {
font-family: YuGothic-Regular;
font-size: 10px;
font-weight: normal;
line-height: 10px;
text-align: center;
letter-spacing: 0em;
color: #707070;
width: 724px;
margin: 51px auto;
}
#loginForm {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 34%;
border-top: solid 1px blue;
.loginBox .loginBoxTitle {
margin-left: 50px;
flex: 1;
}
#loginForm h2 {
.loginBox .loginBoxTitle .smallTitle {
width: 285px;
height: 34px;
opacity: 1;
font-family: 思源黑体;
font-size: 12px;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #707070;
}
#loginForm >>> .el-form-item__label {
font-size: 14px;
color: #707070;
.loginBox .loginBoxTitle .bigTitle {
width: 314px;
height: 29px;
opacity: 1;
font-family: BarlowCondensed-Regular;
font-size: 29px;
font-weight: normal;
line-height: 29px;
letter-spacing: 0.018000000000000002em;
margin-top: 89px;
margin-bottom: 18px;
color: #241513;
}
#loginForm >>> .el-input--small .el-input__inner {
height: 40px;
.loginBox .loginBoxForm {
width: 284px;
height: 300px;
opacity: 1;
background: #F5F5F5;
box-sizing: border-box;
border: 1px solid #E4E4E4;
margin: 29px;
}
.copy-right {
height: 32%;
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: center;
font-size: 0.4em;
color: #858585;
.loginBox .loginBoxForm #loginForm {
padding: 0 35px;
}
.copy-right p {
margin: 3px 0;
.loginClass {
width: 97px;
height: 39px;
background: #B31C2A;
font-family: 思源黑体;
font-size: 15px;
font-weight: bold;
line-height: 15px;
letter-spacing: 0em;
color: #FFFFFF;
margin-left: 0px;
margin-right: 11px;
border: none
}
.loginTitle {
width: 155%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
position: absolute;
top: 15%;
z-index: 1;
.resetClass {
width: 97px;
height: 39px;
opacity: 1;
background: #E4E4E4;
font-family: 思源黑体;
font-size: 15px;
font-weight: bold;
line-height: 15px;
letter-spacing: 0em;
color: #707070;
margin: 0;
border: none
}
#loginForm /deep/ .el-form-item__label {
font-family: 思源黑体;
font-size: 15px;
font-weight: normal;
line-height: 15px;
letter-spacing: 0em;
color: #707070;
}
#loginForm /deep/ .el-input__inner {
border: 1px solid #D2D2D2;
border-radius: 5px;
background: #FFFFFF;
}
</style>
\ No newline at end of file
src/views/Login/oldIndex.vue 0 → 100644
<template>
<div class="loginContainer">
<div id="loginForamWrapper">
<div class="company-desc">
<div>
<img src="../../assets/logo.png" style="height: 60px" alt="" />
</div>
<h2>国际结算系统</h2>
</div>
<div id="loginForm">
<!--div class="en-title">International Trade Financing</div-->
<el-form
:model="loginForm"
status-icon
:rules="rules"
ref="loginForm"
size="small"
:hide-required-asterisk="true"
>
<el-form-item prop="username" label="用户名" style="margin-top: 50px">
<el-input
prefix-icon="el-icon-user"
:placeholder="$t('login.namePlaceholder')"
v-model="loginForm.username"
></el-input>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input
prefix-icon="el-icon-lock"
:placeholder="$t('login.pwdPlaceholder')"
type="password"
v-model="loginForm.password"
autocomplete="off"
></el-input>
</el-form-item>
<el-button
style="width: 100%; height: 40px; margin: 20px 0 0"
type="primary"
@click="submitForm('loginForm')"
>
登录<!--{{ $t("login.loginBtn") }}-->
</el-button>
</el-form>
</div>
<div class="copy-right">
<span>
<span class="copyright-icon">©</span>
2022 新晨公司版权所有
</span>
</div>
</div>
<div class="loginTitle">
<h1 style="color: white; font-size: 40px">国际结算系统</h1>
<span style="color: white; font-size: 25px; font-weight: bold"
>International Settlement System</span
>
</div>
</div>
</template>
<script>
import Utils from "~/utils";
import { createNamespacedHelpers } from "vuex";
import axios from "axios";
import EventService, {LOGIN} from "~/service/EventService";
const { mapState, mapMutations, mapActions } =
createNamespacedHelpers("UserContext");
const { setLoginInfo } = mapMutations(["setLoginInfo"]);
const usrMap = {
ZL: "wdbus",
MBF: "wdrel",
};
export default {
data() {
return {
loginForm: {
password: "1",
username: "ZL",
},
rules: {
username: [{ type: "string", required: true, message: "请填写用户名" }],
password: [{ type: "string", required: true, message: "请填写密码" }],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.setLoginInfo({
userId: this.loginForm.username,
token: Utils.generateUUID(),
});
EventService.emit(LOGIN)
// 电证登录
const dzUsr = usrMap[this.loginForm.username === "ZL" ? "ZL" : "MBF"];
const headers = {
userId: dzUsr,
security: true,
terminalType: "WEB",
};
axios
.post(
"/esfeserver/service/login",
{
data: {
dncode: "",
password: "1",
sendcode: "1",
username: dzUsr,
},
},
{ headers }
)
.then((res) => {
const data = res.data;
if (data.retmsg === "success") {
const d = data.data;
window.sessionStorage.setItem("menu", JSON.stringify(d.menu));
window.sessionStorage.setItem("_token_", d.token);
window.sessionStorage.setItem("_nam_", dzUsr);
axios
.post(
"esfeserver/service/office/offp_login",
{},
{ headers: { ...headers, token: d.token } }
)
.then((rs) => {
const rd = rs.data;
if (rd.retmsg === "success") {
const dd = rd.data;
window.sessionStorage.setItem("bchsta_loginsta", "登录");
window.sessionStorage.setItem("syssta_syssta", "日间");
window.sessionStorage.setItem("syssta_online", "开启");
window.sessionStorage.setItem("usrnam", dd.usr_dspnam);
window.sessionStorage.setItem("usg", dd.usr_usg);
window.sessionStorage.setItem(
"syssta_sysdat",
dd.syssta_sysdat
);
window.sessionStorage.setItem(
"bchsta_chkflg",
dd.bchsta_chkflg
);
window.sessionStorage.setItem("bchnam", dd.bch_namcn);
}
});
this.$router.push("/home");
}
});
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
setLoginInfo,
},
};
</script>
<style scoped>
.loginContainer {
flex: 1;
background-image: url("../../assets/login_bg.png");
/* background-size: cover; */
background-size: 50% 100%;
background-position-x: 100%;
background-repeat: no-repeat;
}
.loginContainer .en-title {
font-weight: 600;
font-size: 0.4em;
text-align: center;
margin: 10px 0px 20px;
color: #0000005e;
}
#loginForamWrapper {
width: 20%;
margin-left: 15%;
height: 100%;
background-color: white;
z-index: 2;
position: absolute;
}
#loginForamWrapper h2 {
font-size: 20px;
text-align: center;
font-family: 宋体;
}
.company-desc {
height: 32%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.company-desc div {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15%;
}
.company-desc h2 {
}
#loginForm {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 34%;
border-top: solid 1px blue;
}
#loginForm h2 {
color: #707070;
}
#loginForm >>> .el-form-item__label {
font-size: 14px;
color: #707070;
}
#loginForm >>> .el-input--small .el-input__inner {
height: 40px;
}
.copy-right {
height: 32%;
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: center;
font-size: 0.4em;
color: #858585;
}
.copy-right p {
margin: 3px 0;
}
.loginTitle {
width: 155%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
position: absolute;
top: 15%;
z-index: 1;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment