feat: multi-module iteration
This commit is contained in:
@@ -0,0 +1,209 @@
|
||||
<!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, viewport-fit=cover" 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&family=Be+Vietnam+Pro:wght@400;500&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">
|
||||
<!-- Theme Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-container": "#fed65b",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"subtle-gray": "#999999",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"status-blue": "#2A6EBB",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"outline-variant": "#e2bebc",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-error-container": "#93000a",
|
||||
"error-container": "#ffdad6",
|
||||
"on-background": "#1a1c1b",
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"on-primary-fixed": "#410004",
|
||||
"tertiary": "#37413b",
|
||||
"primary-container": "#a61d24",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-error": "#ffffff",
|
||||
"heritage-red": "#A61D24",
|
||||
"primary": "#820012",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"secondary": "#735c00",
|
||||
"aged-amber": "#FFBF00",
|
||||
"ink-black": "#1A1A1A",
|
||||
"error": "#ba1a1a",
|
||||
"success-green": "#2D6A4F",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container": "#efeeec",
|
||||
"outline": "#8d706e",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"background": "#faf9f7",
|
||||
"surface-bright": "#faf9f7",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"on-surface-variant": "#5a413f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"stack-sm": "4px",
|
||||
"stack-lg": "32px",
|
||||
"margin-page": "20px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.active-tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 3px;
|
||||
background-color: #A61D24;
|
||||
border-radius: 2px;
|
||||
}
|
||||
body {
|
||||
background-color: #faf9f7;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.summary-card-glow {
|
||||
box-shadow: 0px 4px 20px rgba(166, 29, 29, 0.08);
|
||||
}
|
||||
.glass-header {
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface antialiased">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-50 bg-surface/80 glass-header flex items-center px-margin-page h-14">
|
||||
<button class="flex items-center justify-center w-8 h-8 active:opacity-70 transition-opacity duration-200">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="arrow_back">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center font-headline-md text-headline-md font-bold text-heritage-red ml-[-32px]">核销记录</h1>
|
||||
</header>
|
||||
<main class="pt-14 pb-24">
|
||||
<!-- FilterBar (Sticky) -->
|
||||
<nav class="sticky top-14 z-40 bg-surface flex border-b border-surface-container-high overflow-x-auto no-scrollbar"><div class="flex flex-col w-full bg-surface border-b border-surface-container-high"><div class="flex border-b border-surface-container-high/50"><button class="relative flex-1 py-3 text-center font-label-md text-label-md text-primary font-bold active-tab" onclick="switchTab(this)">今日</button><button class="relative flex-1 py-3 text-center font-label-md text-label-md text-subtle-gray active:opacity-70" onclick="switchTab(this)">近7日</button><button class="relative flex-1 py-3 text-center font-label-md text-label-md text-subtle-gray active:opacity-70" onclick="switchTab(this)">近30日</button></div><div class="flex px-4 py-2 space-x-2 overflow-x-auto no-scrollbar"><button class="px-4 py-1 rounded-full bg-primary text-white text-[12px] font-medium">全部</button><button class="px-4 py-1 rounded-full bg-surface-container-high text-on-surface-variant text-[12px]">待打款</button><button class="px-4 py-1 rounded-full bg-surface-container-high text-on-surface-variant text-[12px]">已打款</button></div></div></nav>
|
||||
<!-- SummaryCard -->
|
||||
<section class="px-margin-page mt-stack-md">
|
||||
<div class="bg-primary-fixed/30 p-margin-page rounded-xl border border-primary-fixed-dim/20 summary-card-glow relative overflow-hidden">
|
||||
<!-- Atmospheric background element -->
|
||||
<div class="absolute -right-4 -top-4 w-24 h-24 bg-primary/5 rounded-full blur-2xl"></div>
|
||||
<div class="flex flex-col space-y-stack-sm"><div class="grid grid-cols-2 gap-4"><div class="flex flex-col"><span class="font-label-md text-label-md text-primary/70">期间核销总额</span><div class="flex items-baseline space-x-1"><span class="font-headline-md text-headline-md text-primary">¥</span><span class="font-headline-md text-headline-md text-primary tracking-tight">2,000.00</span></div></div><div class="flex flex-col"><span class="font-label-md text-label-md text-primary/70">期间到账总额</span><div class="flex items-baseline space-x-1"><span class="font-headline-md text-headline-md text-primary">¥</span><span class="font-headline-md text-headline-md text-primary tracking-tight">1,200.00</span></div></div></div><div class="flex items-center space-x-2 pt-2 border-t border-primary/10"><span class="material-symbols-outlined text-[16px] text-success-green" style="font-variation-settings: 'FILL' 1;">check_circle</span><span class="font-body-md text-body-md text-on-surface-variant">结算比例: 60% (按6折结算)</span></div></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- RecordList -->
|
||||
<section class="px-margin-page mt-stack-lg">
|
||||
<div class="flex justify-between items-center mb-stack-md">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">交易详情</h3>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">共 2 笔记录</span>
|
||||
</div>
|
||||
<div class="space-y-4"><div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-surface-container-high space-y-3"><div class="flex justify-between items-start"><div class="space-y-1"><div class="flex items-center space-x-2"><span class="font-label-md text-label-md text-subtle-gray">订单号</span><span class="font-body-md text-body-md text-on-surface font-medium">DK772839401</span></div><p class="font-label-md text-label-md text-subtle-gray">核销时间: 2023-10-24 15:45</p></div><span class="bg-success-green/10 text-success-green px-2 py-0.5 rounded text-[10px] font-bold">已打款</span></div><div class="grid grid-cols-2 gap-2 py-2 bg-surface/50 rounded-lg px-3"><div class="flex flex-col"><span class="text-[10px] text-subtle-gray">核销金额(券面)</span><span class="text-body-md font-bold text-on-surface">¥166.67</span></div><div class="flex flex-col"><span class="text-[10px] text-subtle-gray">到账金额(6折)</span><span class="text-body-md font-bold text-heritage-red">¥100.00</span></div></div><div class="flex justify-between items-center text-[11px] text-subtle-gray"><p class="">打款时间: 2023-10-24 18:00</p><div class="flex items-center text-on-surface-variant"><span class="material-symbols-outlined text-[12px] mr-1">restaurant</span>杜康·御享联名餐厅</div></div></div><div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-surface-container-high space-y-3"><div class="flex justify-between items-start"><div class="space-y-1"><div class="flex items-center space-x-2"><span class="font-label-md text-label-md text-subtle-gray">订单号</span><span class="font-body-md text-body-md text-on-surface font-medium">DK772839395</span></div><p class="font-label-md text-label-md text-subtle-gray">核销时间: 2023-10-24 14:20</p></div><span class="bg-aged-amber/10 text-aged-amber px-2 py-0.5 rounded text-[10px] font-bold">待打款</span></div><div class="grid grid-cols-2 gap-2 py-2 bg-surface/50 rounded-lg px-3"><div class="flex flex-col"><span class="text-[10px] text-subtle-gray">核销金额(券面)</span><span class="text-body-md font-bold text-on-surface">¥333.33</span></div><div class="flex flex-col"><span class="text-[10px] text-subtle-gray">到账金额(6折)</span><span class="text-body-md font-bold text-heritage-red">¥200.00</span></div></div><div class="flex justify-between items-center text-[11px] text-subtle-gray"><p class="">预计打款: T+1工作日</p><div class="flex items-center text-on-surface-variant"><span class="material-symbols-outlined text-[12px] mr-1">restaurant</span>杜康·御享联名餐厅</div></div></div></div>
|
||||
</section>
|
||||
<!-- No More Data Footer -->
|
||||
<div class="py-stack-lg flex flex-col items-center">
|
||||
<div class="w-12 h-[1px] bg-surface-container-highest mb-2"></div>
|
||||
<p class="font-label-md text-label-md text-subtle-gray">已显示全部核销记录</p>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center pt-2 pb-safe px-4 bg-surface rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)]" style="padding-bottom: env(safe-area-inset-bottom);">
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray active:bg-surface-container-low transition-transform duration-150 scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="home">home</span>
|
||||
<span class="font-label-md text-label-md mt-1">首页</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-primary font-bold active:bg-surface-container-low transition-transform duration-150 scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long" style="font-variation-settings: 'FILL' 1;">receipt_long</span>
|
||||
<span class="font-label-md text-label-md mt-1">核销记录</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-subtle-gray active:bg-surface-container-low transition-transform duration-150 scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="font-label-md text-label-md mt-1">我的</span>
|
||||
</a>
|
||||
</nav>
|
||||
<script>
|
||||
function switchTab(element) {
|
||||
// Remove active classes from all siblings
|
||||
const parent = element.parentElement;
|
||||
const tabs = parent.querySelectorAll('button');
|
||||
tabs.forEach(tab => {
|
||||
tab.classList.remove('active-tab', 'text-primary', 'font-bold');
|
||||
tab.classList.add('text-subtle-gray');
|
||||
});
|
||||
|
||||
// Add active classes to current
|
||||
element.classList.add('active-tab', 'text-primary', 'font-bold');
|
||||
element.classList.remove('text-subtle-gray');
|
||||
|
||||
// Add a slight haptic feel
|
||||
if (window.navigator.vibrate) {
|
||||
window.navigator.vibrate(10);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle Safe Area for mobile
|
||||
function handleSafeArea() {
|
||||
const pbSafe = 'padding-bottom: env(safe-area-inset-bottom);';
|
||||
document.querySelector('.pb-safe').style = pbSafe;
|
||||
}
|
||||
window.addEventListener('load', handleSafeArea);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "门店核销记录页 (S-02)",
|
||||
"screenId": "493d65d221044751b2c9167d2af85c3d",
|
||||
"category": "shop",
|
||||
"syncedAt": "2026-06-29T02:35:13.102Z"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Reference in New Issue
Block a user