Skip to content

Commit 196b7f5

Browse files
fit2cloud-chenywfit2cloud-chenyw
committed
style: Login page
1 parent 37ec4e6 commit 196b7f5

File tree

11 files changed

+87
-102
lines changed

11 files changed

+87
-102
lines changed

‎frontend/components.d.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ declare module 'vue' {
1010
export interface GlobalComponents {
1111
ElAvatar: typeof import('element-plus/es')['ElAvatar']
1212
ElButton: typeof import('element-plus/es')['ElButton']
13-
ElCard: typeof import('element-plus/es')['ElCard']
1413
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
1514
ElDialog: typeof import('element-plus/es')['ElDialog']
1615
ElDropdown: typeof import('element-plus/es')['ElDropdown']

‎frontend/src/assets/login-bg-sqlbot.jpg‎

254 KB
Loading

‎frontend/src/assets/login-desc-de.png‎

-325 KB
Binary file not shown.

‎frontend/src/assets/login-desc.png‎

-272 KB
Binary file not shown.

‎frontend/src/assets/logo-bg.jpg‎

-561 KB
Binary file not shown.

‎frontend/src/components/layout/index.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<span>System manage</span>
5151
</div>
5252
</el-tooltip>
53-
<el-tooltip content="Help" placement="bottom">
53+
<!-- <el-tooltip content="Help" placement="bottom">
5454
<div class="header-icon-btn">
5555
<el-icon><question-filled /></el-icon>
5656
<span>Help</span>
@@ -61,7 +61,7 @@
6161
<el-icon><BellFilled /></el-icon>
6262
<span>Notice</span>
6363
</div>
64-
</el-tooltip>
64+
</el-tooltip> -->
6565
<el-dropdown trigger="click">
6666
<div class="user-info">
6767
<el-avatar size="small">{{ name?.charAt(0) }}</el-avatar>
@@ -114,10 +114,10 @@ import dashboard from '@/assets/svg/dashboard.svg'
114114
import chat from '@/assets/svg/chat.svg'
115115
import iconsetting from '@/assets/svg/setting.svg'
116116
import iconsystem from '@/assets/svg/system.svg'
117-
import {
117+
/* import {
118118
QuestionFilled,
119119
BellFilled
120-
} from '@element-plus/icons-vue'
120+
} from '@element-plus/icons-vue' */
121121
122122
const router = useRouter()
123123
const route = useRoute()
@@ -212,7 +212,7 @@ const toSystem = () => {
212212
line-height: 68px;
213213
font-size: 24px;
214214
font-weight: bold;
215-
color: #4285f4;
215+
color: var(--el-color-primary);
216216
text-align: left;
217217
margin-left: 24px;
218218
}
@@ -275,7 +275,7 @@ const toSystem = () => {
275275
column-gap: 4px;
276276
align-items: center;
277277
.el-avatar {
278-
background-color: #4285f4;
278+
background-color: var(--el-color-primary);
279279
color: #fff;
280280
}
281281
.user-name {

‎frontend/src/style.less‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
-moz-osx-font-smoothing: grayscale;
1414

1515

16-
--primary-color: #4285f4;
16+
/* --primary-color: var(--el-color-primary); */
17+
--primary-color: #1CBA90;
1718
--primary-light: #e8f0fe;
1819
--secondary-color: #5f6368;
1920
--danger-color: #ea4335;
@@ -29,7 +30,7 @@
2930
--border-radius: 8px;
3031
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
3132

32-
--el-color-primary: #4285f4 !important;
33+
--el-color-primary: #1CBA90 !important;
3334
}
3435

3536
a {

‎frontend/src/views/login/index.vue‎

Lines changed: 72 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,46 @@
11
<template>
22
<div class="login-container">
3-
<div class="login-bg">
4-
<div class="bg-overlay"></div>
5-
<div class="bg-content">
6-
<h1>Welcome back</h1>
7-
<p>Embark on your ChatBI journey</p>
3+
<div class="login-content">
4+
<div class="login-left">
5+
<div class="illustration">
6+
</div>
87
</div>
9-
</div>
10-
<div class="login-form-container">
11-
<div class="login-form">
12-
<el-card class="login-card">
13-
<h2 class="login-title">Login</h2>
8+
<div class="login-right">
9+
<div class="login-form">
10+
<h2 class="title">Login</h2>
1411
<el-form :model="loginForm" :rules="rules" ref="loginFormRef" @keyup.enter="submitForm">
1512
<el-form-item prop="username">
16-
<el-input v-model="loginForm.username" placeholder="username" prefix-icon="user"></el-input>
13+
<el-input
14+
v-model="loginForm.username"
15+
placeholder="Account"
16+
:prefix-icon="User"
17+
size="large"
18+
></el-input>
1719
</el-form-item>
1820
<el-form-item prop="password">
19-
<el-input v-model="loginForm.password" placeholder="password" type="password" prefix-icon="lock"></el-input>
21+
<el-input
22+
v-model="loginForm.password"
23+
placeholder="Password"
24+
type="password"
25+
:prefix-icon="Lock"
26+
size="large"
27+
></el-input>
2028
</el-form-item>
2129
<el-form-item>
2230
<el-button type="primary" @click="submitForm" class="login-btn">Login</el-button>
2331
</el-form-item>
2432
</el-form>
25-
</el-card>
33+
</div>
2634
</div>
2735
</div>
28-
2936
</div>
3037
</template>
3138

3239
<script lang="ts" setup>
3340
import { ref } from 'vue'
3441
import { useRouter } from 'vue-router'
3542
import { useUserStore } from '@/stores/user'
43+
import { User, Lock } from '@element-plus/icons-vue'
3644
3745
const router = useRouter()
3846
const userStore = useUserStore()
@@ -43,7 +51,7 @@ const loginForm = ref({
4351
})
4452
4553
const rules = {
46-
username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
54+
username: [{ required: true, message: 'Please input account', trigger: 'blur' }],
4755
password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
4856
}
4957
@@ -62,100 +70,77 @@ const submitForm = () => {
6270

6371
<style lang="less" scoped>
6472
.login-container {
65-
display: flex;
6673
height: 100vh;
67-
width: 100%;
68-
overflow: hidden;
74+
width: 100vw;
75+
background-color: #F0F6F7;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
6979
70-
.login-bg {
71-
overflow: hidden;
72-
height: 100%;
73-
width: 40%;
74-
min-width: 400px;
75-
position: relative;
76-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
77-
background-size: cover;
80+
.login-content {
7881
display: flex;
79-
justify-content: center;
80-
align-items: center;
81-
color: white;
82+
width: 1000px;
83+
// height: 600px;
84+
background: #fff;
85+
border-radius: 12px;
86+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
8287
overflow: hidden;
83-
84-
&::before {
85-
content: '';
86-
position: absolute;
87-
top: 0;
88-
left: 0;
89-
right: 0;
90-
bottom: 0;
91-
background: url('@/assets/login-desc-de.png') center/cover no-repeat;
92-
opacity: 0.8;
93-
}
9488
95-
.bg-overlay {
96-
position: absolute;
97-
top: 0;
98-
left: 0;
99-
width: 100%;
100-
height: 100%;
101-
background: rgba(0, 0, 0, 0.3);
102-
}
89+
.login-left {
90+
flex: 1;
91+
background: linear-gradient(135deg, #28c76f 0%, #81fbb8 100%);
92+
// padding: 40px;
93+
display: flex;
94+
flex-direction: column;
95+
align-items: center;
10396
104-
.bg-content {
105-
position: relative;
106-
z-index: 2;
107-
text-align: center;
108-
padding: 0 40px;
109-
110-
h1 {
111-
font-size: 2.5rem;
112-
margin-bottom: 1rem;
113-
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
114-
}
115-
116-
p {
117-
font-size: 1.2rem;
118-
opacity: 0.9;
97+
98+
.illustration {
99+
flex: 1;
100+
width: 100%;
101+
background-image: url('@/assets/login-bg-sqlbot.jpg');
102+
background-size: contain;
103+
background-position: center;
104+
background-repeat: no-repeat;
119105
}
120106
}
121-
}
122-
.login-form-container {
123-
display: flex;
124-
justify-content: center;
125-
align-items: center;
126-
height: 100%;
127-
width: 60%;
128-
min-width: 400px;
129-
.login-form {
130-
width: 500px;
107+
108+
.login-right {
109+
flex: 1;
110+
padding: 40px;
131111
display: flex;
132-
justify-content: center;
133112
align-items: center;
134-
background: #fff;
135-
padding: 0 40px;
136113
137-
.login-card {
114+
.login-form {
138115
width: 100%;
139-
padding: 40px;
140-
border: none;
141-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
116+
padding: 0 40px;
142117
143-
.login-title {
118+
.title {
119+
font-size: 28px;
120+
color: #1a1a1a;
121+
margin-bottom: 40px;
144122
text-align: center;
145-
margin-bottom: 30px;
146-
color: #409eff;
147-
font-size: 1.8rem;
148123
}
149124
150125
.login-btn {
151126
width: 100%;
152127
height: 45px;
153-
font-size: 1rem;
154-
letter-spacing: 1px;
128+
font-size: 16px;
129+
border-radius: 4px;
130+
margin-top: 20px;
131+
}
132+
133+
.agreement {
134+
margin-top: 20px;
135+
text-align: center;
136+
color: #666;
155137
}
156138
}
157139
}
158140
}
159-
141+
}
142+
143+
:deep(.el-input__wrapper) {
144+
background-color: #f5f7fa;
160145
}
161146
</style>

‎frontend/src/views/setting/Professional.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ onMounted(() => {
231231
border: 1px solid #ddd;
232232
}
233233
.primary-btn {
234-
background: #1890ff;
234+
background: var(--el-color-primary);
235235
color: white;
236236
}
237237
.tool-btn {
@@ -295,7 +295,7 @@ onMounted(() => {
295295
font-size: 18px;
296296
&:hover {
297297
background-color: #e8f0fe;
298-
color: #4285f4;
298+
color: var(--el-color-primary);
299299
}
300300
}
301301
}

‎frontend/src/views/system/model/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,7 @@ const batchEnableHandler = () => {
397397
border: 1px solid #ddd;
398398
}
399399
.primary-btn {
400-
background: #1890ff;
400+
background: var(--el-color-primary);
401401
color: white;
402402
}
403403
.tool-btn {
@@ -464,7 +464,7 @@ const batchEnableHandler = () => {
464464
font-size: 18px;
465465
&:hover {
466466
background-color: #e8f0fe;
467-
color: #4285f4;
467+
color: var(--el-color-primary);
468468
}
469469
}
470470
}

0 commit comments

Comments
 (0)