vue3实现PC端邮箱邮件客户端代码
代码语言:html
所属分类:布局界面
代码描述:vue3实现PC端邮箱邮件客户端代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue3 邮件客户端</title> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } body { background-color: #f8f9fa; color: #202124; height: 100vh; overflow: hidden; } .container { display: flex; height: 100vh; } /* 左侧导航栏 */ .sidebar { width: 240px; background-color: #ffffff; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; padding: 16px 8px; } .compose-btn { background-color: #1a73e8; color: white; border: none; border-radius: 4px; padding: 12px 24px; margin: 0 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .compose-btn:hover { background-color: #1967d2; } .nav-menu { list-style: none; margin-top: 8px; flex-grow: 1; } .nav-item { padding: 10px 16px; margin: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; color: #5f6368; transition: background-color 0.2s; } .nav-item.active { background-color: #e8f0fe; color: #1a73e8; font-weight: 500; } .nav-item:hover:not(.active) { background-color: #f1f3f4; } .nav-item i { margin-right: 16px; font-size: 18px; } .nav-item .badge { margin-left: auto; background-color: #e8eaed; color: #5f6368; border-radius: 10px; padding: 0 8px; font-size: 12px; } /* 中间邮件列表 */ .mail-list-container { width: 35%; background-color: #ffffff; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; overflow: hidden; } .mail-list-header { padding: 16px 24px; border-bottom: 1px solid #e0e0e0; font-size: 18px; font-weight: 500; color: #202124; display: flex; justify-content: space-between; align-items: center; } .search-bar { display: flex; padding: 8px 16px; background-color: #f1f3f4; border-radius: 8px; margin: 0 16px 16px; } .search-bar input { background: transparent; border: none; outline: none; flex-grow: 1; font-size: 14px; } .mail-list { list-style: none; overflow-y: auto; flex: 1; } .mail-item { padding: 12px 24px; border-bottom: 1px solid #e0e0e0; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; } .mail-item:hover { background-color: #f8f9fa; } .mail-item.active { background-color: #e8f0fe; border-left: 3px solid #1a73e8; } .mail-checkbox { margin-right: 16px; } .mail-star { margin-right: 16px; color: #5f6368; cursor: pointer; } .mail-star.starred { color: #fbbc04; } .mail-content { flex-grow: 1; min-width: 0; } .mail-sender { font-weight: 500; font-size: 14px; margin-bottom: 4px; color: #202124; } .mail-subject { font-size: 14px; margin-bottom: 4px; color: #202124; display: flex; } .mail-subject span { flex-shrink: 0; } .mail-preview { font-size: 13px; color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mail-date { font-size: 12px; color: #5f6368; white-space: nowrap; margin-left: 16px; } /* 右侧邮件详情 */ .mail-detail { flex: 1; background-color: #ffffff; display: flex; flex-direction: column; overflow: hidden; } .mail-detail-header { padding: 24px; border-bottom: 1px solid #e0e0e0; } .mail-detail-actions { display: flex; gap: 8px; margin-bottom: 16px; } .detail-action-btn { background: none; border: none; cursor: pointer; color: #5f6368; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; } .detail-action-btn:hover { background-color: #f1f3f4; } .sender-info { display: flex; align-items: center; margin-bottom: 20px; } .avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #ea4335; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; margin-right: 12px; } .sender-details { flex: 1; } .sender-name { font-weight: 500; font-size: 16px; margin-bottom: 2px; } .sender-email { font-size: 14px; color: #5f6368; } .mail-date-detail { font-size: 14px; color: #5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0