<!-- ============================= -->
<!-- Track Your Order (Fiido-like layout for Flawless) -->
<!-- ============================= -->
<section class="trk-wrap">
<div class="trk-grid">
<!-- 左侧：标题与说明 -->
<aside class="trk-info">
<h1 class="trk-title">Track Your Order</h1>
<p class="trk-lead">
Enter your order number and tracking number to view real-time delivery updates.
</p>
<ul class="trk-bullets">
<li>
<img src="{{ 'trk-icon-1.webp' | asset_url }}" alt="" width="20" height="20" loading="lazy">
Real-time status from global carriers
</li>
<li>
<img src="{{ 'trk-icon-2.webp' | asset_url }}" alt="" width="20" height="20" loading="lazy">
Email/SMS updates available
</li>
<li>
<img src="{{ 'trk-icon-3.webp' | asset_url }}" alt="" width="20" height="20" loading="lazy">
Secure & privacy-friendly
</li>
</ul>
<!-- 可选：底部横幅图（KV） -->
<figure class="trk-banner">
<img src="{{ 'trk-banner.jpg' | asset_url }}" alt="Tracking banner" loading="lazy">
</figure>
</aside>
<!-- 右侧：查询卡片（容器 + 17TRACK 小部件） -->
<div class="trk-card">
<h3 class="trk-card__title">Order Tracking</h3>
<!-- 顶部自有表单（仅做样式/占位；实际结果由下方 17TRACK 容器渲染） -->
<div class="trk-form">
<div class="trk-field">
<label for="orderno">Order Number</label>
<input id="orderno" type="text" placeholder="e.g. #12345">
</div>
<div class="trk-field">
<label for="trackno">Tracking Number</label>
<input id="trackno" type="text" placeholder="e.g. 1Z9999999999999999">
</div>
<button type="button" class="trk-btn" id="trkGo">TRACK</button>
<a class="trk-help-link" href="/pages/contact-us">Click to report an issue with express delivery information</a>
</div>
<!-- 17TRACK 容器（实际输入/结果会在这里渲染） -->
<div id="YQContainer"></div>
</div>
</div>
</section>
<style>
/* ============================= */
/* 视觉规范变量（可按你的色板/字号替换） */
/* ============================= */
:root{
--brand: #0B0F1A; /* 标题主文本色 */
--brand-2: #2C7CF6; /* 强调蓝/按钮色（可换成你的主色） */
--text-1: #111111; /* 正文主文本 */
--text-2: #5A5F6A; /* 次文本 */
--bg-0: #fffff3; /* 页面背景（按你的指定） */
--panel: #FFFFFF; /* 卡片白 */
--line: #E6E8EC; /* 边框 */
--font-head: "Inter","Roboto",-apple-system,"Segoe UI",Arial,sans-serif;
--font-body: "Inter","Roboto",-apple-system,"Segoe UI",Arial,sans-serif;
--fs-h: 28px; --lh-h: 1.25; /* H1 */
--fs-b: 16px; --lh-b: 1.65; /* Body */
--fs-s: 13px; --lh-s: 1.45; /* Small */
--radius-lg: 14px;
--radius-md: 10px;
--shadow: 0 10px 28px rgba(0,0,0,.06);
}
/* ============================= */
/* 布局与基础样式（Fiido-like） */
/* ============================= */
.trk-wrap{
background: var(--bg-0);
padding: 36px 16px 56px;
}
.trk-grid{
max-width: 1120px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 28px;
align-items: start;
}
.trk-title{
font-family: var(--font-head);
font-size: var(--fs-h);
line-height: var(--lh-h);
color: var(--brand);
margin: 4px 0 10px;
font-weight: 800;
}
.trk-lead{
font-family: var(--font-body);
font-size: var(--fs-b);
line-height: var(--lh-b);
color: var(--text-2);
margin-bottom: 14px;
}
.trk-bullets{
list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px;
}
.trk-bullets li{
display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center;
color: var(--text-1);
}
.trk-bullets img{ display:block; width: 20px; height: 20px; }
.trk-banner{
margin: 14px 0 0; border-radius: var(--radius-lg); overflow: hidden; border:1px solid var(--line);
}
.trk-banner img{ width: 100%; display: block; }
/* 右侧卡片 */
.trk-card{
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow);
}
.trk-card__title{
font-size: 22px; font-weight: 800; color: var(--text-1); margin: 2px 0 10px;
}
/* 顶部输入区域（样式贴近 Fiido） */
.trk-form{ display: grid; gap: 10px; margin-bottom: 12px; }
.trk-field{ display: grid; gap: 6px; }
.trk-field label{ font-size: 13px; color: var(--text-2); }
.trk-field input{
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 12px 12px;
font-size: var(--fs-b);
color: var(--text-1);
background: #fff;
}
.trk-field input:focus{
outline: none;
border-color: var(--brand-2);
box-shadow: 0 0 0 3px rgba(44,124,246,.12);
}
.trk-btn{
height: 44px;
border-radius: 12px;
background: var(--brand-2);
color: #fff;
font-weight: 800;
border: none;
cursor: pointer;
}
.trk-btn:hover{ filter: brightness(1.05); }
.trk-help-link{
display: inline-block;
margin-top: -2px;
font-size: var(--fs-s);
color: var(--text-2);
text-decoration: underline;
}
/* 17TRACK 容器最小高度，避免加载瞬间抖动 */
#YQContainer{ min-height: 460px; }
/* 响应式 */
@media (max-width: 989px){
.trk-grid{ grid-template-columns: 1fr; }
}
</style>
<script>
/* 将你上面填写的 tracking number，传给 17TRACK（可选增强）
- 如果你希望“TRACK”按钮把输入框里的跟踪号传给 17TRACK：
- 需在下方粘贴 17TRACK 脚本后，确保 YQV5 可用，再调用 trackSingle 。
*/
document.addEventListener('click', function(e){
const btn = e.target.closest('#trkGo');
if(!btn) return;
const tn = document.getElementById('trackno')?.value?.trim() || '';
const containerId = 'YQContainer';
if(typeof YQV5 !== 'undefined' && tn){
YQV5.trackSingle({
YQ_ContainerId: containerId,
YQ_Height: 560,
YQ_Lang: 'en',
YQ_Fc: '0',
YQ_Num: tn
});
// 滚动到结果
const yq = document.getElementById(containerId);
if(yq){ yq.scrollIntoView({behavior:'smooth', block:'start'}); }
}
});
</script>
<!-- ============================= -->
<!-- 在此处粘贴 17TRACK 官方小部件脚本（从 17TRACK 控制台复制） -->
<!-- 例如：
<script src="https://www.17track.net/externalCall.js"></script>
<script>
YQV5.trackSingle({
YQ_ContainerId: "YQContainer",
YQ_Height: 560,
YQ_Lang: "en",
YQ_Fc: "0",
YQ_Num: "" // 可留空，或让上面的按钮来传入
});
</script>
-->
