401 lines
24 KiB
HTML
401 lines
24 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">
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&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">
|
||
<style>
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
display: inline-block;
|
||
line-height: 1;
|
||
text-transform: none;
|
||
letter-spacing: normal;
|
||
word-wrap: normal;
|
||
white-space: nowrap;
|
||
direction: ltr;
|
||
}
|
||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||
|
||
.coupon-notch {
|
||
position: relative;
|
||
}
|
||
.coupon-notch::before, .coupon-notch::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: -6px;
|
||
width: 12px;
|
||
height: 12px;
|
||
background-color: #faf9f7;
|
||
border-radius: 50%;
|
||
z-index: 10;
|
||
}
|
||
.coupon-notch::before { top: -6px; }
|
||
.coupon-notch::after { bottom: -6px; }
|
||
|
||
.glass-header {
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
</style>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"tertiary-fixed-dim": "#bec9c2",
|
||
"error": "#ba1a1a",
|
||
"secondary-fixed": "#ffe088",
|
||
"on-primary": "#ffffff",
|
||
"tertiary-fixed": "#dae5dd",
|
||
"surface-container-highest": "#e3e2e0",
|
||
"on-secondary-fixed-variant": "#574500",
|
||
"background": "#faf9f7",
|
||
"on-primary-container": "#ffb9b4",
|
||
"on-error-container": "#93000a",
|
||
"primary-container": "#a61d24",
|
||
"on-primary-fixed-variant": "#910817",
|
||
"inverse-surface": "#2f3130",
|
||
"on-surface-variant": "#5a413f",
|
||
"surface-container-lowest": "#ffffff",
|
||
"surface-container": "#efeeec",
|
||
"secondary": "#735c00",
|
||
"surface-tint": "#b3272c",
|
||
"on-secondary": "#ffffff",
|
||
"primary": "#820012",
|
||
"on-tertiary-fixed": "#141e19",
|
||
"ink-black": "#1A1A1A",
|
||
"status-blue": "#2A6EBB",
|
||
"aged-amber": "#FFBF00",
|
||
"outline-variant": "#e2bebc",
|
||
"primary-fixed": "#ffdad7",
|
||
"surface-variant": "#e3e2e0",
|
||
"on-tertiary-fixed-variant": "#3f4943",
|
||
"error-container": "#ffdad6",
|
||
"heritage-red": "#A61D24",
|
||
"tertiary-container": "#4e5852",
|
||
"on-tertiary": "#ffffff",
|
||
"surface-container-low": "#f4f3f1",
|
||
"surface-container-high": "#e9e8e6",
|
||
"on-error": "#ffffff",
|
||
"on-tertiary-container": "#c2cdc6",
|
||
"tertiary": "#37413b",
|
||
"inverse-primary": "#ffb3ae",
|
||
"surface-dim": "#dadad8",
|
||
"inverse-on-surface": "#f1f1ef",
|
||
"surface": "#faf9f7",
|
||
"secondary-container": "#fed65b",
|
||
"subtle-gray": "#999999",
|
||
"on-surface": "#1a1c1b",
|
||
"success-green": "#2D6A4F",
|
||
"primary-fixed-dim": "#ffb3ae",
|
||
"on-secondary-fixed": "#241a00",
|
||
"surface-bright": "#faf9f7",
|
||
"outline": "#8d706e",
|
||
"on-primary-fixed": "#410004",
|
||
"on-secondary-container": "#745c00",
|
||
"secondary-fixed-dim": "#e9c349",
|
||
"on-background": "#1a1c1b"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.25rem",
|
||
"lg": "0.5rem",
|
||
"xl": "0.75rem",
|
||
"full": "9999px"
|
||
},
|
||
"spacing": {
|
||
"stack-md": "16px",
|
||
"margin-page": "20px",
|
||
"base": "8px",
|
||
"stack-lg": "32px",
|
||
"stack-sm": "4px",
|
||
"gutter-card": "12px"
|
||
},
|
||
"fontFamily": {
|
||
"headline-xl": ["Manrope"],
|
||
"body-lg": ["Be Vietnam Pro"],
|
||
"headline-lg-mobile": ["Manrope"],
|
||
"headline-md": ["Manrope"],
|
||
"coupon-amount": ["Manrope"],
|
||
"body-md": ["Be Vietnam Pro"],
|
||
"label-md": ["Inter"],
|
||
"headline-lg": ["Manrope"]
|
||
},
|
||
"fontSize": {
|
||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||
"headline-md": ["18px", {"lineHeight": "26px", "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"}],
|
||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
body {
|
||
min-height: max(884px, 100dvh);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-background text-on-surface min-h-screen pb-32">
|
||
<!-- Top Navigation Bar -->
|
||
<header class="fixed top-0 w-full z-50 bg-surface/80 glass-header flex justify-between items-center px-margin-page h-14 shadow-sm">
|
||
<div class="flex items-center gap-2">
|
||
<span class="material-symbols-outlined text-primary">arrow_back</span>
|
||
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康好客</h1>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
|
||
|
||
</div>
|
||
</header>
|
||
<main class="pt-14 px-margin-page">
|
||
<!-- Segmented Control Tabs -->
|
||
<div class="sticky top-14 bg-background z-40 py-4">
|
||
<div class="flex bg-surface-container-high rounded-xl p-1 p-base">
|
||
<button class="flex-1 py-2 rounded-lg font-headline-md text-headline-md transition-all bg-surface-container-lowest text-on-surface-variant" id="tab-orders" onclick="switchTab('orders')">
|
||
订单列表
|
||
</button>
|
||
<button class="flex-1 py-2 rounded-lg font-headline-md text-headline-md transition-all bg-white text-heritage-red shadow-sm" id="tab-coupons" onclick="switchTab('coupons')">权益记录</button>
|
||
</div>
|
||
</div>
|
||
<!-- Section: Order List -->
|
||
<section class="space-y-stack-md hidden" id="view-orders">
|
||
<!-- Filter Bar -->
|
||
<div class="flex flex-col gap-3 pb-2">
|
||
<div class="flex gap-2 overflow-x-auto hide-scrollbar py-1">
|
||
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-heritage-red text-white font-label-md text-label-md">今日</button>
|
||
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-white border border-outline-variant text-on-surface-variant font-label-md text-label-md">近7天</button>
|
||
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-white border border-outline-variant text-on-surface-variant font-label-md text-label-md">近30天</button>
|
||
</div>
|
||
<div class="flex gap-2 overflow-x-auto hide-scrollbar border-b border-surface-container-high pb-2">
|
||
<button class="whitespace-nowrap px-4 py-1 text-heritage-red font-label-md text-label-md border-b-2 border-heritage-red">全部</button>
|
||
<button class="whitespace-nowrap px-4 py-1 text-on-surface-variant font-label-md text-label-md">待发货</button>
|
||
<button class="whitespace-nowrap px-4 py-1 text-on-surface-variant font-label-md text-label-md">运输中</button>
|
||
<button class="whitespace-nowrap px-4 py-1 text-on-surface-variant font-label-md text-label-md">已完成</button>
|
||
<button class="whitespace-nowrap px-4 py-1 text-on-surface-variant font-label-md text-label-md">异常</button>
|
||
</div>
|
||
</div>
|
||
<!-- Order Cards -->
|
||
<div class="space-y-4">
|
||
<!-- Order Card 1 -->
|
||
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||
<div class="flex justify-between items-center mb-3">
|
||
<span class="text-subtle-gray font-label-md text-label-md">NO. DK202310248819</span>
|
||
<span class="text-status-blue font-label-md text-label-md font-semibold">运输中</span>
|
||
</div>
|
||
<div class="flex gap-4 mb-4">
|
||
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container" data-alt="A studio photograph of a premium Dukang liquor bottle, featuring intricate traditional Chinese calligraphy on a textured cream label, against a soft amber-lit background that highlights the liquid's clarity and the bottle's elegant crystalline structure. The lighting is sophisticated, emphasizing the heritage quality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA1EVT8TnXp5-euHdYE4PieQkGaUOGH34yOhVHgAhiegRapxigTThmxCXwWD4hu7UyrzEDokI-4KCsD2U3n4g_XKnGCdY-HuMv9hi_mg-vVewThfq5pBe4hmTTTdV-u6_FJd-GHTBRM4Y0SXq7VAzDIWlDIm0uLr9yR15ROYM_Ue_FRjQ-pIJPE_6vcYaw8dv46lqv6QYT2A0KkPpyzvD7t0EflFolp3xGqEEwOQJ-_aYbBmuPrWrS2KuX5IAZOzBe67UOaecGgSYg">
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="font-headline-md text-headline-md text-ink-black truncate">酒祖杜康 · 小封坛 (52°)</h3>
|
||
<p class="text-on-surface-variant font-body-md text-body-md mt-1">规格：500ml × 6瓶/箱</p>
|
||
<div class="inline-block mt-2 px-2 py-0.5 bg-aged-amber/10 border border-aged-amber/20 rounded text-aged-amber font-label-md text-label-md"><span class="material-symbols-outlined text-[14px] align-middle mr-1">confirmation_number</span>¥1200权益</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-2 py-3 border-t border-surface-container-low">
|
||
<span class="material-symbols-outlined text-subtle-gray text-[18px] mt-0.5">location_on</span>
|
||
<p class="text-on-surface-variant font-body-md text-body-md truncate">河南省洛阳市涧西区南昌路街道... (张先生)</p>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-2 pt-3 border-t border-surface-container-low"><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">下单佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥470.40</p></div><div class="text-center border-x border-surface-container-low"><p class="text-subtle-gray font-label-md text-label-md">核销佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥0.00</p></div><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">获赠权益</p><p class="font-headline-md text-headline-md text-aged-amber mt-1">¥1,200</p></div></div>
|
||
</div>
|
||
<!-- Order Card 2 -->
|
||
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||
<div class="flex justify-between items-center mb-3">
|
||
<span class="text-subtle-gray font-label-md text-label-md">NO. DK202310237722</span>
|
||
<span class="text-success-green font-label-md text-label-md font-semibold">已完成</span>
|
||
</div>
|
||
<div class="flex gap-4 mb-4">
|
||
<img class="w-20 h-20 rounded-lg object-cover bg-surface-container" data-alt="A close-up shot of the Dukang liquor packaging, showing the rich red and gold embossed textures of the box. Professional studio lighting casts gentle shadows, creating a sense of luxury and depth. The aesthetic is clean, minimalist, and deeply rooted in Chinese heritage styling." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDJbVMmriyZy1ohZALmg6A_ah4O9Xtdr0iJmjvWUiUE8PqvDmtYDmZHqvR5AgCBI3GcqvJJjsmpotcX8pg3oKpETwZEre8D5CXpPzxIMucigSEIWyIPbx1BjLjqsinxFrA0znyalOfHfnN6-xfsQRTSYQx-1NDz_btNKCmlGVyCJGp3mMVkVCzwqN2l3ITQSNyOMUyDqsQCQB5wog3No7PDfXbgOlGj-NaDlPA1_N-U6MqK5Tu7IHM99OsA6EvwwgP4mF1oBAYpq2o">
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="font-headline-md text-headline-md text-ink-black truncate">杜康老酒 · 经典版</h3>
|
||
<p class="text-on-surface-variant font-body-md text-body-md mt-1">规格：500ml × 12瓶/箱</p>
|
||
<div class="inline-block mt-2 px-2 py-0.5 bg-aged-amber/10 border border-aged-amber/20 rounded text-aged-amber font-label-md text-label-md"><span class="material-symbols-outlined text-[14px] align-middle mr-1">confirmation_number</span>¥600权益</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-2 py-3 border-t border-surface-container-low">
|
||
<span class="material-symbols-outlined text-subtle-gray text-[18px] mt-0.5">location_on</span>
|
||
<p class="text-on-surface-variant font-body-md text-body-md truncate">郑州市金水区未来路街道办未来大厦...</p>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-2 pt-3 border-t border-surface-container-low"><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">下单佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥192.00</p></div><div class="text-center border-x border-surface-container-low"><p class="text-subtle-gray font-label-md text-label-md">核销佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥0.00</p></div><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">获赠权益</p><p class="font-headline-md text-headline-md text-aged-amber mt-1">¥600</p></div></div>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||
<div class="flex justify-between items-center mb-3">
|
||
<span class="text-subtle-gray font-label-md text-label-md">NO. DK202310259901</span>
|
||
<span class="text-secondary font-label-md text-label-md font-semibold">待发货</span>
|
||
</div>
|
||
<div class="flex gap-4 mb-4">
|
||
<div class="w-20 h-20 rounded-lg bg-surface-container flex items-center justify-center text-subtle-gray text-[12px]">img</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="font-headline-md text-headline-md text-ink-black truncate">杜康老酒·珍藏版</h3>
|
||
<p class="text-on-surface-variant font-body-md text-body-md mt-1">规格：500ml × 6瓶/箱</p>
|
||
<div class="inline-block mt-2 px-2 py-0.5 bg-aged-amber/10 border border-aged-amber/20 rounded text-aged-amber font-label-md text-label-md"><span class="material-symbols-outlined text-[14px] align-middle mr-1">confirmation_number</span>¥600权益</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-2 py-3 border-t border-surface-container-low">
|
||
<span class="material-symbols-outlined text-subtle-gray text-[18px] mt-0.5">location_on</span>
|
||
<p class="text-on-surface-variant font-body-md text-body-md truncate">河南省洛阳市涧西区... (王女士)</p>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-2 pt-3 border-t border-surface-container-low"><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">下单佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥256.00</p></div><div class="text-center border-x border-surface-container-low"><p class="text-subtle-gray font-label-md text-label-md">核销佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥0.00</p></div><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">获赠权益</p><p class="font-headline-md text-headline-md text-aged-amber mt-1">¥600</p></div></div>
|
||
</div><div class="bg-white rounded-xl p-4 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-heritage-red/5">
|
||
<div class="flex justify-between items-center mb-3">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-subtle-gray font-label-md text-label-md">NO. DK202310261122</span>
|
||
<span class="bg-error/10 text-error text-[10px] px-1.5 py-0.5 rounded font-bold">配送超时</span>
|
||
</div>
|
||
<span class="text-error font-label-md text-label-md font-semibold">异常</span>
|
||
</div>
|
||
<div class="flex gap-4 mb-4">
|
||
<div class="w-20 h-20 rounded-lg bg-surface-container flex items-center justify-center text-subtle-gray text-[12px]">img</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h3 class="font-headline-md text-headline-md text-ink-black truncate">酒祖杜康·小封坛 (52°)</h3>
|
||
<p class="text-on-surface-variant font-body-md text-body-md mt-1">规格：500ml × 1瓶</p>
|
||
<div class="inline-block mt-2 px-2 py-0.5 bg-aged-amber/10 border border-aged-amber/20 rounded text-aged-amber font-label-md text-label-md"><span class="material-symbols-outlined text-[14px] align-middle mr-1">confirmation_number</span>¥200权益</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-2 py-3 border-t border-surface-container-low">
|
||
<span class="material-symbols-outlined text-subtle-gray text-[18px] mt-0.5">location_on</span>
|
||
<p class="text-on-surface-variant font-body-md text-body-md truncate">郑州市金水区... (李先生)</p>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-2 pt-3 border-t border-surface-container-low"><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">下单佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥78.40</p></div><div class="text-center border-x border-surface-container-low"><p class="text-subtle-gray font-label-md text-label-md">核销佣金</p><p class="font-headline-md text-headline-md text-heritage-red mt-1">¥0.00</p></div><div class="text-center"><p class="text-subtle-gray font-label-md text-label-md">获赠权益</p><p class="font-headline-md text-headline-md text-aged-amber mt-1">¥200</p></div></div>
|
||
</div></div>
|
||
</section>
|
||
<!-- Section: Coupon Records -->
|
||
<section class="space-y-4 block" id="view-coupons">
|
||
<!-- Coupon Summary Card -->
|
||
<div class="relative overflow-hidden bg-primary-container text-white p-6 rounded-2xl shadow-lg">
|
||
<div class="relative z-10">
|
||
<p class="text-on-primary-container font-label-md text-label-md">累计已发放权益金额</p>
|
||
<div class="flex items-baseline gap-1 mt-1">
|
||
<span class="text-headline-md">¥</span>
|
||
<span class="font-headline-xl text-headline-xl">42,800.00</span>
|
||
</div>
|
||
<div class="flex gap-6 mt-4">
|
||
<div>
|
||
<p class="text-on-primary-container/80 text-label-md">本月发放</p>
|
||
<p class="font-headline-md">¥8,200</p>
|
||
</div>
|
||
<div class="w-px h-8 bg-white/20 self-center"></div>
|
||
<div>
|
||
<p class="text-on-primary-container/80 text-label-md">待核销</p>
|
||
<p class="font-headline-md">¥5,400</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Coupon List -->
|
||
<div class="space-y-3">
|
||
<!-- Record Item 1 -->
|
||
<div class="bg-white rounded-xl border border-surface-container-high overflow-hidden shadow-sm">
|
||
<div class="p-4 flex justify-between items-start">
|
||
<div class="space-y-1">
|
||
<div class="flex items-center gap-2">
|
||
<span class="bg-aged-amber text-white text-[10px] px-1.5 py-0.5 rounded font-bold">已核销</span>
|
||
<span class="font-headline-md text-headline-md text-ink-black">¥400.00</span>
|
||
</div>
|
||
<p class="text-subtle-gray font-label-md text-label-md">发放时间: 2023-10-24 14:22</p>
|
||
<p class="text-on-surface font-body-md text-body-md">持有人: 138****9928</p><p class="text-on-surface-variant font-body-md text-body-md">核销佣金: ¥20.00</p>
|
||
</div>
|
||
<span class="material-symbols-outlined text-surface-container-highest">receipt_long</span>
|
||
</div>
|
||
<div class="bg-surface-container-low px-4 py-3 coupon-notch">
|
||
<div class="flex flex-col gap-1">
|
||
<div class="flex justify-between text-label-md font-label-md">
|
||
<span class="text-on-surface-variant">核销门店：</span>
|
||
<span class="text-ink-black">洛阳水席园 (总店)</span>
|
||
</div>
|
||
<div class="flex justify-between text-label-md font-label-md">
|
||
<span class="text-on-surface-variant">核销时间：</span>
|
||
<span class="text-ink-black">2023-10-25 19:30</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Record Item 2 -->
|
||
<div class="bg-white rounded-xl border border-surface-container-high overflow-hidden shadow-sm">
|
||
<div class="p-4 flex justify-between items-start">
|
||
<div class="space-y-1">
|
||
<div class="flex items-center gap-2">
|
||
<span class="bg-subtle-gray text-white text-[10px] px-1.5 py-0.5 rounded font-bold">待使用</span>
|
||
<span class="font-headline-md text-headline-md text-ink-black">¥800.00</span>
|
||
</div>
|
||
<p class="text-subtle-gray font-label-md text-label-md">发放时间: 2023-10-24 10:05</p>
|
||
<p class="text-on-surface font-body-md text-body-md">持有人: 155****0031</p><p class="text-on-surface-variant font-body-md text-body-md">预估核销佣金: ¥15.00</p>
|
||
</div>
|
||
<span class="material-symbols-outlined text-surface-container-highest">pending_actions</span>
|
||
</div>
|
||
</div>
|
||
<!-- Record Item 3 -->
|
||
<div class="bg-white rounded-xl border border-surface-container-high overflow-hidden shadow-sm">
|
||
<div class="p-4 flex justify-between items-start">
|
||
<div class="space-y-1">
|
||
<div class="flex items-center gap-2">
|
||
<span class="bg-aged-amber text-white text-[10px] px-1.5 py-0.5 rounded font-bold">已核销</span>
|
||
<span class="font-headline-md text-headline-md text-ink-black">¥600.00</span>
|
||
</div>
|
||
<p class="text-subtle-gray font-label-md text-label-md">发放时间: 2023-10-23 18:12</p>
|
||
<p class="text-on-surface font-body-md text-body-md">持有人: 176****4482</p><p class="text-on-surface-variant font-body-md text-body-md">核销佣金: ¥15.00</p>
|
||
</div>
|
||
<span class="material-symbols-outlined text-surface-container-highest">receipt_long</span>
|
||
</div>
|
||
<div class="bg-surface-container-low px-4 py-3 coupon-notch">
|
||
<div class="flex flex-col gap-1">
|
||
<div class="flex justify-between text-label-md font-label-md">
|
||
<span class="text-on-surface-variant">核销门店：</span>
|
||
<span class="text-ink-black">豫味居中餐厅</span>
|
||
</div>
|
||
<div class="flex justify-between text-label-md font-label-md">
|
||
<span class="text-on-surface-variant">核销时间：</span>
|
||
<span class="text-ink-black">2023-10-23 20:15</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<!-- Bottom Navigation Bar -->
|
||
|
||
<script>
|
||
function switchTab(view) {
|
||
const orderBtn = document.getElementById('tab-orders');
|
||
const couponBtn = document.getElementById('tab-coupons');
|
||
const orderView = document.getElementById('view-orders');
|
||
const couponView = document.getElementById('view-coupons');
|
||
|
||
if (view === 'orders') {
|
||
orderBtn.classList.add('bg-white', 'text-heritage-red', 'shadow-sm');
|
||
orderBtn.classList.remove('text-on-surface-variant');
|
||
couponBtn.classList.remove('bg-white', 'text-heritage-red', 'shadow-sm');
|
||
couponBtn.classList.add('text-on-surface-variant');
|
||
|
||
orderView.classList.remove('hidden');
|
||
orderView.classList.add('block');
|
||
couponView.classList.add('hidden');
|
||
couponView.classList.remove('block');
|
||
} else {
|
||
couponBtn.classList.add('bg-white', 'text-heritage-red', 'shadow-sm');
|
||
couponBtn.classList.remove('text-on-surface-variant');
|
||
orderBtn.classList.remove('bg-white', 'text-heritage-red', 'shadow-sm');
|
||
orderBtn.classList.add('text-on-surface-variant');
|
||
|
||
couponView.classList.remove('hidden');
|
||
couponView.classList.add('block');
|
||
orderView.classList.add('hidden');
|
||
orderView.classList.remove('block');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</body></html> |