137 lines
6.7 KiB
HTML
137 lines
6.7 KiB
HTML
<!-- 到期提醒页 -->
|
||
<style>
|
||
.cle-status-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;}
|
||
.cle-status-card{border-radius:var(--g-radius);padding:20px;display:flex;align-items:center;gap:14px;box-shadow:var(--g-shadow-sm);transition:var(--g-transition);}
|
||
.cle-status-card:hover{box-shadow:var(--g-shadow-md);}
|
||
.cle-status-card.red{background:#fff1f0;border-left:4px solid var(--g-danger);}
|
||
.cle-status-card.orange{background:#fff7e6;border-left:4px solid var(--g-warning);}
|
||
.cle-status-card.green{background:#f6ffed;border-left:4px solid var(--g-success);}
|
||
.cle-sc-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7);}
|
||
.cle-sc-icon svg{width:22px;height:22px;}
|
||
.cle-status-card.red .cle-sc-icon svg{color:var(--g-danger);}
|
||
.cle-status-card.orange .cle-sc-icon svg{color:var(--g-warning);}
|
||
.cle-status-card.green .cle-sc-icon svg{color:var(--g-success);}
|
||
.cle-sc-num{font-size:26px;font-weight:700;color:var(--g-text);}
|
||
.cle-sc-label{font-size:13px;color:var(--g-text-secondary);margin-top:2px;}
|
||
.cle-section-hd{font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin-bottom:16px;}
|
||
.cle-timeline{position:relative;padding-left:20px;}
|
||
.cle-timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:#e5e7eb;}
|
||
.cle-tl-item{position:relative;padding:0 0 24px 20px;}
|
||
.cle-tl-dot{position:absolute;left:-16px;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px currentColor;}
|
||
.cle-tl-item.red .cle-tl-dot{color:var(--g-danger);background:var(--g-danger);}
|
||
.cle-tl-item.orange .cle-tl-dot{color:var(--g-warning);background:var(--g-warning);}
|
||
.cle-tl-date{font-size:12px;color:var(--g-text-muted);margin-bottom:6px;}
|
||
.cle-tl-card{background:#fff;border-radius:var(--g-radius);padding:14px 18px;box-shadow:var(--g-shadow-sm);display:flex;align-items:center;gap:12px;flex-wrap:wrap;transition:var(--g-transition);}
|
||
.cle-tl-card:hover{box-shadow:var(--g-shadow-md);}
|
||
.cle-tl-item.red .cle-tl-card{border-left:3px solid var(--g-danger);}
|
||
.cle-tl-item.orange .cle-tl-card{border-left:3px solid var(--g-warning);}
|
||
.cle-tl-name{font-size:14px;font-weight:600;color:var(--g-text);}
|
||
.cle-tl-remain{font-size:13px;font-weight:600;margin-left:auto;}
|
||
.cle-tl-remain.red{color:var(--g-danger);}
|
||
.cle-tl-remain.orange{color:var(--g-warning);}
|
||
.cle-setting-row{display:flex;align-items:center;gap:16px;margin-bottom:14px;font-size:13px;color:var(--g-text);}
|
||
.cle-setting-row label{min-width:100px;font-weight:500;color:var(--g-text-secondary);}
|
||
.cle-notify-list{display:flex;flex-direction:column;gap:12px;}
|
||
.cle-notify-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f3f4f6;}
|
||
.cle-notify-item:last-child{border-bottom:none;}
|
||
.cle-notify-label{font-size:13px;color:var(--g-text);}
|
||
@media(max-width:700px){.cle-status-cards{grid-template-columns:1fr;}}
|
||
</style>
|
||
|
||
<!-- 状态卡片 -->
|
||
<div class="cle-status-cards">
|
||
<div class="cle-status-card red">
|
||
<div class="cle-sc-icon"><i data-lucide="alert-circle"></i></div>
|
||
<div><div class="cle-sc-num">1</div><div class="cle-sc-label">已过期</div></div>
|
||
</div>
|
||
<div class="cle-status-card orange">
|
||
<div class="cle-sc-icon"><i data-lucide="clock"></i></div>
|
||
<div><div class="cle-sc-num">3</div><div class="cle-sc-label">30天内到期</div></div>
|
||
</div>
|
||
<div class="cle-status-card green">
|
||
<div class="cle-sc-icon"><i data-lucide="check-circle"></i></div>
|
||
<div><div class="cle-sc-num">8</div><div class="cle-sc-label">状态正常</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 即将到期列表 -->
|
||
<div class="g-card" style="margin-bottom:20px;">
|
||
<div class="cle-section-hd">即将到期项目</div>
|
||
<div class="cle-timeline">
|
||
<div class="cle-tl-item red">
|
||
<div class="cle-tl-dot"></div>
|
||
<div class="cle-tl-date">到期日：2026-02-10</div>
|
||
<div class="cle-tl-card">
|
||
<span class="cle-tl-name">健康证 - 李娜</span>
|
||
<span class="g-tag g-tag-red">健康证</span>
|
||
<span class="cle-tl-remain red">已过期 3 天</span>
|
||
<button class="g-btn g-btn-danger g-btn-sm">去处理</button>
|
||
</div>
|
||
</div>
|
||
<div class="cle-tl-item orange">
|
||
<div class="cle-tl-dot"></div>
|
||
<div class="cle-tl-date">到期日：2026-03-15</div>
|
||
<div class="cle-tl-card">
|
||
<span class="cle-tl-name">食品经营许可证</span>
|
||
<span class="g-tag g-tag-orange">证照</span>
|
||
<span class="cle-tl-remain orange">剩余 30 天</span>
|
||
<button class="g-btn g-btn-sm">去处理</button>
|
||
</div>
|
||
</div>
|
||
<div class="cle-tl-item orange">
|
||
<div class="cle-tl-dot"></div>
|
||
<div class="cle-tl-date">到期日：2026-03-30</div>
|
||
<div class="cle-tl-card">
|
||
<span class="cle-tl-name">消防安全检查合格证</span>
|
||
<span class="g-tag g-tag-orange">证照</span>
|
||
<span class="cle-tl-remain orange">剩余 45 天</span>
|
||
<button class="g-btn g-btn-sm">去处理</button>
|
||
</div>
|
||
</div>
|
||
<div class="cle-tl-item orange">
|
||
<div class="cle-tl-dot"></div>
|
||
<div class="cle-tl-date">到期日：2026-02-28</div>
|
||
<div class="cle-tl-card">
|
||
<span class="cle-tl-name">花生油 批次BN20260110</span>
|
||
<span class="g-tag g-tag-blue">食材</span>
|
||
<span class="cle-tl-remain orange">剩余 15 天</span>
|
||
<button class="g-btn g-btn-sm">去处理</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提醒设置 -->
|
||
<div class="g-card">
|
||
<div class="cle-section-hd">提醒设置</div>
|
||
<div class="cle-setting-row">
|
||
<label>提前提醒天数</label>
|
||
<select class="g-select" style="width:140px;">
|
||
<option>7 天</option>
|
||
<option>15 天</option>
|
||
<option selected>30 天</option>
|
||
<option>60 天</option>
|
||
</select>
|
||
</div>
|
||
<div class="g-divider" style="margin:12px 0;"></div>
|
||
<div class="cle-notify-list">
|
||
<div class="cle-notify-item">
|
||
<span class="cle-notify-label">站内通知</span>
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-thumb"></div></div>
|
||
</div>
|
||
<div class="cle-notify-item">
|
||
<span class="cle-notify-label">微信推送</span>
|
||
<div class="g-toggle on" onclick="toggleSwitch(this)"><div class="g-toggle-thumb"></div></div>
|
||
</div>
|
||
<div class="cle-notify-item">
|
||
<span class="cle-notify-label">短信通知</span>
|
||
<div class="g-toggle" onclick="toggleSwitch(this)"><div class="g-toggle-thumb"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function toggleSwitch(el){el.classList.toggle('on');}
|
||
if(typeof lucide!=='undefined'){lucide.createIcons();}
|
||
</script>
|