lisone/EasyAdmin8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

自定义登录页背景图

Browse Source
This commit is contained in:
wolfcode
2023-10-27 22:39:10 +08:00
parent cc7711c6ce
commit 89876bfd9e
4 changed files with 66 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
app/admin/view/login/index.html
View File

@@ -1,45 +1,50 @@
<link rel="stylesheet" href="__STATIC__/admin/css/login.css?v={$version}" media="all">
<div class="main-body">
<div class="login-main">
<div class="login-top">
<span>{:sysconfig('site','site_name')}</span>
<span class="bg1"></span>
<span class="bg2"></span>
<div class="container">
<div class="main-body">
<div class="login-main">
<div class="login-top">
<span>{:sysconfig('site','site_name')}</span>
<span class="bg1"></span>
<span class="bg2"></span>
</div>
<form class="layui-form login-bottom">
<div class="demo{if !$demo} layui-hide{/if}">用户名:admin 密码:123456</div>
<div class="center">
<div class="item">
<span class="icon icon-2"></span>
<input type="text" name="username" lay-verify="required" placeholder="请输入登录账号" maxlength="24"/>
</div>
<div class="item">
<span class="icon icon-3"></span>
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" maxlength="20">
<span class="bind-password icon icon-4"></span>
</div>
{if $captcha == 1}
<div id="validatePanel" class="item" style="width: 137px;">
<input type="text" name="captcha" placeholder="请输入验证码" maxlength="4">
<img id="refreshCaptcha" class="validateImg" src="{:url('login/captcha')}" onclick="this.src='{:url(\'login/captcha\')}?seed='+Math.random()">
</div>
{/if}
</div>
<div class="tip">
<span class="icon-nocheck"></span>
<span class="login-tip">保持登录</span>
<a href="javascript:" class="forget-password">忘记密码？</a>
</div>
<div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
<button class="login-btn" lay-submit>立即登录</button>
</div>
</form>
</div>
<form class="layui-form login-bottom">
<div class="demo{if !$demo} layui-hide{/if}">用户名:admin 密码:123456</div>
<div class="center">
<div class="item">
<span class="icon icon-2"></span>
<input type="text" name="username" lay-verify="required" placeholder="请输入登录账号" maxlength="24"/>
</div>
<div class="item">
<span class="icon icon-3"></span>
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" maxlength="20">
<span class="bind-password icon icon-4"></span>
</div>
{if $captcha == 1}
<div id="validatePanel" class="item" style="width: 137px;">
<input type="text" name="captcha" placeholder="请输入验证码" maxlength="4">
<img id="refreshCaptcha" class="validateImg" src="{:url('login/captcha')}" onclick="this.src='{:url(\'login/captcha\')}?seed='+Math.random()">
</div>
{/if}
</div>
<div class="tip">
<span class="icon-nocheck"></span>
<span class="login-tip">保持登录</span>
<a href="javascript:" class="forget-password">忘记密码？</a>
</div>
<div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
<button class="login-btn" lay-submit>立即登录</button>
</div>
</form>
</div>
<div class="footer">
{:sysconfig('site','site_copyright')}<span class="padding-5">|</span><a target="_blank" href="http://www.miitbeian.gov.cn">{:sysconfig('site','site_beian')}</a>
</div>
</div>
<div class="footer">
{:sysconfig('site','site_copyright')}<span class="padding-5">|</span><a target="_blank" href="http://www.miitbeian.gov.cn">{:sysconfig('site','site_beian')}</a>
</div>
<script>
let backgroundUrl = "{:sysconfig('site','admin_background')}"
</script>

11
app/admin/view/system/config/site.html
View File

@@ -19,6 +19,17 @@
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">后台背景图</label>
<div class="layui-input-block layuimini-upload">
<input name="admin_background" class="layui-input layui-col-xs6" placeholder="不填默认#333333" value="{:sysconfig('site','admin_background')}">
<div class="layuimini-upload-btn">
<span><a class="layui-btn" data-upload="site_ico" data-upload-number="one" data-upload-exts="png|jpg|jpeg"><i class="fa fa-upload"></i> 上传</a></span>
<span><a class="layui-btn layui-btn-normal" id="select_admin_background" data-upload-select="admin_background" data-upload-number="one"><i class="fa fa-list"></i> 选择</a></span>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">版本信息</label>
<div class="layui-input-block">

9
public/static/admin/css/login.css
View File

@@ -2,7 +2,7 @@
.demo {
padding-top: 20px;
text-align: center;
color: #9abcda!important;
color: #9abcda !important;
font-size: 14px;
}
@@ -169,11 +169,11 @@
margin: 0 auto;
}
body {
background: url(../images/loginbg.png) 0% 0% / cover no-repeat;
.container {
background: #333333;
position: static;
font-size: 12px;
height: 100%;
}
input::-webkit-input-placeholder {
@@ -272,7 +272,6 @@ html {
}
@media screen and (max-width: 428px) {
.login-main {
width: 360px !important;

6
public/static/admin/js/login.js
View File

@@ -7,6 +7,10 @@ define(["easy-admin"], function (ea) {
top.location = self.location;
}
if (backgroundUrl) {
$('.container').css('background', 'url(' + backgroundUrl + ') 0% 0% / cover no-repeat')
}
$('.bind-password').on('click', function () {
if ($(this).hasClass('icon-5')) {
$(this).removeClass('icon-5');
@@ -24,7 +28,7 @@ define(["easy-admin"], function (ea) {
$(this).addClass('icon-check');
}
});
$('.login-tip').on('click', function () {
$('.icon-nocheck').click();
});