1
1
<template >
2
2
<div class =" login-container" >
3
+ <div class =" login-left" >
4
+ <img :src =" login_image" alt =" " />
5
+ </div >
3
6
<div class =" login-content" >
4
- <div class =" login-left" >
5
- <div class =" illustration" ></div >
6
- </div >
7
7
<div class =" login-right" >
8
+ <img width =" 227" height =" 52" :src =" aboutBg" alt =" " />
9
+ <div class =" welcome" >{{ $t('common.intelligent_questioning_platform') }}</div >
8
10
<div class =" login-form" >
9
- <h2 class =" title" >Login </h2 >
11
+ <h2 class =" title" >{{ $t('common.login') }} </h2 >
10
12
<el-form
11
13
ref =" loginFormRef"
12
14
class =" form-content_error"
33
35
></el-input >
34
36
</el-form-item >
35
37
<el-form-item >
36
- <el-button type =" primary" class =" login-btn" @click =" submitForm" >Login</el-button >
38
+ <el-button type =" primary" class =" login-btn" @click =" submitForm" >{{
39
+ $t('common.login_')
40
+ }}</el-button >
37
41
</el-form-item >
38
42
</el-form >
39
43
</div >
@@ -47,6 +51,8 @@ import { ref } from 'vue'
47
51
import { useRouter } from ' vue-router'
48
52
import { useUserStore } from ' @/stores/user'
49
53
import { useI18n } from ' vue-i18n'
54
+ import aboutBg from ' @/assets/embedded/LOGO-about.png'
55
+ import login_image from ' @/assets/embedded/login_image.png'
50
56
51
57
const router = useRouter ()
52
58
const userStore = useUserStore ()
@@ -79,52 +85,45 @@ const submitForm = () => {
79
85
.login-container {
80
86
height : 100vh ;
81
87
width : 100vw ;
82
- background-color : #f0f6f7 ;
88
+ background-color : #fff ;
83
89
display : flex ;
84
90
align-items : center ;
85
91
justify-content : center ;
86
92
87
- .login-content {
93
+ .login-left {
88
94
display : flex ;
89
- width : 1000px ;
90
- // height: 600px;
91
- background : #fff ;
92
- border-radius : 12px ;
93
- box-shadow : 0 8px 24px rgba (0 , 0 , 0 , 0.05 );
94
- overflow : hidden ;
95
-
96
- .login-left {
97
- flex : 1 ;
98
- background : linear-gradient (135deg , #28c76f 0% , #81fbb8 100% );
99
- // padding: 40px;
100
- display : flex ;
101
- flex-direction : column ;
102
- align-items : center ;
103
-
104
- .illustration {
105
- flex : 1 ;
106
- width : 100% ;
107
- background-image : url(' @/assets/login-bg-sqlbot.jpg' ) ;
108
- background-size : contain ;
109
- background-position : center ;
110
- background-repeat : no-repeat ;
111
- }
95
+ height : 100% ;
96
+ img {
97
+ height : 100% ;
112
98
}
99
+ }
100
+
101
+ .login-content {
102
+ display : flex ;
103
+ align-items : center ;
104
+ justify-content : center ;
105
+ flex : 1 ;
113
106
114
107
.login-right {
115
- flex : 1 ;
116
- padding : 40px ;
117
108
display : flex ;
118
109
align-items : center ;
110
+ flex-direction : column ;
119
111
position : relative ;
120
- height : 361px ;
112
+ .welcome {
113
+ margin : 8px 0 40px 0 ;
114
+ font-weight : 400 ;
115
+ font-size : 14px ;
116
+ line-height : 20px ;
117
+ color : #646a73 ;
118
+ }
121
119
122
120
.login-form {
123
- width : 100% ;
124
- padding : 0 40px ;
125
- position : absolute ;
126
- top : 40px ;
127
- left : 0 ;
121
+ border : 1px solid #dee0e3 ;
122
+ padding : 40px ;
123
+ width : 480px ;
124
+ min-height : 392px ;
125
+ border-radius : 12px ;
126
+ box-shadow : 0px 6px 24px 0px #1f232914 ;
128
127
129
128
.form-content_error {
130
129
.ed-form-item--default {
@@ -136,10 +135,11 @@ const submitForm = () => {
136
135
}
137
136
138
137
.title {
139
- font-size : 28px ;
140
- color : #1a1a1a ;
141
- margin-bottom : 40px ;
142
- text-align : center ;
138
+ font-weight : 500 ;
139
+ font-style : Medium ;
140
+ font-size : 20px ;
141
+ line-height : 28px ;
142
+ margin-bottom : 24px ;
143
143
}
144
144
145
145
.login-btn {
0 commit comments