u

code/email/Email-Vue/test.html

@@ -0,0 +1,97 @@
+<!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>