邹景立 8916e5a653 style(login): 优化登录页布局与验证弹窗
将登录容器调整为可滚动的居中弹性布局,补充桌面与移动端内边距,避免表单在小屏或内容较多时被裁切。

移除登录表单顶部的站点元信息展示,改为居中标题,并整理输入框、图标和提交按钮的对齐、自动填充背景及交互阴影。

统一滑块验证弹窗、图片舞台、滑块手柄和状态提示的视觉表现,减少多余阴影和轨迹填充,使验证码区域更简洁稳定。
2026-05-20 22:09:16 +08:00

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}