Skip to content

V
vue-gjjs
Commit 946513d7 by 潘际乾
Options

login ui

parent 0959967e
Showing with 135 additions and 80 deletions
src/views/Login/index.vue
<template> <template>
<div class="loginContainer"> <div class="loginContainer">
<div id="loginForamWrapper"> <div id="loginForamWrapper">
<h2>欢迎使用新一代国际结算系统</h2> <div class="company-desc">
<div id="loginForm"> <div>
<p style="text-align:left;font-size:1.2em;color:#888">用户登录 / LOGIN IN</p> <img src="../../assets/logo.png" style="height: 60px;" alt="" />
<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" size="small" > </div>
<el-form-item prop="username" > <h2>国际结算系统</h2>
<el-input prefix-icon="el-icon-user" :placeholder="$t('login.namePlaceholder')" v-model="loginForm.username"></el-input> </div>
</el-form-item> <div id="loginForm">
<h2>International Settlement System</h2>
<el-form
:model="loginForm"
status-icon
:rules="rules"
ref="loginForm"
size="small"
:hide-required-asterisk="true"
>
<el-form-item prop="username" label="用户名">
<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" > <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-input prefix-icon="el-icon-lock" :placeholder="$t('login.pwdPlaceholder')" type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-button style="width: 100%;height: 40px; margin: 20px 0 0" type="primary" @click="submitForm('loginForm')" >
<el-button style="width:100%;margin-top:1em;margin:0 0" type="primary" @click="submitForm('loginForm')">{{$t('login.loginBtn')}}</el-button> {{ $t("login.loginBtn") }}
</el-form-item> </el-button>
</el-form> </el-form>
</div> </div>
</div>
<div class="copy-right">
<p>新晨科技 版权所有</p>
<p>COPYRIGHT BRILLIANCE</p>
<p style="margin-bottom: 15%;">2022</p>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import Utils from "~/utils"; import Utils from "~/utils";
import { createNamespacedHelpers } from 'vuex' import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers('UserContext') const { mapState, mapMutations, mapActions } =
const { setLoginInfo } = mapMutations(["setLoginInfo"]) createNamespacedHelpers("UserContext");
const { setLoginInfo } = mapMutations(["setLoginInfo"]);
export default { export default {
data() { data() {
return { return {
loginForm: { loginForm: {
password: '1', password: "1",
username: 'ZL', 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()})
this.$router.push("/home");
} else {
console.log('error submit!!');
return false;
}
});
}, },
resetForm(formName) { rules: {
this.$refs[formName].resetFields(); username: [{ type: "string", required: true, message: "请填写用户名" }],
password: [{ type: "string", required: true, message: "请填写密码" }],
}, },
setLoginInfo };
} },
} methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.setLoginInfo({
userId: this.loginForm.username,
token: Utils.generateUUID(),
});
this.$router.push("/home");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
setLoginInfo,
},
};
</script> </script>
<style>
.loginContainer{ <style scoped>
flex: 1; .loginContainer {
background-image: url("../../assets/login_bg.png"); flex: 1;
background-size: cover; background-image: url("../../assets/login_bg.png");
display: flex; background-size: cover;
justify-content: center; }
align-items: center; #loginForamWrapper {
} width: 20%;
#loginForamWrapper{ margin-left: 15%;
width: 340px; height: 100%;
/* height:280px; */ background-color: white;
}
} #loginForamWrapper h2 {
#loginForm{ font-size: 20px;
background-color: white; text-align: center;
padding:1em 2em; font-family: 宋体;
border: 1px solid #d9d9d9; }
box-shadow: 5px 5px 5px 0px #d9d9d9; .company-desc {
border-radius: 3px; height: 32%;
} display: flex;
#loginForamWrapper h2{ flex-direction: column;
color:#d9d9d9; justify-content: flex-end;
font-family: 宋体; }
.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: 14px;
color: #858585;
}
.copy-right p{
margin: 3px 0;
}
</style> </style>
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