121 lines
4.1 KiB
HTML
121 lines
4.1 KiB
HTML
{% extends 'ewoooc_base.html' %}
|
||
{% block title %}缺貨治理 - EwoooC{% endblock %}
|
||
|
||
{#
|
||
v3 改寫重點：
|
||
- 從獨立 HTML 改為 extends ewoooc_base，吃到 sidebar + tokens
|
||
- 移除紫漸層 navbar (#4F46E5 → #6366F1) 與深藍漸層 (#1e3c72)
|
||
- 4 色功能卡片：藍/綠/紫/橘 → 焦糖/橄欖/赤陶/蜂蜜（語意 token）
|
||
- 卡片用 Jinja loop + dict 收斂 4 段重複 markup
|
||
- 移除 "card-import"（缺貨清單沒匯入卡片，源檔有3張卡）
|
||
#}
|
||
|
||
{% block extra_css %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-home.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block ewooo_content %}
|
||
<div class="home-page" data-screen-label="home">
|
||
|
||
<!-- ============ Hero ============ -->
|
||
<header class="home-hero">
|
||
<div class="home-hero__lead">
|
||
<h1 class="home-hero__title">
|
||
<i class="fas fa-box-open" aria-hidden="true"></i>
|
||
廠商缺貨通知自動化系統
|
||
</h1>
|
||
<p class="home-hero__subtitle">處理缺貨風險，避免主推商品斷貨。</p>
|
||
</div>
|
||
<div class="home-hero__decor" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<!-- ============ Function Cards ============ -->
|
||
{% set fn_cards = [
|
||
{
|
||
'variant': 'list',
|
||
'icon': 'list-ul',
|
||
'title': '缺貨清單',
|
||
'desc': '找出會影響業績的缺貨商品',
|
||
'cta': '查看清單',
|
||
'cta_icon': 'search',
|
||
'href': '/vendor-stockout/list'
|
||
},
|
||
{
|
||
'variant': 'vendor',
|
||
'icon': 'building',
|
||
'title': '廠商管理',
|
||
'desc': '維護可聯絡的補貨窗口',
|
||
'cta': '管理廠商',
|
||
'cta_icon': 'users-cog',
|
||
'href': '/vendor-stockout/vendor-management'
|
||
},
|
||
{
|
||
'variant': 'history',
|
||
'icon': 'history',
|
||
'title': '發送歷史',
|
||
'desc': '查看郵件發送記錄、成功率統計，以及失敗項目的錯誤訊息',
|
||
'cta': '查看記錄',
|
||
'cta_icon': 'clock',
|
||
'href': '/vendor-stockout/history'
|
||
}
|
||
] %}
|
||
|
||
<div class="row g-4 home-cards">
|
||
{% for c in fn_cards %}
|
||
<div class="col-md-6 col-lg-4">
|
||
<article class="fn-card fn--{{ c.variant }}">
|
||
<div class="fn-card__body">
|
||
<div class="fn-card__icon-wrap">
|
||
<i class="fas fa-{{ c.icon }}" aria-hidden="true"></i>
|
||
</div>
|
||
<h3 class="fn-card__title">{{ c.title }}</h3>
|
||
<p class="fn-card__desc">{{ c.desc }}</p>
|
||
<a href="{{ c.href }}" class="fn-card__cta">
|
||
<i class="fas fa-{{ c.cta_icon }}" aria-hidden="true"></i>
|
||
<span>{{ c.cta }}</span>
|
||
<i class="fas fa-arrow-right fn-card__cta-arrow" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- ============ Help / Manual ============ -->
|
||
<section class="home-manual">
|
||
<header class="home-manual__head">
|
||
<h2 class="home-manual__title">
|
||
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
||
缺貨處理順序
|
||
</h2>
|
||
</header>
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<h3 class="home-manual__subhead">
|
||
<i class="fas fa-arrow-right" aria-hidden="true"></i>先補供貨風險
|
||
</h3>
|
||
<ol class="home-manual__list home-manual__list--ordered">
|
||
<li>匯入缺貨 Excel，先建立正式缺貨資料。</li>
|
||
<li>在缺貨清單鎖定待發送與失敗項目。</li>
|
||
<li>補齊廠商收件人，讓通知能送達。</li>
|
||
<li>發送缺貨通知，避免主推商品斷貨。</li>
|
||
<li>回看發送歷史，補救失敗通知。</li>
|
||
</ol>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h3 class="home-manual__subhead home-manual__subhead--alt">
|
||
<i class="fas fa-arrow-right" aria-hidden="true"></i>業績保護重點
|
||
</h3>
|
||
<ul class="home-manual__list">
|
||
<li>先處理高業績商品的缺貨風險。</li>
|
||
<li>重複資料自動標記，避免通知混亂。</li>
|
||
<li>依廠商分組通知，縮短補貨溝通時間。</li>
|
||
<li>失敗通知可重送，避免補救斷線。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
{% endblock %}
|