wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化后台登录

This commit is contained in:
pushuo 2022-07-04 10:36:56 +08:00
parent fc40c586ab
commit f64255d4bc
7 changed files with 155 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/build/beike/admin/css/app.css vendored
View File

@ -447,3 +447,47 @@ table.table.table-striped > tbody > tr:nth-of-type(2n) {
.el-tabs__item {
padding: 0 10px;
}
body.page-login {
background-image: url("/image/login-bg.svg");
background-size: cover;
background-position: 50%;
}
body.page-login .form-text.text-danger {
font-size: 0.8rem;
}
body.page-login.seller-register .form-group, body.page-login.password-reset .form-group {
margin-bottom: 1.5rem;
}
body.page-login.seller-register .form-group label, body.page-login.password-reset .form-group label {
display: none;
}
body.page-login .card {
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
border: none;
border-radius: 0.85rem;
overflow: hidden;
align-items: center;
flex-wrap: wrap;
}
@media (min-width: 768px) {
body.page-login .card .w-480 {
width: 420px;
margin: 2rem 0;
}
}
body.page-login button[type=submit] {
font-size: 1rem;
background-image: linear-gradient(310deg, #fd560f, #fdb504);
border: none;
}
body.page-login .btn:not(.btn-link) {
padding: 0.7rem 1rem;
border-radius: 0.5rem;
transition: all 0.15s ease-in;
box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.11), 0 2px 4px -1px rgba(0, 0, 0, 0.07);
}
body.page-login .btn:not(.btn-link):hover {
transform: scale(1.02);
color: #fff;
}

16
public/build/beike/admin/css/bootstrap.css vendored
View File

@ -9409,7 +9409,7 @@ textarea.form-control-lg {
}
.form-floating > .form-control,
.form-floating > .form-select {
height: calc(3.5rem + 2px);
height: 50px;
line-height: 1.25;
}
.form-floating > label {
@ -9417,7 +9417,7 @@ textarea.form-control-lg {
top: 0;
left: 0;
height: 100%;
padding: 1rem 0.75rem;
padding: 0.8rem 0.75rem;
pointer-events: none;
border: 1px solid transparent;
transform-origin: 0 0;
@ -9429,7 +9429,7 @@ textarea.form-control-lg {
}
}
.form-floating > .form-control {
padding: 1rem 0.75rem;
padding: 0.8rem 0.75rem;
}
.form-floating > .form-control::-moz-placeholder {
color: transparent;
@ -9441,23 +9441,23 @@ textarea.form-control-lg {
color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) {
padding-top: 1.625rem;
padding-top: 1.325rem;
padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-ms-input-placeholder) {
padding-top: 1.625rem;
padding-top: 1.325rem;
padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
padding-top: 1.625rem;
padding-top: 1.325rem;
padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill {
padding-top: 1.625rem;
padding-top: 1.325rem;
padding-bottom: 0.625rem;
}
.form-floating > .form-select {
padding-top: 1.625rem;
padding-top: 1.325rem;
padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {

1
public/image/login-bg.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 800 800'><g fill-opacity='0.22'><circle fill='#ffffff' cx='400' cy='400' r='600'/><circle fill='#edf1ff' cx='400' cy='400' r='500'/><circle fill='#c8d4ff' cx='400' cy='400' r='300'/><circle fill='#b4c5ff' cx='400' cy='400' r='200'/><circle fill='#9ab0ff' cx='400' cy='400' r='100'/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 372 B

1
resources/beike/admin/css/app.scss vendored
View File

@ -20,3 +20,4 @@ $main_color: #fd560f;
@import 'subscription';
@import 'form';
@import 'element-ui';
@import 'login';

4
resources/beike/admin/css/bootstrap/bootstrap.scss vendored
View File

@ -14,6 +14,10 @@ $form-check-input-width: 1.2em;
$form-switch-width: 2.6em;
$link-decoration: none;
$link-color: #1890ff;
$form-floating-input-padding-t: 1.325rem;
$form-floating-input-padding-b: .625rem;
$form-floating-padding-y: .8rem;
$form-floating-height: 50px;
@import './bootstrap-icons';
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap';

136
resources/beike/admin/css/login.scss vendored
View File

@ -8,14 +8,12 @@
// @modified 2021-08-24 15:07:05
//
$main_color: #fd560f;
body.page-login {
.form-text.text-danger {
font-size: 0.8rem;
}
.form-text.text-danger {
font-size: 0.8rem;
}
body {
background-image: url("/images/login-bg.svg");
background-image: url("/image/login-bg.svg");
background-size: cover;
background-position: 50%;
@ -28,93 +26,59 @@ body {
}
}
}
}
.card {
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
border: none;
border-radius: .85rem;
overflow: hidden;
align-items: center;
flex-wrap: wrap;
.card {
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
border: none;
border-radius: .85rem;
overflow: hidden;
}
.w-480 {
@media (min-width: 768px) {
width: 420px;
margin: 2rem 0;
}
}
.card-header {
border-bottom: none;
background: #fff;
font-size: 17px;
padding-top: 40px;
.card-body {
// padding: 1rem 1.7rem;
}
h5 {
color: #344767;
font-weight: 400;
margin-bottom: 0;
.card-header {
// max-width: 450px;
// padding-left: 1.7rem;
// padding-right: 1.7rem;
}
}
}
button[type="submit"] {
font-size: 1rem;
background-image: linear-gradient(310deg, $main_color, #fdb504);
// background-image: linear-gradient(310deg, $main_color, #fdb504);
border: none;
}
button[type="submit"] {
background-image: linear-gradient(310deg, $main_color, #fdb504);
// background-image: linear-gradient(310deg, $main_color, #fdb504);
border: none;
}
.form-group {
margin-bottom: 2rem;
input.form-control {
border: 1px solid #d2d6da;
.btn:not(.btn-link) {
// padding: .50rem 1.5rem;
padding: 0.7rem 1rem;
border-radius: .5rem;
font-size: .875rem;
font-weight: 400;
color: #495057;
line-height: 1.4rem;
padding: .5rem .75rem;
height: 40px;
transition: all .15s ease-in;
box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07);
&:hover {
transform: scale(1.02);
color: #fff;
}
}
}
.partition {
font-size: 12px;
&:after, &:before {
content: "";
display: inline-block;
width: 30%;
height: 1px;
position: relative;
vertical-align: middle;
}
&:after {
left: .5em;
margin-right: -50%;
background: linear-gradient(90deg,rgba(117, 117, 117, .40),rgb(117, 117, 117, .40), transparent);
}
&:before {
background: linear-gradient(90deg,transparent,rgba(117, 117, 117, .40),rgb(117, 117, 117, .40));
right: .5em;
margin-left: -50%;
}
}
.btn:not(.btn-link) {
padding: .50rem 1.5rem;
border-radius: .5rem;
transition: all .15s ease-in;
box-shadow: 0 4px 7px -1px rgba(0, 0, 0, .11), 0 2px 4px -1px rgba(0, 0, 0, .07);
&:hover {
transform: scale(1.02);
color: #fff;
}
}
.bg-gradient-dark {
background-image: linear-gradient(310deg,#141727,#3a416f);
background-color: #344767;
border: none;
color: #fff;
// .bg-gradient-dark {
// background-image: linear-gradient(310deg,#141727,#3a416f);
// background-color: #344767;
// border: none;
// color: #fff;
// }
}

81
resources/beike/admin/views/pages/login/login.blade.php
View File

@ -2,44 +2,57 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link href="{{ mix('/build/beike/admin/css/bootstrap.css') }}" rel="stylesheet">
{{-- <link href="{{ mix('build/css/admin/login.css') }}" rel="stylesheet"> --}}
<link href="{{ mix('build/beike/admin/css/app.css') }}" rel="stylesheet">
<title>admin login</title>
</head>
<body>
<form action="{{ admin_route('login.store') }}" method="post">
@csrf
<body class="page-login">
<div class="d-flex align-items-center vh-100 pt-2 pt-sm-5 pb-4 pb-sm-5">
<div class="container">
<div class="justify-content-center row">
<div class="col-xl-5 col-lg-5 col-md-6 mx-auto">
<div class="card">
<div class="w-480">
<div class="card-header mt-3 mb-4">
<h4 class="fw-bold">登录到 beikeshop 后台</h4>
<div class="text-muted fw-normal">登录到 beikeshop 后台</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="email">邮箱</span>
<div class="card-body">
<form action="{{ admin_route('login.store') }}" method="post">
@csrf
<div class="form-floating mb-4">
<input type="text" name="email" class="form-control" id="email-input" value="{{ old('email') }}" placeholder="邮箱地址">
<label for="email-input">邮箱地址</label>
@error('email')
<x-admin::form.error :message="$message" />
@enderror
</div>
<div class="form-floating mb-5">
<input type="password" name="password" class="form-control" id="password-input" placeholder="密码">
<label for="password-input">密码</label>
@error('password')
<x-admin::form.error :message="$message" />
@enderror
</div>
@if (session('error'))
<div class="alert alert-success">
{{ session('error') }}
</div>
@endif
<div class="d-grid mb-4"><button type="submit" class="btn btn-lg btn-primary">登录</button></div>
</form>
</div>
</div>
</div>
<input type="text" name="email" class="form-control" value="{{ old('email') }}" placeholder="邮箱地址">
</div>
@error('email')
<x-admin::form.error :message="$message" />
@enderror
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="password">密码</span>
</div>
<input type="password" name="password" class="form-control" placeholder="密码">
</div>
@error('password')
<x-admin::form.error :message="$message" />
@enderror
</div>
@if (session('error'))
<div class="alert alert-success">
{{ session('error') }}
</div>
@endif
<button type="submit" class="btn btn-primary btn-block mb-4">登录</button>
</form>
</div>
</body>
</html>