134 lines
7.3 KiB
HTML
134 lines
7.3 KiB
HTML
<!-- 证照管理页 -->
|
|
<style>
|
|
.cll-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
|
|
.cll-stat{background:#fff;border-radius:var(--g-radius);padding:18px 20px;box-shadow:var(--g-shadow-sm);display:flex;align-items:center;gap:14px;transition:var(--g-transition);}
|
|
.cll-stat:hover{box-shadow:var(--g-shadow-md);}
|
|
.cll-stat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
|
|
.cll-stat-icon svg{width:22px;height:22px;}
|
|
.cll-stat-icon.blue{background:var(--primary-light);color:var(--primary);}
|
|
.cll-stat-icon.orange{background:#fff7e6;color:var(--g-warning);}
|
|
.cll-stat-icon.red{background:#fff1f0;color:var(--g-danger);}
|
|
.cll-stat-icon.gray{background:#f5f5f5;color:var(--g-text-muted);}
|
|
.cll-stat-num{font-size:24px;font-weight:700;color:var(--g-text);}
|
|
.cll-stat-label{font-size:13px;color:var(--g-text-secondary);margin-top:2px;}
|
|
.cll-section-hd{font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;}
|
|
.cll-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px;}
|
|
.cll-cert{background:#fff;border-radius:var(--g-radius);padding:18px 20px;box-shadow:var(--g-shadow-sm);display:flex;gap:16px;position:relative;transition:var(--g-transition);border:1px solid var(--g-border);}
|
|
.cll-cert:hover{box-shadow:var(--g-shadow-md);}
|
|
.cll-cert.cll-expired{border-color:var(--g-danger);background:#fffbfb;}
|
|
.cll-cert.cll-pending{border:1px dashed var(--g-text-muted);background:#fafafa;}
|
|
.cll-cert-icon{width:64px;height:64px;border-radius:var(--g-radius);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
|
.cll-cert-icon svg{width:28px;height:28px;}
|
|
.cll-cert-icon.blue{background:var(--primary-light);color:var(--primary);}
|
|
.cll-cert-icon.green{background:#f6ffed;color:var(--g-success);}
|
|
.cll-cert-icon.orange{background:#fff7e6;color:var(--g-warning);}
|
|
.cll-cert-icon.red{background:#fff1f0;color:var(--g-danger);}
|
|
.cll-cert-icon.gray{background:#f5f5f5;color:var(--g-text-muted);}
|
|
.cll-cert-info{flex:1;min-width:0;}
|
|
.cll-cert-name{font-size:15px;font-weight:600;color:var(--g-text);margin-bottom:4px;}
|
|
.cll-cert-no{font-size:12px;color:var(--g-text-muted);font-family:'Courier New',monospace;margin-bottom:4px;}
|
|
.cll-cert-date{font-size:12px;color:var(--g-text-secondary);margin-bottom:8px;}
|
|
.cll-cert-actions{position:absolute;top:16px;right:18px;display:flex;gap:10px;}
|
|
@media(max-width:800px){.cll-grid{grid-template-columns:1fr;}.cll-stats{grid-template-columns:repeat(2,1fr);}}
|
|
</style>
|
|
|
|
<!-- 统计栏 -->
|
|
<div class="cll-stats">
|
|
<div class="cll-stat">
|
|
<div class="cll-stat-icon blue"><i data-lucide="file-text"></i></div>
|
|
<div><div class="cll-stat-num">12</div><div class="cll-stat-label">证照总数</div></div>
|
|
</div>
|
|
<div class="cll-stat">
|
|
<div class="cll-stat-icon orange"><i data-lucide="clock"></i></div>
|
|
<div><div class="cll-stat-num" style="color:var(--g-warning)">2</div><div class="cll-stat-label">即将到期</div></div>
|
|
</div>
|
|
<div class="cll-stat">
|
|
<div class="cll-stat-icon red"><i data-lucide="alert-triangle"></i></div>
|
|
<div><div class="cll-stat-num" style="color:var(--g-danger)">1</div><div class="cll-stat-label">已过期</div></div>
|
|
</div>
|
|
<div class="cll-stat">
|
|
<div class="cll-stat-icon gray"><i data-lucide="upload"></i></div>
|
|
<div><div class="cll-stat-num">3</div><div class="cll-stat-label">待上传</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 证照列表 -->
|
|
<div class="g-card">
|
|
<div class="cll-section-hd">
|
|
<span>证照列表</span>
|
|
<button class="g-btn g-btn-primary g-btn-sm"><i data-lucide="plus" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>添加证照</button>
|
|
</div>
|
|
<div class="cll-grid">
|
|
<!-- 营业执照 -->
|
|
<div class="cll-cert">
|
|
<div class="cll-cert-icon blue"><i data-lucide="building-2"></i></div>
|
|
<div class="cll-cert-info">
|
|
<div class="cll-cert-name">营业执照</div>
|
|
<div class="cll-cert-no">91110105MA01ABCD5X</div>
|
|
<div class="cll-cert-date">2025-03-01 至 2028-03-01</div>
|
|
<span class="g-tag g-tag-green">有效</span>
|
|
</div>
|
|
<div class="cll-cert-actions"><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;">更新</a></div>
|
|
</div>
|
|
<!-- 食品经营许可证 -->
|
|
<div class="cll-cert">
|
|
<div class="cll-cert-icon orange"><i data-lucide="utensils"></i></div>
|
|
<div class="cll-cert-info">
|
|
<div class="cll-cert-name">食品经营许可证</div>
|
|
<div class="cll-cert-no">JY11105xxxxxx</div>
|
|
<div class="cll-cert-date">2023-03-15 至 2026-03-15</div>
|
|
<span class="g-tag g-tag-orange">即将到期</span>
|
|
</div>
|
|
<div class="cll-cert-actions"><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;">更新</a></div>
|
|
</div>
|
|
<!-- 食品安全管理员证 -->
|
|
<div class="cll-cert">
|
|
<div class="cll-cert-icon green"><i data-lucide="shield-check"></i></div>
|
|
<div class="cll-cert-info">
|
|
<div class="cll-cert-name">食品安全管理员证</div>
|
|
<div class="cll-cert-no">AQGL2025001234</div>
|
|
<div class="cll-cert-date">2025-06-01 至 2028-06-01</div>
|
|
<span class="g-tag g-tag-green">有效</span>
|
|
</div>
|
|
<div class="cll-cert-actions"><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;">更新</a></div>
|
|
</div>
|
|
<!-- 健康证-张伟 -->
|
|
<div class="cll-cert">
|
|
<div class="cll-cert-icon green"><i data-lucide="heart-pulse"></i></div>
|
|
<div class="cll-cert-info">
|
|
<div class="cll-cert-name">健康证 - 张伟</div>
|
|
<div class="cll-cert-no">JKZ110105202500567</div>
|
|
<div class="cll-cert-date">2025-08-10 至 2026-08-10</div>
|
|
<span class="g-tag g-tag-green">有效</span>
|
|
</div>
|
|
<div class="cll-cert-actions"><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;">更新</a></div>
|
|
</div>
|
|
<!-- 健康证-李娜（已过期） -->
|
|
<div class="cll-cert cll-expired">
|
|
<div class="cll-cert-icon red"><i data-lucide="heart-pulse"></i></div>
|
|
<div class="cll-cert-info">
|
|
<div class="cll-cert-name">健康证 - 李娜</div>
|
|
<div class="cll-cert-no">JKZ110105202400321</div>
|
|
<div class="cll-cert-date">2024-02-10 至 2025-02-10</div>
|
|
<span class="g-tag g-tag-red">已过期</span>
|
|
</div>
|
|
<div class="cll-cert-actions"><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;">更新</a></div>
|
|
</div>
|
|
<!-- 消防安全检查合格证（待上传） -->
|
|
<div class="cll-cert cll-pending">
|
|
<div class="cll-cert-icon gray"><i data-lucide="flame"></i></div>
|
|
<div class="cll-cert-info">
|
|
<div class="cll-cert-name">消防安全检查合格证</div>
|
|
<div class="cll-cert-no">—</div>
|
|
<div class="cll-cert-date">—</div>
|
|
<span class="g-tag g-tag-gray">待上传</span>
|
|
</div>
|
|
<div class="cll-cert-actions"><a class="g-action" href="javascript:;">上传</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
if(typeof lucide!=='undefined'){lucide.createIcons();}
|
|
</script>
|