|
|
@@ -22,6 +22,8 @@ async function submitForm(formEl) {
|
|
|
await formEl.validate((valid, fields) => {
|
|
|
if (valid) {
|
|
|
console.log('submit!')
|
|
|
+ router.replace('/customer/tempUserList')
|
|
|
+ return
|
|
|
const t = new Date().getTime()
|
|
|
const md5key = 'MiQM9YUdf89T2uIH'
|
|
|
apiSystemCommon.login({
|
|
|
@@ -94,12 +96,9 @@ onMounted(() => {
|
|
|
|
|
|
<template>
|
|
|
<div class="flex bg-white login-page">
|
|
|
- <div class="left-img-wrap">
|
|
|
- <img src="@/assets/imgs/login_bg.png" alt="">
|
|
|
- </div>
|
|
|
-
|
|
|
<div class="form-wrap">
|
|
|
<div class="form-content">
|
|
|
+ <img class="logo-icon" src="@/assets/imgs/logo_icon.png">
|
|
|
<h1 class="login-title">Login</h1>
|
|
|
<h3 class="title">运营管理系统</h3>
|
|
|
<el-form
|
|
|
@@ -108,9 +107,10 @@ onMounted(() => {
|
|
|
:rules="formRules"
|
|
|
class="form-box"
|
|
|
label-position="top"
|
|
|
+ hide-required-asterisk
|
|
|
>
|
|
|
- <el-form-item prop="account" label="用户名称">
|
|
|
- <el-input v-model="formState.account" placeholder="请输入用户名" />
|
|
|
+ <el-form-item prop="account" label="工号">
|
|
|
+ <el-input v-model="formState.account" placeholder="请输入工号" />
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="pwd" label="密码">
|
|
|
<el-input
|
|
|
@@ -128,18 +128,21 @@ onMounted(() => {
|
|
|
</el-tooltip>
|
|
|
</el-checkbox>
|
|
|
</el-form-item>
|
|
|
- <el-form-item>
|
|
|
+ <el-form-item class="btn-wrap">
|
|
|
<el-button
|
|
|
- style="width: 100%; margin-top: 50px"
|
|
|
+ style="width: 100%;"
|
|
|
type="primary"
|
|
|
- color="#091F6B"
|
|
|
+ color="#086CE0"
|
|
|
@click="submitForm(ruleFormRef)"
|
|
|
>登录</el-button
|
|
|
>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <p class="bot-tips">期货投资咨询业务批准文号：证监许可【2011】1446号</p>
|
|
|
+ <p class="bot-tips">投资咨询部投资咨询业务资格:证监许可【2011】1294号</p>
|
|
|
+ </div>
|
|
|
+ <div class="right-img-wrap">
|
|
|
+ <img src="@/assets/imgs/login_bg.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -147,55 +150,100 @@ onMounted(() => {
|
|
|
<style lang="scss" scoped>
|
|
|
.login-page {
|
|
|
height: 100%;
|
|
|
+ min-height: 720px;
|
|
|
align-items: center;
|
|
|
- .left-img-wrap {
|
|
|
- width: 838px;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- background-color: #091F6B;
|
|
|
- img{
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
.form-wrap {
|
|
|
flex: 1;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 20px;
|
|
|
- padding-top: 200px;
|
|
|
+ padding-left: 60px;
|
|
|
+ padding-right: 60px;
|
|
|
+ padding-top: 90px;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
.bot-tips{
|
|
|
- position: absolute;
|
|
|
- bottom: 30px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
color: #C0C4CC;
|
|
|
font-size: 15px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 90px;
|
|
|
}
|
|
|
.form-content{
|
|
|
- width: 600px;
|
|
|
+ width: 440px;
|
|
|
margin: 0 auto;
|
|
|
--el-component-size: 60px;
|
|
|
- --el-color-primary:#091F6B !important;
|
|
|
+ --el-color-primary:#086CE0 !important;
|
|
|
+ :deep(.el-form-item__label){
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .el-input{
|
|
|
+ --el-input-bg-color:#F3F4F6 !important;
|
|
|
+ :deep(.el-input__wrapper){
|
|
|
+ padding:1px 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-checkbox{
|
|
|
+ --el-font-weight-primary:bold !important;
|
|
|
+ --el-text-color-regular:#000;
|
|
|
+ --el-checkbox-input-width:25px;
|
|
|
+ --el-checkbox-input-height:25px;
|
|
|
+ --el-checkbox-bg-color:#F3F4F6;
|
|
|
+ :deep(.el-checkbox__inner::after){
|
|
|
+ height: 14px;
|
|
|
+ left:8px;
|
|
|
+ width:6px;
|
|
|
+ }
|
|
|
+ :deep(.el-checkbox__label){
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logo-icon{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
}
|
|
|
.login-title{
|
|
|
- font-size: 40px;
|
|
|
- margin-bottom: 36px;
|
|
|
+ font-size: 32px;
|
|
|
}
|
|
|
.title {
|
|
|
- margin-top: 0;
|
|
|
- font-size: 38px;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 24px;
|
|
|
}
|
|
|
.form-box {
|
|
|
- margin-top: 78px;
|
|
|
+ margin-top: 45px;
|
|
|
width: 100%;
|
|
|
+ .btn-wrap{
|
|
|
+ padding:3px;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ z-index: 1;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ filter: blur(30px);
|
|
|
+ background-image: linear-gradient(#E0E6F6, #F6F9FF);
|
|
|
+ }
|
|
|
+ }
|
|
|
:deep(.el-button){
|
|
|
height: 60px;
|
|
|
+ z-index: 2;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .right-img-wrap {
|
|
|
+ width: 720px;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ background-color: #086CE0;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
cxmo
