188 lines
12 KiB
HTML
188 lines
12 KiB
HTML
<!-- 资质证照页 -->
|
||
<style>
|
||
.pq-top-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;box-shadow:var(--g-shadow-sm);border-radius:10px;padding:12px 16px;background:#fff;}
|
||
.pq-top-bar select{height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;outline:none;background:#fff;min-width:180px;cursor:pointer;transition:var(--g-transition);}
|
||
.pq-top-bar select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);}
|
||
.pq-card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||
.pq-card-title{font-size:15px;font-weight:600;color:#1a1a2e;}
|
||
.pq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
|
||
.pq-item{border:none;border-radius:10px;overflow:hidden;box-shadow:var(--g-shadow-sm);transition:var(--g-transition);}
|
||
.pq-item:hover{box-shadow:0 4px 16px rgba(0,0,0,0.10);}
|
||
.pq-thumb{height:160px;background:#f8f9fb;display:flex;align-items:center;justify-content:center;border-bottom:1px dashed #e5e7eb;}
|
||
.pq-thumb svg{width:48px;height:48px;color:#bbb;}
|
||
.pq-body{padding:12px 14px 14px;}
|
||
.pq-type-tag{display:inline-block;padding:2px 10px;border-radius:6px;font-size:12px;margin-bottom:8px;font-weight:600;}
|
||
.pq-tag-blue{background:#e6f7ff;color:#1890ff;}
|
||
.pq-tag-green{background:#f6ffed;color:#22c55e;}
|
||
.pq-tag-purple{background:#f9f0ff;color:#722ed1;}
|
||
.pq-tag-orange{background:#fff7e6;color:#f59e0b;}
|
||
.pq-tag-teal{background:#e6fffb;color:#13c2c2;}
|
||
.pq-tag-grey{background:#f8f9fb;color:#9ca3af;}
|
||
.pq-doc-no{font-size:13px;color:#1a1a2e;margin-bottom:6px;word-break:break-all;}
|
||
.pq-dates{font-size:12px;color:#9ca3af;margin-bottom:8px;}
|
||
.pq-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;margin-bottom:10px;font-weight:600;}
|
||
.pq-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
|
||
.pq-status-green .pq-status-dot{background:#22c55e;} .pq-status-green{color:#22c55e;}
|
||
.pq-status-orange .pq-status-dot{background:#f59e0b;} .pq-status-orange{color:#f59e0b;}
|
||
.pq-status-red .pq-status-dot{background:#ef4444;} .pq-status-red{color:#ef4444;}
|
||
.pq-actions{display:flex;gap:12px;border-top:1px solid #f3f4f6;padding-top:10px;}
|
||
.pq-remind-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:13px;color:#1a1a2e;}
|
||
.pq-remind-row label{min-width:100px;text-align:right;font-weight:500;color:#4b5563;}
|
||
.pq-remind-row input[type=number]{width:80px;height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;outline:none;text-align:center;transition:var(--g-transition);}
|
||
.pq-remind-row input[type=number]:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);}
|
||
.pq-remind-row .unit{color:#9ca3af;font-size:12px;}
|
||
.pq-checks{display:flex;gap:18px;}
|
||
.pq-checks label{display:flex;align-items:center;gap:5px;font-size:13px;color:#1a1a2e;cursor:pointer;}
|
||
.pq-checks input[type=checkbox]{accent-color:var(--primary);cursor:pointer;}
|
||
.pq-item.pq-expired { border-left:3px solid #ef4444; background:#fff1f0; }
|
||
.pq-item.pq-expiring { border-left:3px solid #f59e0b; background:#fffbeb; }
|
||
@media(max-width:900px){.pq-grid{grid-template-columns:repeat(2,1fr);}}
|
||
@media(max-width:600px){.pq-grid{grid-template-columns:1fr;}}
|
||
</style>
|
||
|
||
<div class="pq-top-bar">
|
||
<select>
|
||
<option>老三家外卖（朝阳店）</option>
|
||
<option>老三家外卖（海淀店）</option>
|
||
<option>老三家外卖（丰台店）</option>
|
||
<option>老三家外卖（西城店）</option>
|
||
<option>老三家外卖（东城店）</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="g-card" style="margin-bottom:16px;">
|
||
<div class="pq-card-hd">
|
||
<span class="pq-card-title">资质证照</span>
|
||
<button class="g-btn g-btn-primary" onclick="openSqDrawer()">+ 上传证照</button>
|
||
</div>
|
||
<div class="pq-grid">
|
||
<div class="pq-item">
|
||
<div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
|
||
<div class="pq-body">
|
||
<span class="pq-type-tag pq-tag-blue">营业执照</span>
|
||
<div class="pq-doc-no">No.91110105MA01XXXX</div>
|
||
<div class="pq-dates">发证日期 2024-01-15 有效期至 2027-01-14</div>
|
||
<div class="pq-status pq-status-green"><span class="pq-status-dot"></span>有效</div>
|
||
<div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
|
||
</div>
|
||
</div>
|
||
<div class="pq-item">
|
||
<div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
|
||
<div class="pq-body">
|
||
<span class="pq-type-tag pq-tag-green">食品经营许可证</span>
|
||
<div class="pq-doc-no">No.JY11105XXXXXXX</div>
|
||
<div class="pq-dates">发证日期 2024-03-20 有效期至 2027-03-19</div>
|
||
<div class="pq-status pq-status-green"><span class="pq-status-dot"></span>有效</div>
|
||
<div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
|
||
</div>
|
||
</div>
|
||
<div class="pq-item pq-expiring">
|
||
<div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
|
||
<div class="pq-body">
|
||
<span class="pq-type-tag pq-tag-purple">食品安全管理员证</span>
|
||
<div class="pq-doc-no">No.AQGL2024XXXX</div>
|
||
<div class="pq-dates">发证日期 2024-06-01 有效期至 2025-05-31</div>
|
||
<div class="pq-status pq-status-orange"><span class="pq-status-dot"></span>即将过期</div>
|
||
<div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
|
||
</div>
|
||
</div>
|
||
<div class="pq-item pq-expired">
|
||
<div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
|
||
<div class="pq-body">
|
||
<span class="pq-type-tag pq-tag-orange">消防安全检查合格证</span>
|
||
<div class="pq-doc-no">No.XF2024XXXXX</div>
|
||
<div class="pq-dates">发证日期 2024-02-10 有效期至 2026-02-09</div>
|
||
<div class="pq-status pq-status-red"><span class="pq-status-dot"></span>已过期</div>
|
||
<div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
|
||
</div>
|
||
</div>
|
||
<div class="pq-item">
|
||
<div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
|
||
<div class="pq-body">
|
||
<span class="pq-type-tag pq-tag-teal">健康证（张伟）</span>
|
||
<div class="pq-doc-no">No.JK2024XXXXX</div>
|
||
<div class="pq-dates">发证日期 2024-08-15 有效期至 2025-08-14</div>
|
||
<div class="pq-status pq-status-green"><span class="pq-status-dot"></span>有效</div>
|
||
<div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
|
||
</div>
|
||
</div>
|
||
<div class="pq-item">
|
||
<div class="pq-thumb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></div>
|
||
<div class="pq-body">
|
||
<span class="pq-type-tag pq-tag-grey">排污许可证</span>
|
||
<div class="pq-doc-no">No.PW2024XXXXX</div>
|
||
<div class="pq-dates">发证日期 2025-01-01 有效期至 2028-12-31</div>
|
||
<div class="pq-status pq-status-green"><span class="pq-status-dot"></span>有效</div>
|
||
<div class="pq-actions"><a class="g-action" href="javascript:;">编辑</a><a class="g-action g-action-danger" href="javascript:;">删除</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-card">
|
||
<div class="pq-card-hd"><span class="pq-card-title">到期提醒设置</span></div>
|
||
<div class="pq-remind-row"><label>提前提醒天数</label><input type="number" value="30"><span class="unit">天</span></div>
|
||
<div class="pq-remind-row"><label>提醒方式</label><div class="pq-checks"><label><input type="checkbox" checked>站内通知</label><label><input type="checkbox">短信通知</label><label><input type="checkbox">邮件通知</label></div></div>
|
||
<div class="pq-remind-row"><label></label><button class="g-btn g-btn-primary">保存设置</button></div>
|
||
</div>
|
||
|
||
<!-- 上传证照抽屉 -->
|
||
<div class="g-drawer-mask" id="sqDrawerMask" onclick="closeSqDrawer()"></div>
|
||
<div class="g-drawer" id="sqDrawer" style="width:480px">
|
||
<div class="g-drawer-hd">
|
||
<div class="g-drawer-title">上传证照</div>
|
||
<button class="g-drawer-close" onclick="closeSqDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
|
||
</div>
|
||
<div class="g-drawer-bd">
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">证照类型</label>
|
||
<select class="g-select">
|
||
<option value="">请选择证照类型</option>
|
||
<option>营业执照</option>
|
||
<option>食品经营许可证</option>
|
||
<option>卫生许可证</option>
|
||
<option>消防安全检查合格证</option>
|
||
<option>食品安全管理员证</option>
|
||
<option>健康证</option>
|
||
<option>排污许可证</option>
|
||
<option>其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">证照编号</label>
|
||
<input class="g-input" placeholder="请输入证照编号">
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">有效期至</label>
|
||
<input type="date" class="g-input">
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">上传证照图片</label>
|
||
<div class="g-upload-zone">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||
<p>点击或拖拽上传证照图片</p>
|
||
<p style="font-size:11px;color:#999;margin-top:4px">支持 JPG、PNG 格式，不超过 5MB</p>
|
||
</div>
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">备注</label>
|
||
<textarea class="g-textarea" rows="3" placeholder="如有特殊说明请填写"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="g-drawer-ft">
|
||
<button class="g-btn" onclick="closeSqDrawer()">取消</button>
|
||
<button class="g-btn g-btn-primary" onclick="closeSqDrawer()">确认上传</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function openSqDrawer() {
|
||
document.getElementById('sqDrawerMask').classList.add('open');
|
||
document.getElementById('sqDrawer').classList.add('open');
|
||
}
|
||
function closeSqDrawer() {
|
||
document.getElementById('sqDrawerMask').classList.remove('open');
|
||
document.getElementById('sqDrawer').classList.remove('open');
|
||
}
|
||
</script>
|