console
<!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: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
display: flex;
min-height: 100vh;
background-color: #f0f2f5;
}
.sidebar {
width: 240px;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.sidebar-section {
margin-bottom: 20px;
}
.sidebar-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.sidebar-content {
font-size: 14px;
color: #666;
line-height: 1.6;
}
.certificate-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 10px;
}
.certificate {
border: 1px solid #e0e0e0;
border-radius: 4px;
height: 60px;
background-color: #f9f9f9;
}
.expand-btn {
color: #1890ff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
margin-top: 5px;
}
.main-content {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.image-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.image-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.image-container {
position: relative;
height: 130px;
overflow: hidden;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.zoom-icon {
position: absolute;
right: 8px;
bottom: 8px;
background-color: rgba(0,0,0,0.5);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.image-info {
padding: 10px;
}
.image-status {
font-size: 14px;
color: #333;
margin-bottom: 5px;
}
.image-category {
font-size: 12px;
color: #666;
margin-bottom: 3px;
}
.image-type {
font-size: 12px;
color: #666;
margin-bottom: 10px;
}
.tag-container {
position: absolute;
top: 8px;
left: 8px;
display: flex;
gap: 5px;
}
.tag {
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
color: white;
}
.tag-hot {
background-color: #ff4d4f;
}
.tag-vip {
background-color: #faad14;
}
.tag-new {
background-color: #52c41a;
}
.review-status {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 16px;
font-weight: bold;
text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.action-buttons {
display: flex;
justify-content: space-between;
padding: 10px;
border-top: 1px solid #f0f0f0;
}
.btn {
padding: 5px 15px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
border: 1px solid #d9d9d9;
background-color: white;
transition: all 0.3s;
}
.btn-primary {
color: #1890ff;
border-color: #1890ff;
}
.btn-primary:hover {
background-color: #e6f7ff;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(135deg, #e6f7ff 25%, #d6ecff 25%, #d6ecff 50%, #e6f7ff 50%, #e6f7ff 75%, #d6ecff 75%);
background-size: 20px 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.timer {
display: flex;
align-items: center;
}
.timer-value {
font-size: 18px;
font-weight: bold;
color: #1890ff;
margin: 0 5px;
}
.timer-label {
font-size: 14px;
color: #666;
}
.footer-actions {
display: flex;
gap: 10px;
}
.btn-blue {
background-color: #1890ff;
color: white;
border: none;
padding: 6px 16px;
border-radius: 4px;
cursor: pointer;
}
.btn-blue:hover {
background-color: #40a9ff;
}
.divider {
width: 1px;
height: 80%;
background-color: #1890ff;
margin: 0 20px;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="sidebar-section">
<div class="sidebar-title">账户详情</div>
<div class="sidebar-content">
奇克-带货起飞-爱豆篇-安卓<br>
账户名称账户名称账户名称<br>
ID：7676655424
</div>
</div>
<div class="sidebar-section">
<div class="sidebar-title">公司</div>
<div class="sidebar-content">优势在我科技中国有限公司</div>
</div>
<div class="sidebar-section">
<div class="sidebar-title">行业</div>
<div class="sidebar-content">浏览器 / 实用工具 / 工具类</div>
</div>
<div class="sidebar-section">
<div class="sidebar-title">ICP备案证明照片</div>
<div class="expand-btn">展开 ▼</div>
<div class="certificate-grid">
<div class="certificate"></div>
<div class="certificate"></div>
<div class="certificate"></div>
<div class="certificate"></div>
<div class="certificate"></div>
<div class="certificate"></div>
</div>
</div>
<div class="sidebar-section">
<div class="sidebar-title">营业执照</div>
<div class="expand-btn">展开 ▼</div>
<div class="certificate-grid">
<div class="certificate"></div>
<div class="certificate"></div>
</div>
</div>
<div class="sidebar-section">
<div class="sidebar-title">法人身份证</div>
<div class="certificate-grid">
<div class="certificate"></div>
<div class="certificate"></div>
</div>
</div>
<div class="sidebar-section">
<div class="sidebar-title">行业资质</div>
<div class="expand-btn">展开 ▼</div>
<div class="certificate-grid">
<div class="certificate"></div>
<div class="certificate"></div>
<div class="certificate"></div>
<div class="certificate"></div>
</div>
</div>
</div>
<div class="main-content">
<div class="image-grid" id="imageGrid">
</div>
</div>
<div class="footer">
<div class="timer">
<span class="timer-label">剩余时间：</span>
<span class="timer-value" id="timeLeft">60</span>
<span class="timer-label">s</span>
<span class="timer-label">当前停留时间：</span>
<span class="timer-value" id="pauseTime">120</span>
<span class="timer-label">s</span>
</div>
<div class="footer-actions">
<button class="btn-blue">提交并结束</button>
<button class="btn-blue">提交</button>
<div class="timer-value">24</div>
</div>
</div>
<script>
const imageData = [
{
id: 1,
src: "https://randomuser.me/api/portraits/women/44.jpg",
status: "创意信息创意信息创意信息",
category: "四审状态：开放浏览",
type: "格件类型：非商单/花火订单",
tags: ["热门", "VIP", "新品"],
reviewStatus: ""
},
{
id: 2,
src: "https://randomuser.me/api/portraits/women/68.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 3,
src: "https://randomuser.me/api/portraits/women/65.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 4,
src: "https://randomuser.me/api/portraits/men/32.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 5,
src: "https://randomuser.me/api/portraits/women/90.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 6,
src: "https://randomuser.me/api/portraits/women/44.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审退回"
},
{
id: 7,
src: "https://randomuser.me/api/portraits/women/68.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 8,
src: "https://randomuser.me/api/portraits/women/65.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 9,
src: "https://randomuser.me/api/portraits/men/32.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 10,
src: "https://randomuser.me/api/portraits/women/90.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 11,
src: "https://randomuser.me/api/portraits/women/44.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审退回"
},
{
id: 12,
src: "https://randomuser.me/api/portraits/women/68.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 13,
src: "https://randomuser.me/api/portraits/women/65.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 14,
src: "https://randomuser.me/api/portraits/men/32.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
},
{
id: 15,
src: "https://randomuser.me/api/portraits/women/90.jpg",
status: "创意信息创意信息创意信息",
reviewStatus: "四审通过"
}
];
function renderImageCards() {
const imageGrid = document.getElementById('imageGrid');
imageGrid.innerHTML = '';
imageData.forEach(image => {
const card = document.createElement('div');
card.className = 'image-card';
let tagsHtml = '';
if (image.tags && image.tags.length) {
tagsHtml = '<div class="tag-container">';
image.tags.forEach(tag => {
let tagClass = '';
if (tag === '热门') tagClass = 'tag-hot';
if (tag === 'VIP') tagClass = 'tag-vip';
if (tag === '新品') tagClass = 'tag-new';
tagsHtml += `<div class="tag ${tagClass}">${tag}</div>`;
});
tagsHtml += '</div>';
}
let categoryHtml = '';
if (image.category) {
categoryHtml = `<div class="image-category">${image.category}</div>`;
}
let typeHtml = '';
if (image.type) {
typeHtml = `<div class="image-type">${image.type}</div>`;
}
let reviewStatusHtml = '';
if (image.reviewStatus) {
reviewStatusHtml = `<div class="review-status">${image.reviewStatus}</div>`;
}
card.innerHTML = `
<div class="image-container">
<img src="${image.src}" alt="素材图片">
<div class="zoom-icon">��</div>
${tagsHtml}
${reviewStatusHtml}
</div>
<div class="image-info">
<div class="image-status">${image.status}</div>
${categoryHtml}
${typeHtml}
</div>
<div class="action-buttons">
<button class="btn">详情</button>
<button class="btn btn-primary">标记</button>
</div>
`;
imageGrid.appendChild(card);
});
}
function initPage() {
renderImageCards();
const expandButtons = document.querySelectorAll('.expand-btn');
expandButtons.forEach(button => {
button.addEventListener('click', function() {
const certificateGrid = this.nextElementSibling;
if (certificateGrid.style.display === 'none') {
certificateGrid.style.display = 'grid';
this.textContent = '展开 ▼';
} else {
certificateGrid.style.display = 'none';
this.textContent = '收起 ▲';
}
});
});
let timeLeft = 60;
const timeLeftElement = document.getElementById('timeLeft');
const pauseTimeElement = document.getElementById('pauseTime');
let pauseTime = 120;
setInterval(() => {
timeLeft--;
if (timeLeft < 0) timeLeft = 0;
timeLeftElement.textContent = timeLeft;
pauseTime--;
if (pauseTime < 0) pauseTime = 0;
pauseTimeElement.textContent = pauseTime;
}, 1000);
}
document.addEventListener('DOMContentLoaded', initPage);
</script>
</body>
</html>