wenjy
/
aucma-scada-management-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

已经完成

Browse Source 
登录页面初步修改
master
森屿海巷 4 years ago
parent 9cd0f53f08
commit a6224e300b
1 changed files with 133 additions and 52 deletions
Show Stats Download Patch File Download Diff File

143
ruoyi-admin/src/main/resources/templates/login.html
Unescape Escape View File

@ -3,13 +3,13 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>登录若依系统</title>
<meta name="description" content="若依后台管理框架">
<title>登录仓库管理系统</title>
<meta name="description" content="仓库系统后台管理框架">
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
<link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
<link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
<link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.7.0}" rel="stylesheet"/>
<link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.3.1}" rel="stylesheet"/>
<!-- 360浏览器急速模式 -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
@ -19,31 +19,88 @@
<script>
if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
</script>
<style>
body {
background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
background-attachment: fixed;
overflow: hidden;
}
@keyframes rotate {
0% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
}
100% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
}
}
.stars {
transform: perspective(500px);
transform-style: preserve-3d;
position: absolute;
bottom: 0;
perspective-origin: 50% 100%;
left: 50%;
animation: rotate 90s infinite linear;
}
.star {
width: 2px;
height: 2px;
background: #F7F7B6;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0 -300px;
transform: translate3d(0, 0, -300px);
backface-visibility: hidden;
}
.table{
width: 400px;
height: 350px;
margin: 80px auto;
}
.table form{
width: 100%;
}
.table .name{
width: 280px;
margin: 20px auto 30px auto;
display: block;
height: 30px;
border-radius: 20px;
border: none;
background: rgba(0,0,0,0.2);
text-indent: 0.5em;
}
.table .btn{
width: 100px;
height: 30px;
background: rgba(0,0,0,0.1);
border-radius: 8px;
border: none;
color: white;
margin: 0 auto;
display: block;
}
</style>
</head>
<body class="signin">
<div class="signinpanel">
<div class="row">
<div class="col-sm-7">
<body class="signin" style="margin-top: 250px" >
<div class="stars"></div> <!--背景层，不要删除，不然没有作用-->
<div class="signinpanel">
<div class="row" >
<div class="col-sm-3" >
<div class="signin-info">
<div class="logopanel m-b">
<h1><img alt="[ 若依 ]" src="../static/ruoyi.png" th:src="@{/ruoyi.png}"></h1>
</div>
<div class="m-b"></div>
<h4>欢迎使用 <strong>若依 后台管理系统</strong></h4>
<ul class="m-b">
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> SpringBoot</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Mybatis</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Shiro</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Thymeleaf</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Bootstrap</li>
</ul>
<strong th:if="${isAllowRegister}">还没有账号？ <a th:href="@{/register}">立即注册&raquo;</a></strong>
</div>
</div>
<div class="col-sm-5">
<div class="col-sm-6" >
<form id="signupForm" autocomplete="off">
<h4 class="no-margins">登录：</h4>
<p class="m-t-md">你若不离不弃，我必生死相依</p>
<p class="m-t-md" style="font-size: 30px" align="center">仓库管理系统</p>
<input type="text" name="username" class="form-control uname" placeholder="用户名" value="admin" />
<input type="password" name="password" class="form-control pword" placeholder="密码" value="admin123" />
<div class="row m-t" th:if="${captchaEnabled==true}">
@ -52,11 +109,11 @@
</div>
<div class="col-xs-6">
<a href="javascript:void(0);" title="点击更换验证码">
<img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
</a>
</div>
</div>
<div class="checkbox-custom" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
<div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">
<input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>
</div>
<button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
@ -64,19 +121,43 @@
</div>
</div>
<div class="signup-footer">
<div class="pull-left">
Copyright © 2018-2021 ruoyi.vip All Rights Reserved. <br>
</div>
</div>
</div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.7.0}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.3.1}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
<script>
$(document).ready(function(){
var stars=1800; /*星星的密集程度，数字越大越多*/
var $stars=$(".stars");
var r=800; /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
for(var i=0;i<stars;i++){
var $star=$("<div/>").addClass("star");
$stars.append($star);
}
$(".star").each(function(){
var cur=$(this);
var s=0.2+(Math.random()*1);
var curR=r+(Math.random()*300);
cur.css({
transformOrigin:"0 0 "+curR+"px",
transform:" translate3d(0,0,-"+curR+"px) rotateY("+(Math.random()*360)+"deg) rotateX("+(Math.random()*-50)+"deg) scale("+s+","+s+")"
})
})
})
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save