1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-12-09 11:55:52 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Login page style optimization (#8497)

Browse source
This commit is contained in:
蘭 2025-04-28 14:59:47 +08:00 • committed by GitHub
parent 937ab76183
commit 6eacf0738e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 103 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
frontend/src/views/login/components/login-form.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="w-full h-full flex items-center justify-center px-8">
<div v-loading="loading" class="w-full flex-grow flex flex-col">
<div v-loading="loading" class="w-full flex-grow flex flex-col login-form">
<div v-if="mfaShow">
<el-form @submit.prevent>
<div class="flex flex-col justify-center items-center mb-6">
@ -121,20 +121,20 @@
@click="login(loginFormRef)"
@focus="loginButtonFocused = true"
@blur="loginButtonFocused = false"
class="w-full"
class="w-full login-button"
type="primary"
size="default"
>
{{ $t('commons.button.login') }}
</el-button>
</el-form-item>
<el-text v-if="isDemo" type="danger">
<el-text v-if="isDemo" type="danger" class="demo">
{{ $t('commons.login.username') }}:demo {{ $t('commons.login.password') }}:1panel
</el-text>
<el-form-item prop="agreeLicense" v-if="!isIntl">
<el-checkbox v-model="loginForm.agreeLicense">
<template #default>
<span>
<span class="agree-title">
{{ $t('commons.button.agree') }}
<a
class="agree"
@ -462,4 +462,101 @@ onMounted(() => {
:deep(.el-row) {
padding: 0 !important;
}
.login-form {
.login-button {
background-color: #005eeb;
border-color: #005eeb;
color: #ffffff;
&:hover {
background-color: #196eed !important;
border-color: #196eed !important;
outline: none !important;
}
}
:deep(.el-input) {
--el-input-border-color: #dcdfe6;
background: none !important;
}
:deep(.el-input__wrapper) {
background: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 1px #005eeb inset !important;
}
.demo {
text-align: center;
span {
color: red;
}
}
.agree-title {
color: #005eeb;
}
.agree {
white-space: pre-wrap;
color: #005eeb;
}
:deep(a) {
color: #005eeb;
&:hover {
opacity: 75%;
}
}
:deep(.el-checkbox__input .el-checkbox__inner) {
background-color: #fff !important;
border-color: #fff !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background-color: #005eeb !important;
border-color: #005eeb !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
border-color: #fff !important;
}
:deep(.el-input__inner) {
color: #000 !important;
}
}
.cursor-pointer {
outline: none;
}
.el-dropdown:focus-visible {
outline: none;
}
.el-tooltip__trigger:focus-visible {
outline: none;
}
:deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
color: #005eeb !important;
background-color: #e5eefd !important;
}
:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
color: #005eeb !important;
background-color: #e5eefd !important;
}
:deep(.el-loading-mask) {
background-color: rgba(229, 238, 253, 0.8) !important;
}
.login-footer-btn {
.el-button--primary {
border-color: #005eeb !important;
background-color: #005eeb !important;
}
}
</style>

4
frontend/src/views/login/index.vue
View file

@ -12,8 +12,8 @@
:style="{ opacity: backgroundOpacity, width: containerWidth, height: containerHeight }"
class="bg-white shadow-lg relative z-10 border border-gray-200 flex overflow-hidden"
>
<div class="grid grid-cols-1 md:grid-cols-2 items-stretch w-full h-full">
<div v-if="showLogo" class="flex justify-center">
<div class="grid grid-cols-1 md:grid-cols-2 items-stretch w-full">
<div v-if="showLogo" class="flex justify-center" :style="{ height: containerHeight }">
<img
:src="loadImage('loginImage')"
class="max-w-full max-h-full object-cover bg-cover bg-center"