<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>订单详情</title>
<style>
:root {
--bg: #f5f7fa;
--card: #ffffff;
--text: #1f2d3d;
--muted: #6b7b93;
--line: #e6ebf1;
--primary: #26c281;
--primary-weak: #e7fbf1;
--danger: #e74c3c;
--accent: #ff4d4f;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
color: var(--text);
background: var(--bg);
}
.page {
max-width: 1150px;
margin: 24px auto;
padding: 0 16px;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.chip {
background: #f0f3f7;
border: 1px solid var(--line);
border-radius: 18px;
padding: 6px 12px;
font-size: 12px;
color: #3a4a5a;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
border-radius: 18px;
padding: 10px 14px;
font-weight: 600;
cursor: pointer;
background: #ea5455;
color: #fff;
text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn.secondary {
background: #f3f4f6;
color: #111827;
border: 1px solid var(--line);
}
.btn.link {
background: transparent;
color: #2563eb;
padding: 0;
}
.card {
background: var(--card);
border: 1px solid var(--line);
padding: 18px 20px;
}
.card h3 {
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 700;
}
.sub {
color: var(--muted);
font-size: 14px;
}
.header {
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 20px;
box-shadow: 0 2px 6px rgba(31,45,61,.05);
}
.order-no {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
}
.tag-danger {
display: inline-block;
color: var(--danger);
font-weight: 600;
margin-left: 8px;
}
.timeline {
position: relative;
padding: 8px 0 0 0;
}
.timeline-track {
position: relative;
height: 6px;
background: #e9f7ef;
border-radius: 999px;
margin: 18px 8px 26px 8px;
}
.timeline-track .fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
background: var(--primary);
border-radius: 999px;
}
.steps {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin-top: -16px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 2px 0 rgba(0,0,0,.06) inset;
}
.step .label {
font-size: 12px;
color: #2c3e50;
font-weight: 600;
}
.step .date {
font-size: 11px;
color: var(--muted);
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.track-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
font-size: 14px;
}
.log {
background: #fbfcfd;
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px;
max-height: 220px;
overflow: auto;
font-size: 13px;
line-height: 1.6;
color: #374151;
}
.product {
display: grid;
grid-template-columns: 140px 1fr 280px;
gap: 16px;
align-items: start;
}
.thumb {
width: 140px;
height: 110px;
border-radius: 8px;
background: linear-gradient(135deg,#eaeef3,#d9e3ef);
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-weight: 700;
letter-spacing: .5px;
}
.prod-title {
font-weight: 700;
margin-bottom: 6px;
font-size: 14px;
color: #1f2937;
}
.prod-meta {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: start;
font-size: 12px;
color: #4b5563;
}
.price-box {
/* border-left: 1px dashed var(--line); */
padding-left: 16px;
font-size: 13px;
color: #334155;
}
.price-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 4px 0;
}
.price-row .val.negative { color: #ef4444; }
.price-row .val.strong { color: #e11d48; font-weight: 800; }
.totals {
display: inline-block;
margin-top: 16px;
/* border: 1px solid var(--line); */
/* background: #fff7ed; */
padding: 12px 16px;
border-radius: 10px;
min-width: 260px;
float: right;
}
.totals .rowline {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
padding: 2px 0;
font-weight: 700;
}
.muted {
color: var(--muted);
font-weight: 500;
}
.divider {
height: 1px;
background: var(--line);
margin: 8px 0;
}
.courier {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.courier-card {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
padding: 16px;
border: 1px solid var(--line);
border-left: 4px solid #ef4444;
border-radius: 14px;
background: linear-gradient(180deg, #ffffff, #fafafa);
box-shadow: 0 6px 16px rgba(31,45,61,.06);
}
.brand-panel {
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #fff;
border-radius: 12px;
padding: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 25px rgba(185, 28, 28, .25);
}
.brand-logo {
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(255,255,255,.2);
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 24px;
letter-spacing: .5px;
}
.brand-name {
font-size: 18px;
font-weight: 900;
letter-spacing: .8px;
}
.kv-grid {
display: grid;
grid-template-columns: 160px 1fr;
gap: 12px 16px;
align-items: center;
}
.kv-grid .label {
text-align: right;
color: var(--muted);
font-weight: 700;
}
.kv-grid .value {
color: #111827;
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
}
.pill-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: #f3f4f6;
border: 1px solid var(--line);
color: #111827;
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.icon-sm {
width: 16px;
height: 16px;
display: inline-block;
}
.cta-line {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
.btn.primary {
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #fff;
}
.brand-pill {
background: linear-gradient(135deg, #ff4d4f, #e11d48);
color: #fff;
padding: 10px 14px;
border-radius: 12px;
font-weight: 800;
letter-spacing: .6px;
box-shadow: 0 4px 14px rgba(225,29,72,.25);
}
.kv-list {
display: grid;
grid-template-columns: 170px 1fr;
column-gap: 16px;
row-gap: 10px;
align-items: center;
font-size: 14px;
color: #1f2937;
flex: 1;
min-width: 320px;
}
.kv-list .key {
text-align: right;
color: var(--muted);
font-weight: 700;
}
.kv-list .val a {
color: #2563eb;
text-decoration: none;
}
.kv-list .val a:hover {
text-decoration: underline;
}
.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
letter-spacing: .3px;
font-weight: bolder;
}
@media (max-width: 960px) {
.product { grid-template-columns: 110px 1fr; }
.price-box { border-left: none; padding-left: 0; grid-column: 1 / -1; }
.totals { float: none; width: 100%; }
.kv-list { grid-template-columns: 1fr; }
.kv-list .key { text-align: left; }
.courier-card { grid-template-columns: 1fr; }
.kv-grid .label { text-align: left; }
}
</style>
</head>
<body>
<div class="page">
<!-- <div class="header row">
<div class="order-no">
<span>Order Number: JGSL43409</span>
<span class="chip">复制</span>
</div>
<button class="btn">Customer Service</button>
</div> -->
<div class="card">
<div class="row">
<h3 class="row" style="gap:10px;margin:0">
<span>Production Time</span>
<span class="tag-danger">3-5 Working Days</span>
</h3>
</div>
<div class="timeline">
<div class="timeline-track"><div class="fill"></div></div>
<div class="steps">
<div class="step">
<div class="icon">✔</div>
<div class="label">Order placed</div>
<div class="date">2026-02-10</div>
</div>
<div class="step">
<div class="icon">✔</div>
<div class="label">Designing</div>
<div class="date">2026-02-10</div>
</div>
<div class="step">
<div class="icon">✔</div>
<div class="label">Producing</div>
<div class="date">2026-02-10</div>
</div>
<div class="step">
<div class="icon">✔</div>
<div class="label">Packing</div>
<div class="date">2026-02-13</div>
</div>
<div class="step">
<div class="icon">✔</div>
<div class="label">Shipping</div>
<div class="date">2026-02-14</div>
</div>
<div class="step">
<div class="icon">✔</div>
<div class="label">Delivered</div>
<div class="date">2026-02-19</div>
</div>
</div>
</div>
</div>
<div class="card" style="margin-top:14px">
<div class="row">
<h3 style="margin:0">Delivery Info.</h3>
<button class="btn secondary" style="font-size:12px;padding:6px 10px">Change</button>
</div>
<div style="margin-top:8px">
<div class="chip">Shipping Address：sandra leo, +61401390266, 2 Waratah Street, LAWSON, New South Wales, Australia, 2783</div>
</div>
</div>
<div class="card">
<h3 style="margin-bottom:8px">Track Info.</h3>
<div class="track-meta">
<div>Tracking No.: <strong>MP0081099347</strong></div>
<div>Tracking Site: <a href="https://carrierlist.17track.net/en/china/190112-ubi" target="_blank">carrierlist.17track.net</a></div>
</div>
<div class="log" style="margin-top:10px">
<div>2026-02-14 20:18:39 PROCESSED AT ORIGIN HUB, CN</div>
<div>2026-02-14 20:18:39 WEIGHED AT WAREHOUSE, CN</div>
<div>2026-02-14 20:17:39 RECEIVED SHIPMENT, CN</div>
<div>2026-02-14 20:16:39 SHIPPING INFORMATION RECEIVED, CN</div>
<div class="divider"></div>
<div>Delivered: Means your order has arrived at your door or delivered to your mailbox. Please make sure to always have your order shipped to a safe location where somebody will be available to receive it. Sometimes the postal service will deliver a package to the wrong home in the same general vicinity, so it would be a good idea to check with any nearby neighbors who may have received your order by mistake. You should also check around your porch areas where the package could have fallen into. Please note that customers are responsible for loss due to wrong shipping information. If you are still unable to locate your package, please contact us as soon as possible.</div>
</div>
</div>
<div class="card">
<div class="row">
<h3 style="margin:0">Local Courier Contact Info.</h3>
<a class="btn secondary" href="https://www.aramex.com.au/our-services/service-updates/" target="_blank" style="font-size:12px;padding:6px 10px;border: 2px solid rgb(237, 61, 61);color:rgb(237, 61, 61);background:white; font-weight: 700;
margin-bottom: 10px;">Track Now</a>
</div>
<div class="track-meta">
<div>Courier Company: <strong>Aramex</strong></div>
<div>Contact Tel. No.: <a href="tel:+61297378288">+61(0)297378288</a>；<a href="tel:1300327892">1300327892</a></div>
<div>Tracking Number: <span class="mono">MP0081099347</span><img class="icon-sm" src="https://ordertrack.info/static/admin/images/icon_copy_pc.png" alt="copy" style="margin-left:6px;vertical-align:middle"></div>
<div>Tracking Website: <a href="https://www.aramex.com.au/our-services/service-updates/" target="_blank">aramex.com.au/service-updates</a></div>
</div>
</div>
<div class="card" style="margin-top:14px">
<div class="row">
<h3 style="margin:0">Product Info.</h3>
<div class="sub">Product Qty.: 1 Completed Qty.: 1</div>
<button class="btn secondary" style="margin-left:auto">View Design</button>
</div>
<div style="margin-top:14px" class="product">
<div class="thumb">IMAGE</div>
<div>
<div class="prod-title">Custom 3D Effect Action Figure Pack Packaging Toy Box Style Gift Art Personalized Acrylic Car Hanger Gift for Dad - 4.5” - Best Seller / 3</div>
<div class="prod-meta">
<div>
<div>Item No.: CSBOP1767X08</div>
<div>Unique Code: X2602105106810023</div>
<div><a href="#" style="color:#2563eb;text-decoration:none">Design Details & History</a></div>
</div>
<div style="text-align:right;font-weight:700">x1</div>
</div>
</div>
<div class="price-box">
<div class="price-row"><div>Unit price</div><div class="val">(AU$26.95)</div></div>
<div class="price-row"><div>Total price</div><div class="val">(AU$26.95)</div></div>
<div class="price-row"><div>Discount Amount</div><div class="val negative">(AU$2.69)</div></div>
<div class="price-row"><div style="font-weight:800">Actual price</div><div class="val strong">(AU$24.26)</div></div>
</div>
</div>
<div class="totals">
<div class="rowline"><div>Order Total</div><div>AU$30.54</div></div>
<div class="rowline"><div>Shipping Fee</div><div>AU$11.99</div></div>
<div class="divider"></div>
<div class="rowline"><div>Grand Total</div><div style="color:#e11d48">AU$42.53</div></div>
</div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
index.html
md
README.md
index.html