登录页修改
This commit is contained in:
parent
7d1edd7639
commit
812ca2cd31
|
|
@ -1,14 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login">
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<div class="login-header">
|
|
||||||
<h1 class="main-title">
|
|
||||||
<img src="../assets/logo/logo.png" alt="logo" class="logo"/>
|
|
||||||
<span>智能投标系统</span>
|
|
||||||
</h1>
|
|
||||||
<h2 class="sub-title">欢迎登录 welcome to login in</h2>
|
|
||||||
</div>
|
|
||||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||||
|
<div class="login-header">
|
||||||
|
<h1 class="main-title">
|
||||||
|
<img src="../assets/logo/logo.png" alt="logo" class="logo"/>
|
||||||
|
<span>智能投标系统</span>
|
||||||
|
</h1>
|
||||||
|
<h2 class="sub-title">欢迎登录 <span style="color: #666;font-size: 15px;">welcome to login in</span></h2>
|
||||||
|
</div>
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="loginForm.username"
|
v-model="loginForm.username"
|
||||||
|
|
@ -47,7 +47,6 @@
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div class="form-options">
|
<div class="form-options">
|
||||||
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
|
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
|
||||||
<a href="#" class="forgot-password">忘记密码?</a>
|
|
||||||
</div>
|
</div>
|
||||||
<el-form-item style="width:100%;">
|
<el-form-item style="width:100%;">
|
||||||
<el-button
|
<el-button
|
||||||
|
|
@ -169,7 +168,7 @@ export default {
|
||||||
<style rel="stylesheet/scss" lang="scss">
|
<style rel="stylesheet/scss" lang="scss">
|
||||||
.login {
|
.login {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -178,6 +177,7 @@ export default {
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
// background-size: contain;
|
// background-size: contain;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
padding-right: 15%;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
|
|
@ -199,20 +199,23 @@ export default {
|
||||||
|
|
||||||
.login-header {
|
.login-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
.main-title {
|
.main-title {
|
||||||
font-size: 32px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: #060F2E;
|
color: #1E6BFF;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
letter-spacing: 1px;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-title {
|
.sub-title {
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
color: #666;
|
color: #333333;
|
||||||
font-weight: 500;
|
font-weight: bold;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -370,7 +373,9 @@ export default {
|
||||||
// 响应式优化
|
// 响应式优化
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.login {
|
.login {
|
||||||
|
justify-content: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-container {
|
.login-container {
|
||||||
|
|
@ -387,7 +392,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-title {
|
.sub-title {
|
||||||
font-size: 16px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -403,7 +408,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-title {
|
.sub-title {
|
||||||
font-size: 15px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue