|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
<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="智能轮胎管理系统">
|
|
|
|
|
<!-- 原有CSS引用保持不变 -->
|
|
|
|
|
<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/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.8.2}" rel="stylesheet"/>
|
|
|
|
|
|
|
|
|
|
<!-- 360浏览器急速模式 -->
|
|
|
|
|
<meta name="renderer" content="webkit">
|
|
|
|
|
<!-- 避免IE使用兼容模式 -->
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
|
|
|
|
|
|
|
|
|
|
<!-- ⭐ 核心优化：自定义内联样式 (覆盖原有样式) -->
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
/* 1. 全屏背景图设置 */
|
|
|
|
|
body.signin {
|
|
|
|
|
background: url('../img/img.png') no-repeat center center fixed; /* 确保图片路径正确 */
|
|
|
|
|
-webkit-background-size: cover;
|
|
|
|
|
-moz-background-size: cover;
|
|
|
|
|
-o-background-size: cover;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
/* 如果背景图太亮，可以加一层半透明黑色遮罩，让白色登录框更突出 */
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
body.signin::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
|
|
|
background: rgba(0, 0, 0, 0.3); /* 30%透明度的黑色遮罩 */
|
|
|
|
|
z-index: -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 2. 登录面板优化：增加磨砂玻璃质感和阴影 */
|
|
|
|
|
.signinpanel {
|
|
|
|
|
width: 400px;
|
|
|
|
|
margin: 10% auto;
|
|
|
|
|
padding: 30px 40px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.92); /* 半透明白底 */
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
|
|
|
|
|
backdrop-filter: blur(10px); /* 磨砂效果，现代浏览器支持 */
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 3. 输入框优化 */
|
|
|
|
|
.form-control {
|
|
|
|
|
height: 48px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
.form-control:focus {
|
|
|
|
|
border-color: #4285f4; /* 蓝色边框 */
|
|
|
|
|
box-shadow: 0 0 10px rgba(66, 133, 244, 0.3);
|
|
|
|
|
transform: scale(1.02); /* 聚焦时轻微放大 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 4. 按钮优化 */
|
|
|
|
|
.btn-success {
|
|
|
|
|
background-color: #1890ff; /* 阿里系蓝色，比默认绿更专业 */
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
height: 48px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.btn-success:hover {
|
|
|
|
|
background-color: #409eff;
|
|
|
|
|
border-color: #409eff;
|
|
|
|
|
transform: translateY(-2px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 5. 验证码区域优化 */
|
|
|
|
|
.imgcode {
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
|
|
|
transition: transform 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
.imgcode:hover {
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 6. 标题优化 */
|
|
|
|
|
h1[style] {
|
|
|
|
|
color: #333 !important;
|
|
|
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="signin">
|
|
|
|
|
<div class="signinpanel">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<!-- ⭐ 内容微调：去除了原本的注释，保持结构清晰 -->
|
|
|
|
|
<div class="col-sm-12">
|
|
|
|
|
<!-- Logo或系统名称 -->
|
|
|
|
|
<h1 class="no-margins text-center" style="font-weight: bold; color: #1890ff; margin-bottom: 30px;">
|
|
|
|
|
<i class="fa fa-car"></i> 智能轮胎管理系统
|
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
|
|
<!-- 登录表单 -->
|
|
|
|
|
<form id="signupForm" autocomplete="off">
|
|
|
|
|
<!-- 用户名 -->
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<input type="text" name="username" class="form-control uname" placeholder="请输入用户名" value="admin" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 密码 -->
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<input type="password" name="password" class="form-control pword" placeholder="请输入密码" value="haiwei@123" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 验证码 (根据后端配置显示) -->
|
|
|
|
|
<div class="row m-t" th:if="${captchaEnabled==true}">
|
|
|
|
|
<div class="col-xs-6">
|
|
|
|
|
<input type="text" name="validateCode" class="form-control code" placeholder="请输入验证码" maxlength="5" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-xs-6">
|
|
|
|
|
<a href="javascript:void(0);" title="点击更换验证码" onclick="this.src='/captcha/captchaImage?type='+captchaType+'&d='+new Date().getTime()">
|
|
|
|
|
<img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="100%"/>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 记住我 & 忘记密码 -->
|
|
|
|
|
<div class="checkbox-custom m-t" th:if="${isRemembered}" style="float: left;">
|
|
|
|
|
<input type="checkbox" id="rememberme" name="rememberme">
|
|
|
|
|
<label for="rememberme" style="color: black">记住我</label>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 如果需要“忘记密码”链接，取消下面的注释 -->
|
|
|
|
|
<!-- <a href="#" style="float: right; margin-top: 10px;">忘记密码?</a> -->
|
|
|
|
|
|
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
|
|
|
|
|
|
<!-- 登录按钮 -->
|
|
|
|
|
<button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍候...">
|
|
|
|
|
<i class="fa fa-sign-in"></i> 登 录
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 原有JS引用保持不变 -->
|
|
|
|
|
<script th:inline="javascript">
|
|
|
|
|
var ctx = [[@{/}]];
|
|
|
|
|
var captchaType = [[${captchaType}]];
|
|
|
|
|
var captchaEnabled = [[${captchaEnabled}]];
|
|
|
|
|
</script>
|
|
|
|
|
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
|
|
|
|
|
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.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/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.8.2}"></script>
|
|
|
|
|
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
