Skip to content

赵增煜 / tzt-admin

Go to a project
Commit 3518479e by xiaojiang
Options

修改登录页面样式

parent 102b2477
Showing with 153 additions and 97 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')
background-size: cover;
align-items: flex-end!important;
} }
}) center;
background-size: cover;
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,18 +64,47 @@ ...@@ -51,18 +64,47 @@
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">
<div class="login-box"> <div class="login-box">
<div class="login-logo mb-2" style="font-size:1.8rem;font-weight: normal;"> <div class="login-logo mb-2" style="font-size:1.8rem;font-weight: normal;">
<img class="avatar img-circle login-img" src="{{ admin_asset('@admin/images/logo.jpg') }}"> <img class="avatar img-circle login-img" src="{{ admin_asset('@admin/images/logo.jpg') }}">
{{ config('admin.name') }}-药店端 {{ config('admin.name') }}-药店端
<p style="font-size:0.5rem"></p> <p style="font-size:0.5rem"></p>
...@@ -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>
...@@ -97,24 +130,16 @@ ...@@ -97,24 +130,16 @@
<div class="help-block with-errors"></div> <div class="help-block with-errors"></div>
@if($errors->has('username')) @if($errors->has('username'))
<span class="invalid-feedback text-danger" role="alert"> <span class="invalid-feedback text-danger" role="alert">
@foreach($errors->get('username') as $message) @foreach($errors->get('username') as $message)
<span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br> <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
@endforeach @endforeach
</span> </span>
@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>
...@@ -127,24 +152,36 @@ ...@@ -127,24 +152,36 @@
<label for="verification_code">验证码</label> <label for="verification_code">验证码</label>
<div class="help-block with-errors"></div> <div class="help-block with-errors"></div>
@if($errors->has('verification_code')) @if($errors->has('verification_code'))
<span class="invalid-feedback text-danger" role="alert"> <span class="invalid-feedback text-danger" role="alert">
@foreach($errors->get('verification_code') as $message) @foreach($errors->get('verification_code') as $message)
<span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br> <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
@endforeach @endforeach
</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'))
<fieldset class="checkbox"> <fieldset class="checkbox">
<div class="vs-checkbox-con vs-checkbox-primary"> <div class="vs-checkbox-con vs-checkbox-primary">
<input id="remember" name="remember" value="1" type="checkbox" {{ old('remember') ? 'checked' : '' }}> <input id="remember" name="remember" value="1" type="checkbox" {{ old('remember') ? 'checked' : '' }}>
<span class="vs-checkbox"> <span class="vs-checkbox">
<span class="vs-checkbox--check"> <span class="vs-checkbox--check">
<i class="vs-icon feather icon-check"></i> <i class="vs-icon feather icon-check"></i>
</span> </span>
</span> </span>
<span> {{ trans('admin.remember_me') }}</span> <span> {{ trans('admin.remember_me') }}</span>
</div> </div>
</fieldset> </fieldset>
...@@ -168,55 +205,73 @@ ...@@ -168,55 +205,73 @@
</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;
function getVerificationCode() {
const username = $('input[name="username"]').val();
if (!username) {
alert('请输入手机号');
return;
}
// 发送 AJAX 请求获取验证码
$.ajax({
url: "{{ admin_url('auth/smscode') }}", // 替换为您的接口地址
method: 'GET',
data: {
username: username,
_token: '{{ csrf_token() }}'
},
success: function(response) {
if (response.success) {
alert('验证码已发送');
startCountdown();
} else {
alert(response.error || '获取验证码失败');
}
},
error: function() {
alert('请求失败，请重试');
}
}); });
}
$('#type_passord').click(function() {
function startCountdown() { $('login_type').val('password');
$('#get-verification-code').prop('disabled', true).text(`重新获取(${countdown}s)`); $('#type_passord').addClass('active');
timer = setInterval(function() { $('#type_code').removeClass('active');
countdown--; $('#password_row').removeClass('hide');
$('#get-verification-code').text(`重新获取(${countdown}s)`); $('#code_row').addClass('hide');
if (countdown <= 0) { })
clearInterval(timer);
$('#get-verification-code').prop('disabled', false).text('获取验证码'); $('#type_code').click(function() {
countdown = 60; // 重置倒计时 $('login_type').val('code');
$('#type_code').addClass('active');
$('#type_password').removeClass('active');
$('#code_row').removeClass('hide');
$('#password_row').addClass('hide');
})
let countdown = 60; // 倒计时60秒
let timer;
function getVerificationCode() {
const username = $('input[name="username"]').val();
if (!username) {
alert('请输入手机号');
return;
} }
}, 1000);
} // 发送 AJAX 请求获取验证码
</script> $.ajax({
url: "{{ admin_url('auth/smscode') }}", // 替换为您的接口地址
method: 'GET',
data: {
username: username,
_token: '{{ csrf_token() }}'
},
success: function(response) {
if (response.success) {
alert('验证码已发送');
startCountdown();
} else {
alert(response.error || '获取验证码失败');
}
},
error: function() {
alert('请求失败，请重试');
}
});
}
function startCountdown() {
$('#get-verification-code').prop('disabled', true).text(`重新获取(${countdown}s)`);
timer = setInterval(function() {
countdown--;
$('#get-verification-code').text(`重新获取(${countdown}s)`);
if (countdown <= 0) {
clearInterval(timer);
$('#get-verification-code').prop('disabled', false).text('获取验证码');
countdown = 60; // 重置倒计时
}
}, 1000);
}
</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