<!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;
font-family: system-ui, -apple-system, "Microsoft YaHei", sans-serif;
}
body {
background-color: #f7f9fc;
padding: 32px;
}
.container-wrap {
max-width: 1440px;
}
.page-title {
font-size: 22px;
font-weight: 600;
color: #1d2129;
margin-bottom: 20px;
}
/* 搜索筛选区域 */
.search-filter-card {
background: #ffffff;
border-radius:14px;
padding:20px 24px;
box-shadow: 0 2px 14px rgba(22,93,255,0.06);
border: 1px solid #eef2fb;
margin-bottom:20px;
}
.filter-title {
font-size:15px;
font-weight:600;
color:#333;
margin-bottom:14px;
}
.filter-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 120px;
gap:16px;
align-items: end;
}
.filter-item label {
display:block;
color:#86909c;
margin-bottom:6px;
}
.filter-item input,
.filter-item select {
width:100%;
height:38px;
padding:0 14px;
border:1px solid #dcdfe6;
border-radius:8px;
}
.btn-search {
height:38px;
background:#165DFF;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
}
/*资源列表容器*/
.resource-list-card {
background:#ffffff;
border-radius:14px;
box-shadow: 0 2px 14px rgba(22,93,255,0.06);
border:1px solid #eef2fb;
overflow:hidden;
}
.list-header-text {
padding:18px 24px 8px;
font-size:15px;
font-weight:600;
color:#333;
}
.resource-item {
display:flex;
align-items:center;
padding:20px 24px;
border-bottom: 1px solid #f0f2f7;
gap:20px;
transition: background 0.2s;
}
.resource-item:hover {
background-color:#f7faff;
}
.resource-item:last-child{
border-bottom:none;
}
/* 禁用条目样式 */
.resource-item.item-disabled{
opacity:0.62;
pointer-events:none;
}
.resource-item.item-disabled:hover{
background:#fff;
}
/*缩略图 可点击预览*/
.res-thumb {
width:80px;
height:80px;
border-radius:8px;
background:#4070d8;
flex-shrink:0;
cursor:pointer;
overflow:hidden;
border:1px solid #e2e8f0;
}
.res-thumb img{
width:100%;
height:100%;
object-fit:cover;
}
/*文件信息*/
.res-info {
flex:1;
}
.res-name-row {
display:flex;
align-items:center;
gap:10px;
margin-bottom:6px;
}
.res-filename {
font-size:16px;
font-weight:600;
color:#1d2129;
}
.tag-success {
font-size:11px;
background:#e6f9e9;
color:#00b42a;
padding:2px 7px;
border-radius:4px;
}
.tag-disabled{
font-size:11px;
background:#ffe9e9;
color:#f53f3f;
padding:2px 7px;
border-radius:4px;
}
.res-meta {
font-size:13px;
color:#86909c;
line-height:1.6;
}
/*右侧按钮组*/
.res-action-group {
display:flex;
gap:8px;
flex-shrink:0;
}
.btn-preview {
background:#165DFF;
color:#fff;
border:none;
padding:8px 14px;
border-radius:7px;
cursor:pointer;
}
.btn-preview:disabled{
background:#b4c4e8;
cursor:not-allowed;
}
.btn-toggle-disable{
border:1px solid #ff7d00;
color:#ff7d00;
background:#fff;
padding:8px 14px;
border-radius:7px;
cursor:pointer;
}
.btn-delete {
border:1px solid #f53f3f;
color:#f53f3f;
background:#fff;
padding:8px 14px;
border-radius:7px;
cursor:pointer;
}
/*分页栏*/
.page-bar-wrap{
padding:16px 24px;
display:flex;
justify-content:flex-end;
align-items:center;
border-top:1px solid #f0f2f7;
gap:14px;
}
.page-total{
font-size:13px;
color:#86909c;
}
.page-btn{
min-width:32px;
height:32px;
padding:0 8px;
border:1px solid #dcdfe6;
background:#fff;
border-radius:6px;
cursor:pointer;
}
.page-btn.active{
background:#165DFF;
color:#fff;
border-color:#165DFF;
}
.page-input{
width:54px;
height:32px;
border:1px solid #dcdfe6;
border-radius:6px;
text-align:center;
}
/*图片预览弹窗*/
.preview-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.75);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}
.preview-modal.show{
display:flex;
}
.preview-inner{
max-width:85vw;
max-height:85vh;
}
.preview-inner img{
max-width:100%;
max-height:85vh;
border-radius:8px;
}
.preview-close{
position:absolute;
top:24px;
right:32px;
color:#fff;
font-size:32px;
cursor:pointer;
}
@media(max-width:1100px){
.filter-row{
grid-template-columns:1fr 1fr;
}
.resource-item{
flex-wrap:wrap;
}
.page-bar-wrap{
flex-wrap:wrap;
justify-content:flex-start;
}
}
</style>
</head>
<body>
<div class="container-wrap">
<div class="page-title">资源管理</div>
<!--搜索筛选区域-->
<div class="search-filter-card">
<div class="filter-title">搜索和筛选</div>
<div class="filter-row">
<div class="filter-item">
<label>搜索</label>
<input type="text" placeholder="输入文件名搜索">
</div>
<div class="filter-item">
<label>用户</label>
<select>
<option>全部用户</option>
</select>
</div>
<div class="filter-item">
<label>状态</label>
<select>
<option>全部状态</option>
</select>
</div>
<div class="filter-item">
<button class="btn-search">🔍 搜索</button>
</div>
</div>
</div>
<!--资源列表-->
<div class="resource-list-card">
<div class="list-header-text">资源列表</div>
<!--正常可用资源-->
<div class="resource-item">
<div class="res-thumb" data-img="https://picsum.photos/id/1025/800/600">
<img src="https://picsum.photos/id/1025/80/80" alt="">
</div>
<div class="res-info">
<div class="res-name-row">
<div class="res-filename">stag‑beetle_l3_flat.jpg</div>
<span class="tag-success">已完成</span>
</div>
<div class="res-meta">
用户：xin 文件大小：2 MB<br>
上传时间：2026‑08‑06 19:00:26 类型：JPG
</div>
</div>
<div class="res-action-group">
<button class="btn-preview">👁 预览</button>
<button class="btn-toggle-disable">禁用</button>
<button class="btn-delete">✕ 删除</button>
</div>
</div>
<!--已禁用资源示例-->
<div class="resource-item item-disabled">
<div class="res-thumb" data-img="https://picsum.photos/id/1035/800/600">
<img src="https://picsum.photos/id/1035/80/80" alt="">
</div>
<div class="res-info">
<div class="res-name-row">
<div class="res-filename">24MB.svs</div>
<span class="tag-disabled">已禁用</span>
</div>
<div class="res-meta">
用户：xin 文件大小：25 MB<br>
上传时间：2026‑08‑06 18:52:58 类型：SVS
</div>
</div>
<div class="res-action-group">
<button class="btn-preview" disabled>👁 预览</button>
<button class="btn-toggle-disable">启用</button>
<button class="btn-delete">✕ 删除</button>
</div>
</div>
<!--分页栏-->
<div class="page-bar-wrap">
<span class="page-total">共 23 条，总共 3 页</span>
<button class="page-btn">上一页</button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">下一页</button>
<input class="page-input" placeholder="页">
<button class="page-btn">跳转</button>
</div>
</div>
</div>
<!--图片预览弹窗-->
<div class="preview-modal" id="previewModal">
<div class="preview-close" id="previewClose">×</div>
<div class="preview-inner">
<img id="previewImg" src="" alt="大图预览">
</div>
</div>
<script>
//缩略图点击预览弹窗
const modal = document.getElementById('previewModal');
const previewImg = document.getElementById('previewImg');
const closeBtn = document.getElementById('previewClose');
const thumbList = document.querySelectorAll('.res-thumb');
thumbList.forEach(thumb=>{
thumb.onclick = function(){
const bigImgUrl = this.getAttribute('data-img');
previewImg.src = bigImgUrl;
modal.classList.add('show');
}
})
closeBtn.onclick = ()=> modal.classList.remove('show');
modal.onclick = (e)=>{
if(e.target === modal) modal.classList.remove('show');
}
</script>
</body>
</html>
400 186 1886
