169 lines
2.7 KiB
HTML
169 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>附件管理示例</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #f5f7fa;
|
|
padding: 20px;
|
|
}
|
|
|
|
```
|
|
/* 顶部工具栏 */
|
|
.file-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
background: #fff;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.file-toolbar button {
|
|
padding: 4px 10px;
|
|
border: 1px solid #ccc;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 列表 */
|
|
.file-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: #fff;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.file-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.file-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* hover */
|
|
.file-item:hover {
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
/* 模拟选中状态 */
|
|
.file-item.active {
|
|
background: #e6f7ff;
|
|
}
|
|
|
|
/* checkbox */
|
|
.file-select {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* 文件名 */
|
|
.file-name {
|
|
flex: 1;
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.file-name:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 操作区 */
|
|
.file-actions {
|
|
display: none;
|
|
gap: 6px;
|
|
}
|
|
|
|
.file-item:hover .file-actions {
|
|
display: flex;
|
|
}
|
|
|
|
.file-actions button {
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.file-actions button:hover {
|
|
background: #eee;
|
|
border-radius: 4px;
|
|
}
|
|
```
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 工具栏 -->
|
|
|
|
<div class="file-toolbar">
|
|
<span>已选 0 个</span>
|
|
<button>删除</button>
|
|
<button>下载</button>
|
|
</div>
|
|
|
|
<!-- 文件列表 -->
|
|
|
|
<ul class="file-list">
|
|
<li class="file-item active">
|
|
<label class="file-select">
|
|
<input type="checkbox" checked />
|
|
</label>
|
|
|
|
```
|
|
<span class="file-name">合同.pdf</span>
|
|
|
|
<div class="file-actions">
|
|
<button title="预览">👁</button>
|
|
<button title="下载">⬇</button>
|
|
<button title="删除">🗑</button>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="file-item">
|
|
<label class="file-select">
|
|
<input type="checkbox" />
|
|
</label>
|
|
|
|
<span class="file-name">图片.png</span>
|
|
|
|
<div class="file-actions">
|
|
<button title="预览">👁</button>
|
|
<button title="下载">⬇</button>
|
|
<button title="删除">🗑</button>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="file-item">
|
|
<label class="file-select">
|
|
<input type="checkbox" />
|
|
</label>
|
|
|
|
<span class="file-name">说明文档.docx</span>
|
|
|
|
<div class="file-actions">
|
|
<button title="预览">👁</button>
|
|
<button title="下载">⬇</button>
|
|
<button title="删除">🗑</button>
|
|
</div>
|
|
</li>
|
|
```
|
|
|
|
</ul>
|
|
|
|
</body>
|
|
</html>
|