fix: align without brand template

This commit is contained in:
lyzno1 2025-11-15 11:34:51 +08:00
parent c78fbabe60
commit 196bf3d9a0
No known key found for this signature in database
8 changed files with 490 additions and 118 deletions

View File

@ -18,9 +18,10 @@
.card {
width: 600px;
min-height: 434px;
margin: 40px auto;
margin: 40px auto 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fcfcfd;
border: 1px solid #ffffff;
box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
@ -28,15 +29,22 @@
}
.card-header {
padding: 36px 48px 24px;
min-height: 101px;
display: flex;
padding: 36px 48px 24px 48px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.card-content {
display: flex;
padding: 8px 48px 48px 48px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 8px 48px 48px;
align-self: stretch;
width: 100%;
}
@ -52,7 +60,7 @@
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding: 16px 0 0;
}
.body-text {
@ -93,15 +101,51 @@
letter-spacing: -0.005em;
color: #354052;
}
.signature {
margin-top: 28px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.signature-text {
margin: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.005em;
color: #354052;
}
.email-footer {
margin: 20px auto 40px;
max-width: 600px;
color: #676f83;
text-align: center;
font-family: 'Inter', 'Arial', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.06px;
flex: 1 0 0;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header"></div>
<div class="card-header">
</div>
<div class="card-content">
<h1 class="title">Youve reached your API Rate Limit</h1>
<div class="body-group">
<p class="body-text">
<strong>Dear {{ recipientName | default(workspaceName ~ ' team', true) }},</strong>
</p>
<p class="body-text">
Your workspace <strong>{{workspaceName}}</strong> has used all available <strong>Monthly API Rate Limit</strong> for the
<strong>{{planName}} Plan (limit: {{planLimit}})</strong>.
@ -112,13 +156,18 @@
<p class="body-text">
To continue using the Dify API and unlock a higher limit, please upgrade to a paid plan.
</p>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>Monthly API Rate Limit</strong> for the <strong>{{planName}} Plan</strong> will reset on <strong>{{resetDate}}</strong>.
</p>
</div>
<div class="signature">
<p class="signature-text">Best regards,</p>
<p class="signature-text">The Dify Team</p>
</div>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>Monthly API Rate Limit</strong> for the <strong>{{planName}} Plan</strong> will reset on <strong>{{resetDate}}</strong>.
</p>
</div>
</div>
<p class="email-footer">Please do not reply directly to this email, it is automatically sent by the system.</p>
</body>
</html>

View File

@ -18,9 +18,10 @@
.card {
width: 600px;
min-height: 434px;
margin: 40px auto;
margin: 40px auto 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fcfcfd;
border: 1px solid #ffffff;
box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
@ -28,15 +29,22 @@
}
.card-header {
padding: 36px 48px 24px;
min-height: 101px;
display: flex;
padding: 36px 48px 24px 48px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.card-content {
display: flex;
padding: 8px 48px 48px 48px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 8px 48px 48px;
align-self: stretch;
width: 100%;
}
@ -52,7 +60,7 @@
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding: 16px 0 0;
}
.body-text {
@ -93,17 +101,53 @@
letter-spacing: -0.005em;
color: #354052;
}
.signature {
margin-top: 28px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.signature-text {
margin: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.005em;
color: #354052;
}
.email-footer {
margin: 20px auto 40px;
max-width: 600px;
color: #676f83;
text-align: center;
font-family: 'Inter', 'PingFang SC', 'Arial', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.06px;
flex: 1 0 0;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header"></div>
<div class="card-header">
</div>
<div class="card-content">
<h1 class="title">您的 API 速率额度已用尽</h1>
<div class="body-group">
<p class="body-text">
您的工作区 <strong>{{workspaceName}}</strong> 已用完 <strong>月度 API 速率额度</strong>,触及
<strong>亲爱的 {{ recipientName | default(workspaceName, true) }}</strong>
</p>
<p class="body-text">
您的工作区 <strong>{{workspaceName}}</strong> 已用完 <strong>月度 API 速率额度</strong>,触及
<strong>{{planName}} 计划(上限:{{planLimit}}</strong>
</p>
<p class="body-text">
@ -112,13 +156,17 @@
<p class="body-text">
若要继续使用 Dify API 并解锁更高额度,请升级到付费套餐。
</p>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>{{planName}} 计划的月度 API 速率额度</strong> 将于 <strong>{{resetDate}}</strong> 重置。</p>
</div>
<div class="signature">
<p class="signature-text">此致敬礼,</p>
<p class="signature-text">Dify 团队</p>
</div>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>{{planName}} 计划的月度 API 速率额度</strong> 将于 <strong>{{resetDate}}</strong> 重置。
</p>
</div>
</div>
<p class="email-footer">请勿直接回复此邮件,该邮件由系统自动发送。</p>
</body>
</html>

View File

@ -18,9 +18,10 @@
.card {
width: 600px;
min-height: 454px;
margin: 40px auto;
margin: 40px auto 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fcfcfd;
border: 1px solid #ffffff;
box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
@ -28,15 +29,22 @@
}
.card-header {
padding: 36px 48px 24px;
min-height: 101px;
display: flex;
padding: 36px 48px 24px 48px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.card-content {
display: flex;
padding: 8px 48px 48px 48px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 8px 48px 48px;
align-self: stretch;
width: 100%;
}
@ -52,7 +60,7 @@
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding: 16px 0 0;
}
.body-text {
@ -93,15 +101,51 @@
letter-spacing: -0.005em;
color: #354052;
}
.signature {
margin-top: 28px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.signature-text {
margin: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.005em;
color: #354052;
}
.email-footer {
margin: 20px auto 40px;
max-width: 600px;
color: #676f83;
text-align: center;
font-family: 'Inter', 'Arial', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.06px;
flex: 1 0 0;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header"></div>
<div class="card-header">
</div>
<div class="card-content">
<h1 class="title">Youre nearing your API Rate Limit</h1>
<div class="body-group">
<p class="body-text">
<strong>Dear {{ recipientName | default(workspaceName ~ ' team', true) }},</strong>
</p>
<p class="body-text">
Your workspace <strong>{{workspaceName}}</strong> has used <strong>80% of its Monthly API Rate Limit</strong> for the
<strong>{{planName}} Plan (limit: {{planLimit}})</strong>.
@ -113,13 +157,18 @@
To avoid service interruptions and ensure continued access to the Dify API, please consider upgrading your plan for a higher API
Rate Limit.
</p>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>Monthly API Rate Limit</strong> for the <strong>{{planName}} Plan</strong> will reset on <strong>{{resetDate}}</strong>.
</p>
</div>
<div class="signature">
<p class="signature-text">Best regards,</p>
<p class="signature-text">The Dify Team</p>
</div>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>Monthly API Rate Limit</strong> for the <strong>{{planName}} Plan</strong> will reset on <strong>{{resetDate}}</strong>.
</p>
</div>
</div>
<p class="email-footer">Please do not reply directly to this email, it is automatically sent by the system.</p>
</body>
</html>

View File

@ -18,9 +18,10 @@
.card {
width: 600px;
min-height: 454px;
margin: 40px auto;
margin: 40px auto 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fcfcfd;
border: 1px solid #ffffff;
box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
@ -28,15 +29,22 @@
}
.card-header {
padding: 36px 48px 24px;
min-height: 101px;
display: flex;
padding: 36px 48px 24px 48px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.card-content {
display: flex;
padding: 8px 48px 48px 48px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 8px 48px 48px;
align-self: stretch;
width: 100%;
}
@ -52,7 +60,7 @@
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding: 16px 0 0;
}
.body-text {
@ -93,17 +101,53 @@
letter-spacing: -0.005em;
color: #354052;
}
.signature {
margin-top: 28px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.signature-text {
margin: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.005em;
color: #354052;
}
.email-footer {
margin: 20px auto 40px;
max-width: 600px;
color: #676f83;
text-align: center;
font-family: 'Inter', 'PingFang SC', 'Arial', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.06px;
flex: 1 0 0;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header"></div>
<div class="card-header">
</div>
<div class="card-content">
<h1 class="title">您的 API 速率额度接近上限</h1>
<div class="body-group">
<p class="body-text">
您的工作区 <strong>{{workspaceName}}</strong> 已使用 <strong>80% 的月度 API 速率额度</strong>,触及
<strong>亲爱的 {{ recipientName | default(workspaceName, true) }}</strong>
</p>
<p class="body-text">
您的工作区 <strong>{{workspaceName}}</strong> 已使用 <strong>80% 的月度 API 速率额度</strong>,触及
<strong>{{planName}} 计划(上限:{{planLimit}}</strong>
</p>
<p class="body-text">
@ -112,13 +156,17 @@
<p class="body-text">
为避免服务中断并持续访问 Dify API请考虑升级到额度更高的套餐。
</p>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>{{planName}} 计划的月度 API 速率额度</strong> 将于 <strong>{{resetDate}}</strong> 重置。</p>
</div>
<div class="signature">
<p class="signature-text">此致敬礼,</p>
<p class="signature-text">Dify 团队</p>
</div>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>{{planName}} 计划的月度 API 速率额度</strong> 将于 <strong>{{resetDate}}</strong> 重置。
</p>
</div>
</div>
<p class="email-footer">请勿直接回复此邮件,该邮件由系统自动发送。</p>
</body>
</html>

View File

@ -18,9 +18,10 @@
.card {
width: 600px;
min-height: 454px;
margin: 40px auto;
margin: 40px auto 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fcfcfd;
border: 1px solid #ffffff;
box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
@ -28,22 +29,22 @@
}
.card-header {
padding: 36px 48px 24px;
display: flex;
padding: 36px 48px 24px 48px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.card-header img {
width: 68px;
height: auto;
}
.card-content {
display: flex;
padding: 8px 48px 48px 48px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 8px 48px 48px;
align-self: stretch;
width: 100%;
}
@ -59,7 +60,7 @@
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding: 16px 0 0;
}
.body-text {
@ -100,38 +101,79 @@
letter-spacing: -0.005em;
color: #354052;
}
.signature {
margin-top: 28px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.signature-text {
margin: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.005em;
color: #354052;
}
.email-footer {
margin: 20px auto 40px;
max-width: 600px;
color: #676f83;
text-align: center;
font-family: 'Inter', 'Arial', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.06px;
flex: 1 0 0;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header"></div>
<div class="card-header">
</div>
<div class="card-content">
<h1 class="title">Youve reached your trigger events limit</h1>
<div class="body-group">
<p class="body-text">
Your workspace <strong>{{workspaceName}}</strong> has used all available <strong>{{usageScope | default('Trigger Events')}}</strong> for the
<strong>{{planName}} Plan (limit: {{planLimit}})</strong>.
</p>
<p class="body-text">
<strong>Dear {{ recipientName | default(workspaceName ~ ' team', true) }},</strong>
</p>
<p class="body-text">
Your workspace <strong>{{workspaceName}}</strong> has used all available <strong>{{usageScope | default('Trigger Events')}}</strong> for the
<strong>{{planName}} Plan (limit: {{planLimit}})</strong>.
</p>
<p class="body-text">
Workflows triggered by <strong>{{triggerSources}}</strong> events have been temporarily paused.
</p>
<p class="body-text">
To keep your workflows running without interruption, please upgrade your plan to unlock more Trigger Events.
</p>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>
{% if resetLine is defined %}
{{ resetLine }}
{% else %}
Trigger Events for the {{planName}} Plan {{resetDescription}}
{% endif %}
</strong>
</p>
</div>
<div class="signature">
<p class="signature-text">Best regards,</p>
<p class="signature-text">The Dify Team</p>
</div>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>
{% if resetLine is defined %}
{{ resetLine }}
{% else %}
Trigger Events for the {{planName}} Plan {{resetDescription}}
{% endif %}
</strong>
</p>
</div>
</div>
<p class="email-footer">Please do not reply directly to this email, it is automatically sent by the system.</p>
</body>
</html>

View File

@ -18,9 +18,10 @@
.card {
width: 600px;
min-height: 454px;
margin: 40px auto;
margin: 40px auto 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fcfcfd;
border: 1px solid #ffffff;
box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
@ -28,22 +29,22 @@
}
.card-header {
padding: 36px 48px 24px;
display: flex;
padding: 36px 48px 24px 48px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.card-header img {
width: 68px;
height: auto;
}
.card-content {
display: flex;
padding: 8px 48px 48px 48px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 8px 48px 48px;
align-self: stretch;
width: 100%;
}
@ -59,7 +60,7 @@
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding: 16px 0 0;
}
.body-text {
@ -100,38 +101,79 @@
letter-spacing: -0.005em;
color: #354052;
}
.signature {
margin-top: 28px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.signature-text {
margin: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.005em;
color: #354052;
}
.email-footer {
margin: 20px auto 40px;
max-width: 600px;
color: #676f83;
text-align: center;
font-family: 'Inter', 'PingFang SC', 'Arial', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.06px;
flex: 1 0 0;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header"></div>
<div class="card-header">
</div>
<div class="card-content">
<h1 class="title">您的触发事件额度已用尽</h1>
<div class="body-group">
<p class="body-text">
您的工作区 <strong>{{workspaceName}}</strong> 已用完 <strong>{{usageScope | default('触发事件额度')}}</strong>,并耗尽
<strong>{{planName}} 计划(上限:{{planLimit}}</strong> 的全部额度。
</p>
<p class="body-text">
<strong>亲爱的 {{ recipientName | default(workspaceName, true) }}</strong>
</p>
<p class="body-text">
您的工作区 <strong>{{workspaceName}}</strong> 已用完 <strong>{{usageScope | default('触发事件额度')}}</strong>,并耗尽
<strong>{{planName}} 计划(上限:{{planLimit}}</strong> 的全部额度。
</p>
<p class="body-text">
<strong>{{triggerSources}}</strong> 触发的工作流已被暂时暂停。
</p>
<p class="body-text">
为保证工作流不中断,请升级套餐以解锁更多触发事件额度。
</p>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>
{% if resetLine is defined %}
{{ resetLine }}
{% else %}
{{planName}} 计划的触发事件额度{{resetDescription}}
{% endif %}
</strong>
</p>
</div>
<div class="signature">
<p class="signature-text">此致敬礼,</p>
<p class="signature-text">Dify 团队</p>
</div>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>
{% if resetLine is defined %}
{{ resetLine }}
{% else %}
{{planName}} 计划的触发事件额度{{resetDescription}}
{% endif %}
</strong>
</p>
</div>
</div>
<p class="email-footer">请勿直接回复此邮件,该邮件由系统自动发送。</p>
</body>
</html>

View File

@ -18,9 +18,10 @@
.card {
width: 600px;
min-height: 454px;
margin: 40px auto;
margin: 40px auto 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fcfcfd;
border: 1px solid #ffffff;
box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
@ -28,17 +29,22 @@
}
.card-header {
padding: 36px 48px 24px;
display: flex;
padding: 36px 48px 24px 48px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.card-content {
display: flex;
padding: 8px 48px 48px 48px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 8px 48px 48px;
align-self: stretch;
width: 100%;
}
@ -54,7 +60,7 @@
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding: 16px 0 0;
}
.body-text {
@ -95,15 +101,51 @@
letter-spacing: -0.005em;
color: #354052;
}
.signature {
margin-top: 28px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.signature-text {
margin: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.005em;
color: #354052;
}
.email-footer {
margin: 20px auto 40px;
max-width: 600px;
color: #676f83;
text-align: center;
font-family: 'Inter', 'Arial', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.06px;
flex: 1 0 0;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header"></div>
<div class="card-header">
</div>
<div class="card-content">
<h1 class="title">Youre nearing your Trigger Events limit</h1>
<div class="body-group">
<p class="body-text">
<strong>Dear {{ recipientName | default(workspaceName ~ ' team', true) }},</strong>
</p>
<p class="body-text">
Your workspace <strong>{{workspaceName}}</strong> has used <strong>{{usagePercent}}</strong> of its
<strong>{{usageScope}}</strong> for the <strong>{{planName}} Plan (limit: {{planLimit}})</strong>.
@ -115,19 +157,24 @@
<p class="body-text">
{{upgradeHint}}
</p>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>
{% if resetLine is defined %}
{{ resetLine }}
{% else %}
Trigger Events for the {{planName}} Plan {{resetDescription}}
{% endif %}
</strong>
</p>
</div>
<div class="signature">
<p class="signature-text">Best regards,</p>
<p class="signature-text">The Dify Team</p>
</div>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>
{% if resetLine is defined %}
{{ resetLine }}
{% else %}
Trigger Events for the {{planName}} Plan {{resetDescription}}
{% endif %}
</strong>
</p>
</div>
</div>
<p class="email-footer">Please do not reply directly to this email, it is automatically sent by the system.</p>
</body>
</html>

View File

@ -18,9 +18,10 @@
.card {
width: 600px;
min-height: 454px;
margin: 40px auto;
margin: 40px auto 0;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fcfcfd;
border: 1px solid #ffffff;
box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
@ -28,17 +29,22 @@
}
.card-header {
padding: 36px 48px 24px;
display: flex;
padding: 36px 48px 24px 48px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.card-content {
display: flex;
padding: 8px 48px 48px 48px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 8px 48px 48px;
align-self: stretch;
width: 100%;
}
@ -54,7 +60,7 @@
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding: 16px 0 0;
}
.body-text {
@ -95,15 +101,51 @@
letter-spacing: -0.005em;
color: #354052;
}
.signature {
margin-top: 28px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.signature-text {
margin: 0;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.005em;
color: #354052;
}
.email-footer {
margin: 20px auto 40px;
max-width: 600px;
color: #676f83;
text-align: center;
font-family: 'Inter', 'PingFang SC', 'Arial', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.06px;
flex: 1 0 0;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header"></div>
<div class="card-header">
</div>
<div class="card-content">
<h1 class="title">您的触发事件额度接近上限</h1>
<div class="body-group">
<p class="body-text">
<strong>亲爱的 {{ recipientName | default(workspaceName, true) }}</strong>
</p>
<p class="body-text">
您的工作区 <strong>{{workspaceName}}</strong> 已使用 <strong>{{usagePercent}}</strong>
<strong>{{usageScope}}</strong>,触及 <strong>{{planName}} 计划(上限:{{planLimit}}</strong>
@ -114,19 +156,24 @@
<p class="body-text">
{{upgradeHint}}
</p>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>
{% if resetLine is defined %}
{{ resetLine }}
{% else %}
{{planName}} 计划的触发事件额度{{resetDescription}}
{% endif %}
</strong>
</p>
</div>
<div class="signature">
<p class="signature-text">此致敬礼,</p>
<p class="signature-text">Dify 团队</p>
</div>
<a class="cta" href="{{upgradeUrl}}" target="_blank" rel="noopener noreferrer">{{ctaLabel}}</a>
<p class="note">
<strong>
{% if resetLine is defined %}
{{ resetLine }}
{% else %}
{{planName}} 计划的触发事件额度{{resetDescription}}
{% endif %}
</strong>
</p>
</div>
</div>
<p class="email-footer">请勿直接回复此邮件,该邮件由系统自动发送。</p>
</body>
</html>