mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-19 08:19:15 +08:00
feat: 登录页样式修改
This commit is contained in:
wangdan
wangdan-fit2cloud
parent
a00bfe775b
commit
1dc6267409
BIN
frontend/src/assets/images/1panel-login-bg.png
Normal file
BIN
frontend/src/assets/images/1panel-login-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
BIN
frontend/src/assets/images/menu-bg.png
Normal file
BIN
frontend/src/assets/images/menu-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -102,7 +102,7 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: $menu-backgroup-color;
|
||||
background: url(@/assets/images/menu-bg.png) $menu-backgroup-color no-repeat top;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.el-scrollbar {
|
||||
|
||||
@ -105,6 +105,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@ -220,10 +220,9 @@ onMounted(() => {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
background-color: rgba(0, 94, 235, 0.03);
|
||||
&:hover {
|
||||
background-color: rgba(0, 94, 235, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-button {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="login-form">
|
||||
<input type="text" class="hide" id="name" />
|
||||
<input type="password" class="hide" id="password" />
|
||||
<el-form-item prop="name">
|
||||
<el-form-item prop="name" class="no-border">
|
||||
<el-input
|
||||
v-model="registerForm.name"
|
||||
:placeholder="$t('commons.login.username')"
|
||||
@ -21,7 +21,7 @@
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-form-item prop="password" class="no-border">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
@ -38,7 +38,7 @@
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="rePassword">
|
||||
<el-form-item prop="rePassword" class="no-border">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
@ -72,97 +72,91 @@
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="mfaShow">
|
||||
<div class="login-container">
|
||||
<div class="login-form">
|
||||
<el-form>
|
||||
<div class="login-title">{{ $t('commons.login.mfaTitle') }}</div>
|
||||
<div class="login-form">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
size="default"
|
||||
:placeholder="$t('commons.login.captchaHelper')"
|
||||
v-model="mfaLoginForm.code"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<Finished />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="login-button" type="primary" size="default" round @click="mfaLogin()">
|
||||
{{ $t('commons.button.verify') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item class="no-border">
|
||||
<el-input
|
||||
size="default"
|
||||
:placeholder="$t('commons.login.captchaHelper')"
|
||||
v-model="mfaLoginForm.code"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<Finished />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="login-button" type="primary" size="default" round @click="mfaLogin()">
|
||||
{{ $t('commons.button.verify') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!mfaShow">
|
||||
<div class="login-container">
|
||||
<div class="login-form">
|
||||
<el-form ref="loginFormRef" :model="loginForm" size="default" :rules="loginRules">
|
||||
<div class="login-title">{{ $t('commons.button.login') }}</div>
|
||||
<div class="login-form">
|
||||
<el-form-item prop="name">
|
||||
<el-input
|
||||
v-model="loginForm.name"
|
||||
:placeholder="$t('commons.login.username')"
|
||||
class="form-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<user />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
v-model="loginForm.password"
|
||||
show-password
|
||||
:placeholder="$t('commons.login.password')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<span v-if="errAuthInfo" class="input-error" style="line-height: 14px">
|
||||
{{ $t('commons.login.errorAuthInfo') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item prop="captcha" class="login-captcha">
|
||||
<el-input
|
||||
v-model="loginForm.captcha"
|
||||
:placeholder="$t('commons.login.captchaHelper')"
|
||||
/>
|
||||
<img
|
||||
v-if="captcha.imagePath"
|
||||
:src="captcha.imagePath"
|
||||
:alt="$t('commons.login.captchaHelper')"
|
||||
@click="loginVerify()"
|
||||
/>
|
||||
<span v-if="errCaptcha" class="input-error" style="line-height: 14px">
|
||||
{{ $t('commons.login.errorCaptcha') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="login(loginFormRef)"
|
||||
@focus="loginButtonFocused = true"
|
||||
@blur="loginButtonFocused = false"
|
||||
class="login-button"
|
||||
type="primary"
|
||||
size="default"
|
||||
round
|
||||
>
|
||||
{{ $t('commons.button.login') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="name" class="no-border">
|
||||
<el-input
|
||||
v-model="loginForm.name"
|
||||
:placeholder="$t('commons.login.username')"
|
||||
class="form-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<user />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="no-border">
|
||||
<el-input
|
||||
type="password"
|
||||
clearable
|
||||
v-model="loginForm.password"
|
||||
show-password
|
||||
:placeholder="$t('commons.login.password')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<span v-if="errAuthInfo" class="input-error" style="line-height: 14px">
|
||||
{{ $t('commons.login.errorAuthInfo') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item prop="captcha" class="login-captcha">
|
||||
<el-input v-model="loginForm.captcha" :placeholder="$t('commons.login.captchaHelper')" />
|
||||
<img
|
||||
v-if="captcha.imagePath"
|
||||
:src="captcha.imagePath"
|
||||
:alt="$t('commons.login.captchaHelper')"
|
||||
@click="loginVerify()"
|
||||
/>
|
||||
<span v-if="errCaptcha" class="input-error" style="line-height: 14px">
|
||||
{{ $t('commons.login.errorCaptcha') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="login(loginFormRef)"
|
||||
@focus="loginButtonFocused = true"
|
||||
@blur="loginButtonFocused = false"
|
||||
class="login-button"
|
||||
type="primary"
|
||||
size="default"
|
||||
round
|
||||
>
|
||||
{{ $t('commons.button.login') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
@ -342,7 +336,8 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-container {
|
||||
.login-form {
|
||||
padding: 0 40px;
|
||||
.hide {
|
||||
width: 0;
|
||||
border: 0;
|
||||
@ -350,39 +345,41 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.login-title {
|
||||
margin-top: 50px;
|
||||
font-size: 32px;
|
||||
// margin-top: 50px;
|
||||
font-size: 30px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
color: #646a73;
|
||||
margin-bottom: 30px;
|
||||
// @media only screen and (max-width: 1280px) {
|
||||
// margin-top: 20px;
|
||||
// }
|
||||
}
|
||||
.no-border {
|
||||
:deep(.el-input__wrapper) {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
border-bottom: 1px solid $menu-backgroup-color;
|
||||
|
||||
@media only screen and (max-width: 1280px) {
|
||||
margin-top: 20px;
|
||||
// --el-input-focus-border: $menu-backgroup-color;
|
||||
// --el-input-transparent-border: 0 0 0 0px;
|
||||
// --el-input-border-color: $menu-backgroup-color;
|
||||
// --el-input-hover-border: 0px !important;
|
||||
// --el-input-hover-border-color: $menu-backgroup-color;
|
||||
// --el-input-focus-border-color: $menu-backgroup-color;
|
||||
// --el-input-clear-hover-color: $menu-backgroup-color;
|
||||
// box-shadow: 0 0 0 0px !important;
|
||||
// --el-input-border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 30px;
|
||||
padding: 0 40px;
|
||||
|
||||
.el-input {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
--el-input-focus-border: $menu-backgroup-color;
|
||||
--el-input-transparent-border: 0 0 0 0px;
|
||||
--el-input-border-color: $menu-backgroup-color;
|
||||
--el-input-hover-border: 0px !important;
|
||||
--el-input-hover-border-color: $menu-backgroup-color;
|
||||
--el-input-focus-border-color: $menu-backgroup-color;
|
||||
--el-input-clear-hover-color: $menu-backgroup-color;
|
||||
box-shadow: 0 0 0 0px !important;
|
||||
--el-input-border: 0px;
|
||||
}
|
||||
.el-input {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
margin-top: 10px;
|
||||
.el-input {
|
||||
width: 50%;
|
||||
height: 44px;
|
||||
@ -426,6 +423,7 @@ onMounted(() => {
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="login-backgroud" v-if="statusCode == 1">
|
||||
<div class="login-title">
|
||||
<span>1Panel 现代化的 Linux 面板</span>
|
||||
<div class="login-wrapper" v-if="screenWidth > 1000">
|
||||
<div class="left inline-block">
|
||||
<div class="login-title">
|
||||
<span>1Panel 现代化的 Linux 面板</span>
|
||||
</div>
|
||||
<img src="@/assets/images/1Panel-login.png" alt="" />
|
||||
</div>
|
||||
<div class="right inline-block">
|
||||
<div class="login-container">
|
||||
<LoginForm ref="loginRef"></LoginForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<LoginForm ref="loginRef"></LoginForm>
|
||||
<div class="login-wrapper" v-else>
|
||||
<div class="login-title">
|
||||
<span>1Panel 现代化的 Linux 面板</span>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<LoginForm ref="loginRef"></LoginForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: 50px" v-if="statusCode == -1">
|
||||
@ -34,13 +49,29 @@ import LoginForm from './components/login-form.vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const statusCode = ref<number>(0);
|
||||
const screenWidth = ref(null);
|
||||
|
||||
const getStatus = async () => {
|
||||
statusCode.value = 1;
|
||||
};
|
||||
|
||||
// watch(
|
||||
// () => screenWidth.value,
|
||||
// (newVal) => {
|
||||
// console.log()
|
||||
// },
|
||||
// );
|
||||
|
||||
onMounted(() => {
|
||||
getStatus();
|
||||
// 屏幕适配
|
||||
screenWidth.value = document.body.clientWidth;
|
||||
window.onresize = () => {
|
||||
//屏幕尺寸变化就重新赋值
|
||||
return (() => {
|
||||
screenWidth.value = document.body.clientWidth;
|
||||
})();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -50,40 +81,76 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-backgroud {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
// @include login-center;
|
||||
background-image: url(@/assets/images/1Panel-login.png);
|
||||
background-color: $menu-backgroup-color;
|
||||
background-position: 0% 40%;
|
||||
background-size: 70%;
|
||||
background-repeat: no-repeat;
|
||||
background: url(@/assets/images/1panel-login-bg.png) no-repeat,
|
||||
radial-gradient(153.25% 257.2% at 118.99% 181.67%, rgba(50, 132, 255, 0.2) 0%, rgba(82, 120, 255, 0) 100%)
|
||||
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
|
||||
radial-gradient(123.54% 204.83% at 25.87% 195.17%, rgba(111, 76, 253, 0.15) 0%, rgba(122, 76, 253, 0) 78.85%)
|
||||
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
|
||||
linear-gradient(0deg, rgba(0, 94, 235, 0.03), rgba(0, 94, 235, 0.03)),
|
||||
radial-gradient(109.58% 109.58% at 31.53% -36.58%, rgba(0, 94, 235, 0.3) 0%, rgba(0, 94, 235, 0) 100%)
|
||||
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
|
||||
rgba(0, 57, 142, 0.05);
|
||||
|
||||
.login-wrapper {
|
||||
padding-top: 10%;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
@media only screen and (max-width: 1280px) {
|
||||
width: 100%;
|
||||
}
|
||||
.left {
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
width: 60%;
|
||||
img {
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
vertical-align: middle;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-title {
|
||||
margin-top: 10%;
|
||||
text-align: center;
|
||||
margin-left: 15%;
|
||||
// margin-top: 10%;
|
||||
margin-right: 15%;
|
||||
span:first-child {
|
||||
color: $primary-color;
|
||||
font-size: 48px;
|
||||
font-size: 40px;
|
||||
font-family: pingFangSC-Regular;
|
||||
font-weight: 600;
|
||||
@media only screen and (max-width: 1440px) {
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
margin-bottom: 20px;
|
||||
font-size: 35px;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.login-container {
|
||||
// margin-left: 15%;
|
||||
margin-top: 40px;
|
||||
padding: 40px 0;
|
||||
width: 390px;
|
||||
// height: 422px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(255, 255, 255, 0.55);
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 4px 22px rgba(0, 94, 235, 0.2);
|
||||
@media only screen and (max-width: 1440px) {
|
||||
margin-top: 100px;
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
margin-top: 19%;
|
||||
margin-left: 15%;
|
||||
width: 394px;
|
||||
height: 422px;
|
||||
background-color: rgba(255, 255, 255, 0.55);
|
||||
border-radius: 4px;
|
||||
|
||||
box-shadow: 2px 4px 22px rgba(0, 94, 235, 0.2);
|
||||
@media only screen and (max-width: 1280px) {
|
||||
width: 900px;
|
||||
height: 380px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user