标签：code bottom color 验证码 6px 邮箱 font margin Email
以下文件保存到/static/email.txt
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>邮箱验证码</title>
<style>
table {
width: 700px;
margin: 0 auto;
}
#top {
width: 700px;
border-bottom: 1px solid #ccc;
margin: 0 auto 30px;
}
#top table {
font: 12px Tahoma, Arial, 宋体;
height: 40px;
}
#content {
width: 680px;
padding: 0 10px;
margin: 0 auto;
}
#content_top {
line-height: 1.5;
font-size: 14px;
margin-bottom: 25px;
color: #4d4d4d;
}
#content_top strong {
display: block;
margin-bottom: 15px;
}
#content_top strong span {
color: #f60;
font-size: 16px;
}
#verificationCode {
color: #f60;
font-size: 24px;
}
#content_bottom {
margin-bottom: 30px;
}
#content_bottom small {
display: block;
margin-bottom: 20px;
font-size: 12px;
color: #747474;
}
#bottom {
width: 700px;
margin: 0 auto;
}
#bottom div {
padding: 10px 10px 0;
border-top: 1px solid #ccc;
color: #747474;
margin-bottom: 20px;
line-height: 1.3em;
font-size: 12px;
}
#content_top strong span {
font-size: 18px;
color: #3399ff;
}
#sign {
text-align: right;
font-size: 18px;
color: #3399ff;
font-weight: bold;
}
#verificationCode {
height: 100px;
width: 680px;
text-align: center;
margin: 30px 0;
}
#verificationCode div {
height: 100px;
width: 680px;
}
.button {
color: #3399ff;
margin-left: 10px;
height: 80px;
width: 80px;
resize: none;
font-size: 42px;
border: none;
outline: none;
padding: 10px 15px;
background: #ededed;
text-align: center;
border-radius: 17px;
box-shadow: 6px 6px 12px #cccccc,
-6px -6px 12px #ffffff;
}
.button:hover {
box-shadow: inset 6px 6px 4px #d1d1d1,
inset -6px -6px 4px #ffffff;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<div id="top">
<table>
<tbody><tr><td></td></tr></tbody>
</table>
</div>
<div id="content">
<div id="content_top">
<img src="存放log图片路径，自行替换" style="width:150px;">
<p></p>
<strong>尊敬的用户：您好！</strong>
<strong>
您正在进行<span>#{explain}</span>操作，请在验证码中输入以下验证码完成操作：
</strong>
<div id="verificationCode">
#{code}
</div>
</div>
<div id="content_bottom">
<small>
注意：此操作为#{explain}。如非管理员请勿操作!
<br>（工作人员不会向你索取此验证码，请勿泄漏！)
</small>
</div>
</div>
<div id="bottom">
<div>
<p>此为系统邮件，请勿回复<br>
请保管好您的邮箱，避免账号被他人盗用
</p>
<p id="sign">XXX系统2.0</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
邮件发送
// 发送方法
String code = RandomUtil.randomNumbers(6);
StringBuffer codeJoin = getStringBuffer(code);
String sendInfo = getEmailSendInfo(codeJoin.toString(), verifyCodeName);
MailUtil.send(data, verifyCodeName, sendInfo, true);
redisUtils.set(verifyCodePre + uuid, code, RandomUtil.randomLong(300, 600));
//验证码样式
@NotNull
private static StringBuffer getStringBuffer(String code) {
StringBuffer codeJoin = new StringBuffer();
for (int i = 0; i < code.length(); i++) {
char ch = code.charAt(i);
codeJoin.append("<button class=\"button\" >").append(ch).append("</button>");
}
return codeJoin;
}
// 获取发送信息
private static String getEmailSendInfo(String code, String explain) throws Exception {
ClassPathResource resource = new ClassPathResource("/static/email.txt");
InputStream inputStream = resource.getInputStream();
String sendInfo = IOUtils.toString(inputStream, StandardCharsets.UTF_8);
sendInfo = sendInfo.replace("#{explain}", explain).replace("#{code}", code);
return sendInfo;
}
标签：code,
bottom,
color,
验证码,
6px,
邮箱,
font,
margin,
Email
From： https://www.cnblogs.com/hhs-5120/p/18103797