Skip to content

赵增煜 / tzt-admin

Go to a project
Commit 3518479e by xiaojiang
Options

修改登录页面样式

parent 102b2477
Showing with 94 additions and 38 deletions
resources/views/admin/loginstore.blade.php
...@@ -6,39 +6,52 @@ ...@@ -6,39 +6,52 @@
color: #4B5CC4; color: #4B5CC4;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
text-align: center !important; text-align: center !important;
background: url({{ config('admin.login_background') }}) center; background: url({{ config('admin.login_background')
}
}) center;
background-size: cover; background-size: cover;
align-items: flex-end!important; align-items: flex-end !important;
} }
.login-box { .login-box {
margin-top: -10rem; margin-top: -10rem;
padding: 5px; padding: 5px;
} }
.login-logo{
.login-logo {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 20px; left: 20px;
text-align: left; text-align: left;
} }
.login-img{
.login-img {
width: 30px; width: 30px;
} }
.login-card-body { .login-card-body {
padding: 1.5rem 1.8rem 1.6rem; padding: 1.5rem 1.8rem 1.6rem;
} }
.card, .card-body {
.card,
.card-body {
border-radius: .25rem border-radius: .25rem
} }
.login-btn { .login-btn {
padding-left: 2rem!important;; padding-left: 2rem !important;
padding-right: 1.5rem!important; ;
padding-right: 1.5rem !important;
} }
.content { .content {
overflow-x: hidden; overflow-x: hidden;
} }
.form-group .control-label { .form-group .control-label {
text-align: left; text-align: left;
} }
.footer-icp { .footer-icp {
position: absolute; position: absolute;
left: 50%; left: 50%;
...@@ -51,13 +64,42 @@ ...@@ -51,13 +64,42 @@
padding: 5px 0; padding: 5px 0;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.footer-icp a { .footer-icp a {
color: #666; color: #666;
text-decoration: none; text-decoration: none;
} }
.footer-icp a:hover { .footer-icp a:hover {
text-decoration: underline; text-decoration: underline;
} }
.login-type {
display: flex;
width: 200px;
margin: 0 auto 30px;
border-radius: 4px;
overflow: hidden;
}
.login-type .type {
flex: 1;
text-align: center;
line-height: 24px;
font-size: 14px;
background-color: #ddd;
color: #333;
cursor: pointer;
}
.login-type .type.active {
background-color: #6d8be6;
color: #fff;
}
.hide {
display: none !important;
}
</style> </style>
<div class="login-page"> <div class="login-page">
...@@ -73,21 +115,12 @@ ...@@ -73,21 +115,12 @@
<form id="login-form" method="POST" action="{{ admin_url('auth/login') }}"> <form id="login-form" method="POST" action="{{ admin_url('auth/login') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}"/> <input type="hidden" name="_token" value="{{ csrf_token() }}" />
<input type="hidden" name="role" value="store"/> <input type="hidden" name="role" value="store" />
<input type="hidden" id="login_type" name="type" value="code" />
<fieldset class="form-label-group form-group position-relative has-icon-left"> <fieldset class="form-label-group form-group position-relative has-icon-left">
<input <input type="tel" class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}" name="username" placeholder="手机号" value="{{ old('username') }}" required autofocus pattern="^[0-9]*$" title="请输入有效的手机号">
type="tel"
class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}"
name="username"
placeholder="手机号"
value="{{ old('username') }}"
required
autofocus
pattern="^[0-9]*$"
title="请输入有效的手机号"
>
<div class="form-control-position"> <div class="form-control-position">
<i class="feather icon-user"></i> <i class="feather icon-user"></i>
...@@ -105,16 +138,8 @@ ...@@ -105,16 +138,8 @@
@endif @endif
</fieldset> </fieldset>
<fieldset class="form-label-group form-group position-relative has-icon-left d-flex align-items-center"> <fieldset class="form-label-group form-group position-relative has-icon-left d-flex align-items-center" id="code_row">
<input <input id="verification_code" type="text" class="form-control {{ $errors->has('verification_code') ? 'is-invalid' : '' }}" name="verification_code" placeholder="短信验证码" required style="width: 60%; margin-right: 10px;">
id="verification_code"
type="text"
class="form-control {{ $errors->has('verification_code') ? 'is-invalid' : '' }}"
name="verification_code"
placeholder="短信验证码"
required
style="width: 60%; margin-right: 10px;"
>
<div class="form-control-position"> <div class="form-control-position">
<i class="feather icon-lock"></i> <i class="feather icon-lock"></i>
</div> </div>
...@@ -134,6 +159,18 @@ ...@@ -134,6 +159,18 @@
</span> </span>
@endif @endif
</fieldset> </fieldset>
<fieldset class="form-label-group form-group position-relative has-icon-left hide" id="password_row">
<input minlength="5" maxlength="20" id="password" type="password" class="form-control " name="password" placeholder="密码" required autocomplete="current-password">
<div class="form-control-position">
<i class="feather icon-lock"></i>
</div>
<label for="password">密码</label>
<div class="help-block with-errors"></div>
</fieldset>
<div class="form-group d-flex justify-content-between align-items-center"> <div class="form-group d-flex justify-content-between align-items-center">
<div class="text-left"> <div class="text-left">
@if(config('admin.auth.remember')) @if(config('admin.auth.remember'))
...@@ -168,17 +205,34 @@ ...@@ -168,17 +205,34 @@
</div> </div>
<script> <script>
Dcat.ready(function () { Dcat.ready(function() {
// ajax表单提交 // ajax表单提交
$('#login-form').form({ $('#login-form').form({
validate: true, validate: true,
}); });
});
let countdown = 60; // 倒计时60秒 });
let timer;
$('#type_passord').click(function() {
$('login_type').val('password');
$('#type_passord').addClass('active');
$('#type_code').removeClass('active');
$('#password_row').removeClass('hide');
$('#code_row').addClass('hide');
})
$('#type_code').click(function() {
$('login_type').val('code');
$('#type_code').addClass('active');
$('#type_password').removeClass('active');
$('#code_row').removeClass('hide');
$('#password_row').addClass('hide');
})
function getVerificationCode() { let countdown = 60; // 倒计时60秒
let timer;
function getVerificationCode() {
const username = $('input[name="username"]').val(); const username = $('input[name="username"]').val();
if (!username) { if (!username) {
alert('请输入手机号'); alert('请输入手机号');
...@@ -205,9 +259,10 @@ function getVerificationCode() { ...@@ -205,9 +259,10 @@ function getVerificationCode() {
alert('请求失败，请重试'); alert('请求失败，请重试');
} }
}); });
}
function startCountdown() { }
function startCountdown() {
$('#get-verification-code').prop('disabled', true).text(`重新获取(${countdown}s)`); $('#get-verification-code').prop('disabled', true).text(`重新获取(${countdown}s)`);
timer = setInterval(function() { timer = setInterval(function() {
countdown--; countdown--;
...@@ -218,5 +273,5 @@ function startCountdown() { ...@@ -218,5 +273,5 @@ function startCountdown() {
countdown = 60; // 重置倒计时 countdown = 60; // 重置倒计时
} }
}, 1000); }, 1000);
} }
</script> </script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment