宗宗酱
页面运行效果：
页面源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container { max-width: 600px; margin: 20px auto; font-family: 'Helvetica Neue', Arial, sans-serif; }
.header { text-align: center; padding: 20px; background: #f8f9fa; }
.brand { color: #2c3e50; font-size: 24px; font-weight: bold; }
.content { padding: 30px 20px; background: white; }
.code-box {
background: #e8f4ff;
padding: 25px;
margin: 25px 0;
text-align: center;
border-radius: 8px;
border: 2px dashed #3498db;
}
.code {
color: #3498db;
font-size: 32px;
letter-spacing: 3px;
font-weight: 700;
margin: 10px 0;
}
.note { color: #7f8c8d; font-size: 14px; line-height: 1.6; }
.footer {
text-align: center;
padding: 20px;
color: #95a5a6;
font-size: 12px;
border-top: 1px solid #ecf0f1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="brand">[您的品牌/产品名称]</div>
</div>
<div class="content">
<h2 style="color: #2c3e50; text-align: center;">您的安全验证码</h2>
<div class="code-box">
<div style="color: #7f8c8d; margin-bottom: 10px;">请使用以下验证码完成操作</div>
<div class="code">{$code}</div>
<div style="color: #95a5a6; font-size: 12px; margin-top: 10px;">发送时间：{$time}</div>
</div>
<div class="note">
<p>⚠️ 安全提示：</p>
<ul>
<li>此验证码10分钟内有效</li>
<li>请勿将验证码告知他人</li>
<li>如非本人操作，请立即修改账户密码</li>
</ul>
</div>
</div>
<div class="footer">
<p>此邮件由系统自动发送，请勿直接回复</p>
<p>© {date('Y')} [公司名称] 保留所有权利</p>
<p>需要帮助？请联系 <a href="mailto:support@example.com" style="color: #3498db; text-decoration: none;">客户支持</a></p>
</div>
</div>
</body>
</html>
主要特点：
-
现代简约设计风格，采用蓝色系传达专业与信任感
-
验证码突出显示（大字号+颜色对比+独立区块）
-
明确的时效提示和安全提醒
-
响应式布局适配各种邮件客户端
-
品牌展示与版权信息完整
-
使用通用安全图标增强可信度
-
包含详细的操作指引和联系方式
可根据品牌需求：
-
替换品牌色（修改#3498db颜色值）
-
添加公司logo到header区域
-
调整字体大小和间距
-
增加多语言支持
-
添加动态效果（需注意邮件客户端兼容性）
