html
<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<title>上传文件弹窗‑任务队列美化版</title>
<style>
*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
body{background:#777;padding:48px;}
/* ========== 弹窗外层 ========== */
.modal-wrap{
width:1260px;
background:#ffffff;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,0.22);
padding:36px;
position:relative;
}
.modal-title{
font-size:26px;
font-weight:600;
color:#111827;
margin-bottom:26px;
}
.btn-close{
position:absolute;
top:30px;
right:30px;
width:36px;height:36px;
border-radius:50%;
border:1px solid #E5E7EB;
background:#F9FAFB;
cursor:pointer;
font-size:20px;
color:#6B7280;
transition:all 0.2s;
}
.btn-close:hover{
background:#E5E7EB;
}
/* ========== 分类下拉 ========== */
.form-label{
font-size:14px;
color:#6B7280;
margin-bottom:8px;
display:block;
}
.select-box{
width:100%;
height:50px;
border:1px solid #D1D5DB;
border-radius:12px;
padding:0 20px;
font-size:15px;
color:#111827;
appearance:none;
background:#fff;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6‑6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 18px center;
margin-bottom:28px;
cursor:pointer;
transition:border 0.2s;
}
.select-box:focus{
border-color:#165DFF;
outline:none;
}
/* ========== 上传任务总面板 大改版：增加阴影、分层、更强视觉 ========== */
.upload-task-panel{
border-radius:16px;
background:#F8FAFC;
box-shadow:inset 0 0 0 1px #E2E8F0;
padding:24px;
}
.task-header-row{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:16px;
}
.task-left-title h4{
font-size:19px;
color:#0F172A;
margin-bottom:6px;
font-weight:600;
}
.task-left-title p{
font-size:14px;
color:#64748B;
}
.task-count-wrap{
display:flex;
gap:12px;
}
.count-badge{
border:none;
color:#165DFF;
background:#E8F3FF;
font-size:14px;
font-weight:500;
padding:6px 14px;
border-radius:999px;
}
/* 全局进度 */
.progress-global-wrap{
margin-bottom:24px;
}
.progress-bar-outer{
width:100%;
height:12px;
background:#E2E8F0;
border-radius:999px;
overflow:hidden;
}
.progress-bar-inner{
width:80%;
height:100%;
background:linear-gradient(90deg,#15803d,#22c55e);
border-radius:999px;
}
.progress-percent{
font-size:14px;
color:#475569;
margin-top:8px;
font-weight:500;
}
/* ========== 单文件任务卡片 强化美化，卡片独立阴影 ========== */
.task-item{
background:#ffffff;
border-radius:14px;
box-shadow:0 2px 10px rgba(22,93,255,0.08);
padding:18px;
display:flex;
align-items:center;
gap:16px;
position:relative;
margin-bottom:20px;
border:1px solid #EFF6FF;
}
.task-thumb{
width:80px;
height:80px;
border-radius:10px;
object-fit:cover;
background:#F1F5F9;
}
.task-info{
flex:1;
}
.task-filename{
font-size:17px;
font-weight:600;
color:#0F172A;
margin-bottom:8px;
}
.task-meta{
font-size:14px;
color:#64748B;
display:flex;
gap:16px;
}
.task-status-tag{
position:absolute;
top:18px;
right:50px;
border:none;
color:#165DFF;
background:#E8F3FF;
font-size:14px;
font-weight:500;
padding:4px 14px;
border-radius:999px;
}
.task-close-btn{
position:absolute;
top:16px;
right:16px;
width:30px;height:30px;
border-radius:50%;
border:none;
background:#F1F5F9;
color:#475569;
cursor:pointer;
transition:all 0.2s;
}
.task-close-btn:hover{
background:#E2E8F0;
}
.item-progress-outer{
width:100%;
height:10px;
background:#E2E8F0;
border-radius:999px;
overflow:hidden;
margin-top:12px;
}
.item-progress-inner{
width:80%;
height:100%;
background:linear-gradient(90deg,#15803d,#22c55e);
border-radius:999px;
}
/* ========== 底部按钮 ========== */
.btn-footer-wrap{
display:flex;
justify-content:flex-end;
gap:16px;
margin-top:8px;
}
.btn-clear{
border:1px solid #CBD5E1;
background:#ffffff;
color:#475569;
font-size:16px;
padding:13px 30px;
border-radius:12px;
cursor:pointer;
transition:0.2s;
}
.btn-clear:hover{
background:#F8FAFC;
}
.btn-processing{
border:none;
background:#165DFF;
color:#fff;
font-size:16px;
padding:13px 30px;
border-radius:12px;
cursor:not-allowed;
opacity:0.82;
}
</style>
</head>
<body>
<div class="modal-wrap">
<h2 class="modal-title">上传文件（支持数字病理与常见图像格式）</h2>
<button class="btn-close">✕</button>
<label class="form-label">选择分类（可选）</label>
<select class="select-box">
<option>📁 未分类</option>
<option>🔬 病理标本‑A组</option>
<option>🧪 病理标本‑B组</option>
<option>🖼 普通图像库</option>
</select>
<div class="upload-task-panel">
<div class="task-header-row">
<div class="task-left-title">
<h4>正在预处理切片</h4>
<p>正在预处理切片：stag‑beetle_l3_flat.jpg</p>
</div>
<div class="task-count-wrap">
<span class="count-badge">1 个文件</span>
<span class="count-badge">1.83 MB</span>
</div>
</div>
<!-- 全局总进度 -->
<div class="progress-global-wrap">
<div class="progress-bar-outer">
<div class="progress-bar-inner"></div>
</div>
<div class="progress-percent">80%</div>
</div>
<!-- 单文件任务项 -->
<div class="task-item">
<img class="task-thumb" src="https://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rns2rl98/4011008139344148992f421008411311~tplv-a9rns2rl98-image.image" alt="预览图">
<div class="task-info">
<div class="task-filename">stag‑beetle_l3_flat.jpg</div>
<div class="task-meta">
<span>未分类</span>
<span>1.83 MB</span>
<span>80%</span>
<span>0.00 MB/s</span>
</div>
<div class="item-progress-outer">
<div class="item-progress-inner"></div>
</div>
</div>
<span class="task-status-tag">正在切片</span>
<button class="task-close-btn">✕</button>
</div>
<!-- 底部按钮 -->
<div class="btn-footer-wrap">
<button class="btn-clear">清空列表</button>
<button class="btn-processing">处理中...</button>
</div>
</div>
</div>
</body>
</html>