449 lines
28 KiB
HTML
449 lines
28 KiB
HTML
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" 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=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500&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": {
|
|
"outline": "#8d706e",
|
|
"tertiary-container": "#4e5852",
|
|
"on-tertiary-fixed-variant": "#3f4943",
|
|
"status-blue": "#2A6EBB",
|
|
"primary": "#820012",
|
|
"error": "#ba1a1a",
|
|
"secondary-fixed-dim": "#e9c349",
|
|
"on-tertiary-container": "#c2cdc6",
|
|
"on-error": "#ffffff",
|
|
"inverse-primary": "#ffb3ae",
|
|
"surface-variant": "#e3e2e0",
|
|
"surface-container-highest": "#e3e2e0",
|
|
"primary-fixed-dim": "#ffb3ae",
|
|
"tertiary-fixed-dim": "#bec9c2",
|
|
"aged-amber": "#FFBF00",
|
|
"secondary-container": "#fed65b",
|
|
"primary-container": "#a61d24",
|
|
"on-primary-fixed-variant": "#910817",
|
|
"surface-container": "#efeeec",
|
|
"inverse-on-surface": "#f1f1ef",
|
|
"background": "#faf9f7",
|
|
"surface-container-low": "#f4f3f1",
|
|
"on-secondary-container": "#745c00",
|
|
"tertiary": "#37413b",
|
|
"on-error-container": "#93000a",
|
|
"heritage-red": "#A61D24",
|
|
"surface-container-high": "#e9e8e6",
|
|
"success-green": "#2D6A4F",
|
|
"surface-dim": "#dadad8",
|
|
"inverse-surface": "#2f3130",
|
|
"error-container": "#ffdad6",
|
|
"surface": "#faf9f7",
|
|
"on-surface-variant": "#5a413f",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary": "#ffffff",
|
|
"primary-fixed": "#ffdad7",
|
|
"surface-tint": "#b3272c",
|
|
"subtle-gray": "#999999",
|
|
"secondary": "#735c00",
|
|
"on-primary-container": "#ffb9b4",
|
|
"on-surface": "#1a1c1b",
|
|
"secondary-fixed": "#ffe088",
|
|
"on-primary-fixed": "#410004",
|
|
"on-secondary-fixed-variant": "#574500",
|
|
"surface-bright": "#faf9f7",
|
|
"on-secondary-fixed": "#241a00",
|
|
"tertiary-fixed": "#dae5dd",
|
|
"outline-variant": "#e2bebc",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-tertiary-fixed": "#141e19",
|
|
"on-tertiary": "#ffffff",
|
|
"on-background": "#1a1c1b",
|
|
"ink-black": "#1A1A1A"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"margin-page": "20px",
|
|
"stack-lg": "32px",
|
|
"stack-sm": "4px",
|
|
"gutter-card": "12px",
|
|
"stack-md": "16px",
|
|
"base": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Manrope"],
|
|
"headline-xl": ["Manrope"],
|
|
"headline-lg-mobile": ["Manrope"],
|
|
"coupon-amount": ["Manrope"],
|
|
"body-lg": ["Be Vietnam Pro"],
|
|
"label-md": ["Inter"],
|
|
"headline-lg": ["Manrope"],
|
|
"body-md": ["Be Vietnam Pro"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
|
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
|
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.paper-texture {
|
|
background-color: #faf9f7;
|
|
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
|
}
|
|
.ticket-notch {
|
|
position: relative;
|
|
}
|
|
.ticket-notch::before, .ticket-notch::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: #ffffff;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.ticket-notch::before { left: -6px; }
|
|
.ticket-notch::after { right: -6px; }
|
|
|
|
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #820012; border-radius: 10px; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md selection:bg-heritage-red/20 custom-scrollbar">
|
|
<!-- Top Navigation Bar (Shared Component Strategy) -->
|
|
<header class="bg-surface dark:bg-surface-dim shadow-sm w-full top-0 sticky flex items-center justify-between px-margin-page h-16 z-40">
|
|
<div class="flex items-center gap-4">
|
|
<button class="active:scale-95 transition-transform p-2 hover:bg-surface-variant/50 rounded-full">
|
|
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
|
</button>
|
|
<h1 class="font-headline-md text-headline-md-mobile text-primary">订单详情</h1>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="hidden md:flex gap-6 items-center">
|
|
<span class="font-label-md text-on-surface-variant cursor-pointer hover:text-primary transition-colors">控制台</span>
|
|
<span class="font-label-md text-primary font-bold border-b-2 border-primary py-1">订单管理</span>
|
|
<span class="font-label-md text-on-surface-variant cursor-pointer hover:text-primary transition-colors">报表中心</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-primary cursor-pointer">account_balance_wallet</span>
|
|
</div>
|
|
</header>
|
|
<main class="max-w-6xl mx-auto px-margin-page py-base space-y-6 mb-24">
|
|
<!-- Order Status Banner -->
|
|
<section class="relative overflow-hidden rounded-xl bg-heritage-red p-6 text-white shadow-lg flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: "FILL" 1;">check_circle</span>
|
|
<h2 class="font-headline-lg text-headline-lg-mobile">订单已完成</h2>
|
|
</div>
|
|
<p class="opacity-90 text-label-md">此订单已于 2023-10-24 14:30:00 完成全部款项结算与权益发放</p>
|
|
</div>
|
|
<div class="relative z-10 flex gap-3">
|
|
|
|
|
|
</div>
|
|
</section>
|
|
<!-- Bento Grid Layout for Order Intelligence -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
|
<!-- Left Column: Order Source & Products -->
|
|
<div class="md:col-span-8 space-y-6">
|
|
<!-- Channel & Source Card -->
|
|
<div class="bg-white rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="font-headline-md text-ink-black flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">hub</span> 渠道溯源
|
|
</h3>
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-label-md font-bold">洛阳市中心城区</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-surface-container-low p-4 rounded-lg">
|
|
<p class="text-subtle-gray text-label-md mb-1">订单渠道来源</p>
|
|
<p class="font-headline-md text-primary">高端品鉴会 · 特邀</p>
|
|
</div>
|
|
<div class="bg-surface-container-low p-4 rounded-lg">
|
|
<p class="text-subtle-gray text-label-md mb-1">营销识别码</p>
|
|
<p class="font-headline-md text-ink-black">DK-MKT-2023-998</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Product Information -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
|
<div class="px-6 py-4 border-b border-surface-container flex items-center justify-between">
|
|
<h3 class="font-headline-md text-ink-black">订购产品清单</h3>
|
|
<span class="text-subtle-gray text-label-md">共 2 件商品</span>
|
|
</div>
|
|
<div class="divide-y divide-surface-container">
|
|
<!-- Product Item -->
|
|
<div class="p-6 flex gap-6 items-start">
|
|
<div class="w-24 h-24 rounded-lg bg-surface flex-shrink-0 relative">
|
|
<img class="w-full h-full object-cover rounded-lg" data-alt="Close-up studio photography of a premium 50-year-old Dukang white liquor bottle featuring intricate golden phoenix engravings and a rich heritage red silk ribbon. The lighting is dramatic and warm, highlighting the crystalline clarity of the spirit against a dark, minimalist background. Cinematic professional commercial product shot." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQYlFP9_mUhnrKJSzZS3zUshFWY-2_DBF5jjFc16CYVnIh5bcA5XR1HMTuxGv1anqxdYLH20p8Wt1BAAZPUz8dyx7s2zbB2-DuQhLpyTLW2De9jAPKSVA3pP_V14jwT72R4xv77LVT44uRplRtnxfhzMRDLwQZrvXoxkOQp8qqZe8WVz5eslGne18o9SCIPNWYC4P-m2dnMOFrcyNeAQNEOFuatxe02UkVAvY-4IofyqJamXWI3A2lSbzxv828Vbw803BYVIihsAM">
|
|
<div class="absolute -top-2 -left-2 bg-aged-amber text-on-secondary-container px-2 py-0.5 rounded text-[10px] font-bold shadow-sm">
|
|
典藏级
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<div class="flex justify-between items-start">
|
|
<h4 class="font-headline-md text-ink-black mb-1">杜康 · 龙腾四海 (52度浓香型 500ml)</h4>
|
|
<span class="font-headline-md text-primary">¥2,580.00</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 text-subtle-gray text-label-md mt-2 justify-between">
|
|
<span class="">数量: 1</span>
|
|
<span class="">重量: 1.2kg</span>
|
|
<span class="flex items-center gap-1 text-success-green whitespace-nowrap">
|
|
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: "FILL" 1;">verified</span> 已入库
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Product Item 2 -->
|
|
<div class="p-6 flex gap-6 items-start">
|
|
<div class="w-24 h-24 rounded-lg bg-surface flex-shrink-0 relative">
|
|
<img class="w-full h-full object-cover rounded-lg" data-alt="Minimalist top-down view of a classic ceramic liquor vessel with traditional Chinese brush calligraphy and a red wax seal, set on a dark slate background with scattered golden wheat husks. High contrast, elegant composition, muted colors except for the heritage red accents." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCavDEh82PXrLJnDxvlUL13Nqcmg79a5e70V4QGJsMSDzu6tn-HQwTtrs8ptkA0l7dh72c0maP5_V1n2TmoHooEXkvwfEpfZkNfcrQs9GozY0b6ezZ-FRnY8YG-jcqkfG6F-oKl12ylPO5aDuhfvK5AzvBWwCg-eqX3tTbMvtFh6CBw-OukdJCgQGgrPS-m_88GaHi4w7EfoMRntkjeeVA8XHVLQI6rFuKmKY_XKEJCc3Bwggt4TpOcHwxQ5QIAR3UkqdugHK6Bbpk">
|
|
</div>
|
|
<div class="flex-grow">
|
|
<div class="flex justify-between items-start">
|
|
<h4 class="font-headline-md text-ink-black mb-1">杜康 · 世代窖藏 (特选版)</h4>
|
|
<span class="font-headline-md text-primary">¥1,880.00</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 text-subtle-gray text-label-md mt-2 justify-between">
|
|
<span class="">数量: 1</span>
|
|
<span class="">重量: 1.5kg</span>
|
|
<span class="flex items-center gap-1 text-success-green whitespace-nowrap">
|
|
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: "FILL" 1;">verified</span> 已入库
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-low px-6 py-4 flex justify-end gap-12"><div class="text-right">
|
|
<p class="text-subtle-gray text-label-md">配送</p>
|
|
<p class="font-headline-md whitespace-nowrap">小飞侠配送</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-subtle-gray text-label-md">商品总价</p>
|
|
<p class="font-headline-md">¥4,460.00</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-subtle-gray text-label-md">实付金额</p>
|
|
<p class="font-headline-xl text-primary">¥4,460.00</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Financial & Commission Details -->
|
|
<div class="bg-white rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
|
<h3 class="font-headline-md text-ink-black mb-6 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">payments</span> 财务与佣金明细
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="border border-surface-container rounded-xl overflow-hidden">
|
|
<div class="bg-surface px-4 py-2 border-b border-surface-container flex justify-between">
|
|
<span class="font-label-md text-on-surface">订单分销佣金</span>
|
|
<span class="bg-success-green/10 text-success-green px-2 py-0.5 rounded text-[10px] font-bold">已支付</span>
|
|
</div>
|
|
<div class="p-4 bg-white" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
|
<p class="text-headline-lg font-coupon-amount text-primary">¥446.00</p>
|
|
<p class="text-subtle-gray text-label-md mt-1">计算规则: 固定比例 10%</p>
|
|
</div>
|
|
</div>
|
|
<div class="border border-surface-container rounded-xl overflow-hidden">
|
|
<div class="bg-surface px-4 py-2 border-b border-surface-container flex justify-between">
|
|
<span class="font-label-md text-on-surface">权益核销佣金</span>
|
|
|
|
</div>
|
|
<div class="p-4 bg-white" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;"><div class="space-y-4">
|
|
<div class="flex flex-col gap-1 pb-3 border-b border-surface-container">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] text-on-surface-variant">权益核销佣金 - 杜康·厚德酒家</span>
|
|
<span class="bg-success-green/10 text-success-green px-2 py-0.5 rounded text-[10px] font-bold">已结算</span>
|
|
</div>
|
|
<p class="text-headline-md font-coupon-amount text-ink-black">¥40.00</p>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[11px] text-on-surface-variant">权益核销佣金 - 杜康·名仕雅居</span>
|
|
<span class="bg-aged-amber/10 text-secondary px-2 py-0.5 rounded text-[10px] font-bold">待结算</span>
|
|
</div>
|
|
<p class="text-headline-md font-coupon-amount text-ink-black">¥50.00</p>
|
|
</div>
|
|
<div class="mt-2 pt-2 border-t border-dashed border-outline-variant/30">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-label-md font-bold text-ink-black">合计佣金</span>
|
|
<span class="text-headline-md text-primary font-coupon-amount">¥90.00</span>
|
|
</div>
|
|
</div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Hospitality Benefits & Meta -->
|
|
<div class="md:col-span-4 space-y-6">
|
|
<!-- Hospitality Benefits Card (The "Hero" of this UI) -->
|
|
<div class="bg-surface-container-high rounded-xl p-6 shadow-md border-2 border-aged-amber/20 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 p-4 opacity-10">
|
|
<span class="material-symbols-outlined text-[80px]">restaurant</span>
|
|
</div>
|
|
<div class="relative z-10">
|
|
<h3 class="font-headline-md text-primary mb-4 flex items-center gap-2">
|
|
<span class="material-symbols-outlined">card_membership</span> 好客权益 (¥1500)
|
|
</h3>
|
|
<div class="bg-white/80 backdrop-blur-sm p-4 rounded-lg ticket-notch mb-6 border-l-4 border-aged-amber">
|
|
<p class="text-subtle-gray text-label-md uppercase tracking-wider">赠送好客权益总额</p>
|
|
<p class="font-headline-xl text-primary font-coupon-amount">¥1,500</p>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="flex justify-between text-label-md mb-2">
|
|
<span class="text-on-surface-variant">权益使用进度</span>
|
|
<span class="text-primary font-bold">60%</span>
|
|
</div>
|
|
<div class="h-2 bg-white rounded-full overflow-hidden">
|
|
<div class="h-full bg-aged-amber" style="width: 60%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 pt-2">
|
|
<div>
|
|
<p class="text-subtle-gray text-[10px]">使用金额</p>
|
|
<p class="font-headline-md text-ink-black">¥900.00</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-subtle-gray text-[10px]">未使用金额</p>
|
|
<p class="font-headline-md text-primary">¥600.00</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 pt-6 border-t border-primary/10"><p class="text-subtle-gray text-label-md mb-4">核销门店记录</p><div class="space-y-4"><div class="flex items-start gap-3 pb-4 border-b border-dashed border-outline-variant/30"><span class="material-symbols-outlined text-primary mt-1">storefront</span><div class="flex-grow"><div class="flex justify-between items-start"><p class="font-body-md font-bold text-ink-black">杜康·厚德酒家 (洛阳店)</p><p class="text-primary font-bold text-label-md">¥400.00</p></div><p class="text-label-md text-on-surface-variant mt-1">洛阳市涧西区南昌路18号</p><p class="text-[10px] text-subtle-gray mt-1">核销时间: 2023-10-23 18:30</p><div class="flex gap-4 mt-2">
|
|
<div class="flex items-center gap-1">
|
|
<span class="text-[10px] text-subtle-gray">环境</span>
|
|
<div class="flex text-aged-amber">
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="text-[10px] text-subtle-gray">服务态度</span>
|
|
<div class="flex text-aged-amber">
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
</div>
|
|
</div>
|
|
</div><div class="mt-3 pt-2 border-t border-outline-variant/10 flex justify-between items-center"><div class="flex items-center gap-2"><span class="text-[10px] text-subtle-gray">佣金金额:</span><span class="text-label-md font-bold text-ink-black">¥40.00</span></div><span class="bg-success-green/10 text-success-green px-2 py-0.5 rounded text-[10px] font-bold">已结算</span></div></div></div><div class="flex items-start gap-3"><span class="material-symbols-outlined text-primary mt-1">storefront</span><div class="flex-grow"><div class="flex justify-between items-start"><p class="font-body-md font-bold text-ink-black">杜康·名仕雅居 (涧西店)</p><p class="text-primary font-bold text-label-md">¥500.00</p></div><p class="text-label-md text-on-surface-variant mt-1">洛阳市涧西区辽宁路122号</p><p class="text-[10px] text-subtle-gray mt-1">核销时间: 2023-10-24 12:15</p><div class="flex gap-4 mt-2">
|
|
<div class="flex items-center gap-1">
|
|
<span class="text-[10px] text-subtle-gray">环境</span>
|
|
<div class="flex text-aged-amber">
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 0">star</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span class="text-[10px] text-subtle-gray">服务态度</span>
|
|
<div class="flex text-aged-amber">
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1">star</span>
|
|
</div>
|
|
</div>
|
|
</div><div class="mt-3 pt-2 border-t border-outline-variant/10 flex justify-between items-center"><div class="flex items-center gap-2"><span class="text-[10px] text-subtle-gray">佣金金额:</span><span class="text-label-md font-bold text-ink-black">¥50.00</span></div><span class="bg-aged-amber/10 text-secondary px-2 py-0.5 rounded text-[10px] font-bold">待结算</span></div></div></div></div></div>
|
|
</div>
|
|
</div>
|
|
<!-- Receiver & Logistics Meta -->
|
|
<div class="bg-white rounded-xl p-6 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5" style="transform: translateY(0px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(166, 29, 36, 0.05) 0px 4px 20px;">
|
|
<h3 class="font-headline-md text-ink-black mb-4">收货与物流</h3>
|
|
<div class="space-y-6">
|
|
<div class="flex gap-4">
|
|
<span class="material-symbols-outlined text-primary">person_pin</span>
|
|
<div>
|
|
<p class="font-body-md text-ink-black">张 * 宇 <span class="text-subtle-gray ml-2 text-label-md">138****8899</span></p>
|
|
<p class="text-label-md text-on-surface-variant mt-1">河南省 洛阳市 洛龙区 开元大道 123号 杜康大厦 12层</p>
|
|
</div>
|
|
</div><div class="border-t border-dashed border-outline-variant/30 my-4"></div><div class="space-y-2"><div class="flex items-center gap-2"><span class="material-symbols-outlined text-heritage-red">edit_location</span><span class="font-body-md font-bold text-ink-black">更改地址记录</span></div><div class="pl-8"><p class="text-label-md text-on-surface-variant">由 [客户/客服] 修改为：河南省 洛阳市 洛龙区 开元大道 123号 杜康大厦 12层</p><p class="text-[10px] text-subtle-gray mt-1">2023-10-22 14:45:10</p></div></div>
|
|
<div class="flex gap-4">
|
|
<span class="material-symbols-outlined text-primary">local_shipping</span>
|
|
<div class="flex-grow">
|
|
<p class="font-body-md text-ink-black">顺丰特快 <span class="text-subtle-gray ml-2 text-label-md">SF142857493021</span></p>
|
|
<div class="mt-3 relative border-l-2 border-surface-container pl-4 space-y-4">
|
|
<div class="relative">
|
|
<div class="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full bg-heritage-red"></div>
|
|
<p class="text-label-md text-primary font-bold">已签收 - 客户本人签收</p>
|
|
<p class="text-[10px] text-subtle-gray">2023-10-23 11:20:00</p>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full bg-subtle-gray"></div>
|
|
<p class="text-label-md text-on-surface">正在派送中</p>
|
|
<p class="text-[10px] text-subtle-gray">2023-10-23 08:15:00</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-dashed border-outline-variant/30 my-4"></div><div class="space-y-4"><div class="flex items-center gap-2"><span class="material-symbols-outlined text-heritage-red">sync_alt</span><span class="font-body-md font-bold text-ink-black">补发物流信息</span></div><p class="text-subtle-gray text-label-md">补发原因：商品破损</p><div class="flex gap-4"><span class="material-symbols-outlined text-primary">local_shipping</span><div class="flex-grow"><p class="font-body-md text-ink-black">顺丰特快 <span class="text-subtle-gray ml-2 text-label-md">SF168923456789</span></p><div class="mt-3 relative border-l-2 border-surface-container pl-4"><div class="relative"><div class="absolute -left-[21px] top-1 w-2.5 h-2.5 rounded-full bg-heritage-red"></div><p class="text-label-md text-primary font-bold">补发任务已下发 - 待揽收</p><p class="text-[10px] text-subtle-gray">2023-10-24 15:00:00</p></div></div></div></div></div></div>
|
|
</div>
|
|
<!-- Order Technical Meta -->
|
|
<div class="rounded-xl text-[11px] text-subtle-gray leading-loose">
|
|
<p class="">订单 ID: DK_ORD_20231022_X001</p>
|
|
<p class="">支付流水号: PAY_WXP_99384755102</p>
|
|
<p class="">下单时间: 2023-10-22 10:15:22</p>
|
|
<p class="">支付时间: 2023-10-22 10:16:05</p>
|
|
<p class="">权益到期:永久有效</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Navigation Shell (Shared Component Strategy) -->
|
|
<nav class="fixed bottom-0 w-full z-50 rounded-t-xl bg-surface dark:bg-surface-dim shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] h-16 md:hidden">
|
|
|
|
</nav>
|
|
<!-- Interactive Layer: Hover states and Tooltips (Vanilla JS) -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const cards = document.querySelectorAll('.bg-white');
|
|
cards.forEach(card => {
|
|
card.addEventListener('mouseenter', () => {
|
|
card.style.transform = 'translateY(-2px)';
|
|
card.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
|
card.style.boxShadow = '0px 8px 30px rgba(166, 29, 36, 0.08)';
|
|
});
|
|
card.addEventListener('mouseleave', () => {
|
|
card.style.transform = 'translateY(0)';
|
|
card.style.boxShadow = '0px 4px 20px rgba(166, 29, 36, 0.05)';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body></html> |