142 lines
5.0 KiB
HTML
142 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>領據管理系統說明 - 火車票價維護</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
background: #eef2f5;
|
|
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
|
padding: 40px 24px;
|
|
color: #1e2a3e;
|
|
}
|
|
.doc {
|
|
max-width: 1300px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 28px;
|
|
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
|
|
overflow: hidden;
|
|
}
|
|
.header {
|
|
background: linear-gradient(135deg, #5e3a2c, #8b5a3c);
|
|
color: white;
|
|
padding: 28px 32px;
|
|
}
|
|
.header h1 {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
.header p {
|
|
font-size: 15px;
|
|
opacity: 0.85;
|
|
}
|
|
.content {
|
|
padding: 32px 36px;
|
|
}
|
|
.function-block {
|
|
margin-bottom: 56px;
|
|
border-bottom: 1px solid #e4e9f0;
|
|
padding-bottom: 32px;
|
|
}
|
|
.function-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
padding-left: 12px;
|
|
border-left: 5px solid #bc6c25;
|
|
color: #6b3e1c;
|
|
}
|
|
.screenshot {
|
|
margin-bottom: 24px;
|
|
border: 1px solid #dce5ec;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
background: #f8fafc;
|
|
text-align: center;
|
|
}
|
|
.screenshot img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
.desc-box {
|
|
background: #f0f6fa;
|
|
padding: 20px 26px;
|
|
border-radius: 18px;
|
|
line-height: 1.55;
|
|
font-size: 15px;
|
|
}
|
|
.desc-box ul {
|
|
margin-left: 22px;
|
|
margin-top: 8px;
|
|
}
|
|
.desc-box li {
|
|
margin: 6px 0;
|
|
}
|
|
.footnote {
|
|
background: #fef5e8;
|
|
padding: 12px 18px;
|
|
border-radius: 14px;
|
|
margin-top: 14px;
|
|
font-size: 13px;
|
|
border-left: 4px solid #bc6c25;
|
|
}
|
|
@media (max-width: 760px) {
|
|
.content { padding: 20px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="doc">
|
|
<div class="header">
|
|
<h1>🚆 火車票價維護</h1>
|
|
<p>票價矩陣管理 · 版本控制 · 匯入匯出</p>
|
|
</div>
|
|
<div class="content">
|
|
<!-- 票價矩陣查詢 / 版本維護 -->
|
|
<div class="function-block">
|
|
<div class="function-title">🗺️ 票價矩陣查詢／版本維護</div>
|
|
<div class="screenshot">
|
|
<img src="./火車票價查詢.png" alt="火車票價維護主畫面 - 上方顯示版本號及生效日期，包含刪除此版本、進入修改按鈕。中間有查詢、匯出/匯入按鈕。下方為票價矩陣表格，顯示各站間票價（起站：基隆、八堵、七堵、汐止、南港、松山、台北、板橋等）">
|
|
</div>
|
|
<div class="desc-box">
|
|
<p>🚄 <strong>票價維護與版本管理</strong></p>
|
|
<ul>
|
|
<li>上方顯示目前生效版本與生效日期，可點選「進入修改」調整區間票價。</li>
|
|
<li>「查詢」可快速瀏覽特定區間票價。</li>
|
|
<li>「刪除此版本」僅能刪除未生效或歷史版本，當前生效版不可刪除。</li>
|
|
<li>完整票價表包含樹林、鶯歌、桃園、中壢等 20+ 站點，請於系統內檢視完整矩陣。</li>
|
|
</ul>
|
|
<div class="footnote">※ 完整票價表包含樹林、鶯歌、桃園、中壢等 20+ 站點，請於系統內檢視完整矩陣。</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 匯出/匯入說明 -->
|
|
<div class="function-block">
|
|
<div class="function-title">🔄 匯出／匯入票價版本</div>
|
|
<div class="screenshot">
|
|
<img src="./火車票價匯入.png" alt="火車票價匯入畫面">
|
|
<img src="./火車票價匯出.png" alt="火車票價匯出畫面">
|
|
</div>
|
|
<div class="desc-box">
|
|
<p>🔁 <strong>票價維護流程</strong></p>
|
|
<ul>
|
|
<li>建議先匯出現行版本作為基底，修改後再匯入。</li>
|
|
<li>點選「下載匯入範本」可取得空白票價格式。</li>
|
|
<li>匯入新版本時，系統會產生一個新版本號並詢問生效日期。</li>
|
|
<li>舊版本會保留供查詢，確保差旅費計算正確。</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |