klinsmaya/SQLBot
1
0
Fork 0
mirror of https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git synced 2026-11-08 01:06:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: Login page

Browse Source
This commit is contained in:
fit2cloud-chenyw
2025-05-08 10:38:33 +08:00
parent 37ec4e61c5
commit 196b7f5c4c
11 changed files with 90 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components.d.ts
Vendored
-1
View File
@@ -10,7 +10,6 @@ declare module 'vue' {
export interface GlobalComponents {
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
frontend/src/assets/login-bg-sqlbot.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 254 KiB

frontend/src/assets/login-desc-de.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 325 KiB

frontend/src/assets/login-desc.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 272 KiB

frontend/src/assets/logo-bg.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 561 KiB

frontend/src/components/layout/index.vue
+6 -6
View File
@@ -50,7 +50,7 @@
<span>System manage</span>
</div>
</el-tooltip>
<el-tooltip content="Help" placement="bottom">
<!-- <el-tooltip content="Help" placement="bottom">
<div class="header-icon-btn">
<el-icon><question-filled /></el-icon>
<span>Help</span>
@@ -61,7 +61,7 @@
<el-icon><BellFilled /></el-icon>
<span>Notice</span>
</div>
</el-tooltip>
</el-tooltip> -->
<el-dropdown trigger="click">
<div class="user-info">
<el-avatar size="small">{{ name?.charAt(0) }}</el-avatar>
@@ -114,10 +114,10 @@ import dashboard from '@/assets/svg/dashboard.svg'
import chat from '@/assets/svg/chat.svg'
import iconsetting from '@/assets/svg/setting.svg'
import iconsystem from '@/assets/svg/system.svg'
import {
/* import {
QuestionFilled,
BellFilled
} from '@element-plus/icons-vue'
} from '@element-plus/icons-vue' */
const router = useRouter()
const route = useRoute()
@@ -212,7 +212,7 @@ const toSystem = () => {
line-height: 68px;
font-size: 24px;
font-weight: bold;
color: #4285f4;
color: var(--el-color-primary);
text-align: left;
margin-left: 24px;
}
@@ -275,7 +275,7 @@ const toSystem = () => {
column-gap: 4px;
align-items: center;
.el-avatar {
background-color: #4285f4;
background-color: var(--el-color-primary);
color: #fff;
}
.user-name {
frontend/src/style.less
+3 -2
View File
@@ -13,7 +13,8 @@
-moz-osx-font-smoothing: grayscale;
--primary-color: #4285f4;
/* --primary-color: var(--el-color-primary); */
--primary-color: #1CBA90;
--primary-light: #e8f0fe;
--secondary-color: #5f6368;
--danger-color: #ea4335;
@@ -29,7 +30,7 @@
--border-radius: 8px;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--el-color-primary: #4285f4 !important;
--el-color-primary: #1CBA90 !important;
}
a {
frontend/src/views/login/index.vue
+75 -90
View File
@@ -1,31 +1,38 @@
<template>
<div class="login-container">
<div class="login-bg">
<div class="bg-overlay"></div>
<div class="bg-content">
<h1>Welcome back</h1>
<p>Embark on your ChatBI journey</p>
<div class="login-content">
<div class="login-left">
<div class="illustration">
</div>
</div>
</div>
<div class="login-form-container">
<div class="login-form">
<el-card class="login-card">
<h2 class="login-title">Login</h2>
<div class="login-right">
<div class="login-form">
<h2 class="title">Login</h2>
<el-form :model="loginForm" :rules="rules" ref="loginFormRef" @keyup.enter="submitForm">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="username" prefix-icon="user"></el-input>
<el-input
v-model="loginForm.username"
placeholder="Account"
:prefix-icon="User"
size="large"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" placeholder="password" type="password" prefix-icon="lock"></el-input>
<el-input
v-model="loginForm.password"
placeholder="Password"
type="password"
:prefix-icon="Lock"
size="large"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm" class="login-btn">Login</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</div>
</div>
</div>
</template>
@@ -33,6 +40,7 @@
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { User, Lock } from '@element-plus/icons-vue'
const router = useRouter()
const userStore = useUserStore()
@@ -43,7 +51,7 @@ const loginForm = ref({
})
const rules = {
username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
username: [{ required: true, message: 'Please input account', trigger: 'blur' }],
password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
}
@@ -62,100 +70,77 @@ const submitForm = () => {
<style lang="less" scoped>
.login-container {
display: flex;
height: 100vh;
width: 100%;
overflow: hidden;
width: 100vw;
background-color: #F0F6F7;
display: flex;
align-items: center;
justify-content: center;
.login-bg {
overflow: hidden;
height: 100%;
width: 40%;
min-width: 400px;
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: cover;
.login-content {
display: flex;
justify-content: center;
align-items: center;
color: white;
width: 1000px;
// height: 600px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('@/assets/login-desc-de.png') center/cover no-repeat;
opacity: 0.8;
}
.bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.bg-content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 40px;
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
p {
font-size: 1.2rem;
opacity: 0.9;
}
}
}
.login-form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 60%;
min-width: 400px;
.login-form {
width: 500px;
.login-left {
flex: 1;
background: linear-gradient(135deg, #28c76f 0%, #81fbb8 100%);
// padding: 40px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #fff;
padding: 0 40px;
.login-card {
.illustration {
flex: 1;
width: 100%;
padding: 40px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background-image: url('@/assets/login-bg-sqlbot.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.login-title {
.login-right {
flex: 1;
padding: 40px;
display: flex;
align-items: center;
.login-form {
width: 100%;
padding: 0 40px;
.title {
font-size: 28px;
color: #1a1a1a;
margin-bottom: 40px;
text-align: center;
margin-bottom: 30px;
color: #409eff;
font-size: 1.8rem;
}
.login-btn {
width: 100%;
height: 45px;
font-size: 1rem;
letter-spacing: 1px;
font-size: 16px;
border-radius: 4px;
margin-top: 20px;
}
.agreement {
margin-top: 20px;
text-align: center;
color: #666;
}
}
}
}
}
:deep(.el-input__wrapper) {
background-color: #f5f7fa;
}
</style>
frontend/src/views/setting/Professional.vue
+2 -2
View File
@@ -231,7 +231,7 @@ onMounted(() => {
border: 1px solid #ddd;
}
.primary-btn {
background: #1890ff;
background: var(--el-color-primary);
color: white;
}
.tool-btn {
@@ -295,7 +295,7 @@ onMounted(() => {
font-size: 18px;
&:hover {
background-color: #e8f0fe;
color: #4285f4;
color: var(--el-color-primary);
}
}
}
frontend/src/views/system/model/index.vue
+2 -2
View File
@@ -397,7 +397,7 @@ const batchEnableHandler = () => {
border: 1px solid #ddd;
}
.primary-btn {
background: #1890ff;
background: var(--el-color-primary);
color: white;
}
.tool-btn {
@@ -464,7 +464,7 @@ const batchEnableHandler = () => {
font-size: 18px;
&:hover {
background-color: #e8f0fe;
color: #4285f4;
color: var(--el-color-primary);
}
}
}
frontend/src/views/system/user/index.vue
+2 -2
View File
@@ -284,7 +284,7 @@ onMounted(() => {
border: 1px solid #ddd;
}
.primary-btn {
background: #1890ff;
background: var(--el-color-primary);
color: white;
}
.tool-btn {
@@ -351,7 +351,7 @@ onMounted(() => {
font-size: 18px;
&:hover {
background-color: #e8f0fe;
color: #4285f4;
color: var(--el-color-primary);
}
}
}