u
This commit is contained in:
oneao committed
1 parent
bcc4722efc
commit
f48536774f
403 files changed
+34776
No files matched your search
@@ -0,0 +1,298 @@
|
||||
<!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>
|
||||
Reference in new issue
Block a user