143 lines
8.9 KiB
HTML
143 lines
8.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>日志填报明细 - 已填报</title>
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|||
|
|
<style>
|
|||
|
|
body { background-color: #f0f2f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
|
|||
|
|
.card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
|||
|
|
.sidebar-active { border-right: 3px solid #1890ff; background: #e6f7ff; color: #1890ff; font-weight: bold; }
|
|||
|
|
/* 限制内容列宽度并处理长文本溢出 */
|
|||
|
|
.content-cell {
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body class="p-6">
|
|||
|
|
|
|||
|
|
<div class="flex justify-between items-center mb-6">
|
|||
|
|
<div>
|
|||
|
|
<h1 class="text-xl font-bold text-gray-800">日志填报明细</h1>
|
|||
|
|
<p class="text-sm text-gray-500">查看已完成提交的员工日志内容</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex gap-3">
|
|||
|
|
<input type="date" value="2026-04-12" class="border rounded px-3 py-1.5 text-sm outline-none focus:border-blue-500 shadow-sm bg-white text-gray-600">
|
|||
|
|
<button class="bg-[#1890ff] text-white px-4 py-1.5 rounded text-sm hover:bg-blue-600 transition shadow-sm font-medium">导出已报明细</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flex gap-6">
|
|||
|
|
<div class="w-64 flex-shrink-0 card p-4 h-fit">
|
|||
|
|
<h3 class="font-bold mb-4 text-gray-700 text-sm flex items-center gap-2">
|
|||
|
|
<i class="fas fa-sitemap text-blue-500"></i> 部门结构
|
|||
|
|
</h3>
|
|||
|
|
<ul class="space-y-1 text-sm">
|
|||
|
|
<li class="p-3 sidebar-active cursor-pointer rounded flex justify-between">
|
|||
|
|
<span>全公司</span> <span class="opacity-60 font-normal">128</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="p-3 hover:bg-gray-50 cursor-pointer rounded text-gray-600 flex justify-between transition">
|
|||
|
|
<span>店铺日报</span> <span class="text-gray-400 font-normal">45</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="p-3 hover:bg-gray-50 cursor-pointer rounded text-gray-600 flex justify-between transition">
|
|||
|
|
<span>采购日报</span> <span class="text-gray-400 font-normal">32</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="p-3 hover:bg-gray-50 cursor-pointer rounded text-gray-600 flex justify-between transition">
|
|||
|
|
<span>商品日报</span> <span class="text-gray-400 font-normal">51</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flex-1 card overflow-hidden">
|
|||
|
|
<div class="border-b px-6 py-4 flex justify-between items-center bg-gray-50/50">
|
|||
|
|
<div class="flex gap-8">
|
|||
|
|
<button class="text-sm text-gray-400 pb-2 hover:text-gray-600 transition-all font-medium">未填报名单 (16)</button>
|
|||
|
|
<button class="text-sm font-bold border-b-2 border-blue-500 pb-2 text-blue-600 transition-all">已填报明细 (112)</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="relative">
|
|||
|
|
<input type="text" placeholder="搜索姓名或内容..." class="text-xs border rounded-full px-4 py-1.5 w-64 outline-none focus:border-blue-500 shadow-sm">
|
|||
|
|
<i class="fas fa-search absolute right-3 top-2 text-gray-300"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<table class="w-full text-left text-sm table-fixed">
|
|||
|
|
<thead class="bg-gray-50 text-gray-500 border-b">
|
|||
|
|
<tr>
|
|||
|
|
<th class="px-6 py-4 font-bold w-40">姓名</th>
|
|||
|
|
<th class="px-6 py-4 font-bold w-56">部门</th>
|
|||
|
|
<th class="px-6 py-4 font-bold">填报内容</th>
|
|||
|
|
<th class="px-6 py-4 font-bold text-center w-28 uppercase text-[10px] tracking-wider">提交状态</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody class="divide-y text-gray-700">
|
|||
|
|
<tr class="hover:bg-blue-50/30 transition group">
|
|||
|
|
<td class="px-6 py-4 flex items-center gap-3">
|
|||
|
|
<span class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xs font-bold shadow-sm">王</span>
|
|||
|
|
<span class="font-medium text-gray-800">王小明</span>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-6 py-4">
|
|||
|
|
<div class="text-gray-700 font-medium">零售事业部</div>
|
|||
|
|
<div class="text-[10px] text-gray-400 uppercase tracking-tighter mt-0.5">Chenzhou Store · Manager</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-6 py-4">
|
|||
|
|
<div class="bg-gray-50 p-2.5 rounded border border-transparent group-hover:border-gray-200 group-hover:bg-white transition relative">
|
|||
|
|
<p class="text-xs text-gray-600 leading-relaxed content-cell">
|
|||
|
|
今日郴州店客流量较昨日回升，成交额达到预期目标。主推的春季新款T恤表现优异，转化率约12%。下午对新入职导购进行了系统培训。
|
|||
|
|
</p>
|
|||
|
|
<div class="absolute right-2 bottom-1 text-[10px] text-blue-500 opacity-0 group-hover:opacity-100 transition font-bold">详情 ></div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-6 py-4 text-center">
|
|||
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-50 text-green-600 border border-green-100">
|
|||
|
|
<i class="fas fa-check-circle mr-1"></i> 已提交
|
|||
|
|
</span>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
|
|||
|
|
<tr class="hover:bg-blue-50/30 transition group">
|
|||
|
|
<td class="px-6 py-4 flex items-center gap-3">
|
|||
|
|
<span class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-xs font-bold shadow-sm">李</span>
|
|||
|
|
<span class="font-medium text-gray-800">李华</span>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-6 py-4">
|
|||
|
|
<div class="text-gray-700 font-medium">采购部</div>
|
|||
|
|
<div class="text-[10px] text-gray-400 uppercase tracking-tighter mt-0.5">Supply Chain · Buyer</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-6 py-4">
|
|||
|
|
<div class="bg-gray-50 p-2.5 rounded border border-transparent group-hover:border-gray-200 group-hover:bg-white transition relative">
|
|||
|
|
<p class="text-xs text-gray-600 leading-relaxed content-cell">
|
|||
|
|
完成了与面料供应商的本周对账工作。确认了下周到货的夏季轻薄款面料数量及颜色。注意到原材料价格有小幅波动，已汇报给商品中心。
|
|||
|
|
</p>
|
|||
|
|
<div class="absolute right-2 bottom-1 text-[10px] text-blue-500 opacity-0 group-hover:opacity-100 transition font-bold">详情 ></div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="px-6 py-4 text-center">
|
|||
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-50 text-green-600 border border-green-100">
|
|||
|
|
<i class="fas fa-check-circle mr-1"></i> 已提交
|
|||
|
|
</span>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<div class="px-6 py-4 flex justify-between items-center border-t bg-gray-50/50 text-xs text-gray-500">
|
|||
|
|
<span>显示 1 到 10 条，共 112 条已填报记录</span>
|
|||
|
|
<div class="flex gap-2">
|
|||
|
|
<button class="p-1.5 border rounded bg-white hover:bg-gray-100 disabled:opacity-50" disabled><</button>
|
|||
|
|
<button class="p-1.5 border rounded bg-blue-500 text-white min-w-[30px] font-bold shadow-sm">1</button>
|
|||
|
|
<button class="p-1.5 border rounded bg-white hover:bg-gray-100 min-w-[30px]">2</button>
|
|||
|
|
<button class="p-1.5 border rounded bg-white hover:bg-gray-100 min-w-[30px]">3</button>
|
|||
|
|
<button class="p-1.5 border rounded bg-white hover:bg-gray-100">></button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|