365 lines
10 KiB
Plaintext
365 lines
10 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>客户信息 - {{order_no}}</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
color: #343a40;
|
|
}
|
|
|
|
.email-container {
|
|
max-width: 800px;
|
|
width: 100%;
|
|
background: white;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
border-top: 5px solid #4361ee;
|
|
}
|
|
|
|
.email-header {
|
|
background: linear-gradient(120deg, #4361ee, #3a0ca3);
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.header-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 15px;
|
|
color: white;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sn-badge {
|
|
background: #ff9e00;
|
|
color: white;
|
|
padding: 6px 15px;
|
|
border-radius: 20px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.email-body {
|
|
padding: 40px;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 25px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.info-card {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
transition: all 0.3s ease;
|
|
border-left: 4px solid #4361ee;
|
|
}
|
|
|
|
.info-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1rem;
|
|
color: #6c757d;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-title i {
|
|
margin-right: 10px;
|
|
color: #4361ee;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: #212529;
|
|
}
|
|
|
|
.status-container {
|
|
background: #e7f5ff;
|
|
border-radius: 10px;
|
|
padding: 25px;
|
|
margin: 30px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: 1px dashed #4dabf7;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 8px 20px;
|
|
border-radius: 30px;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.status-badge.copper {
|
|
background: #cd7f32;
|
|
color: white;
|
|
}
|
|
|
|
.status-badge.pending {
|
|
background: #ffd8a8;
|
|
color: #e67700;
|
|
}
|
|
|
|
.details-section {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 25px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 20px;
|
|
color: #212529;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 2px solid #dee2e6;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.section-title i {
|
|
margin-right: 10px;
|
|
color: #4361ee;
|
|
}
|
|
|
|
.details-content {
|
|
line-height: 1.8;
|
|
color: #495057;
|
|
}
|
|
|
|
.email-footer {
|
|
background: #f1f3f5;
|
|
padding: 25px;
|
|
text-align: center;
|
|
color: #868e96;
|
|
font-size: 0.9rem;
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: #495057;
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: #4361ee;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.email-header {
|
|
padding: 20px;
|
|
}
|
|
|
|
.email-body {
|
|
padding: 25px;
|
|
}
|
|
|
|
}
|
|
@media (max-width: 768px) {
|
|
.status-container {
|
|
flex-direction: column;
|
|
}
|
|
.status-item {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.left{
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
.right{
|
|
width: 100%;
|
|
}
|
|
.copper{
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="email-container">
|
|
<div class="email-header">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<i class="fas fa-user-tie"></i>
|
|
</div>
|
|
<h1>客户信息详情</h1>
|
|
<!--<p class="subtitle">此邮件包含客户详细信息及业务状态，请及时处理</p>-->
|
|
<div class="sn-badge">编号: {{order_no}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="email-body">
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<div class="card-title">
|
|
<i class="fas fa-user"></i> 客户名称
|
|
</div>
|
|
<div class="card-value">{{contacts}}</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<div class="card-title">
|
|
<i class="fas fa-phone"></i> 电话
|
|
</div>
|
|
<div class="card-value">{{tel}}</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<div class="card-title">
|
|
<i class="fas fa-globe"></i> 国家/地区
|
|
</div>
|
|
<div class="card-value">{{country}}</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<div class="card-title">
|
|
<i class="fas fa-chart-line"></i> 渠道
|
|
</div>
|
|
<div class="card-value">{{channel}}</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<div class="card-title">
|
|
<i class="fas fa-envelope"></i> 邮箱
|
|
</div>
|
|
<div class="card-value">{{email}}</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<div class="card-title">
|
|
<i class="fab fa-whatsapp"></i> WhatsApp
|
|
</div>
|
|
<div class="card-value">{{whatsapp}}</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<div class="card-title">
|
|
<i class="fas fa-user-plus"></i> 发布人
|
|
</div>
|
|
<div class="card-value">{{enter_user_id}}</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<div class="card-title">
|
|
<i class="fas fa-user-check"></i> 跟踪人
|
|
</div>
|
|
<div class="card-value">{{recipient}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-container">
|
|
<div class="left">
|
|
<div class="card-title">
|
|
<i class="fas fa-history"></i> 录单时间
|
|
</div>
|
|
<div class="card-value">{{r_time}}</div>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<div class="card-title">
|
|
<i class="fas fa-medal"></i> 商机等级
|
|
</div>
|
|
<div class="status-badge copper">{{quality}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="details-section">
|
|
<h3 class="section-title">
|
|
<i class="fas fa-file-alt"></i> 详情内容
|
|
</h3>
|
|
<div class="details-content">
|
|
{{content}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="email-footer">
|
|
<p>© 2025 客户关系管理系统 | 企业客户管理平台</p>
|
|
<div class="footer-links">
|
|
<a href="https://www.hnxinyouhe.com"><i class="fas fa-globe"></i> 公司官网</a>
|
|
<a href="https://www.hnxinyouhe.com"><i class="fas fa-headset"></i> 支持中心</a>
|
|
<a href="https://www.hnxinyouhe.com"><i class="fas fa-lock"></i> 隐私政策</a>
|
|
</div>
|
|
<p style="margin-top: 15px;">此邮件为系统自动生成，请勿直接回复</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 添加简单的交互效果
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const infoCards = document.querySelectorAll('.info-card');
|
|
|
|
infoCards.forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
this.classList.toggle('active');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |