src/main/resources/html/login.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>登录页面</title>
<script type="text/javascript" th:src="@{/js/jquery.min.js}" src="js/jquery.min.js" ></script>
<style type="text/css">
	body, html {
		height: 100%;
		margin: 0;
		font-family: "Arial";
		font-weight: lighter;
		color: #626262;
		background-color: #66e8dc;
		background: url("imgs/1.webp");
	}
	.container {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.loginBox {
		width: 330px;
		background-color: white;
		box-shadow: 0px 0px 43px -2px rgba(135,130,135,1);
		border-radius: 8px;
		padding: 15px;
	}
	.userImage {
		border-radius: 50%;
		overflow: hidden;
		width: 120px;
		height: 120px;
		margin: 10px auto 30px;
	}
	img {
		width: 100%;
	}
	.input-wrapper {
		position: relative;
	}
	.error-userName, .error-pass, .error-nickName {
		position: absolute;
		top: 5px;
		padding: 5px 10px;
		right: 0;
		color: white;
		background-color: #66e8dc;
		border-radius: 10px;
	}
	.triangle {
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #66e8dc;
		position: absolute;
		right: 18px;