299 lines
8.3 KiB
HTML
299 lines
8.3 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>在线邮箱 - Foxmail 风格</title>
|
||
|
||
<!-- 引入 Bootstrap CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
|
||
<style>
|
||
body {
|
||
background-color: #f5f5f5;
|
||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.container-fluid {
|
||
display: flex;
|
||
height: 100vh;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 左侧栏 */
|
||
.sidebar {
|
||
background-color: #ffffff;
|
||
border-right: 1px solid #e3e4e8;
|
||
width: 250px;
|
||
padding: 1rem;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar h5 {
|
||
margin-bottom: 1rem;
|
||
font-size: 18px;
|
||
color: #333;
|
||
}
|
||
|
||
.sidebar .mail-sidebar-item {
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.sidebar .mail-sidebar-item:hover {
|
||
background-color: #007bff;
|
||
color: white;
|
||
}
|
||
|
||
.sidebar .mail-sidebar-item i {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.compose-btn {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
background-color: #007bff;
|
||
color: white;
|
||
border: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 50%;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.compose-btn:hover {
|
||
background-color: #0056b3;
|
||
}
|
||
|
||
/* 邮件内容区域 */
|
||
.mail-content {
|
||
flex-grow: 1;
|
||
padding: 15px;
|
||
background-color: #ffffff;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.mail-header {
|
||
border-bottom: 1px solid #e3e4e8;
|
||
padding: 10px;
|
||
background-color: #ffffff;
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.mail-header strong {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.mail-list-item {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #e3e4e8;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.mail-list-item:hover {
|
||
background-color: #f6f7f9;
|
||
}
|
||
|
||
.mail-list-item .info {
|
||
flex: 1;
|
||
}
|
||
|
||
.pagination {
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.search-bar {
|
||
width: 100%;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.top-bar {
|
||
background-color: #ffffff;
|
||
padding: 10px 20px;
|
||
border-bottom: 1px solid #e3e4e8;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.top-bar .account-select {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.email-detail-header {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.email-detail-body {
|
||
white-space: pre-wrap;
|
||
margin-top: 10px;
|
||
font-size: 1rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container-fluid">
|
||
<!-- 左侧栏 -->
|
||
<div class="sidebar">
|
||
<div class="top-bar">
|
||
<select class="form-select account-select" id="accountSelect">
|
||
<option value="1">example1@example.com</option>
|
||
<option value="2">example2@example.com</option>
|
||
</select>
|
||
</div>
|
||
|
||
<h5>文件夹</h5>
|
||
<ul id="folderList" class="list-unstyled">
|
||
<!-- 动态加载文件夹列表 -->
|
||
</ul>
|
||
|
||
<button class="btn compose-btn">
|
||
<i class="bi bi-pencil"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 邮件内容区域 -->
|
||
<div class="mail-content">
|
||
<!-- 顶部邮件操作栏 -->
|
||
<div class="mail-header">
|
||
<div>
|
||
<strong>收件箱</strong>
|
||
<small class="text-muted">（100封未读）</small>
|
||
</div>
|
||
<div>
|
||
<button class="btn btn-outline-secondary btn-sm">
|
||
<i class="bi bi-arrow-clockwise"></i>
|
||
刷新
|
||
</button>
|
||
<button class="btn btn-outline-secondary btn-sm">
|
||
<i class="bi bi-trash"></i>
|
||
删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 搜索框 -->
|
||
<input type="text" class="form-control search-bar" placeholder="搜索邮件" />
|
||
|
||
<!-- 邮件列表 -->
|
||
<div id="mailList" class="list-group">
|
||
<!-- 动态加载邮件列表 -->
|
||
</div>
|
||
|
||
<!-- 邮件详情显示 -->
|
||
<div id="emailDetail" class="email-detail-body">
|
||
<!-- 动态加载邮件详情 -->
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="pagination">
|
||
<nav>
|
||
<ul class="pagination">
|
||
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引入 Bootstrap 和 jQuery 库 -->
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<script>
|
||
const accounts = {
|
||
1: {
|
||
name: "example1@example.com",
|
||
folders: ["收件箱", "已发送", "草稿", "垃圾邮件", "星标邮件"],
|
||
emails: [
|
||
{ id: 1, sender: "张三", subject: "会议通知", date: "2025-05-06", content: "请查看会议时间，提前做好准备。" },
|
||
{ id: 2, sender: "李四", subject: "工作日报", date: "2025-05-05", content: "请查看工作日报。" }
|
||
]
|
||
},
|
||
2: {
|
||
name: "example2@example.com",
|
||
folders: ["收件箱", "草稿", "已发送", "垃圾邮件"],
|
||
emails: [
|
||
{ id: 3, sender: "王五", subject: "假期安排", date: "2025-05-04", content: "请查看假期安排。" },
|
||
{ id: 4, sender: "赵六", subject: "项目更新", date: "2025-05-03", content: "请查看项目更新。" }
|
||
]
|
||
}
|
||
};
|
||
|
||
function loadFolders(accountId) {
|
||
const folders = accounts[accountId].folders;
|
||
const folderList = $("#folderList");
|
||
folderList.empty();
|
||
folders.forEach((folder) => {
|
||
folderList.append(`
|
||
<li class="mail-sidebar-item">
|
||
<i class="bi bi-folder"></i> ${folder}
|
||
</li>
|
||
`);
|
||
});
|
||
}
|
||
|
||
function loadEmails(accountId) {
|
||
const emails = accounts[accountId].emails;
|
||
const mailList = $("#mailList");
|
||
mailList.empty();
|
||
emails.forEach((email) => {
|
||
mailList.append(`
|
||
<div class="mail-list-item" data-id="${email.id}">
|
||
<div class="info">
|
||
<strong>${email.sender}</strong> - ${email.subject}
|
||
</div>
|
||
<div class="text-muted">${email.date}</div>
|
||
</div>
|
||
`);
|
||
});
|
||
}
|
||
|
||
$(document).ready(function () {
|
||
// 默认加载第一个账户的文件夹和邮件
|
||
loadFolders(1);
|
||
loadEmails(1);
|
||
|
||
// 切换账户时加载文件夹和邮件
|
||
$("#accountSelect").on("change", function () {
|
||
const accountId = $(this).val();
|
||
loadFolders(accountId);
|
||
loadEmails(accountId);
|
||
});
|
||
|
||
// 点击邮件查看邮件内容
|
||
$("#mailList").on("click", ".mail-list-item", function () {
|
||
const emailId = $(this).data("id");
|
||
const accountId = $("#accountSelect").val();
|
||
const email = accounts[accountId].emails.find((e) => e.id === emailId);
|
||
|
||
$("#emailDetail").html(`
|
||
<div class="email-detail-header"><strong>${email.subject}</strong></div>
|
||
<div>来自: ${email.sender}</div>
|
||
<div>内容: ${email.content}</div>
|
||
`);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|