<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的资源</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body {
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:#F2F3F5;
color:#1D2939;
}
.admin-wrap{
display:flex;
min-height:100vh;
}
/* 侧边栏 */
.sidebar{
width:220px;
background:#ffffff;
border-right:1px solid #E5E6EB;
padding:20px 0;
}
.sidebar-logo{
padding:0 16px 24px;
}
.sidebar-logo svg{width:32px;height:32px;}
.sidebar .menu-item{
padding:11px 20px;
cursor:pointer;
display:flex;
align-items:center;
gap:8px;
}
.sidebar .menu-item.active{
background:#E8F3FF;
color:#165DFF;
border-right:3px solid #165DFF;
}
.main-content{
flex:1;
padding:24px;
}
.page-top-bar{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:center;
background:#fff;
padding:16px 20px;
border-radius:10px;
margin-bottom:16px;
}
.btn-blue{
background:#165DFF;
color:#fff;
border:none;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
display:flex;
align-items:center;
gap:4px;
}
.btn-outline{
border:1px solid #165DFF;
color:#165DFF;
background:#fff;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
display:flex;
align-items:center;
gap:4px;
}
.search-wrap{
flex:1;
display:flex;
align-items:center;
}
.search-wrap input{
border:1px solid #DCDFE6;
padding:8px 14px;
border-radius:6px;
width:260px;
}
.top-right-group{
display:flex;
gap:10px;
}
/* 资源卡片网格 */
.resource-list-wrap{
display:grid;
grid-template-columns: repeat(5,1fr);
gap:16px;
}
.resource-card{
background:#ffffff;
border-radius:10px;
border:1px solid #E5E6EB;
overflow:hidden;
transition:0.2s;
}
.resource-card:hover{
box-shadow:0 4px 14px rgba(22,93,255,0.08);
}
.card-preview-area{
position:relative;
height:180px;
background:#f7f8fa;
}
.card-preview-area .check-box{
position:absolute;
top:8px;
left:8px;
z-index:2;
}
.card-preview-area .status-tag{
position:absolute;
top:8px;
right:8px;
background:#e6f8ed;
color:#00b42a;
font-size:11px;
padding:2px 6px;
border-radius:4px;
}
.card-preview-area img{
width:100%;
height:100%;
object-fit:contain;
}
.card-body{
padding:14px;
}
.card-filename{
font-size:13px;
margin-bottom:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:flex;
justify-content:space-between;
align-items:center;
}
/* 分类选择，移入卡片内部 */
.card-category-row{
display:flex;
align-items:center;
gap:8px;
margin-bottom:14px;
}
.card-category-row select{
flex:1;
border:1px solid #DCDFE6;
padding:4px 6px;
border-radius:4px;
}
.file-meta-row{
display:flex;
gap:6px;
align-items:center;
flex-wrap:wrap;
margin-bottom:14px;
}
.tag-cat{
font-size:11px;
background:#F2F3F5;
color:#666;
padding:2px 7px;
border-radius:4px;
}
.tag-size{
font-size:11px;
background:#F2F3F5;
color:#666;
padding:2px 7px;
border-radius:4px;
}
.tag-ext{
font-size:11px;
background:#E6F8ED;
color:#00B42A;
padding:2px 7px;
border-radius:4px;
}
/* 底部操作图标 */
.card-op-bar{
display:flex;
justify-content:space-between;
}
.card-op-bar button{
background:none;
border:none;
cursor:pointer;
color:#606266;
font-size:16px;
padding:2px;
}
/* 分页 */
.pagination-wrap{
margin-top:20px;
display:flex;
justify-content:space-between;
align-items:center;
background:#fff;
padding:14px 18px;
border-radius:10px;
}
.pagination-right{
display:flex;
gap:6px;
align-items:center;
}
.pagination-right input{
width:46px;
border:1px solid #DCDFE6;
padding:4px;
text-align:center;
border-radius:4px;
}
.page-btn{
border:1px solid #DCDFE6;
background:#fff;
padding:5px 10px;
border-radius:4px;
cursor:pointer;
}
.page-btn.active{
background:#165DFF;
color:#fff;
border-color:#165DFF;
}
/* 右上角用户 */
.top-user-box{
position:fixed;
top:14px;
right:20px;
display:flex;
align-items:center;
gap:8px;
}
.storage-text{
color:#667085;
}
</style>
</head>
<body>
<div class="admin-wrap">
<div class="sidebar">
<div class="sidebar-logo">
<div style="width:32px;height:32px;background:#165DFF;border-radius:6px;"></div>
</div>
<div class="menu-item">控制台</div>
<div class="menu-item active">我的资源</div>
<div class="menu-item">合集管理</div>
<div class="menu-item">分享管理</div>
<div class="menu-item">个人资料</div>
<div class="menu-item">我要留言</div>
</div>
<div class="main-content">
<!--顶部工具栏，移除独立【分类管理】按钮，分类放到卡片内部-->
<div class="page-top-bar">
<button class="btn-blue">⇧ 上传</button>
<button class="btn-outline">全部资源 <span style="background:#165DFF;color:#fff;padding:0 4px;border-radius:8px;font-size:11px;">5</span></button>
<div class="search-wrap">
<input placeholder="按文件名、分类或标签搜索">
<button style="border:none;background:#fff;margin-left:-28px;">🔍</button>
</div>
<select style="border:1px solid #DCDFE6;padding:7px;border-radius:6px;">
<option>全部状态</option>
</select>
<button class="btn-outline">清空筛选</button>
<div class="top-right-group">
<button class="btn-outline">批量操作</button>
<button class="btn-outline">重复检测</button>
<button class="btn-outline">上传历史</button>
<button class="btn-outline">⟳ 刷新</button>
<button class="btn-outline">🗑 回收站</button>
</div>
</div>
<!--资源卡片列表，每个卡片内部自带分类下拉选择器-->
<div class="resource-list-wrap">
<!--卡片1-->
<div class="resource-card">
<div class="card-preview-area">
<input type="checkbox" class="check-box">
<span class="status-tag">已完成</span>
<img src="https://picsum.photos/id/1058/300/180" alt="">
</div>
<div class="card-body">
<div class="card-filename">
<span>white‑short‑nosed‑we…</span>
<span>🖉</span>
</div>
<!--分类移入卡片内部：下拉选择分类-->
<div class="card-category-row">
<select>
<option>未分类</option>
<option>病理A组</option>
<option>昆虫标本</option>
</select>
</div>
<div class="file-meta-row">
<span class="tag-cat">未分类</span>
<span class="tag-size">6.21 MB</span>
<span class="tag-ext">JPG</span>
</div>
<div class="card-op-bar">
<div>
<button>👁</button>
<button>ⓘ</button>
<button>☁</button>
<button>🔗</button>
</div>
<button>✕</button>
</div>
</div>
</div>
<!--卡片2-->
<div class="resource-card">
<div class="card-preview-area">
<input type="checkbox" class="check-box">
<span class="status-tag">已完成</span>
<img src="https://picsum.photos/id/1060/300/180" alt="">
</div>
<div class="card-body">
<div class="card-filename">
<span>wasp‑mimic‑hoverfly_l…</span>
<span>🖉</span>
</div>
<div class="card-category-row">
<select>
<option>未分类</option>
<option>病理A组</option>
<option>昆虫标本</option>
</select>
</div>
<div class="file-meta-row">
<span class="tag-cat">未分类</span>
<span class="tag-size">2.35 MB</span>
<span class="tag-ext">JPG</span>
</div>
<div class="card-op-bar">
<div>
<button>👁</button>
<button>ⓘ</button>
<button>☁</button>
<button>🔗</button>
</div>
<button>✕</button>
</div>
</div>
</div>
<!--卡片3-->
<div class="resource-card">
<div class="card-preview-area">
<input type="checkbox" class="check-box">
<span class="status-tag">已完成</span>
<img src="https://picsum.photos/id/1063/300/180" alt="">
</div>
<div class="card-body">
<div class="card-filename">
<span>tricolored‑jewel‑beetle…</span>
<span>🖉</span>
</div>
<div class="card-category-row">
<select>
<option>未分类</option>
<option>病理A组</option>
<option>昆虫标本</option>
</select>
</div>
<div class="file-meta-row">
<span class="tag-cat">未分类</span>
<span class="tag-size">2.80 MB</span>
<span class="tag-ext">JPG</span>
</div>
<div class="card-op-bar">
<div>
<button>👁</button>
<button>ⓘ</button>
<button>☁</button>
<button>🔗</button>
</div>
<button>✕</button>
</div>
</div>
</div>
<!--卡片4-->
<div class="resource-card">
<div class="card-preview-area">
<input type="checkbox" class="check-box">
<span class="status-tag">已完成</span>
<img src="https://picsum.photos/id/1024/300/180" alt="">
</div>
<div class="card-body">
<div class="card-filename">
<span>tortoise‑beetle_l3_flat</span>
<span>🖉</span>
</div>
<div class="card-category-row">
<select>
<option>未分类</option>
<option>病理A组</option>
<option>昆虫标本</option>
</select>
</div>
<div class="file-meta-row">
<span class="tag-cat">未分类</span>
<span class="tag-size">2.07 MB</span>
<span class="tag-ext">JPG</span>
</div>
<div class="card-op-bar">
<div>
<button>👁</button>
<button>ⓘ</button>
<button>☁</button>
<button>🔗</button>
</div>
<button>✕</button>
</div>
</div>
</div>
<!--卡片5-->
<div class="resource-card">
<div class="card-preview-area">
<input type="checkbox" class="check-box">
<span class="status-tag">已完成</span>
<img src="https://picsum.photos/id/1025/300/180" alt="">
</div>
<div class="card-body">
<div class="card-filename">
<span>tiger‑beetle_l3_flat</span>
<span>🖉</span>
</div>
<div class="card-category-row">
<select>
<option>未分类</option>
<option>病理A组</option>
<option>昆虫标本</option>
</select>
</div>
<div class="file-meta-row">
<span class="tag-cat">未分类</span>
<span class="tag-size">1.43 MB</span>
<span class="tag-ext">JPG</span>
</div>
<div class="card-op-bar">
<div>
<button>👁</button>
<button>ⓘ</button>
<button>☁</button>
<button>🔗</button>
</div>
<button>✕</button>
</div>
</div>
</div>
</div>
<!--分页栏完整功能-->
<div class="pagination-wrap">
<span>共 5 条数据</span>
<div class="pagination-right">
<button class="page-btn">上一页</button>
<button class="page-btn active">1</button>
<button class="page-btn">下一页</button>
<span>跳至</span>
<input value="1">
<span>页</span>
<button class="btn-blue">跳转</button>
</div>
</div>
</div>
<div class="top-user-box">
<div class="storage-text">存储占用：0 B / 300 MB</div>
<div style="display:flex;align-items:center;gap:6px;border:1px solid #DCDFE6;padding:4px 8px;border-radius:20px;">
<div style="width:24px;height:24px;background:#165DFF;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;">x</div>
<span>xin</span>
</div>
</div>
</div>
</body>
</html>
400 186 1886
