205 lines
3.7 KiB
HTML
205 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Download Progress UI Comparison</title>
|
||
|
||
<style>
|
||
/* =========================
|
||
Base Layout
|
||
========================= */
|
||
body {
|
||
margin: 0;
|
||
font-family: Arial;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.page {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.header,
|
||
.footer {
|
||
padding: 12px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.footer {
|
||
border-top: 1px solid #eee;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
padding: 16px;
|
||
}
|
||
|
||
/* =========================
|
||
🔴 方案 A：嵌入式进度条
|
||
========================= */
|
||
.embedded-bar {
|
||
background: #fff7e6;
|
||
border: 1px solid #ffe58f;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.embedded-bar .row {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.embedded-bar .actions {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.embedded-bar button {
|
||
border: 1px solid #ddd;
|
||
background: #fff;
|
||
padding: 4px 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* =========================
|
||
🟢 方案 B：浮层 Dock（推荐）
|
||
========================= */
|
||
.download-dock {
|
||
position: fixed;
|
||
right: 20px;
|
||
bottom: 20px;
|
||
width: 320px;
|
||
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
|
||
|
||
overflow: hidden;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.dock-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 12px;
|
||
background: #f6f6f6;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.dock-actions button {
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.dock-body {
|
||
padding: 12px;
|
||
}
|
||
|
||
.progress-line {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 13px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.current-file {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.bar {
|
||
height: 6px;
|
||
background: #eee;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bar-inner {
|
||
width: 45%;
|
||
height: 100%;
|
||
background: #faad14;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="page">
|
||
|
||
<div class="header">File Manager Header</div>
|
||
|
||
<div class="content">
|
||
|
||
<!-- =========================
|
||
🔴 方案 A：嵌入式
|
||
========================== -->
|
||
<div class="embedded-bar">
|
||
<div class="row">
|
||
<span>Downloading</span>
|
||
<span>3 / 10</span>
|
||
<span>report.pdf</span>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<button>Hide</button>
|
||
<button>Cancel</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p>File list area...</p>
|
||
<p>Scroll content...</p>
|
||
<p>Scroll content...</p>
|
||
<p>Scroll content...</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer">Footer</div>
|
||
|
||
</div>
|
||
|
||
<!-- =========================
|
||
🟢 方案 B：浮层 Dock
|
||
========================= -->
|
||
<div class="download-dock">
|
||
<div class="dock-header">
|
||
<span>Downloading</span>
|
||
|
||
<div class="dock-actions">
|
||
<button title="minimize">−</button>
|
||
<button title="close">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dock-body">
|
||
<div class="progress-line">
|
||
<span>3 / 10</span>
|
||
<span>30%</span>
|
||
</div>
|
||
|
||
<div class="current-file">
|
||
report.pdf
|
||
</div>
|
||
|
||
<div class="bar">
|
||
<div class="bar-inner"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html> |