用MDUI自己写的一个简单的登录界面尝试
底部的footer并没有做处理，将就用一下也还是可以的。
效果如图：
（参考的原网页地址：https://sso.scut.edu.cn/cas/login）
相关代码如下：
<!DOCTYPE html>
<html lang="zh" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<title>统一身份认证系统客户端</title>
<link rel="stylesheet" href="./css/mdui.min.css">
<style type="text/css">
#footer {
font-size: 0.5em;
}
</style>
<style type="text/css">
.logo {
height: 40px;
}
@media (min-width: 600px) {
.appbar-flex {
display: flex !important;
}
}
</style>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-blue
mdui-appbar-with-toolbar
mdui-bottom-nav-fixed
"
style="height: 100%;">
<!-- 顶部标题栏开始 -->
<div class="mdui-appbar mdui-appbar-fixed mdui-color-theme" style="width:100%;">
<div class="mdui-toolbar mdui-center mdui-valign" style="max-width: 1280px;">
<div class="mdui-valign mdui-hidden-xs-down">
<img class="logo" src="这里是logo">
<span style="border-left:white 2px solid; width: 1px;height: 40px;margin-left:8px;margin-right:8px;"></span>
<span class="mdui-typo-title">统一身份认证系统</span>
</div>
<div class="mdui-toolbar-spacer mdui-valign mdui-hidden-sm-up">
<div class="mdui-center mdui-valign">
<img class="logo" src="这里是logo">
</div>
</div>
<div class="mdui-toolbar-spacer mdui-hidden-xs-down"></div>
</div>
</div>
<!-- 顶部标题栏结束 -->
<!-- 中央界面开始 -->
<div class="mdui-container">
<div class="mdui-row">
<!-- 左方显示信息 -->
<!-- 右方显示信息 -->
<!-- 现在没有左边信息，直接用中间的代码 -->
<div class="mdui-col-xs-12 mdui-col-sm-4 mdui-col-offset-sm-4">
<div class="mdui-shadow-4 mdui-m-t-5">
<div class="mdui-tab mdui-tab-centered" mdui-tab>
<a href="#zhanghaodenglu" class="mdui-ripple">账号登陆</a>
<a href="#saoma" class="mdui-ripple">扫码登陆</a>
</div>
<div id="zhanghaodenglu" class="mdui-p-a-2">
<form action="#" method="post">
<input type="hidden" name="_token" value="5whGKQgnzQrFroI5gfzc669N3L66zN6yFSJigZxi">
<div class="mdui-textfield mdui-textfield-floating-label mdui-p-a-0">
<label class="mdui-textfield-label">用户名：</label>
<input name="number" class="mdui-textfield-input" type="text"/>
</div>
<br/>
<div class="mdui-textfield mdui-textfield-floating-label mdui-p-a-0">
<label class="mdui-textfield-label">密码：</label>
<input name="password" class="mdui-textfield-input" type="password"/>
</div>
<input id="key" name="key" type="hidden" value=""/>
<div class="mdui-row mdui-valign">
<div class="mdui-col-xs-6">
<div class="mdui-textfield">
<label class="mdui-textfield-label">请输入验证码</label>
<input id="captcha" name="captcha" class="mdui-textfield-input" type="text"
required="required"/>
</div>
</div>
<div class="mdui-col-xs-6">
<span>点击图片刷新验证码</span>
<img id="captcha_src" style="width:100%;" class="mdui-img-fluid"
onclick="change_captcha()"/>
</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12 mdui-m-t-2">
<a href="https://auth.gcu.edu.cn/user/register"
class="mdui-btn mdui-btn-dense mdui-ripple mdui-float-left">注册</a>
<a href="https://auth.gcu.edu.cn/user/reset"
class="mdui-btn mdui-btn-dense mdui-ripple mdui-float-right">忘记密码</a>
</div>
<div class="mdui-col-xs-12 mdui-m-t-2">
<button id="submit" type="submit"
class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-center">提交
</button>
</div>
</div>
</form>
</div>
<div id="saoma" class="mdui-p-a-2 mdui-text-center">
<p>当前暂不支持扫码登陆</p>
</div>
</div>
</div>
</div>
</div>
<!-- 中央界面结束 -->
<div class="mdui-bottom-nav mdui-color-theme" style="height: 48px;">
<div class="mdui-container mdui-valign">
<div class="mdui-row mdui-center">
<div class="mdui-col-xs-12 mdui-text-center">
<span>Copyright(C) 2021 lijialong1313 版权所有</span><br>
<span>地址：#</span>
</div>
</div>
</div>
</div>
<script src="./js/mdui.min.js"></script>
<script type="text/javascript">
function change_captcha() {
$.ajax({
method: 'GET',
url: '#',
success: function (data) {
$('#captcha_src').attr('src', data.img);
$('#key').attr('value', data.key);
}
})
}
$$(change_captcha());
</script>
</body>
</html>
