github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 登录页样式修改

pull/121/head
wangdan 2023-02-09 10:36:18 +08:00 committed by wangdan-fit2cloud
parent a00bfe775b
commit 1dc6267409
7 changed files with 213 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/images/1panel-login-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
frontend/src/assets/images/menu-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

2
frontend/src/components/app-layout/menu/index.vue
View File

@ -102,7 +102,7 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; 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; transition: all 0.3s ease;
.el-scrollbar { .el-scrollbar {

4
frontend/src/styles/common.scss
View File

@ -105,6 +105,10 @@
} }
} }
.inline-block {
display: inline-block;
}
.form-button { .form-button {
float: right; float: right;
} }

7
frontend/src/views/app-store/apps/index.vue
View File

@ -220,10 +220,9 @@ onMounted(() => {
margin-top: 5px; margin-top: 5px;
} }
} }
} &:hover {
background-color: rgba(0, 94, 235, 0.03);
.app-card:hover { }
background-color: rgba(0, 94, 235, 0.03);
} }
.tag-button { .tag-button {

218
frontend/src/views/login/components/login-form.vue
View File

@ -7,7 +7,7 @@
<div class="login-form"> <div class="login-form">
<input type="text" class="hide" id="name" /> <input type="text" class="hide" id="name" />
<input type="password" class="hide" id="password" /> <input type="password" class="hide" id="password" />
<el-form-item prop="name"> <el-form-item prop="name" class="no-border">
<el-input <el-input
v-model="registerForm.name" v-model="registerForm.name"
:placeholder="$t('commons.login.username')" :placeholder="$t('commons.login.username')"
@ -21,7 +21,7 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password" class="no-border">
<el-input <el-input
type="password" type="password"
clearable clearable
@ -38,7 +38,7 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="rePassword"> <el-form-item prop="rePassword" class="no-border">
<el-input <el-input
type="password" type="password"
clearable clearable
@ -72,97 +72,91 @@
</div> </div>
<div v-else> <div v-else>
<div v-if="mfaShow"> <div v-if="mfaShow">
<div class="login-container"> <div class="login-form">
<el-form> <el-form>
<div class="login-title">{{ $t('commons.login.mfaTitle') }}</div> <div class="login-title">{{ $t('commons.login.mfaTitle') }}</div>
<div class="login-form"> <el-form-item class="no-border">
<el-form-item> <el-input
<el-input size="default"
size="default" :placeholder="$t('commons.login.captchaHelper')"
:placeholder="$t('commons.login.captchaHelper')" v-model="mfaLoginForm.code"
v-model="mfaLoginForm.code" >
> <template #prefix>
<template #prefix> <el-icon class="el-input__icon">
<el-icon class="el-input__icon"> <Finished />
<Finished /> </el-icon>
</el-icon> </template>
</template> </el-input>
</el-input> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-button class="login-button" type="primary" size="default" round @click="mfaLogin()">
<el-button class="login-button" type="primary" size="default" round @click="mfaLogin()"> {{ $t('commons.button.verify') }}
{{ $t('commons.button.verify') }} </el-button>
</el-button> </el-form-item>
</el-form-item>
</div>
</el-form> </el-form>
</div> </div>
</div> </div>
<div v-if="!mfaShow"> <div v-if="!mfaShow">
<div class="login-container"> <div class="login-form">
<el-form ref="loginFormRef" :model="loginForm" size="default" :rules="loginRules"> <el-form ref="loginFormRef" :model="loginForm" size="default" :rules="loginRules">
<div class="login-title">{{ $t('commons.button.login') }}</div> <div class="login-title">{{ $t('commons.button.login') }}</div>
<div class="login-form">
<el-form-item prop="name"> <el-form-item prop="name" class="no-border">
<el-input <el-input
v-model="loginForm.name" v-model="loginForm.name"
:placeholder="$t('commons.login.username')" :placeholder="$t('commons.login.username')"
class="form-input" class="form-input"
> >
<template #prefix> <template #prefix>
<el-icon class="el-input__icon"> <el-icon class="el-input__icon">
<user /> <user />
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password" class="no-border">
<el-input <el-input
type="password" type="password"
clearable clearable
v-model="loginForm.password" v-model="loginForm.password"
show-password show-password
:placeholder="$t('commons.login.password')" :placeholder="$t('commons.login.password')"
> >
<template #prefix> <template #prefix>
<el-icon class="el-input__icon"> <el-icon class="el-input__icon">
<lock /> <lock />
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
<span v-if="errAuthInfo" class="input-error" style="line-height: 14px"> <span v-if="errAuthInfo" class="input-error" style="line-height: 14px">
{{ $t('commons.login.errorAuthInfo') }} {{ $t('commons.login.errorAuthInfo') }}
</span> </span>
</el-form-item> </el-form-item>
<el-form-item prop="captcha" class="login-captcha"> <el-form-item prop="captcha" class="login-captcha">
<el-input <el-input v-model="loginForm.captcha" :placeholder="$t('commons.login.captchaHelper')" />
v-model="loginForm.captcha" <img
:placeholder="$t('commons.login.captchaHelper')" v-if="captcha.imagePath"
/> :src="captcha.imagePath"
<img :alt="$t('commons.login.captchaHelper')"
v-if="captcha.imagePath" @click="loginVerify()"
:src="captcha.imagePath" />
:alt="$t('commons.login.captchaHelper')" <span v-if="errCaptcha" class="input-error" style="line-height: 14px">
@click="loginVerify()" {{ $t('commons.login.errorCaptcha') }}
/> </span>
<span v-if="errCaptcha" class="input-error" style="line-height: 14px"> </el-form-item>
{{ $t('commons.login.errorCaptcha') }} <el-form-item>
</span> <el-button
</el-form-item> @click="login(loginFormRef)"
<el-form-item> @focus="loginButtonFocused = true"
<el-button @blur="loginButtonFocused = false"
@click="login(loginFormRef)" class="login-button"
@focus="loginButtonFocused = true" type="primary"
@blur="loginButtonFocused = false" size="default"
class="login-button" round
type="primary" >
size="default" {{ $t('commons.button.login') }}
round </el-button>
> </el-form-item>
{{ $t('commons.button.login') }}
</el-button>
</el-form-item>
</div>
</el-form> </el-form>
</div> </div>
</div> </div>
@ -342,7 +336,8 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.login-container { .login-form {
padding: 0 40px;
.hide { .hide {
width: 0; width: 0;
border: 0; border: 0;
@ -350,39 +345,41 @@ onMounted(() => {
} }
.login-title { .login-title {
margin-top: 50px; // margin-top: 50px;
font-size: 32px; font-size: 30px;
letter-spacing: 0; letter-spacing: 0;
text-align: center; text-align: center;
color: #646a73; 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) { // --el-input-focus-border: $menu-backgroup-color;
margin-top: 20px; // --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 { .el-input {
margin-top: 30px; height: 44px;
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;
}
} }
.login-captcha { .login-captcha {
margin-top: 10px;
.el-input { .el-input {
width: 50%; width: 50%;
height: 44px; height: 44px;
@ -426,6 +423,7 @@ onMounted(() => {
.login-button { .login-button {
width: 100%; width: 100%;
height: 45px; height: 45px;
margin-top: 10px;
} }
} }
</style> </style>

127
frontend/src/views/login/index.vue
View File

@ -1,11 +1,26 @@
<template> <template>
<div> <div>
<div class="login-backgroud" v-if="statusCode == 1"> <div class="login-backgroud" v-if="statusCode == 1">
<div class="login-title"> <div class="login-wrapper" v-if="screenWidth > 1000">
<span>1Panel 现代化的 Linux 面板</span> <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>
<div class="login-container"> <div class="login-wrapper" v-else>
<LoginForm ref="loginRef"></LoginForm> <div class="login-title">
<span>1Panel 现代化的 Linux 面板</span>
</div>
<div class="login-container">
<LoginForm ref="loginRef"></LoginForm>
</div>
</div> </div>
</div> </div>
<div style="margin-left: 50px" v-if="statusCode == -1"> <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'; import { ref, onMounted } from 'vue';
const statusCode = ref<number>(0); const statusCode = ref<number>(0);
const screenWidth = ref(null);
const getStatus = async () => { const getStatus = async () => {
statusCode.value = 1; statusCode.value = 1;
}; };
// watch(
// () => screenWidth.value,
// (newVal) => {
// console.log()
// },
// );
onMounted(() => { onMounted(() => {
getStatus(); getStatus();
// 屏幕适配
screenWidth.value = document.body.clientWidth;
window.onresize = () => {
//屏幕尺寸变化就重新赋值
return (() => {
screenWidth.value = document.body.clientWidth;
})();
};
}); });
</script> </script>
@ -50,40 +81,76 @@ onMounted(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.login-backgroud { .login-backgroud {
height: 100vh; height: 100vh;
display: flex; background: url(@/assets/images/1panel-login-bg.png) no-repeat,
// @include login-center; radial-gradient(153.25% 257.2% at 118.99% 181.67%, rgba(50, 132, 255, 0.2) 0%, rgba(82, 120, 255, 0) 100%)
background-image: url(@/assets/images/1Panel-login.png); /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
background-color: $menu-backgroup-color; 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%)
background-position: 0% 40%; /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
background-size: 70%; linear-gradient(0deg, rgba(0, 94, 235, 0.03), rgba(0, 94, 235, 0.03)),
background-repeat: no-repeat; 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 { .login-title {
margin-top: 10%; // margin-top: 10%;
text-align: center; margin-right: 15%;
margin-left: 15%;
span:first-child { span:first-child {
color: $primary-color; color: $primary-color;
font-size: 48px; font-size: 40px;
font-family: pingFangSC-Regular; 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> </style>