189 lines
5.4 KiB
HTML
189 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>腾讯云账单通知</title>
|
||
</head>
|
||
<body>
|
||
<div class="bill-notification">
|
||
<div class="title-box">
|
||
<img src="./logo.png" style="width:50px;height:50px;">
|
||
<span>腾讯云</span>
|
||
</div>
|
||
<div class="bill-content">
|
||
<h1>腾讯云2024-03账单通知</h1>
|
||
<p>尊敬的腾讯云用户，您好！</p>
|
||
<p>账号ID：117******，昵称：相约在冬季，2024-03账单已出账。</p>
|
||
<div class="summary">
|
||
<p>您2024-03的消费概览情况如下：</p>
|
||
<div class="list">
|
||
<div>
|
||
<div>账单周期</div>
|
||
<div>折后总费用</div>
|
||
<div>现金支出</div>
|
||
<div>赠送金支出</div>
|
||
<div>代金券支出</div>
|
||
</div>
|
||
<div>
|
||
<div>2024/03/01-2024/03/31</div>
|
||
<div>104.00元</div>
|
||
<div>99.00元</div>
|
||
<div>0.00元</div>
|
||
<div>5.00元</div>
|
||
</div>
|
||
</div>
|
||
<table class="domain-table">
|
||
<thead>
|
||
<tr>
|
||
<th>服务器</th>
|
||
<th>漏洞名称</th>
|
||
<th>时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>easygoadmin.com</td>
|
||
<td>dns3.hichina.com</td>
|
||
<td>2023-10-24</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div style="margin:10px 0;">折后总费用=现金支出+赠送金支出+代金券支出</div>
|
||
<a href="#" class="view-bill">查看账单</a>
|
||
</div>
|
||
<div class="tips">
|
||
<h4>温馨提示:</h4>
|
||
<ol>
|
||
<li>此通知并非欠费通知，只作为告知您每个月的消费情况。</li>
|
||
<li>若您对本月账单费用有任何问题或争议，可联系您的客户经理，或提交工单反馈给我们，我们将尽快为您解答、核实和处理。</li>
|
||
<li>如需修改账单通知接收人，您可登录腾讯云官网，进入消息中心-消息订阅进行修改。</li>
|
||
</ol>
|
||
</div>
|
||
<p>此致</p>
|
||
<p>腾讯云团队</p>
|
||
</div>
|
||
<div class="bill-footer">
|
||
<div>此为系统邮件，请勿回复。<a href="">取消订阅</a></div>
|
||
<div class="imgs"><img src="./code.png" style="width:100px;height:100px;"></div>
|
||
<div>关注服务号，移动管理云资源</div>
|
||
<div>Copyright @ 2006-2020 DNSPod, Inc.</div>
|
||
<div>All rights reserved.腾讯云 版权所有</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 0;
|
||
padding: 20px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.bill-notification {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||
background-color: #FAFAFA;
|
||
}
|
||
|
||
.bill-notification .title-box {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.bill-notification .title-box > span {
|
||
margin-left:10px;
|
||
font-size:24px;
|
||
font-weight: bold;
|
||
}
|
||
.bill-notification .bill-content {
|
||
padding:0 20px 20px;
|
||
margin-top:15px;
|
||
border:1px solid #cccccc;
|
||
background-color: #ffffff;
|
||
border-top:4px solid #007bff;
|
||
}
|
||
.bill-notification h1 {
|
||
color: #333;
|
||
}
|
||
|
||
.summary .list {
|
||
display: flex;
|
||
padding-top:20px;
|
||
border-top:1px solid #cccccc;
|
||
|
||
}
|
||
.summary .list >div:first-child {
|
||
font-weight: bold;
|
||
width:120px;
|
||
border-right:1px solid #cccccc;
|
||
}
|
||
.summary .list >div:first-child > div {
|
||
margin-bottom: 8px;;
|
||
}
|
||
.summary .list >div:last-child {
|
||
flex:1;
|
||
margin-left:20px;
|
||
}
|
||
.summary .list >div:last-child > div {
|
||
margin-bottom: 8px;;
|
||
}
|
||
|
||
.view-bill {
|
||
display: block;
|
||
padding: 8px 16px;
|
||
margin-top: 20px;
|
||
background-color: #007bff;
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
}
|
||
.tips {
|
||
border-top:1px solid #cccccc;
|
||
margin-top:20px;
|
||
}
|
||
.tips h2 {
|
||
color: #555;
|
||
}
|
||
|
||
.tips ol {
|
||
list-style-type: decimal;
|
||
padding-left: 20px;
|
||
}
|
||
.tips ol > li {
|
||
font-size: 14px;
|
||
color: #626262;
|
||
margin-bottom:10px;
|
||
}
|
||
table.domain-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
table.domain-table th, table.domain-table td {
|
||
border: 1px solid #ddd;
|
||
padding: 8px;
|
||
text-align: left;
|
||
width: 33.3%;
|
||
word-break: break-all;
|
||
}
|
||
|
||
table.domain-table th {
|
||
background-color: #f8f9fa;
|
||
width: 33.3%;
|
||
}
|
||
.bill-footer {
|
||
margin-top:20px;
|
||
text-align: center;
|
||
color: #999999;
|
||
}
|
||
.bill-footer .imgs {
|
||
margin:15px 0;
|
||
}
|
||
</style> |