293 lines
16 KiB
HTML
293 lines
16 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
|
<title>拦截管理 - 杜康城市伙伴</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-primary-container": "#ffb9b4",
|
|
"tertiary": "#37413b",
|
|
"on-secondary-fixed-variant": "#574500",
|
|
"surface-container-low": "#f4f3f1",
|
|
"outline": "#8d706e",
|
|
"aged-amber": "#FFBF00",
|
|
"tertiary-container": "#4e5852",
|
|
"on-tertiary": "#ffffff",
|
|
"primary-fixed": "#ffdad7",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-high": "#e9e8e6",
|
|
"surface-dim": "#dadad8",
|
|
"status-blue": "#2A6EBB",
|
|
"on-surface": "#1a1c1b",
|
|
"error": "#ba1a1a",
|
|
"surface-container-lowest": "#ffffff",
|
|
"outline-variant": "#e2bebc",
|
|
"surface": "#faf9f7",
|
|
"on-tertiary-fixed": "#141e19",
|
|
"background": "#faf9f7",
|
|
"secondary-fixed-dim": "#e9c349",
|
|
"tertiary-fixed": "#dae5dd",
|
|
"surface-tint": "#b3272c",
|
|
"subtle-gray": "#999999",
|
|
"secondary": "#735c00",
|
|
"on-background": "#1a1c1b",
|
|
"on-primary": "#ffffff",
|
|
"surface-container": "#efeeec",
|
|
"heritage-red": "#A61D24",
|
|
"inverse-primary": "#ffb3ae",
|
|
"on-secondary-container": "#745c00",
|
|
"secondary-fixed": "#ffe088",
|
|
"on-tertiary-container": "#c2cdc6",
|
|
"surface-container-highest": "#e3e2e0",
|
|
"success-green": "#2D6A4F",
|
|
"secondary-container": "#fed65b",
|
|
"on-secondary": "#ffffff",
|
|
"primary-container": "#a61d24",
|
|
"primary": "#820012",
|
|
"on-secondary-fixed": "#241a00",
|
|
"tertiary-fixed-dim": "#bec9c2",
|
|
"on-primary-fixed-variant": "#910817",
|
|
"on-tertiary-fixed-variant": "#3f4943",
|
|
"inverse-surface": "#2f3130",
|
|
"surface-bright": "#faf9f7",
|
|
"primary-fixed-dim": "#ffb3ae",
|
|
"error-container": "#ffdad6",
|
|
"ink-black": "#1A1A1A",
|
|
"surface-variant": "#e3e2e0",
|
|
"on-surface-variant": "#5a413f",
|
|
"on-primary-fixed": "#410004",
|
|
"on-error": "#ffffff",
|
|
"inverse-on-surface": "#f1f1ef"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"stack-sm": "4px",
|
|
"base": "8px",
|
|
"stack-md": "16px",
|
|
"stack-lg": "32px",
|
|
"margin-page": "20px",
|
|
"gutter-card": "12px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-xl": ["Manrope"],
|
|
"headline-md": ["Manrope"],
|
|
"headline-lg": ["Manrope"],
|
|
"coupon-amount": ["Manrope"],
|
|
"body-md": ["Be Vietnam Pro"],
|
|
"label-md": ["Inter"],
|
|
"body-lg": ["Be Vietnam Pro"],
|
|
"headline-lg-mobile": ["Manrope"]
|
|
},
|
|
"fontSize": {
|
|
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
|
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.notch-left, .notch-right {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
}
|
|
.notch-left { left: -5px; transform: translateY(-50%); }
|
|
.notch-right { right: -5px; transform: translateY(-50%); }
|
|
|
|
.premium-shadow {
|
|
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
|
}
|
|
|
|
body {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.scroll-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md min-h-screen pb-32">
|
|
<!-- Top Navigation -->
|
|
<header class="w-full sticky top-0 z-50 bg-background flex justify-between items-center px-margin-page h-14 w-full">
|
|
<button class="active:scale-95 transition-transform">
|
|
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
|
</button>
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-primary">拦截管理</h1>
|
|
<button class="active:scale-95 transition-transform">
|
|
<span class="material-symbols-outlined text-primary">search</span>
|
|
</button>
|
|
</header>
|
|
<main class="px-margin-page pt-4 space-y-6">
|
|
<!-- Search & Filter Area -->
|
|
<section class="space-y-4">
|
|
<div class="relative group">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant opacity-60">search</span>
|
|
<input class="w-full h-12 pl-12 pr-4 bg-surface-container-low border-none rounded-xl focus:ring-1 focus:ring-heritage-red/20 transition-all text-body-md" placeholder="输入订单号或收货人姓名" type="text">
|
|
</div>
|
|
<!-- Warning Banner -->
|
|
<div class="bg-primary/5 border border-primary/10 rounded-xl p-4 flex gap-3">
|
|
<span class="material-symbols-outlined text-heritage-red text-[20px]">info</span>
|
|
<p class="text-label-md text-on-surface-variant leading-relaxed">
|
|
温馨提示：拦截操作将立即停止当前配送流程，请务必与配送员及总部确认原因。
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<!-- Tabs -->
|
|
<nav class="flex space-x-8 border-b border-surface-container-highest">
|
|
<button class="pb-3 text-body-md font-medium text-on-surface-variant relative">
|
|
全部
|
|
</button>
|
|
<button class="pb-3 text-body-md font-semibold text-heritage-red relative">
|
|
配送中
|
|
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-heritage-red rounded-full"></span>
|
|
</button>
|
|
<button class="pb-3 text-body-md font-medium text-on-surface-variant relative">
|
|
待配送
|
|
</button>
|
|
</nav>
|
|
<!-- Order List -->
|
|
<div class="space-y-4">
|
|
<!-- Order Card 1 -->
|
|
<div class="bg-surface-container-lowest rounded-xl premium-shadow overflow-hidden border border-surface-container-high">
|
|
<div class="p-4 space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-label-md text-on-surface-variant tracking-wider">DK202310279981</span>
|
|
<span class="px-2.5 py-1 rounded-full bg-secondary-container text-on-secondary-container font-label-md">配送中</span>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="w-20 h-20 bg-surface-container rounded-lg flex-shrink-0 overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="A studio photograph of a premium Chinese Baijiu bottle, Dukang Royal Reserve 15 Years, featuring an elegant glass design with golden detailing. The lighting is soft and cinematic, highlighting the clarity of the liquor and the textured label. The background is a minimalist warm cream tone, reflecting a heritage modernism aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDIIY4v34b8qZ9VnDomAbzr43VvEpyJaCgLa5Wh4JkLV8aJE0CLuCtG8GV-4wrb9tgn0s7ougkZrleaDN53gpuE7pf-p9645i1Aka9Ll-poB7NTGQngb3BTDWhmZDOX2_OfefTNyI2UwGrql5XLF8rsLWE9LRegFdjecpilIiV7RNRIQ3HMKPat6g_-zADv8TBQEl9UFy9to6AYKnixUA4JXb60goXraq8ELGdBAX1mHZKV9VdG2ppQCTO0c0TjaN1n516_vNCiEqA">
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="font-headline-md text-on-surface truncate">杜康·御享15年</h3>
|
|
<p class="mt-1 text-label-md text-on-surface-variant">张晓明 · 138****8888</p>
|
|
<p class="text-label-md text-on-surface-variant truncate">洛阳市洛龙区长夏门街开元大道交叉口...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-3 bg-surface-container-low flex justify-end gap-3">
|
|
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface-variant text-label-md font-medium active:scale-95 transition-transform">查看详情</button>
|
|
<button class="px-4 py-2 rounded-lg bg-heritage-red text-white text-label-md font-medium active:scale-95 transition-transform">拦截配送</button>
|
|
</div>
|
|
</div>
|
|
<!-- Order Card 2 -->
|
|
<div class="bg-surface-container-lowest rounded-xl premium-shadow overflow-hidden border border-surface-container-high">
|
|
<div class="p-4 space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-label-md text-on-surface-variant tracking-wider">DK202310279945</span>
|
|
<span class="px-2.5 py-1 rounded-full bg-secondary-container text-on-secondary-container font-label-md">配送中</span>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="w-20 h-20 bg-surface-container rounded-lg flex-shrink-0 overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="Close up shot of a classic Chinese liquor bottle label with traditional calligraphy and a red seal. The bottle is nestled in a high-end gift box with velvet lining. Professional lighting creates a sense of luxury and authenticity, emphasizing the heritage of the Dukang brand. Neutral, sophisticated color palette." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDXSr4jpuxsQqg3jMSCp66vlEHMV-X5gu33oaMGvDEtwr0IiQuayQFu7kRANNvqUN5kw8sNEvi6dJYs6D1fwd4MjiBFs9crwp2WxDapSIcIT6At2thEmGwXvun-s-2ya4ko_N6QZxR9mmiHd0uoSkoVdYWpSNxn_ncie4ZExSDW6sYM9zHvXUjEgwOjRk8Q01WtKbszZAfeboMmAxeZcNFh9f7ipfMFuS9BbRiwOCLmaqDzgb2-kHKVP-M21-6ZUxYw5scvom9bnlw">
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="font-headline-md text-on-surface truncate">杜康·酒祖窖藏</h3>
|
|
<p class="mt-1 text-label-md text-on-surface-variant">李庆华 · 155****2233</p>
|
|
<p class="text-label-md text-on-surface-variant truncate">郑州市金水区未来路街道曼哈顿广场...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-3 bg-surface-container-low flex justify-end gap-3">
|
|
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface-variant text-label-md font-medium active:scale-95 transition-transform">查看详情</button>
|
|
<button class="px-4 py-2 rounded-lg bg-heritage-red text-white text-label-md font-medium active:scale-95 transition-transform">拦截配送</button>
|
|
</div>
|
|
</div>
|
|
<!-- Order Card 3 (Visual variation for different status) -->
|
|
<div class="bg-surface-container-lowest rounded-xl premium-shadow overflow-hidden border border-surface-container-high opacity-70">
|
|
<div class="p-4 space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-label-md text-on-surface-variant tracking-wider">DK202310279812</span>
|
|
<span class="px-2.5 py-1 rounded-full bg-surface-variant text-on-surface-variant font-label-md">待配送</span>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="w-20 h-20 bg-surface-container rounded-lg flex-shrink-0 overflow-hidden grayscale">
|
|
<img class="w-full h-full object-cover" data-alt="Minimalist product photography of a premium Chinese spirit bottle against a soft, clean architectural background. The scene is bright and airy, representing high-quality service and modern distribution. The aesthetic is calm and organized, reflecting the efficiency of the delivery management system." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB_kMraA8rHsrwtk9XaRzzoFOt2w6KAT9Z9MhDu_yePz5p5d9Tek2DYB1_Txf19BjaHI7k0Ty8BcxyrgBWOQU71Pg2mwMY4n0l5k6eEX5I9CksPyaIXBgJfYln-lrUcRdTXObwgpU2dclJnDH3CPNssuGS-_TLErFS77bfMg9dJWupGjp7Px1IJFgV7u3N0qtsc7whSlujTInjDRjDfhpuU_rU48Of9uAtd5ZFlJiYX1pn5J_CvrpvZasXo0BswFN53SYgluyubg6I">
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="font-headline-md text-on-surface truncate">杜康·御享12年</h3>
|
|
<p class="mt-1 text-label-md text-on-surface-variant">王建国 · 131****4455</p>
|
|
<p class="text-label-md text-on-surface-variant truncate">洛阳市涧西区南昌路万达广场办公楼...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-3 bg-surface-container-low flex justify-end gap-3">
|
|
<button class="px-4 py-2 rounded-lg border border-outline-variant text-on-surface-variant text-label-md font-medium active:scale-95 transition-transform">查看详情</button>
|
|
<button class="px-4 py-2 rounded-lg border border-heritage-red/30 text-heritage-red text-label-md font-medium active:scale-95 transition-transform">撤回订单</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Navigation Bar -->
|
|
|
|
<script>
|
|
// Simple Interaction logic for intercept button
|
|
document.querySelectorAll('button').forEach(btn => {
|
|
if (btn.innerText === '拦截配送') {
|
|
btn.addEventListener('click', function() {
|
|
const confirmAction = confirm('确定要拦截该订单吗？此操作将立即停止配送。');
|
|
if (confirmAction) {
|
|
this.innerText = '正在拦截...';
|
|
this.disabled = true;
|
|
this.classList.add('opacity-50');
|
|
setTimeout(() => {
|
|
alert('拦截请求已发送，请等待总部审核结果。');
|
|
this.innerText = '已申请拦截';
|
|
}, 1500);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Tab switching visual effect
|
|
const tabs = document.querySelectorAll('nav button');
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
tabs.forEach(t => {
|
|
t.classList.remove('text-heritage-red', 'font-semibold');
|
|
t.classList.add('text-on-surface-variant', 'font-medium');
|
|
const indicator = t.querySelector('span');
|
|
if (indicator) indicator.remove();
|
|
});
|
|
tab.classList.add('text-heritage-red', 'font-semibold');
|
|
tab.classList.remove('text-on-surface-variant', 'font-medium');
|
|
const line = document.createElement('span');
|
|
line.className = 'absolute bottom-0 left-0 w-full h-0.5 bg-heritage-red rounded-full';
|
|
tab.appendChild(line);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body></html> |