背景
fastadmin 用习惯了,但是登录界面真的不好看,今天就修改一下。先看界面:
解决方案
1.安装插件:后台登录背景。
2.上传固定图片修改登录页面为如下:
<!DOCTYPE html>
<html>
<head>{include file="common/meta" /}<style type="text/css">body {color: #999;background-color: #f1f4fd;background-size: cover;}a {color: #444;}.login-screen {max-width: 430px;padding: 0;margin: 250px auto 0 auto;}.login-screen .well {border-radius: 7px;-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);background: rgba(255, 255, 255, 1);border: none;/*overflow: hidden;*/padding: 0;}@media (max-width: 767px) {.login-screen {padding: 0 20px;}}.profile-img-card {width: 50px;height: 50px;display: block;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;margin: 0px auto 20px;border: 5px solid #fff;}.profile-name-card {margin: 10px auto 20px;text-align: left;font-size: 20px;font-weight: bold;color:#0d0d0d;}.login-head {background: #899fe1;border-radius: 7px 7px 0 0;}.login-form {padding: 40px 30px;position: relative;z-index: 99;}#login-form {margin-top: 20px;}#login-form .input-group {margin-bottom: 15px;}#login-form .form-control {font-size: 13px;}</style><!--@formatter:off-->{if $background}<style type="text/css">body{background-image: url('{$background}');}</style>{/if}<!--@formatter:on-->
</head>
<body>
<div class="container"><div class="login-wrapper"><div class="col-xs-12 col-sm-8"></div><div class="login-screen col-xs-12 col-sm-4"><div class="well"><!--<div class="login-head"><img src="__CDN__/assets/img/login-head.png" style="width:100%;"/></div>--><div class="login-form"><div class="col-xs-12 col-sm-12" style="padding-left: 0px;margin-bottom: 20px;"><div class="col-xs-12 col-sm-3" style="padding-left: 0px"><img id="profile-img" class="profile-img-card" src="__CDN__/assets/img/avatar.png"/></div><div class="col-xs-12 col-sm-9 pl-0" ><p id="profile-name" class="profile-name-card">{:$Think.config.site.name}</p></div></div><form action="" method="post" id="login-form"><!--@AdminLoginFormBegin--><div id="errtips" class="hide"></div>{:token()}<div class="input-group"><div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div><input type="text" class="form-control" id="pd-form-username" placeholder="{:__('Username')}" name="username" autocomplete="off" value="" data-rule="{:__('Username')}:required;username"/></div><div class="input-group"><div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div><input type="password" class="form-control" id="pd-form-password" placeholder="{:__('Password')}" name="password" autocomplete="off" value="" data-rule="{:__('Password')}:required;password"/></div><!--@CaptchaBegin-->{if $Think.config.fastadmin.login_captcha}<div class="input-group"><div class="input-group-addon"><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></div><input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}" data-rule="{:__('Captcha')}:required;length({$Think.config.captcha.length})" autocomplete="off"/><span class="input-group-addon" style="padding:0;border:none;cursor:pointer;"><img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="100" height="30" onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();"/></span></div>{/if}<!--@CaptchaEnd-->{if $keeyloginhours>0}<div class="form-group checkbox"><label class="inline" for="keeplogin" data-toggle="tooltip" title="{:__('The duration of the session is %s hours', $keeyloginhours)}"><input type="checkbox" name="keeplogin" id="keeplogin" value="1"/>{:__('Keep login')}</label></div>{/if}<div class="form-group"><button type="submit" class="btn btn-success btn-lg btn-block" style="background:#708eea;">{:__('Sign in')}</button></div><!--@AdminLoginFormEnd--></form></div></div></div></div></div>
<div class="col-xs-12 col-sm-12 text-center" style="margin-top: 100px"><p>Copyright © 2024 {:$Think.config.site.name} All Rights Reserved</p>
</div>
{include file="common/script" /}
</body>
</html>