98 lines
2.2 KiB
HTML
98 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Email Summary List</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
background-color: #f5f6fa;
|
|
}
|
|
|
|
.summary-container {
|
|
max-width: 900px;
|
|
margin: 40px auto;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.summary-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #f0f2f5;
|
|
padding: 12px 20px;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.summary-header > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.summary-header .subject {
|
|
flex: 2;
|
|
}
|
|
|
|
.summary-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 20px;
|
|
border-bottom: 1px solid #eee;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.summary-item:hover {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.summary-item > div {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.summary-item .subject {
|
|
flex: 2;
|
|
}
|
|
|
|
.summary-item.unread {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="summary-container">
|
|
<div class="summary-header">
|
|
<div>发件人</div>
|
|
<div class="subject">主题</div>
|
|
<div>接收时间</div>
|
|
</div>
|
|
|
|
<div class="summary-item unread">
|
|
<div>alice@example.com</div>
|
|
<div class="subject">会议安排及资料附件</div>
|
|
<div>2025-05-28 09:00</div>
|
|
</div>
|
|
|
|
<div class="summary-item">
|
|
<div>bob@example.com</div>
|
|
<div class="subject">周报 - 第21周</div>
|
|
<div>2025-05-27 18:23</div>
|
|
</div>
|
|
|
|
<div class="summary-item">
|
|
<div>carol@example.com</div>
|
|
<div class="subject">请审核新的 UI 原型</div>
|
|
<div>2025-05-27 16:15</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|