mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2026-06-06 20:18:10 +08:00
将登录容器调整为可滚动的居中弹性布局,补充桌面与移动端内边距,避免表单在小屏或内容较多时被裁切。 移除登录表单顶部的站点元信息展示,改为居中标题,并整理输入框、图标和提交按钮的对齐、自动填充背景及交互阴影。 统一滑块验证弹窗、图片舞台、滑块手柄和状态提示的视觉表现,减少多余阴影和轨迹填充,使验证码区域更简洁稳定。
87 lines
5.3 KiB
PHP
87 lines
5.3 KiB
PHP
{extend name="index/index"}
|
|
|
|
{block name='style'}
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
|
|
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
|
|
<link rel="stylesheet" href="{$staticRoot|default=''}/theme/css/login.css?at={:is_file(syspath('public/static/theme/css/login.css')) ? filemtime(syspath('public/static/theme/css/login.css')) : date('YmdHis')}">
|
|
{/block}
|
|
|
|
{block name="body"}
|
|
<div class="login-container" {:isset($loginStyle) && is_scalar($loginStyle) ? $loginStyle : ''}>
|
|
<div class="header notselect layui-hide-xs">
|
|
<a href="{$homeUrl|default=''}" class="title">{$applicationName|default=''}<span>{$applicationVersion|default=''}</span></a>
|
|
{notempty name='runtimeMode'}
|
|
<a class="pull-right layui-anim layui-anim-fadein" target="_blank" href='https://gitee.com/zoujingli/ThinkAdmin'>
|
|
<img src='https://gitee.com/zoujingli/ThinkAdmin/widgets/widget_1.svg' alt='Fork me on Gitee'>
|
|
</a>
|
|
{/notempty}
|
|
</div>
|
|
<form data-login-form data-login-token="{$loginToken}" data-login-password-key="{$loginPasswordKey}" data-login-slider="{$loginSliderUrl|default=''}" data-login-check="{$loginCheckUrl|default=''}" onsubmit="return false" method="post" class="layui-anim layui-anim-upbit" autocomplete="off">
|
|
<h2 class="notselect">{:isset($loginTitle) && is_scalar($loginTitle) && $loginTitle !== '' ? $loginTitle : lang('系统管理')}</h2>
|
|
<input type="hidden" name="token" value="{$loginToken}">
|
|
<input type="hidden" name="password_mode" value="plain">
|
|
<input type="hidden" name="uniqid" value="">
|
|
<input type="hidden" name="verify" value="">
|
|
<ul>
|
|
<li class="username">
|
|
<label class="label-required-null">
|
|
<i class="layui-icon layui-icon-username"></i>
|
|
<input class="layui-input" required pattern="^\S{4,}$" vali-name="{:lang('登录账号')}" name="username" autofocus autocomplete="username" placeholder="{:lang('登录账号')}">
|
|
</label>
|
|
</li>
|
|
<li class="password">
|
|
<label class="label-required-null">
|
|
<i class="layui-icon layui-icon-password"></i>
|
|
<input class="layui-input" required pattern="^\S{4,}$" vali-name="{:lang('登录密码')}" name="password" maxlength="32" type="password" autocomplete="current-password" placeholder="{:lang('登录密码')}" lay-affix="eye">
|
|
</label>
|
|
</li>
|
|
<li class="text-center pt20">
|
|
<button type="submit" class="layui-btn layui-disabled full-width" data-form-loaded="{:lang('立即登录')}">{:lang('正在载入')}</button>
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
<div class="login-verify-popup layui-hide" data-login-slider-popup>
|
|
<div class="login-verify-mask"></div>
|
|
<div class="login-verify-dialog">
|
|
<div class="slider-title">{:lang('检测到登录错误后,需要先完成滑块验证')}</div>
|
|
<div class="slider-panel" data-login-slider-panel>
|
|
<div class="slider-stage">
|
|
<img class="slider-bg" data-slider-bg alt="login-bg">
|
|
<img class="slider-piece" data-slider-piece alt="slider-piece">
|
|
</div>
|
|
<div class="slider-bar">
|
|
<div class="slider-bar-track" data-slider-track></div>
|
|
<div class="slider-bar-text" data-slider-message>{:lang('请按住滑块,拖动完成验证')}</div>
|
|
<span class="slider-handle" data-slider-handle><i class="layui-icon layui-icon-slider"></i></span>
|
|
</div>
|
|
<div class="slider-actions">
|
|
<span data-slider-status>{:lang('首次登录无需验证')}</span>
|
|
<a href="javascript:void(0)" data-slider-refresh>{:lang('刷新拼图')}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer notselect">
|
|
<p class="layui-hide-xs">{:sprintf(lang('推荐使用 %s 或 %s 浏览器访问'), '<a target="_blank" href="https://www.google.cn/chrome">Google Chrome</a>', '<a target="_blank" href="https://www.microsoft.com/zh-cn/edge#platform">Microsoft Edge</a>')}</p>
|
|
{$copyrightText|default=''}
|
|
{if !empty($publicSecurityFiling)}<span class="pa5">|</span><a target="_blank" href="https://www.beian.gov.cn/portal/registerSystemInfo">{$publicSecurityFiling|default=''}</a>{/if}
|
|
{if !empty($miitFiling)}<span class="pa5">|</span><a target="_blank" href="https://beian.miit.gov.cn/">{$miitFiling|default=''}</a>{/if}
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
|
|
{block name='script'}
|
|
<script>
|
|
window.taLoginI18n = {
|
|
dragToVerify: "{:lang('请按住滑块,拖动完成验证')}",
|
|
sliderApiMissing: "{:lang('请设置滑块验证接口')}",
|
|
verifying: "{:lang('正在校验...')}",
|
|
verifyPassedContinue: "{:lang('验证通过,请继续登录')}",
|
|
sliderVerified: "{:lang('滑块验证通过')}",
|
|
wrongPositionRetry: "{:lang('位置不正确,请重试')}",
|
|
needVerifyFirst: "{:lang('请先完成滑块验证')}"
|
|
};
|
|
</script>
|
|
<script src="{$staticRoot|default=''}/login.js?at={:is_file(syspath('public/static/login.js')) ? filemtime(syspath('public/static/login.js')) : date('YmdHis')}"></script>
|
|
{/block}
|