一. 应用场景
适合各种纯文本类型的系统的邮件-如工作流审核流程待办提醒，工作任务到期提醒，催办督办提醒等。也可用于发送系统各种公告通知等。
项目实现方案：纯html实现。系统发送邮件以此为模板，把动态的内容打上特殊标记，在代码中进行替换，然后邮件发出。
二. 效果展示
经测试，在腾讯QQ邮箱，企业有限，foxmail，阿里邮箱等兼容，移动端效果也不错。
image.png
三. 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系统通知邮件模板-纯文本型</title>
</head>
<body>
<div style="font-size: 14px;">
<br><br><br><br>
<div style="width: 600px; margin: 0 auto; background-color: #00838a; border-radius: 3px;">
<div style="padding: 0 15px; padding-bottom: 20px;">
<div style="height: 72px;">
<div>
<a href="https://mall.bydauto.com.cn/" target="_blank" rel="noopener"
style="text-decoration: none;">
<img src="https://mall.bydauto.com.cn/pc/_nuxt/img/logo.97a8e60.svg" style="height: 72px;"
alt="BYD" title="BYD">
</a>
</div>
</div>
<div style="background: #fff; padding: 20px 15px; border-radius: 3px;">
<div><span style="font-size: 16px; font-weight: bold;">待办通知：</span>
<div style="line-height: 24px; margin-top: 10px;">
<div>
您有一条新的“
<span style="font-weight: bold;">订单询价</span>
待办，编号为“
<span style="font-weight: bold;">XJ230708005</span>
”，收到信息后请尽快
<a style="color: #006eff;font-weight: bold;" href="https://mall.bydauto.com.cn/"
target="_blank" rel="noopener">登录MALL系统</a>处理！
</div>
</div>
</div>
<div style="margin-top: 30px;">
<div><span
style="font-size: 15px; font-weight: bold; position: relative; top: -4px;">流程信息</span>
</div>
<table
style="width: 400px; border-spacing: 0px; border-collapse: collapse; border: none; margin-top: 20px;">
<tbody>
<tr style="height: 45px;">
<td
style="width: 150px; height: 40px; background: #F6F6F6;border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">
上一节点</td>
<td
style="width: 250px;height: 40px; border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">
订单咨询</td>
</tr>
<tr style="height: 45px;">
<td
style="width: 150px;height: 40px; background: #F6F6F6;border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">
处理人</td>
<td
style="width: 250px;height: 40px; border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">
张先生</td>
</tr>
<tr style="height: 45px;">
<td
style="width: 150px; height: 40px; background: #F6F6F6;border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">
当前节点</td>
<td
style="width: 250px;height: 40px; border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">
<a style="color: #006eff;" href="https://mall.bydauto.com.cn/" target="_blank"
rel="noopener">订单询价</a>
</td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top: 60px;margin-bottom: 10px;"><span
style="font-size: 13px; font-weight: bold; color: #666;">温馨提醒</span>
<div style="line-height: 24px; margin-top: 10px;">
<div style="font-size: 13px; color: #666;">使用过程中如有任何问题，请联系LIMS系统管理员。</div>
</div>
</div>
</div>
</div>
</div>
<div
style="width: 600px; margin: 0 auto; margin-top: 50px; font-size: 12px; -webkit-font-smoothing: subpixel-antialiased; text-size-adjust: 100%;">
<p
style="text-align: center; line-height: 20.4px; text-size-adjust: 100%; font-family: 'Microsoft YaHei'!important; padding: 0px !important; margin: 0px !important; color: #7e8890 !important;">
<span class="appleLinks">
Copyright © 2023-2024 北京XXXX科技股份有限公司. 保留所有权利。</span>
</p>
<p
style="text-align: center;line-height: 20.4px; text-size-adjust: 100%; font-family: 'Microsoft YaHei'!important; padding: 0px !important; margin: 0px; color: #7e8890 !important; margin-top: 10px;">
<span class="appleLinks">
邮件由系统自动发送，请勿直接回复本邮件！</span>
</p>
</div>
</div>
</body>
</html>
四. 注意事项
- 图片问题，需要使用外网可以访问的地址且最好是SSL认证的地址，不然可以会显示不了。
- 空格接换行留白，可以用
<br/>标签。 - css样式一定要是行内样式。
- 元素尽量指定宽和高。
--END
网友评论