djangoadmin/djangoadmin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化升级

Browse Source
This commit is contained in:
gitadmin
2026-09-17 12:12:55 +08:00
parent 4ecb1a0a43
commit 00cfabb822
72 changed files with 669 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
xiaomayi-modules/xiaomayi-web/src/main/resources/templates/login2.html
+200 -10
View File
@@ -8,8 +8,16 @@
<!-- login-wrapper -->
<div class="login-wrapper">
<div class="layui-container">
<form class="layui-form">
<div class="login-card-box">
<!-- 左侧插图 -->
<div class="login-card-pic">
<div class="login-card-pic-text">
<h1>小蚂蚁云官方网站</h1>
<p>赋能开发者，助力企业发展，全方位提供数据中台解决方案!</p>
</div>
</div>
<!-- 右侧表单 -->
<form class="layui-form login-card-form">
<h2>用户登录</h2>
<div class="layui-form-item input-icon-group">
<i class="layui-icon layui-icon-username input-icon-left"></i>
@@ -29,19 +37,197 @@
</div>
<div class="layui-form-item layui-text">
<a href="/register">账号注册</a>
<a href="/forget" class="pull-right">忘记密码?</a>
<a href="/forget">忘记密码?</a>
</div>
<div>
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="userLogin" lay-submit>登录</button>
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="userLogin" lay-submit>登 录</button>
</div>
<div class="login-oauth-group">
<!-- <a id="goQqLogin" href="javascript:;" title="QQ授权登录"><i class="layui-icon layui-icon-login-qq"></i></a>-->
<!-- <a id="goWxLogin" href="javascript:;" title="微信授权登录"><i class="layui-icon layui-icon-login-wechat"></i></a>-->
<div class="login-oauth-title"><span>其他登录方式</span></div>
<div class="login-oauth-icons">
<a id="goWxLogin" href="javascript:;" title="微信登录"><i class="layui-icon layui-icon-login-wechat"></i></a>
<a id="goQqLogin" href="javascript:;" title="QQ登录"><i class="layui-icon layui-icon-login-qq"></i></a>
</div>
</div>
</form>
</div>
</div>
<style>
.login-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.login-wrapper:before {
display: none;
}
.login-card-box {
display: flex;
width: 920px;
max-width: 96%;
height: 510px;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 30px rgba(0,0,0,0.18);
}
.login-card-pic {
flex: 1;
padding: 32px 8px;
box-sizing: border-box;
background-color: #1681fd;
background-image: url('/static/assets/images/login-img.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
text-align: center;
}
.login-card-pic-text h1 {
color: #ffffff;
font-size: 28px;
margin: 0 0 6px;
font-weight: 400;
letter-spacing: 1.2px;
}
.login-card-pic-text p {
color: rgba(255,255,255,0.8);
font-size: 16px;
margin: 0;
font-weight: 400;
letter-spacing: 1.2px;
}
.login-card-form {
width: 400px;
padding: 36px 40px 28px !important;
box-sizing: border-box;
margin: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.login-card-form h2 {
font-size: 22px;
font-weight: 700;
color: #0b1a33;
text-align: left;
margin-bottom: 24px;
}
.login-card-form .input-icon-group .layui-input {
height: 44px;
border-radius: 8px;
border-color: #e8edf5;
transition: border-color 0.2s, box-shadow 0.2s;
}
.login-card-form .input-icon-group .layui-input:focus {
border-color: #1681fd;
box-shadow: 0 0 0 3px rgba(22,129,253,0.1);
}
.login-card-form .input-icon-group .input-icon-left {
top: 50%;
transform: translateY(-50%);
color: #b0bec5;
}
.login-card-form .login-captcha-group .login-captcha {
height: 44px;
border-radius: 8px;
}
.login-card-form .layui-btn-fluid {
height: 46px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
letter-spacing: 4px;
background: #1681fd;
border: none;
box-shadow: 0 4px 14px rgba(22,129,253,0.3);
transition: box-shadow 0.3s, transform 0.2s;
}
.login-card-form .layui-btn-fluid:hover {
background: #1270e0;
box-shadow: 0 6px 20px rgba(22,129,253,0.4);
transform: translateY(-1px);
}
.login-card-form .layui-text {
display: flex !important;
justify-content: space-between !important;
align-items: center;
margin-bottom: 18px;
padding: 0;
}
.login-card-form .layui-text a:last-child {
margin-left: auto;
}
.login-card-form .layui-text a {
color: #1681fd;
font-size: 13px;
}
.login-card-form .login-oauth-group {
text-align: center;
padding-top: 20px;
}
.login-oauth-title {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.login-oauth-title span {
font-size: 12px;
color: #8b9ab5;
padding: 0 12px;
background: #fff;
position: relative;
}
.login-oauth-title:before,
.login-oauth-title:after {
content: '';
flex: 1;
height: 1px;
background: #e8edf5;
}
.login-oauth-icons {
display: flex;
justify-content: center;
gap: 24px;
}
.login-oauth-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid #e8edf5;
color: #1681fd;
font-size: 20px;
transition: all 0.2s;
text-decoration: none;
}
.login-oauth-icons a:hover {
border-color: #1681fd;
background: rgba(22,129,253,0.08);
color: #1681fd;
}
@media screen and (max-width: 800px) {
.login-card-box {
flex-direction: column;
width: 400px;
height: auto;
}
.login-card-pic {
width: 100%;
padding: 20px 12px 100px;
background-size: auto 100px;
}
.login-card-form {
width: 100%;
padding: 28px 24px 24px !important;
}
}
</style>
<!-- js部分 -->
<!-- 引入脚部 -->
<script type="text/javascript" src="/static/assets/layui/layui.js"></script>
@@ -52,7 +238,11 @@
var layer = layui.layer;
var form = layui.form;
// 表单提交
/**
* 登录表单提交
* 将表单数据以JSON格式POST到/login接口
* 成功后跳转至用户订单页，失败则刷新验证码并弹出错误提示
*/
form.on('submit(userLogin)', function (data) {
var loadIndex = layer.load(2);
$.ajax({
@@ -95,17 +285,17 @@
return false;
});
/* 图形验证码 */
/* 页面加载时刷新图形验证码，点击图片也可刷新 */
$('img.login-captcha').click(function () {
this.src = '/captcha?t=' + (new Date).getTime();
}).trigger('click');
// QQ登录
/* QQ登录 - 暂未开放 */
$('#goQqLogin').click(function () {
layui.layer.msg('抱歉，QQ登录暂未开放', {icon: 5, anim: 6});
});
// 微信登录
/* 微信登录 - 暂未开放 */
$('#goWxLogin').click(function () {
layui.layer.msg('抱歉，微信登录暂未开放', {icon: 5, anim: 6});
});