jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: multi-module iteration

Browse Source
This commit is contained in:
jacy
2026-08-04 21:38:49 +08:00
parent 9d96c73246
commit 71f508e02b
1366 changed files with 202004 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/partner/02_合伙人待确认账单页_f9b208b8/code.html
+293
View File
@@ -0,0 +1,293 @@
<!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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&amp;family=Be+Vietnam+Pro:wght@400;500&amp;family=Inter:wght@400;500&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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;
}
.paper-texture {
background-color: #faf9f7;
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
}
.glass-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.coupon-notch {
position: relative;
}
.coupon-notch::before, .coupon-notch::after {
content: '';
position: absolute;
left: -10px;
width: 20px;
height: 20px;
background: #faf9f7;
border-radius: 50%;
z-index: 10;
}
.coupon-notch::before { top: -10px; }
.coupon-notch::after { bottom: -10px; }
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"success-green": "#2D6A4F",
"secondary-container": "#fed65b",
"inverse-primary": "#ffb3ae",
"tertiary-container": "#4e5852",
"surface-container-lowest": "#ffffff",
"subtle-gray": "#999999",
"heritage-red": "#A61D24",
"outline-variant": "#e2bebc",
"surface-dim": "#dadad8",
"on-tertiary-fixed": "#141e19",
"inverse-surface": "#2f3130",
"on-primary-container": "#ffb9b4",
"on-error-container": "#93000a",
"on-secondary": "#ffffff",
"tertiary-fixed-dim": "#bec9c2",
"on-secondary-fixed": "#241a00",
"primary-fixed-dim": "#ffb3ae",
"status-blue": "#2A6EBB",
"surface-container-low": "#f4f3f1",
"ink-black": "#1A1A1A",
"surface": "#faf9f7",
"surface-container": "#efeeec",
"on-surface": "#1a1c1b",
"on-primary": "#ffffff",
"primary": "#820012",
"on-primary-fixed": "#410004",
"primary-container": "#a61d24",
"secondary-fixed": "#ffe088",
"secondary": "#735c00",
"outline": "#8d706e",
"on-tertiary": "#ffffff",
"surface-container-high": "#e9e8e6",
"aged-amber": "#FFBF00",
"on-surface-variant": "#5a413f",
"on-tertiary-container": "#c2cdc6",
"on-secondary-container": "#745c00",
"surface-variant": "#e3e2e0",
"tertiary": "#37413b",
"surface-bright": "#faf9f7",
"on-background": "#1a1c1b",
"error-container": "#ffdad6",
"background": "#faf9f7",
"on-secondary-fixed-variant": "#574500",
"on-primary-fixed-variant": "#910817",
"secondary-fixed-dim": "#e9c349",
"on-tertiary-fixed-variant": "#3f4943",
"primary-fixed": "#ffdad7",
"inverse-on-surface": "#f1f1ef",
"tertiary-fixed": "#dae5dd",
"on-error": "#ffffff",
"surface-tint": "#b3272c",
"surface-container-highest": "#e3e2e0",
"error": "#ba1a1a"
},
"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": {
"coupon-amount": ["Manrope"],
"headline-md": ["Manrope"],
"headline-lg": ["Manrope"],
"label-md": ["Inter"],
"headline-lg-mobile": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"headline-xl": ["Manrope"],
"body-lg": ["Be Vietnam Pro"]
},
"fontSize": {
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="paper-texture min-h-screen text-on-surface flex flex-col font-body-md text-body-md">
<!-- Top AppBar -->
<header class="fixed top-0 w-full z-50 bg-surface-container-low shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-xl mx-auto">
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high transition-colors active:scale-95 duration-200">
<span class="material-symbols-outlined text-primary">arrow_back</span>
</button>
<h1 class="font-headline-md text-headline-md-mobile text-primary font-bold">待确认账单</h1>
<div class="w-10 h-10 flex items-center justify-center rounded-full overflow-hidden border border-outline-variant/20">
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow pt-24 pb-32 px-margin-page w-full max-w-md mx-auto">
<!-- Status Indicator -->
<div class="flex items-center justify-between mb-stack-lg px-2">
<div class="flex flex-col items-center gap-1">
<div class="w-6 h-6 rounded-full bg-heritage-red text-white flex items-center justify-center">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<span class="font-label-md text-label-md text-heritage-red">数据核算</span>
</div>
<div class="flex-grow h-[2px] bg-heritage-red mx-2 -mt-4"></div>
<div class="flex flex-col items-center gap-1">
<div class="w-6 h-6 rounded-full bg-heritage-red border-2 border-heritage-red text-white flex items-center justify-center font-bold text-[12px]">2</div>
<span class="font-label-md text-label-md text-heritage-red">账单确认</span>
</div>
<div class="flex-grow h-[2px] bg-surface-container-highest mx-2 -mt-4"></div>
<div class="flex flex-col items-center gap-1">
<div class="w-6 h-6 rounded-full bg-surface-container-highest text-subtle-gray flex items-center justify-center font-bold text-[12px]">3</div>
<span class="font-label-md text-label-md text-subtle-gray">申请打款</span>
</div>
</div>
<!-- Hero Bill Card -->
<section class="relative bg-white rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 overflow-hidden mb-stack-md">
<!-- Decorative Header -->
<div class="h-2 bg-heritage-red w-full"></div>
<div class="p-stack-md">
<div class="flex justify-between items-start mb-6">
<div>
<p class="text-subtle-gray font-label-md text-label-md uppercase tracking-wider mb-1">SETTLEMENT PERIOD</p>
<h2 class="font-headline-lg text-headline-lg-mobile text-ink-black">10月度结算账单</h2>
</div>
<div class="bg-aged-amber/10 text-aged-amber px-3 py-1 rounded-full border border-aged-amber/20">
<span class="font-label-md text-label-md font-bold">待确认</span>
</div>
</div>
<div class="flex flex-col items-center py-6 border-y border-dashed border-outline-variant/30 relative">
<p class="text-subtle-gray mb-2">应结总金额</p>
<div class="flex items-baseline gap-1">
<span class="text-primary font-bold text-xl">¥</span>
<span class="text-primary font-coupon-amount text-coupon-amount">12,500.00</span>
</div>
</div>
<div class="mt-6 space-y-4">
<div class="flex justify-between items-center text-body-md">
<span class="text-on-surface-variant">订单分佣收入</span>
<span class="font-bold text-ink-black">¥ 10,200.00</span>
</div>
<div class="flex justify-between items-center text-body-md">
<span class="text-on-surface-variant">核销权益分佣</span>
<span class="font-bold text-ink-black">¥ 1,800.00</span>
</div>
</div>
<a class="flex items-center justify-center gap-2 mt-8 py-3 text-status-blue font-medium hover:bg-surface-container-low rounded-lg transition-colors group" href="#">
<span class="">查看详情</span>
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
</section>
<!-- Informational Notice -->
<div class="bg-surface-container-low rounded-lg p-4 mb-stack-lg border border-outline-variant/10">
<div class="flex gap-3">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">info</span>
<div class="text-body-md text-on-surface-variant leading-relaxed">
账单确认后将正式进入打款流程。如有异议，请在确认前联系城市运营经理核实数据。
</div>
</div>
</div>
</main>
<!-- Fixed Bottom Confirmation Section -->
<footer class="fixed bottom-0 w-full glass-panel border-t border-outline-variant/20 px-margin-page pb-10 pt-4 z-50">
<div class="max-w-md mx-auto space-y-4">
<label class="flex items-start gap-3 cursor-pointer group">
<div class="relative mt-0.5">
<input class="peer hidden" id="confirmCheck" type="checkbox">
<div class="w-5 h-5 border-2 border-outline rounded flex items-center justify-center peer-checked:bg-heritage-red peer-checked:border-heritage-red transition-all">
<span class="material-symbols-outlined text-white text-[16px] hidden peer-checked:block" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
</div>
<span class="text-body-md text-on-surface-variant group-hover:text-ink-black transition-colors">我已核对数据无误，同意根据此账单进行结算</span>
</label>
<button class="w-full h-14 bg-subtle-gray text-white font-bold rounded-xl shadow-lg opacity-50 cursor-not-allowed transition-all active:scale-[0.98] flex items-center justify-center gap-2" disabled="" id="submitBtn">
<span class="">确认并申请打款</span>
<span class="material-symbols-outlined">payments</span>
</button>
</div>
</footer>
<!-- Bottom Nav Bar (Simulated Context) -->
<nav class="fixed bottom-0 w-full h-20 bg-surface-container-lowest border-t border-outline-variant/20 flex justify-around items-center px-4 pb-safe z-40 md:hidden">
<div class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80">
<span class="material-symbols-outlined">dashboard</span>
<span class="font-label-md text-label-md">工作台</span>
</div>
<div class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80">
<span class="material-symbols-outlined">storefront</span>
<span class="font-label-md text-label-md">门店</span>
</div>
<div class="flex flex-col items-center justify-center text-primary bg-primary-fixed/30 rounded-xl px-3 py-1">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
<span class="font-label-md text-label-md">财务</span>
</div>
<div class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80">
<span class="material-symbols-outlined">person</span>
<span class="font-label-md text-label-md">我的</span>
</div>
</nav>
<script>
const checkbox = document.getElementById('confirmCheck');
const submitBtn = document.getElementById('submitBtn');
checkbox.addEventListener('change', function() {
if (this.checked) {
submitBtn.disabled = false;
submitBtn.classList.remove('bg-subtle-gray', 'opacity-50', 'cursor-not-allowed');
submitBtn.classList.add('bg-heritage-red', 'opacity-100', 'cursor-pointer');
} else {
submitBtn.disabled = true;
submitBtn.classList.add('bg-subtle-gray', 'opacity-50', 'cursor-not-allowed');
submitBtn.classList.remove('bg-heritage-red', 'opacity-100', 'cursor-pointer');
}
});
submitBtn.addEventListener('click', function() {
if (!this.disabled) {
this.innerHTML = `<span class="material-symbols-outlined animate-spin">sync</span> 正在提交...`;
setTimeout(() => {
alert('申请已提交，请耐心等待打款审核。');
this.innerHTML = `<span>已申请</span> <span class="material-symbols-outlined">check_circle</span>`;
this.disabled = true;
this.classList.add('bg-success-green');
this.classList.remove('bg-heritage-red');
}, 1500);
}
});
</script>
</body></html>
pages/partner/02_合伙人待确认账单页_f9b208b8/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人待确认账单页",
"screenId": "f9b208b809034ac0b4ef718c95caa61b",
"category": "partner",
"syncedAt": "2026-06-29T08:06:20.126Z"
}
pages/partner/02_合伙人待确认账单页_f9b208b8/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

pages/partner/02_城市合伙人快捷登录页_f6395fc9/code.html
+199
View File
@@ -0,0 +1,199 @@
<!DOCTYPE html><html lang="zh-CN"><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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=Manrope:wght@600;700;800&amp;family=Be+Vietnam+Pro:wght@400;500&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-secondary-fixed-variant": "#574500",
"on-background": "#1a1c1b",
"error-container": "#ffdad6",
"background": "#faf9f7",
"tertiary": "#37413b",
"surface-bright": "#faf9f7",
"surface-variant": "#e3e2e0",
"on-tertiary-container": "#c2cdc6",
"on-secondary-container": "#745c00",
"on-surface-variant": "#5a413f",
"surface-container-high": "#e9e8e6",
"aged-amber": "#FFBF00",
"on-tertiary": "#ffffff",
"secondary": "#735c00",
"outline": "#8d706e",
"secondary-fixed": "#ffe088",
"surface-container-highest": "#e3e2e0",
"error": "#ba1a1a",
"surface-tint": "#b3272c",
"on-error": "#ffffff",
"tertiary-fixed": "#dae5dd",
"primary-fixed": "#ffdad7",
"inverse-on-surface": "#f1f1ef",
"on-tertiary-fixed-variant": "#3f4943",
"on-primary-fixed-variant": "#910817",
"secondary-fixed-dim": "#e9c349",
"on-primary-container": "#ffb9b4",
"on-error-container": "#93000a",
"on-tertiary-fixed": "#141e19",
"inverse-surface": "#2f3130",
"surface-dim": "#dadad8",
"heritage-red": "#A61D24",
"outline-variant": "#e2bebc",
"surface-container-lowest": "#ffffff",
"subtle-gray": "#999999",
"tertiary-container": "#4e5852",
"secondary-container": "#fed65b",
"inverse-primary": "#ffb3ae",
"success-green": "#2D6A4F",
"primary-container": "#a61d24",
"on-primary-fixed": "#410004",
"primary": "#820012",
"on-primary": "#ffffff",
"on-surface": "#1a1c1b",
"surface": "#faf9f7",
"surface-container": "#efeeec",
"surface-container-low": "#f4f3f1",
"ink-black": "#1A1A1A",
"primary-fixed-dim": "#ffb3ae",
"status-blue": "#2A6EBB",
"on-secondary-fixed": "#241a00",
"tertiary-fixed-dim": "#bec9c2",
"on-secondary": "#ffffff"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"margin-page": "20px",
"base": "8px",
"stack-md": "16px",
"stack-sm": "4px",
"gutter-card": "12px",
"stack-lg": "32px"
},
"fontFamily": {
"label-md": ["Inter"],
"headline-xl": ["Manrope"],
"body-lg": ["Be Vietnam Pro"],
"headline-lg-mobile": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"headline-md": ["Manrope"],
"headline-lg": ["Manrope"],
"coupon-amount": ["Manrope"]
},
"fontSize": {
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"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"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
}
},
},
}
</script>
<style>
body {
background-color: #faf9f7;
background-image:
radial-gradient(at 100% 0%, rgba(166, 29, 36, 0.03) 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(255, 191, 0, 0.03) 0px, transparent 50%);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body class="font-body-md text-on-background selection:bg-heritage-red selection:text-white">
<!-- Content Wrapper -->
<main class="flex-1 flex flex-col items-center justify-center px-margin-page py-stack-lg animate-in fade-in duration-700">
<!-- Top Area: Brand Identity -->
<header class="flex flex-col items-center mb-stack-lg space-y-stack-md text-center">
<div class="relative w-[120px] h-[120px] rounded-full overflow-hidden shadow-sm flex items-center justify-center bg-white border border-surface-container">
<img alt="杜康好客 Logo" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA9MEuvskCn6CviO6_-HdsuCwpPlM4__eFsLw2y3NtjGHvkJe_lqlBJNOP08Gm3b7HqfBiDpWm1T4InpgkuJte5ERbj49pbtE_0QLDDEty8DQC-yFxTqSNw3M4bzg0RTIqm8t2nrggVIhk4zi0VdbbBbDE3Q25zkmq9yBXQfo-ocfHUftnQxuWTM-Fri9ziXhRYDfYUpvCMQH7kyxvQrH19UPraYhL2eqO_8TJPOrWJgU9XttSSb2HKxCpCPARTRa7_UPEyly9HypA">
</div>
<div class="space-y-stack-sm">
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red font-bold tracking-tight">杜康好客</h1>
<p class="font-label-md text-label-md text-subtle-gray tracking-[0.2em] uppercase">城市合伙人端</p>
</div>
</header>
<!-- Central Account Card -->
<section class="w-full max-w-sm mb-stack-lg">
<div class="glass-card rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col items-center space-y-stack-md relative overflow-hidden transition-all duration-300 hover:shadow-xl">
<!-- Status Badge -->
<div class="absolute top-0 right-0">
<div class="bg-aged-amber/10 text-aged-amber text-[10px] font-bold px-3 py-1 rounded-bl-xl tracking-wider">
已识别账号
</div>
</div>
<!-- User Avatar -->
<div class="mt-stack-sm">
<div class="w-20 h-20 rounded-full bg-surface-container flex items-center justify-center border-4 border-white shadow-inner">
<span class="material-symbols-outlined text-4xl text-subtle-gray" style="font-variation-settings: 'FILL' 1;">person</span>
</div>
</div>
<!-- Identity Details -->
<div class="text-center space-y-stack-sm">
<h2 class="font-headline-md text-headline-md text-on-background">李明 <span class="text-subtle-gray font-normal text-body-md">(郑州合伙人)</span></h2>
<p class="font-body-md text-body-md text-subtle-gray tracking-widest">138 **** 8888</p>
</div>
</div>
</section>
<!-- Action Buttons -->
<nav class="w-full max-w-sm space-y-stack-md">
<button class="w-full bg-heritage-red hover:bg-primary text-white font-headline-md text-headline-md py-4 rounded-xl shadow-lg transition-all duration-200 active:scale-[0.98] flex items-center justify-center space-x-2 group">
<span>一键登录</span>
<span class="material-symbols-outlined transition-transform duration-300 group-hover:translate-x-1">arrow_forward</span>
</button>
<button class="w-full bg-transparent text-on-surface-variant font-label-md text-label-md py-3 rounded-xl border border-transparent hover:border-outline-variant hover:bg-surface-container transition-all duration-200 active:opacity-70">
切换账号
</button>
</nav>
</main>
<!-- Footer Area -->
<footer class="py-stack-lg flex flex-col items-center justify-center">
<div class="flex items-center space-x-2 text-subtle-gray opacity-60">
<span class="material-symbols-outlined text-[16px]">verified_user</span>
<span class="font-label-md text-[10px] tracking-wider uppercase">Secured by Dukang Heritage</span>
</div>
<!-- Decorative bottom line -->
<div class="mt-4 w-24 h-[2px] bg-gradient-to-r from-transparent via-heritage-red/10 to-transparent"></div>
</footer>
<!-- Simple Interaction Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const loginBtn = document.querySelector('button.bg-heritage-red');
loginBtn.addEventListener('click', function() {
this.classList.add('opacity-80', 'cursor-wait');
const label = this.querySelector('span:first-child');
label.textContent = '登录中...';
// Mock redirection delay
setTimeout(() => {
label.textContent = '一键登录';
this.classList.remove('opacity-80', 'cursor-wait');
}, 2000);
});
});
</script>
</body></html>
pages/partner/02_城市合伙人快捷登录页_f6395fc9/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "城市合伙人快捷登录页",
"screenId": "f6395fc9de6848adbf9109344a064865",
"category": "partner",
"syncedAt": "2026-06-29T02:33:28.117Z"
}
pages/partner/02_城市合伙人快捷登录页_f6395fc9/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

pages/partner/04_合伙人中心_c31c874b/code.html
+332
View File
@@ -0,0 +1,332 @@
<!DOCTYPE html><html class="light" lang="zh-CN" style="width: 390px; height: 1312px; overflow: hidden; position: relative;"><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&amp;family=Inter:wght@400;500;600&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<!-- Use the exact Tailwind Config provided -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary-container": "#fed65b",
"surface": "#faf9f7",
"subtle-gray": "#999999",
"inverse-on-surface": "#f1f1ef",
"tertiary-fixed": "#dae5dd",
"surface-bright": "#faf9f7",
"primary-container": "#a61d24",
"error": "#ba1a1a",
"aged-amber": "#FFBF00",
"outline": "#8d706e",
"surface-container": "#efeeec",
"surface-container-lowest": "#ffffff",
"on-tertiary-container": "#c2cdc6",
"tertiary": "#37413b",
"on-error": "#ffffff",
"status-blue": "#2A6EBB",
"on-surface": "#1a1c1b",
"error-container": "#ffdad6",
"inverse-primary": "#ffb3ae",
"ink-black": "#1A1A1A",
"heritage-red": "#A61D24",
"on-surface-variant": "#5a413f",
"on-background": "#1a1c1b",
"surface-container-high": "#e9e8e6",
"on-primary-fixed": "#410004",
"success-green": "#2D6A4F",
"on-secondary-fixed-variant": "#574500",
"on-secondary-fixed": "#241a00",
"on-secondary-container": "#745c00",
"on-error-container": "#93000a",
"inverse-surface": "#2f3130",
"primary": "#820012",
"surface-variant": "#e3e2e0",
"primary-fixed": "#ffdad7",
"on-tertiary-fixed-variant": "#3f4943",
"tertiary-container": "#4e5852",
"background": "#faf9f7",
"secondary-fixed-dim": "#e9c349",
"surface-container-low": "#f4f3f1",
"surface-container-highest": "#e3e2e0",
"on-primary-container": "#ffb9b4",
"secondary-fixed": "#ffe088",
"on-tertiary-fixed": "#141e19",
"on-primary": "#ffffff",
"tertiary-fixed-dim": "#bec9c2",
"outline-variant": "#e2bebc",
"primary-fixed-dim": "#ffb3ae",
"on-tertiary": "#ffffff",
"surface-tint": "#b3272c",
"surface-dim": "#dadad8",
"on-primary-fixed-variant": "#910817",
"on-secondary": "#ffffff",
"secondary": "#735c00"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"gutter-card": "12px",
"stack-sm": "4px",
"stack-md": "16px",
"stack-lg": "32px",
"base": "8px",
"margin-page": "20px"
},
"fontFamily": {
"headline-lg": ["Manrope"],
"label-md": ["Inter"],
"headline-md": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"coupon-amount": ["Manrope"],
"headline-xl": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"body-lg": ["Be Vietnam Pro"]
},
"fontSize": {
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
body {
background-color: #faf9f7;
-webkit-tap-highlight-color: transparent;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.glass-effect {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.8);
}
.tonal-shadow {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
.ticket-notch {
position: relative;
}
.ticket-notch::before, .ticket-notch::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
background-color: #faf9f7;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.ticket-notch::before { left: -6px; }
.ticket-notch::after { right: -6px; }
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="antialiased text-on-background">
<!-- TopAppBar -->
<header class="bg-background dark:bg-background docked full-width top-0 sticky z-40 transition-colors duration-200 flex justify-between items-center px-margin-page w-full h-14">
<button class="flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-container transition-colors duration-200">
<span class="material-symbols-outlined text-heritage-red dark:text-inverse-primary" data-icon="arrow_back">arrow_back</span>
</button>
<h1 class="font-headline-md text-headline-md-mobile dark:text-on-background font-bold text-heritage-red">杜康好客</h1>
<button class="flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-container transition-colors duration-200">
<span class="material-symbols-outlined text-heritage-red dark:text-inverse-primary" data-icon="settings">settings</span>
</button>
</header>
<main class="pb-24">
<!-- Profile Header Section -->
<section class="px-margin-page pt-stack-md">
<div class="bg-surface-container-lowest p-stack-md rounded-xl tonal-shadow flex items-center space-x-stack-md border border-heritage-red/5">
<div class="relative">
<img class="w-16 h-16 rounded-full object-cover border-2 border-heritage-red/10" data-alt="A professional studio portrait of a distinguished Chinese business leader in a tailored dark suit. The lighting is soft and cinematic, highlighting a calm and confident expression. The background is a minimalist, warm off-white, reflecting a high-end heritage brand aesthetic with premium clarity and depth." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBsjzWQtbs4GqPdKFjln-x3niqTNfgG8Xat72e56Fbp-vxVJoWOBhk0yTXm7NRmUW_gZDtuyYx35paB26UfCucXtEVGDRLkkUseLuGJTQwyglYXkeVE-E6eKmh0BdI9Ix9dPmvabDdFnj0wBsN_PIjbjjBwhTd_jcnN3bhxhxtebSFIjUdq4SYD3fN1U7b9mlJZI-cHU5KJdGecyZUBulzjk5J0x3_tguDWm059lFX6GvEp2F8Cs4vvuDRcMOGSYov6U-n0Mo_zcbY">
<div class="absolute -bottom-1 -right-1 bg-aged-amber text-on-secondary px-2 py-0.5 rounded-full border-2 border-white shadow-sm flex items-center">
<span class="material-symbols-outlined text-[12px]" data-icon="stars" style="font-variation-settings: 'FILL' 1;">stars</span>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black">张建国</h2>
<span class="bg-secondary-container text-on-secondary-container px-2 py-1 rounded-lg font-label-md text-[10px] uppercase tracking-wider">城市合伙人</span>
</div>
<div class="flex items-center mt-1 text-subtle-gray space-x-1">
<span class="material-symbols-outlined text-body-md" data-icon="location_on">location_on</span>
<span class="font-body-md text-body-md">洛阳市 · 涧西区</span>
</div>
</div>
</div>
</section>
<!-- Financial Section -->
<section class="mt-stack-lg px-margin-page">
<div class="flex items-center justify-between mb-stack-sm">
<h3 class="font-headline-md text-headline-md text-ink-black">资产概览</h3>
<button class="text-heritage-red font-label-md flex items-center">
明细 <span class="material-symbols-outlined text-[16px]" data-icon="chevron_right">chevron_right</span>
</button>
</div>
<!-- Bento-style Financial Cards -->
<div class="mb-3 bg-heritage-red/5 border border-heritage-red/10 p-4 rounded-xl flex items-center justify-between active:opacity-80 transition-colors">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-heritage-red/10 flex items-center justify-center">
<span class="material-symbols-outlined text-heritage-red" data-icon="pending_actions">pending_actions</span>
</div>
<div>
<p class="font-body-lg text-ink-black font-medium">待确认账单</p>
<p class="text-label-md text-heritage-red">您有 3 笔账单待确认</p>
</div>
</div>
<span class="material-symbols-outlined text-heritage-red" data-icon="chevron_right">chevron_right</span>
</div><div class="grid grid-cols-2 gap-3">
<div class="col-span-2 bg-heritage-red p-stack-md rounded-xl text-white shadow-lg relative overflow-hidden">
<div class="relative z-10">
<p class="font-label-md opacity-80 mb-1">账户余额 (元)</p>
<div class="flex items-baseline justify-between">
<span class="font-coupon-amount text-headline-xl">128,450.00</span>
</div>
</div>
</div>
<div class="bg-surface-container-lowest p-stack-md rounded-xl tonal-shadow border border-heritage-red/5">
<p class="font-label-md text-subtle-gray mb-1">待结算</p>
<div class="flex items-center space-x-1">
<span class="text-heritage-red font-headline-md">¥</span>
<span class="font-headline-md text-ink-black">12,680.00</span>
</div>
</div>
<div class="bg-surface-container-lowest p-stack-md rounded-xl tonal-shadow border border-heritage-red/5">
<p class="font-label-md text-subtle-gray mb-1">提现记录</p>
<div class="flex items-center justify-between">
<span class="font-headline-md text-ink-black">15 笔</span>
<span class="material-symbols-outlined text-subtle-gray" data-icon="history">history</span>
</div>
</div>
</div>
</section>
<!-- Management Tools -->
<section class="mt-stack-lg px-margin-page">
<h3 class="font-headline-md text-headline-md text-ink-black mb-stack-sm">运营管理</h3>
<div class="bg-surface-container-lowest rounded-xl tonal-shadow overflow-hidden border border-heritage-red/5">
<!-- Tool Item -->
<div class="flex items-center justify-between p-4 border-b border-surface-container hover:bg-surface-container-low transition-colors group">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-heritage-red/5 flex items-center justify-center">
<span class="material-symbols-outlined text-heritage-red" data-icon="badge">badge</span>
</div>
<span class="font-body-lg text-ink-black">我的员工</span>
</div>
<div class="flex items-center space-x-2">
<span class="bg-heritage-red/10 text-heritage-red px-2 py-0.5 rounded-full font-label-md">12人</span>
<span class="material-symbols-outlined text-subtle-gray group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
</div>
<!-- Tool Item -->
<div class="flex items-center justify-between p-4 border-b border-surface-container hover:bg-surface-container-low transition-colors group">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-heritage-red/5 flex items-center justify-center">
<span class="material-symbols-outlined text-heritage-red" data-icon="store">store</span>
</div>
<span class="font-body-lg text-ink-black">门店审核记录</span>
</div>
<span class="material-symbols-outlined text-subtle-gray group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
<!-- Tool Item -->
<div class="flex items-center justify-between p-4 hover:bg-surface-container-low transition-colors group">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-heritage-red/5 flex items-center justify-center">
<span class="material-symbols-outlined text-heritage-red" data-icon="description">description</span>
</div>
<span class="font-body-lg text-ink-black">合同管理</span>
</div>
<div class="flex items-center space-x-2">
<span class="font-label-md text-status-blue">待续约</span>
<span class="material-symbols-outlined text-subtle-gray group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
</div>
</div>
</section>
<!-- Support & Settings -->
<section class="mt-stack-lg px-margin-page">
<div class="bg-surface-container-lowest rounded-xl tonal-shadow overflow-hidden border border-heritage-red/5">
<button class="w-full flex items-center justify-center p-4 hover:bg-error-container/20 transition-colors group">
<span class="material-symbols-outlined text-error mr-2" data-icon="logout">logout</span>
<span class="font-body-lg text-error font-medium">退出登录</span>
</button>
</div>
</section>
<!-- Aesthetic Branding Element -->
<div class="mt-12 mb-8 flex flex-col items-center justify-center opacity-30">
<img class="w-16 h-16 grayscale mb-2" data-alt="A stylized minimalist watermark logo of ancient Chinese calligraphy representing Dukang liquor, rendered in a very subtle, pale earth-toned outline on a light background. The style is clean, editorial, and sophisticated." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJwsfHcjEGuUXImV012a29rYlqzDwDjNeSws1D5Y7oC_uOjjjmhD1RrcmefngFfHHmPzTdlN_b7KTLp51B4-TGAv0OxhCKWnTCP5u1xyxT1nnzZEOt0EE2eAHBoHCqxi_lG0EG91n0gG9Wxzq0X2nnObleJSi5uJS1hiitpLFEuRfkiKEF1HuztSPXHjljT4m4AFIXfrSF2bBnFV9lFzsI5nOJll3M0YrLtUcqw0aYoishKp4aKybHJhlIv4LCkO5wSlUU7YePpTE">
<p class="font-label-md text-subtle-gray">传承千年 · 杜康好客</p>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 w-full z-50 flex justify-around items-center px-4 py-2 h-16 bg-surface dark:bg-surface-dim shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] rounded-t-xl">
<a class="flex flex-col items-center justify-center text-subtle-gray dark:text-on-surface-variant active:opacity-80 scale-95 transition-transform duration-150" href="#">
<span class="material-symbols-outlined" data-icon="home">home</span>
<span class="font-label-md text-label-md">首页</span>
</a>
<a class="flex flex-col items-center justify-center text-subtle-gray dark:text-on-surface-variant active:opacity-80 scale-95 transition-transform duration-150" href="#">
<span class="material-symbols-outlined" data-icon="work">work</span>
<span class="font-label-md text-label-md">门店管理</span>
</a>
<a class="flex flex-col items-center justify-center text-heritage-red dark:text-primary-fixed-dim font-bold active:opacity-80 scale-95 transition-transform duration-150" href="#">
<span class="material-symbols-outlined" data-icon="account_circle" style="font-variation-settings: 'FILL' 1;">account_circle</span>
<span class="font-label-md text-label-md">合伙人中心</span>
</a>
</nav>
<script>
// Simple micro-interaction for list items
document.querySelectorAll('.group').forEach(item => {
item.addEventListener('touchstart', function() {
this.classList.add('bg-surface-container-low');
});
item.addEventListener('touchend', function() {
setTimeout(() => {
this.classList.remove('bg-surface-container-low');
}, 100);
});
});
// Sticky header transition logic
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 20) {
header.classList.add('shadow-md', 'glass-effect');
} else {
header.classList.remove('shadow-md', 'glass-effect');
}
});
</script>
<div id="snapdom-sandbox" data-snapdom-sandbox="true" aria-hidden="true" style="position: absolute; left: -9999px; top: -9999px; width: 0px; height: 0px; overflow: hidden;"></div></body></html>
pages/partner/04_合伙人中心_c31c874b/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人中心",
"screenId": "c31c874b8c0f47a987846e18a2de8cbb",
"category": "partner",
"syncedAt": "2026-06-29T02:33:34.006Z"
}
pages/partner/04_合伙人中心_c31c874b/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

pages/partner/04_城市合伙人快捷登录页_f6395fc9/code.html
+199
View File
@@ -0,0 +1,199 @@
<!DOCTYPE html><html lang="zh-CN"><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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=Manrope:wght@600;700;800&amp;family=Be+Vietnam+Pro:wght@400;500&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-secondary-fixed-variant": "#574500",
"on-background": "#1a1c1b",
"error-container": "#ffdad6",
"background": "#faf9f7",
"tertiary": "#37413b",
"surface-bright": "#faf9f7",
"surface-variant": "#e3e2e0",
"on-tertiary-container": "#c2cdc6",
"on-secondary-container": "#745c00",
"on-surface-variant": "#5a413f",
"surface-container-high": "#e9e8e6",
"aged-amber": "#FFBF00",
"on-tertiary": "#ffffff",
"secondary": "#735c00",
"outline": "#8d706e",
"secondary-fixed": "#ffe088",
"surface-container-highest": "#e3e2e0",
"error": "#ba1a1a",
"surface-tint": "#b3272c",
"on-error": "#ffffff",
"tertiary-fixed": "#dae5dd",
"primary-fixed": "#ffdad7",
"inverse-on-surface": "#f1f1ef",
"on-tertiary-fixed-variant": "#3f4943",
"on-primary-fixed-variant": "#910817",
"secondary-fixed-dim": "#e9c349",
"on-primary-container": "#ffb9b4",
"on-error-container": "#93000a",
"on-tertiary-fixed": "#141e19",
"inverse-surface": "#2f3130",
"surface-dim": "#dadad8",
"heritage-red": "#A61D24",
"outline-variant": "#e2bebc",
"surface-container-lowest": "#ffffff",
"subtle-gray": "#999999",
"tertiary-container": "#4e5852",
"secondary-container": "#fed65b",
"inverse-primary": "#ffb3ae",
"success-green": "#2D6A4F",
"primary-container": "#a61d24",
"on-primary-fixed": "#410004",
"primary": "#820012",
"on-primary": "#ffffff",
"on-surface": "#1a1c1b",
"surface": "#faf9f7",
"surface-container": "#efeeec",
"surface-container-low": "#f4f3f1",
"ink-black": "#1A1A1A",
"primary-fixed-dim": "#ffb3ae",
"status-blue": "#2A6EBB",
"on-secondary-fixed": "#241a00",
"tertiary-fixed-dim": "#bec9c2",
"on-secondary": "#ffffff"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"margin-page": "20px",
"base": "8px",
"stack-md": "16px",
"stack-sm": "4px",
"gutter-card": "12px",
"stack-lg": "32px"
},
"fontFamily": {
"label-md": ["Inter"],
"headline-xl": ["Manrope"],
"body-lg": ["Be Vietnam Pro"],
"headline-lg-mobile": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"headline-md": ["Manrope"],
"headline-lg": ["Manrope"],
"coupon-amount": ["Manrope"]
},
"fontSize": {
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"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"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
}
},
},
}
</script>
<style>
body {
background-color: #faf9f7;
background-image:
radial-gradient(at 100% 0%, rgba(166, 29, 36, 0.03) 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(255, 191, 0, 0.03) 0px, transparent 50%);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body class="font-body-md text-on-background selection:bg-heritage-red selection:text-white">
<!-- Content Wrapper -->
<main class="flex-1 flex flex-col items-center justify-center px-margin-page py-stack-lg animate-in fade-in duration-700">
<!-- Top Area: Brand Identity -->
<header class="flex flex-col items-center mb-stack-lg space-y-stack-md text-center">
<div class="relative w-[120px] h-[120px] rounded-full overflow-hidden shadow-sm flex items-center justify-center bg-white border border-surface-container">
<img alt="杜康好客 Logo" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA9MEuvskCn6CviO6_-HdsuCwpPlM4__eFsLw2y3NtjGHvkJe_lqlBJNOP08Gm3b7HqfBiDpWm1T4InpgkuJte5ERbj49pbtE_0QLDDEty8DQC-yFxTqSNw3M4bzg0RTIqm8t2nrggVIhk4zi0VdbbBbDE3Q25zkmq9yBXQfo-ocfHUftnQxuWTM-Fri9ziXhRYDfYUpvCMQH7kyxvQrH19UPraYhL2eqO_8TJPOrWJgU9XttSSb2HKxCpCPARTRa7_UPEyly9HypA">
</div>
<div class="space-y-stack-sm">
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red font-bold tracking-tight">杜康好客</h1>
<p class="font-label-md text-label-md text-subtle-gray tracking-[0.2em] uppercase">城市合伙人端</p>
</div>
</header>
<!-- Central Account Card -->
<section class="w-full max-w-sm mb-stack-lg">
<div class="glass-card rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] flex flex-col items-center space-y-stack-md relative overflow-hidden transition-all duration-300 hover:shadow-xl">
<!-- Status Badge -->
<div class="absolute top-0 right-0">
<div class="bg-aged-amber/10 text-aged-amber text-[10px] font-bold px-3 py-1 rounded-bl-xl tracking-wider">
已识别账号
</div>
</div>
<!-- User Avatar -->
<div class="mt-stack-sm">
<div class="w-20 h-20 rounded-full bg-surface-container flex items-center justify-center border-4 border-white shadow-inner">
<span class="material-symbols-outlined text-4xl text-subtle-gray" style="font-variation-settings: 'FILL' 1;">person</span>
</div>
</div>
<!-- Identity Details -->
<div class="text-center space-y-stack-sm">
<h2 class="font-headline-md text-headline-md text-on-background">李明 <span class="text-subtle-gray font-normal text-body-md">(郑州合伙人)</span></h2>
<p class="font-body-md text-body-md text-subtle-gray tracking-widest">138 **** 8888</p>
</div>
</div>
</section>
<!-- Action Buttons -->
<nav class="w-full max-w-sm space-y-stack-md">
<button class="w-full bg-heritage-red hover:bg-primary text-white font-headline-md text-headline-md py-4 rounded-xl shadow-lg transition-all duration-200 active:scale-[0.98] flex items-center justify-center space-x-2 group">
<span>一键登录</span>
<span class="material-symbols-outlined transition-transform duration-300 group-hover:translate-x-1">arrow_forward</span>
</button>
<button class="w-full bg-transparent text-on-surface-variant font-label-md text-label-md py-3 rounded-xl border border-transparent hover:border-outline-variant hover:bg-surface-container transition-all duration-200 active:opacity-70">
切换账号
</button>
</nav>
</main>
<!-- Footer Area -->
<footer class="py-stack-lg flex flex-col items-center justify-center">
<div class="flex items-center space-x-2 text-subtle-gray opacity-60">
<span class="material-symbols-outlined text-[16px]">verified_user</span>
<span class="font-label-md text-[10px] tracking-wider uppercase">Secured by Dukang Heritage</span>
</div>
<!-- Decorative bottom line -->
<div class="mt-4 w-24 h-[2px] bg-gradient-to-r from-transparent via-heritage-red/10 to-transparent"></div>
</footer>
<!-- Simple Interaction Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const loginBtn = document.querySelector('button.bg-heritage-red');
loginBtn.addEventListener('click', function() {
this.classList.add('opacity-80', 'cursor-wait');
const label = this.querySelector('span:first-child');
label.textContent = '登录中...';
// Mock redirection delay
setTimeout(() => {
label.textContent = '一键登录';
this.classList.remove('opacity-80', 'cursor-wait');
}, 2000);
});
});
</script>
</body></html>
pages/partner/04_城市合伙人快捷登录页_f6395fc9/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "城市合伙人快捷登录页",
"screenId": "f6395fc9de6848adbf9109344a064865",
"category": "partner",
"syncedAt": "2026-06-29T08:06:29.906Z"
}
pages/partner/04_城市合伙人快捷登录页_f6395fc9/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

pages/partner/06_合伙人订单中心页_增加待发货与异常示例_b7c630ed/code.html
+401
View File
@@ -0,0 +1,401 @@
<!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&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
pages/partner/06_合伙人订单中心页_增加待发货与异常示例_b7c630ed/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人订单中心页 - 增加待发货与异常示例",
"screenId": "b7c630ed3ae4434a98d9fceaf30574da",
"category": "partner",
"syncedAt": "2026-06-29T08:06:35.653Z"
}
pages/partner/06_合伙人订单中心页_增加待发货与异常示例_b7c630ed/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

pages/partner/06_合伙人门店管理页_增加搜索筛选_6899aa96/code.html
+469
View File
@@ -0,0 +1,469 @@
<!DOCTYPE html><html lang="zh-CN"><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;600;700;800&amp;family=Be+Vietnam+Pro:wght@400;500&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<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>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
background-color: #faf9f7;
-webkit-tap-highlight-color: transparent;
}
.tonal-layer {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
.scroll-hide::-webkit-scrollbar {
display: none;
}
.active-step-line {
background: linear-gradient(90deg, #A61D24 0%, #A61D24 100%);
}
.step-transition {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="font-body-md text-on-surface">
<!-- Top Navigation Bar -->
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim shadow-sm z-50">
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康好客</h1>
</header>
<main class="pt-20 pb-24 px-margin-page min-h-screen">
<!-- Header Section -->
<section class="mb-4">
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black mb-1">门店管理</h2>
<p class="text-subtle-gray font-body-md">管理您的合作门店及其运营状态</p>
</section><div class="sticky top-14 z-40 bg-surface/95 backdrop-blur-sm -mx-margin-page px-margin-page py-4 mb-4 border-b border-surface-container">
<div class="space-y-4">
<!-- Search Bar -->
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-gray">search</span>
<input class="w-full h-11 pl-10 pr-4 bg-surface-container-low border-none rounded-xl focus:ring-2 focus:ring-heritage-red/20 text-body-md outline-none transition-all" placeholder="搜索门店名称/地址" type="text">
</div>
<!-- Filter Chips -->
<div class="flex gap-2 overflow-x-auto scroll-hide pb-1">
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-heritage-red text-white text-label-md font-medium transition-colors">全部</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-medium active:bg-heritage-red/5 transition-colors">营业中</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-medium active:bg-heritage-red/5 transition-colors">暂时闭店</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-medium active:bg-heritage-red/5 transition-colors">已关闭</button>
</div>
</div>
</div>
<!-- Section A: Store List -->
<div class="space-y-stack-md">
<!-- Store Card 1 -->
<div class="bg-surface-container-lowest rounded-xl tonal-layer p-4 border border-heritage-red/5">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-headline-md text-headline-md text-ink-black">洛阳醉仙居酒楼</h3>
<p class="text-label-md font-label-md text-subtle-gray mt-1">洛阳市洛龙区长兴街102号</p>
</div>
<span class="bg-success-green/10 text-success-green px-2 py-1 rounded-full font-label-md text-label-md">营业中</span>
</div>
<div class="flex flex-wrap gap-2 pt-4 border-t border-surface-container">
<button class="flex-1 py-2 rounded-lg border border-heritage-red text-heritage-red font-label-md text-label-md active:bg-heritage-red/5 transition-colors">暂时闭店</button>
<button class="flex-1 py-2 rounded-lg border border-subtle-gray text-subtle-gray font-label-md text-label-md">正式关闭</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-surface-container-high text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
</div>
</div>
<!-- Store Card 2 -->
<div class="bg-surface-container-lowest rounded-xl tonal-layer p-4 border border-heritage-red/5">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-headline-md text-headline-md text-ink-black">古法杜康品鉴馆</h3>
<p class="text-label-md font-label-md text-subtle-gray mt-1">洛阳市涧西区南昌路财富中心</p>
</div>
<span class="bg-aged-amber/10 text-secondary px-2 py-1 rounded-full font-label-md text-label-md">暂时闭店</span>
</div>
<div class="flex flex-wrap gap-2 pt-4 border-t border-surface-container">
<button class="flex-1 py-2 rounded-lg bg-heritage-red text-white font-label-md text-label-md active:opacity-90 transition-opacity">恢复营业</button>
<button class="flex-1 py-2 rounded-lg border border-subtle-gray text-subtle-gray font-label-md text-label-md">正式关闭</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-surface-container-high text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
</div>
</div>
<!-- Store Card 3 -->
<div class="bg-surface-container-lowest rounded-xl tonal-layer p-4 border border-heritage-red/5 opacity-70">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-headline-md text-headline-md text-ink-black">杜康龙门礼品店</h3>
<p class="text-label-md font-label-md text-subtle-gray mt-1">洛阳市洛龙区龙门大道22号</p>
</div>
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-1 rounded-full font-label-md text-label-md">已关闭</span>
</div>
<div class="flex flex-wrap gap-2 pt-4 border-t border-surface-container">
<button class="flex-1 py-2 rounded-lg bg-heritage-red text-white font-label-md text-label-md">重新开启</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-surface-container-high text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
</div>
</div>
</div>
<!-- Section B: Store Entry Form Overlay -->
<div class="fixed inset-0 z-[100] hidden" id="entryFormOverlay">
<div class="absolute inset-0 bg-ink-black/40 backdrop-blur-sm" onclick="closeForm()"></div>
<div class="absolute bottom-0 w-full bg-white rounded-t-[24px] max-h-[813px] overflow-y-auto flex flex-col transform translate-y-full transition-transform duration-300" id="formContainer">
<!-- Grabber -->
<div class="w-12 h-1.5 bg-surface-container-highest rounded-full mx-auto mt-3"></div>
<div class="px-margin-page py-6">
<div class="flex justify-between items-center mb-8">
<h3 class="font-headline-lg text-headline-lg text-ink-black">录入新门店</h3>
<button class="text-subtle-gray" onclick="closeForm()">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<!-- Step Indicator -->
<div class="flex items-center justify-between mb-stack-lg relative px-4">
<div class="flex flex-col items-center z-10">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center text-label-md font-bold transition-colors" id="stepCircle1">1</div>
<span class="text-[10px] mt-1 font-medium text-heritage-red">基本信息</span>
</div>
<div class="flex-1 h-[2px] bg-surface-container-high mx-2 -mt-4">
<div class="h-full w-0 bg-heritage-red transition-all duration-300" id="line1"></div>
</div>
<div class="flex flex-col items-center z-10">
<div class="w-8 h-8 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center text-label-md font-bold transition-colors" id="stepCircle2">2</div>
<span class="text-[10px] mt-1 font-medium text-subtle-gray">照片上传</span>
</div>
<div class="flex-1 h-[2px] bg-surface-container-high mx-2 -mt-4">
<div class="h-full w-0 bg-heritage-red transition-all duration-300" id="line2"></div>
</div>
<div class="flex flex-col items-center z-10">
<div class="w-8 h-8 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center text-label-md font-bold transition-colors" id="stepCircle3">3</div>
<span class="text-[10px] mt-1 font-medium text-subtle-gray">财务结算</span>
</div>
</div>
<!-- Multi-step Form Content -->
<div class="overflow-hidden">
<div class="flex w-[300%] transition-transform duration-300 ease-in-out" id="formSteps">
<!-- Step 1: Basic Info -->
<div class="w-1/3 px-1">
<div class="space-y-4">
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">门店全称</label>
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red focus:border-heritage-red outline-none" placeholder="请输入营业执照上的名称" type="text">
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">联系电话</label>
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="请输入负责人手机号" type="tel">
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">地理位置</label>
<div class="relative">
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low outline-none pr-10" readonly="" type="text" value="河南省 洛阳市 洛龙区">
<span class="material-symbols-outlined absolute right-3 top-3 text-on-surface-variant">location_on</span>
</div>
<input class="w-full h-12 px-4 mt-2 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="详细地址：如街道、门牌号" type="text">
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">门店简介</label>
<textarea class="w-full p-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="介绍门店特色（选填）" rows="3"></textarea>
</div>
</div>
</div>
<!-- Step 2: Photo Upload -->
<div class="w-1/3 px-1">
<div class="space-y-6">
<div class="space-y-2">
<label class="font-label-md text-label-md text-ink-black font-semibold">门店门头照</label>
<div class="w-full aspect-[16/9] border-2 border-dashed border-surface-container-highest rounded-xl flex flex-col items-center justify-center bg-surface-container-low text-subtle-gray">
<span class="material-symbols-outlined text-4xl mb-2">add_a_photo</span>
<p class="text-label-md">上传清晰门头实景图</p>
</div>
</div>
<div class="space-y-2">
<label class="font-label-md text-label-md text-ink-black font-semibold">店内环境 (1-3张)</label>
<div class="grid grid-cols-3 gap-2">
<div class="aspect-square border-2 border-dashed border-surface-container-highest rounded-xl flex items-center justify-center bg-surface-container-low text-subtle-gray">
<span class="material-symbols-outlined">add</span>
</div>
<div class="aspect-square bg-surface-container-high rounded-xl relative overflow-hidden">
<img class="w-full h-full object-cover" data-alt="A clean, bright interior of a traditional Chinese liquor specialty store, featuring wooden shelves stocked with premium bottles of Dukang liquor, warm lighting, and elegant minimalist furniture." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLELbGgCXFw0Zz39xj1NSQQaZePn2Vvi5TMm8vKn1WayIIYL82JprBwDX35ueW12IXHlopViMaCGcEzdz6ZFCBOqMEDmMcccLhCA53DWOd_fSlwJlLfKeDDm80Rl4sSxAybvE8oeVSaxVNSZe7kFuGAYVUYDiC9pnd2Pkg6jBIYjlN_VtD3RsFRL7oTc5kR0JMOTygLvulQgL0ZWVDDUmyShM3LwbdEjbdH-6f2raWwLVL5Zka-bA8RwVgC_Tb0DxWhn6OaYEDGSQ">
</div>
</div>
</div>
<div class="space-y-2">
<label class="font-label-md text-label-md text-ink-black font-semibold">合作合同</label>
<div class="flex items-center p-4 rounded-xl bg-heritage-red/5 border border-heritage-red/10">
<span class="material-symbols-outlined text-heritage-red mr-3">description</span>
<div class="flex-1">
<p class="text-body-md font-medium text-ink-black">杜康城市伙伴合作协议.pdf</p>
<p class="text-label-md text-subtle-gray">2.4 MB</p>
</div>
<span class="material-symbols-outlined text-subtle-gray">check_circle</span>
</div>
</div>
</div>
</div>
<!-- Step 3: Bank Info -->
<div class="w-1/3 px-1">
<div class="space-y-4">
<div class="p-4 bg-aged-amber/10 rounded-xl border border-aged-amber/20 mb-2">
<div class="flex items-start">
<span class="material-symbols-outlined text-secondary mr-2 text-[20px]">info</span>
<p class="text-label-md text-secondary leading-tight">请务必填写真实有效的结算信息，确保账户名与营业执照法人一致。</p>
</div>
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">开户银行</label>
<select class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none appearance-none">
<option>中国工商银行</option>
<option>中国建设银行</option>
<option>招商银行</option>
</select>
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">银行卡号</label>
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="请输入16-19位银行卡号" type="number">
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">开户人姓名</label>
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="请输入收款人姓名" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Form Actions -->
<div class="p-margin-page border-t border-surface-container-high bg-white safe-area-inset-bottom">
<div class="flex gap-4" id="formActionButtons">
<button class="hidden flex-1 h-12 rounded-xl border border-subtle-gray text-on-surface-variant font-semibold" id="prevBtn" onclick="prevStep()">上一步</button>
<button class="flex-[2] h-12 rounded-xl bg-heritage-red text-white font-semibold shadow-lg shadow-heritage-red/20 active:scale-95 transition-transform" id="nextBtn" onclick="nextStep()">下一步</button>
<button class="hidden flex-[2] h-12 rounded-xl bg-heritage-red text-white font-semibold shadow-lg shadow-heritage-red/20 active:scale-95 transition-transform" id="submitBtn" onclick="submitForm()">确认提交</button>
</div>
</div>
</div>
</div>
</main>
<!-- Floating Action Button -->
<button class="fixed bottom-24 right-5 w-auto px-6 h-14 bg-heritage-red text-white rounded-full flex items-center justify-center shadow-xl shadow-heritage-red/30 z-40 active:scale-90 transition-transform" onclick="openForm()">
<span class="material-symbols-outlined mr-2">add</span>
<span class="font-semibold text-body-md">录入新门店</span>
</button>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 left-0 w-full h-16 flex justify-around items-center px-4 bg-surface-container-lowest dark:bg-surface-container-low z-50 rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)]"><div class="flex flex-col items-center justify-center text-subtle-gray hover:text-primary transition-colors">
<span class="material-symbols-outlined">home</span>
<span class="font-label-md text-label-md">首页</span>
</div>
<div class="flex flex-col items-center justify-center text-heritage-red font-semibold">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">storefront</span>
<span class="font-label-md text-label-md">门店管理</span>
</div>
<div class="flex flex-col items-center justify-center text-subtle-gray hover:text-primary transition-colors">
<span class="material-symbols-outlined">account_circle</span>
<span class="font-label-md text-label-md">合伙人中心</span>
</div></nav>
<script>
let currentStep = 1;
const entryFormOverlay = document.getElementById('entryFormOverlay');
const formContainer = document.getElementById('formContainer');
const formSteps = document.getElementById('formSteps');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const submitBtn = document.getElementById('submitBtn');
function openForm() {
entryFormOverlay.classList.remove('hidden');
setTimeout(() => {
formContainer.classList.remove('translate-y-full');
}, 10);
currentStep = 1;
updateStepUI();
}
function closeForm() {
formContainer.classList.add('translate-y-full');
setTimeout(() => {
entryFormOverlay.classList.add('hidden');
}, 300);
}
function nextStep() {
if (currentStep < 3) {
currentStep++;
updateStepUI();
}
}
function prevStep() {
if (currentStep > 1) {
currentStep--;
updateStepUI();
}
}
function updateStepUI() {
// Translate form
formSteps.style.transform = `translateX(-${(currentStep - 1) * (100 / 3)}%)`;
// Buttons visibility
if (currentStep === 1) {
prevBtn.classList.add('hidden');
nextBtn.classList.remove('hidden');
submitBtn.classList.add('hidden');
} else if (currentStep === 2) {
prevBtn.classList.remove('hidden');
nextBtn.classList.remove('hidden');
submitBtn.classList.add('hidden');
} else {
prevBtn.classList.remove('hidden');
nextBtn.classList.add('hidden');
submitBtn.classList.remove('hidden');
}
// Step Indicator UI
const circles = [
document.getElementById('stepCircle1'),
document.getElementById('stepCircle2'),
document.getElementById('stepCircle3')
];
const lines = [
document.getElementById('line1'),
document.getElementById('line2')
];
circles.forEach((circle, idx) => {
const stepIdx = idx + 1;
if (stepIdx <= currentStep) {
circle.classList.add('bg-heritage-red', 'text-white');
circle.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
} else {
circle.classList.remove('bg-heritage-red', 'text-white');
circle.classList.add('bg-surface-container-high', 'text-on-surface-variant');
}
});
lines.forEach((line, idx) => {
const stepIdx = idx + 1;
if (stepIdx < currentStep) {
line.style.width = '100%';
} else {
line.style.width = '0%';
}
});
}
function submitForm() {
alert('门店信息提交成功！正在审核中。');
closeForm();
}
</script>
</body></html>
pages/partner/06_合伙人门店管理页_增加搜索筛选_6899aa96/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人门店管理页 - 增加搜索筛选",
"screenId": "6899aa96b0f24c95ba28f8a9186b23a0",
"category": "partner",
"syncedAt": "2026-06-29T02:33:35.723Z"
}
pages/partner/06_合伙人门店管理页_增加搜索筛选_6899aa96/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

pages/partner/08_录入新门店_照片上传_feae43dc/code.html
+253
View File
@@ -0,0 +1,253 @@
<!DOCTYPE html><html lang="zh-CN"><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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#8d706e",
"tertiary-container": "#4e5852",
"primary": "#820012",
"on-tertiary-container": "#c2cdc6",
"on-primary": "#ffffff",
"surface": "#faf9f7",
"on-secondary-fixed": "#241a00",
"success-green": "#2D6A4F",
"secondary-fixed-dim": "#e9c349",
"aged-amber": "#FFBF00",
"inverse-surface": "#2f3130",
"heritage-red": "#A61D24",
"surface-container": "#efeeec",
"inverse-primary": "#ffb3ae",
"tertiary-fixed-dim": "#bec9c2",
"primary-fixed": "#ffdad7",
"on-surface-variant": "#5a413f",
"tertiary-fixed": "#dae5dd",
"on-error-container": "#93000a",
"surface-tint": "#b3272c",
"surface-container-low": "#f4f3f1",
"outline-variant": "#e2bebc",
"on-secondary-fixed-variant": "#574500",
"subtle-gray": "#999999",
"primary-container": "#a61d24",
"primary-fixed-dim": "#ffb3ae",
"on-primary-container": "#ffb9b4",
"secondary": "#735c00",
"status-blue": "#2A6EBB",
"on-primary-fixed": "#410004",
"on-tertiary": "#ffffff",
"on-tertiary-fixed": "#141e19",
"on-background": "#1a1c1b",
"on-tertiary-fixed-variant": "#3f4943",
"ink-black": "#1A1A1A",
"surface-container-high": "#e9e8e6",
"background": "#faf9f7",
"secondary-fixed": "#ffe088",
"on-primary-fixed-variant": "#910817",
"error": "#ba1a1a",
"on-secondary": "#ffffff",
"surface-dim": "#dadad8",
"on-error": "#ffffff",
"surface-variant": "#e3e2e0",
"surface-container-highest": "#e3e2e0",
"on-surface": "#1a1c1b",
"surface-container-lowest": "#ffffff",
"inverse-on-surface": "#f1f1ef",
"tertiary": "#37413b",
"on-secondary-container": "#745c00",
"surface-bright": "#faf9f7",
"error-container": "#ffdad6",
"secondary-container": "#fed65b"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"base": "8px",
"margin-page": "20px",
"stack-md": "16px",
"gutter-card": "12px",
"stack-sm": "4px",
"stack-lg": "32px"
},
"fontFamily": {
"headline-xl": ["Manrope"],
"headline-lg": ["Manrope"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"body-lg": ["Be Vietnam Pro"],
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"headline-md": ["Manrope"]
},
"fontSize": {
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
vertical-align: middle;
}
.upload-dashed {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23A61D244D' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
border-radius: 12px;
}
.step-line {
height: 2px;
flex-grow: 1;
background-color: #E2BEBC;
margin: 0 12px;
}
.step-line.active {
background-color: #A61D24;
}
</style>
</head>
<body class="bg-surface-container-low min-h-screen font-body-md text-on-surface">
<!-- Top AppBar -->
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim shadow-sm z-50">
<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>
</header>
<main class="pt-20 pb-32 px-margin-page">
<!-- Step Indicator -->
<nav class="mb-stack-lg flex items-center justify-between">
<div class="flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center">
<span class="material-symbols-outlined text-sm">check</span>
</div>
<span class="font-label-md text-label-md text-on-surface-variant">基本信息</span>
</div>
<div class="step-line active"></div>
<div class="flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center font-bold">2</div>
<span class="font-label-md text-label-md text-heritage-red font-semibold">照片上传</span>
</div>
<div class="step-line"></div>
<div class="flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-full bg-surface-container-highest text-subtle-gray flex items-center justify-center">3</div>
<span class="font-label-md text-label-md text-subtle-gray">结算资质</span>
</div>
</nav>
<!-- Section Title -->
<div class="flex items-center gap-3 mb-stack-md">
<div class="w-10 h-10 rounded-lg bg-primary-fixed flex items-center justify-center text-heritage-red">
<span class="material-symbols-outlined">photo_library</span>
</div>
<h2 class="font-headline-md text-headline-md text-ink-black">门店图片上传</h2>
</div>
<!-- Upload Groups -->
<div class="space-y-stack-lg">
<!-- Store Front Photo -->
<section class="bg-surface-container-lowest p-gutter-card rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="mb-stack-md">
<div class="flex items-baseline gap-2">
<label class="font-headline-md text-headline-md text-on-surface">门头照 *</label>
</div>
<p class="font-label-md text-label-md text-subtle-gray mt-1">至少1张，需包含完整招牌</p>
</div>
<button class="w-full aspect-[16/9] upload-dashed flex flex-col items-center justify-center gap-3 bg-surface-container-low active:scale-[0.98] transition-transform">
<span class="material-symbols-outlined text-primary text-4xl" data-weight="fill">add_a_photo</span>
<span class="text-primary font-medium">点击或拖拽上传</span>
</button>
</section>
<!-- Environment Photos Grid -->
<section class="bg-surface-container-lowest p-gutter-card rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="mb-stack-md">
<div class="flex items-baseline gap-2">
<label class="font-headline-md text-headline-md text-on-surface">环境照片 *</label>
</div>
<p class="font-label-md text-label-md text-subtle-gray mt-1">至少3张，展示店内整洁环境</p>
</div>
<div class="grid grid-cols-3 gap-base">
<!-- Placeholder Uploaded Image -->
<div class="aspect-square rounded-lg overflow-hidden relative group">
<img class="w-full h-full object-cover" data-alt="A clean, minimalist restaurant interior featuring wooden tables, warm lighting, and Dukang liquor bottles displayed elegantly on a shelf. The style is heritage modernism with a focus on high-end hospitality and traditional Chinese decorative elements in a bright, light-mode setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBpKdltzVr07TfibZJBOO2yXt94-X_zJLoJgb9oh7Avs300MhZDn3oGZblHnLI0agh_zXAnNQdfS6SwemG1wCwZDloYzQJPqYylHOPv5JkUVLcEbdp-NxTewojR5I8jXCY4-lovYVRj-B135w3-zyyGFshtWR-WNgZfi5UCKAWJwxhm1LlGiz0fMhCdIp5lXCBweYY3yNcNyNNf_9eW9OFfSsQu4N1Xjy7_lZ5y53bMpBtbDZPHK1xXfZw8tFTHsXIuyuDILan_Bn4">
<div class="absolute top-1 right-1 bg-ink-black/60 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined text-xs">close</span>
</div>
</div>
<!-- Empty Upload Boxes -->
<button class="aspect-square upload-dashed flex flex-col items-center justify-center bg-surface-container-low active:opacity-80 transition-opacity">
<span class="material-symbols-outlined text-primary">add_a_photo</span>
<span class="text-[10px] text-primary mt-1">添加照片</span>
</button>
<button class="aspect-square upload-dashed flex flex-col items-center justify-center bg-surface-container-low active:opacity-80 transition-opacity">
<span class="material-symbols-outlined text-primary">add_a_photo</span>
<span class="text-[10px] text-primary mt-1">添加照片</span>
</button>
</div>
</section>
<!-- Contract Documents -->
<section class="bg-surface-container-lowest p-gutter-card rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="mb-stack-md">
<div class="flex items-baseline gap-2">
<label class="font-headline-md text-headline-md text-on-surface">签约合同 *</label>
</div>
<p class="font-label-md text-label-md text-subtle-gray mt-1">拍照上传签约协议首页与盖章页</p>
</div>
<button class="w-full h-24 upload-dashed flex items-center justify-center gap-4 bg-surface-container-low active:scale-[0.99] transition-transform">
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim flex items-center justify-center text-heritage-red">
<span class="material-symbols-outlined text-3xl">description</span>
</div>
<div class="text-left">
<span class="block text-primary font-bold">上传合同副本</span>
<span class="text-xs text-subtle-gray">支持 JPG, PNG, PDF</span>
</div>
</button>
</section>
</div>
<!-- Info Tip -->
<div class="mt-stack-lg p-base bg-secondary-container/20 border border-secondary-container rounded-lg flex gap-3">
<span class="material-symbols-outlined text-secondary text-sm">info</span>
<p class="text-xs text-on-secondary-container leading-relaxed">
温馨提示：请确保照片清晰无反光，避免遮挡关键信息。如上传失败，请检查网络或联系客户经理。
</p>
</div>
</main>
<!-- Bottom Navigation Bar (Action Buttons) -->
<footer class="fixed bottom-0 left-0 w-full h-20 flex justify-between items-center px-margin-page bg-surface-container-lowest shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] z-50">
<button class="flex-1 mr-base h-12 rounded-xl border border-outline text-on-surface font-semibold font-headline-md active:bg-surface-container-high transition-colors">
上一步
</button>
<button class="flex-[2] h-12 rounded-xl bg-heritage-red text-white font-bold font-headline-md shadow-lg shadow-heritage-red/20 active:scale-[0.97] transition-transform">
下一步
</button>
</footer>
<script>
// Simple Interaction logic for upload boxes
document.querySelectorAll('.upload-dashed').forEach(box => {
box.addEventListener('click', () => {
// Mock click visual feedback
box.classList.add('opacity-70');
setTimeout(() => box.classList.remove('opacity-70'), 150);
});
});
</script>
</body></html>
pages/partner/08_录入新门店_照片上传_feae43dc/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "录入新门店 - 照片上传",
"screenId": "feae43dcbe1e4e388c0490bbab9bd2a3",
"category": "partner",
"syncedAt": "2026-06-29T08:06:42.783Z"
}
pages/partner/08_录入新门店_照片上传_feae43dc/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

pages/partner/08_录入新门店_结算资质_5f7a87a5/code.html
+245
View File
@@ -0,0 +1,245 @@
<!DOCTYPE html><html lang="zh-CN"><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&amp;family=Be+Vietnam+Pro:wght@400;500&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<!-- Tailwind Config Verbatim -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#8d706e",
"tertiary-container": "#4e5852",
"primary": "#820012",
"on-tertiary-container": "#c2cdc6",
"on-primary": "#ffffff",
"surface": "#faf9f7",
"on-secondary-fixed": "#241a00",
"success-green": "#2D6A4F",
"secondary-fixed-dim": "#e9c349",
"aged-amber": "#FFBF00",
"inverse-surface": "#2f3130",
"heritage-red": "#A61D24",
"surface-container": "#efeeec",
"inverse-primary": "#ffb3ae",
"tertiary-fixed-dim": "#bec9c2",
"primary-fixed": "#ffdad7",
"on-surface-variant": "#5a413f",
"tertiary-fixed": "#dae5dd",
"on-error-container": "#93000a",
"surface-tint": "#b3272c",
"surface-container-low": "#f4f3f1",
"outline-variant": "#e2bebc",
"on-secondary-fixed-variant": "#574500",
"subtle-gray": "#999999",
"primary-container": "#a61d24",
"primary-fixed-dim": "#ffb3ae",
"on-primary-container": "#ffb9b4",
"secondary": "#735c00",
"status-blue": "#2A6EBB",
"on-primary-fixed": "#410004",
"on-tertiary": "#ffffff",
"on-tertiary-fixed": "#141e19",
"on-background": "#1a1c1b",
"on-tertiary-fixed-variant": "#3f4943",
"ink-black": "#1A1A1A",
"surface-container-high": "#e9e8e6",
"background": "#faf9f7",
"secondary-fixed": "#ffe088",
"on-primary-fixed-variant": "#910817",
"error": "#ba1a1a",
"on-secondary": "#ffffff",
"surface-dim": "#dadad8",
"on-error": "#ffffff",
"surface-variant": "#e3e2e0",
"surface-container-highest": "#e3e2e0",
"on-surface": "#1a1c1b",
"surface-container-lowest": "#ffffff",
"inverse-on-surface": "#f1f1ef",
"tertiary": "#37413b",
"on-secondary-container": "#745c00",
"surface-bright": "#faf9f7",
"error-container": "#ffdad6",
"secondary-container": "#fed65b"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"base": "8px",
"margin-page": "20px",
"stack-md": "16px",
"gutter-card": "12px",
"stack-sm": "4px",
"stack-lg": "32px"
},
"fontFamily": {
"headline-xl": ["Manrope"],
"headline-lg": ["Manrope"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"body-lg": ["Be Vietnam Pro"],
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"headline-md": ["Manrope"]
},
"fontSize": {
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
body {
background-color: #faf9f7;
-webkit-tap-highlight-color: transparent;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.step-line {
height: 2px;
flex-grow: 1;
margin: 0 12px;
}
.card-shadow {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
</style>
</head>
<body class="font-body-md text-on-surface">
<!-- TopAppBar - Map style_ keys from JSON -->
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim shadow-sm z-50">
<div class="flex items-center">
<button class="material-symbols-outlined text-primary dark:text-primary-fixed-dim hover:bg-surface-container-high transition-colors p-2 rounded-full">menu</button>
</div>
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康合作伙伴</h1>
<div class="flex items-center">
</div>
</header>
<main class="pt-20 pb-32 px-margin-page max-w-lg mx-auto">
<!-- StepIndicator -->
<div class="flex items-center justify-between mb-stack-lg px-2">
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center mb-1">
<span class="material-symbols-outlined text-[18px]">check</span>
</div>
<span class="font-label-md text-label-md text-heritage-red">基本信息</span>
</div>
<div class="step-line bg-heritage-red"></div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center mb-1">
<span class="material-symbols-outlined text-[18px]">check</span>
</div>
<span class="font-label-md text-label-md text-heritage-red">照片上传</span>
</div>
<div class="step-line bg-surface-container-high"></div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center mb-1 ring-4 ring-primary-fixed">
<span class="text-label-md font-bold">3</span>
</div>
<span class="font-label-md text-label-md text-heritage-red font-bold">结算资质</span>
</div>
</div>
<!-- Section Title -->
<div class="flex items-center gap-2 mb-stack-md">
<span class="material-symbols-outlined text-heritage-red">account_balance</span>
<h2 class="font-headline-md text-headline-md text-ink-black">结算信息配置</h2>
</div>
<!-- Form Section -->
<div class="bg-surface-container-lowest rounded-xl p-stack-md card-shadow border border-surface-container mb-stack-md space-y-stack-md">
<!-- FormField: 户主姓名 -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant ml-1">户主姓名 *</label>
<input class="w-full h-12 px-4 rounded-lg bg-surface border-transparent focus:border-heritage-red focus:ring-0 text-on-surface placeholder-subtle-gray transition-all" placeholder="请输入银行卡实名姓名" type="text">
</div>
<!-- FormField: 银行卡号 -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant ml-1">银行卡号 *</label>
<input class="w-full h-12 px-4 rounded-lg bg-surface border-transparent focus:border-heritage-red focus:ring-0 text-on-surface placeholder-subtle-gray transition-all" placeholder="请输入16-19位银行卡号" type="number">
</div>
<!-- FormField: 开户支行 -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant ml-1">开户支行 *</label>
<input class="w-full h-12 px-4 rounded-lg bg-surface border-transparent focus:border-heritage-red focus:ring-0 text-on-surface placeholder-subtle-gray transition-all" placeholder="例如：中国工商银行洛阳分行" type="text">
</div>
</div>
<!-- InfoCard -->
<div class="bg-secondary-container bg-opacity-10 rounded-xl p-stack-md flex gap-3 border border-secondary-container border-opacity-20 mb-stack-lg">
<span class="material-symbols-outlined text-secondary shrink-0">info</span>
<p class="font-body-md text-body-md text-on-secondary-container">
请确保银行卡信息准确，以免影响每月的餐费结算。结算将按合同约定账期执行。
</p>
</div>
<!-- BrandWatermark -->
<div class="flex flex-col items-center justify-center opacity-30 mt-12 py-8">
<img class="w-12 h-12 mb-2 grayscale brightness-50" data-alt="A sophisticated digital rendering of a traditional Chinese red wax seal featuring the characters for Dukang in elegant calligraphy. The seal sits on a textured, off-white handmade paper background with subtle fiber inclusions. The lighting is warm and directional, casting a soft shadow that gives the seal a tactile, three-dimensional presence. The overall mood is one of heritage, authority, and timeless quality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuATNhMs0RuZOyG8YJHEMtebj2ZjEwfq-dCbKPXCakqUtR0Ld1DUbWQcmLZqVqU99TxQuEL-chBTjyRtPM3MZqdmhti1CWH8GVx8HfzwsIo2i7P4UY6yWpwFesbI5BqWjXTfjpSIdJ-7lMltW5-f4psvWIwG9Pbrm7LV_L046rXs04u-_de3kGB3TUY72E-g3WRFsE9YoDf2se9wOuQaW3ic6tI9mGpKLDyXolj7bfZ64nt-x0eUmrl1Dnc5iTM60UJjcgUo6wWQzoA">
<p class="font-headline-lg-mobile text-headline-lg-mobile tracking-widest text-subtle-gray font-light">杜康 · 传承千年好客</p>
</div>
</main>
<!-- Bottom Action Bar (Contextual override for Shell) -->
<nav class="fixed bottom-0 left-0 w-full h-20 bg-surface-container-lowest flex items-center px-margin-page gap-4 shadow-[0px_-4px_20px_rgba(0,0,0,0.05)] z-50">
<button class="flex-1 h-12 rounded-xl border border-outline-variant text-on-surface-variant font-label-md text-label-md hover:bg-surface-container-low transition-colors active:scale-95 duration-200">
上一步
</button>
<button class="flex-[2] h-12 rounded-xl bg-heritage-red text-white font-headline-md text-headline-md shadow-lg shadow-primary/20 active:opacity-90 active:scale-95 transition-all duration-200">
提交审核
</button>
</nav>
<!-- BottomNavBar (Hidden for transactional flow) -->
<!-- Suppressed per "The Destination Rule" - Task-focused page with back action -->
<script>
// Micro-interaction for input focus
document.querySelectorAll('input').forEach(input => {
input.addEventListener('focus', () => {
input.parentElement.classList.add('scale-[1.01]');
});
input.addEventListener('blur', () => {
input.parentElement.classList.remove('scale-[1.01]');
});
});
// Simple validation simulation
const submitBtn = document.querySelector('button.bg-heritage-red');
submitBtn.addEventListener('click', () => {
const inputs = document.querySelectorAll('input');
let allFilled = true;
inputs.forEach(i => {
if(!i.value) {
i.classList.add('border-error');
allFilled = false;
} else {
i.classList.remove('border-error');
}
});
if(allFilled) {
submitBtn.innerHTML = '<span class="material-symbols-outlined animate-spin">progress_activity</span> 提交中...';
setTimeout(() => {
alert('提交成功！我们将会在3个工作日内完成审核。');
submitBtn.textContent = '提交审核';
}, 2000);
}
});
</script>
</body></html>
pages/partner/08_录入新门店_结算资质_5f7a87a5/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "录入新门店 - 结算资质",
"screenId": "5f7a87a55f8d40f4b5577eb5f291cb15",
"category": "partner",
"syncedAt": "2026-06-29T02:33:41.695Z"
}
pages/partner/08_录入新门店_结算资质_5f7a87a5/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

pages/partner/1-登录页.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

pages/partner/10-财务对账.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

pages/partner/10_城市合伙人登录页_e7968455/code.html
+232
View File
@@ -0,0 +1,232 @@
<!DOCTYPE html><html class="light" 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&amp;family=Inter:wght@400;500;600&amp;family=Be+Vietnam+Pro:wght@400;500&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#37413b",
"on-tertiary-container": "#c2cdc6",
"subtle-gray": "#999999",
"inverse-on-surface": "#f1f1ef",
"primary-fixed": "#ffdad7",
"tertiary-fixed": "#dae5dd",
"aged-amber": "#FFBF00",
"on-secondary-fixed": "#241a00",
"on-surface": "#1a1c1b",
"on-background": "#1a1c1b",
"on-primary": "#ffffff",
"surface-container-highest": "#e3e2e0",
"surface-container-high": "#e9e8e6",
"surface-dim": "#dadad8",
"primary-fixed-dim": "#ffb3ae",
"on-secondary-container": "#745c00",
"background": "#faf9f7",
"secondary-fixed": "#ffe088",
"secondary-container": "#fed65b",
"on-secondary": "#ffffff",
"surface-container-low": "#f4f3f1",
"outline-variant": "#e2bebc",
"tertiary-container": "#4e5852",
"on-error-container": "#93000a",
"secondary": "#735c00",
"on-primary-container": "#ffb9b4",
"surface-container": "#efeeec",
"surface-bright": "#faf9f7",
"secondary-fixed-dim": "#e9c349",
"inverse-primary": "#ffb3ae",
"surface-variant": "#e3e2e0",
"on-surface-variant": "#5a413f",
"on-secondary-fixed-variant": "#574500",
"error-container": "#ffdad6",
"surface": "#faf9f7",
"outline": "#8d706e",
"surface-tint": "#b3272c",
"primary-container": "#a61d24",
"primary": "#820012",
"tertiary-fixed-dim": "#bec9c2",
"on-tertiary-fixed": "#141e19",
"ink-black": "#1A1A1A",
"on-tertiary-fixed-variant": "#3f4943",
"on-tertiary": "#ffffff",
"on-primary-fixed": "#410004",
"heritage-red": "#A61D24",
"success-green": "#2D6A4F",
"on-primary-fixed-variant": "#910817",
"inverse-surface": "#2f3130",
"error": "#ba1a1a",
"on-error": "#ffffff",
"surface-container-lowest": "#ffffff",
"status-blue": "#2A6EBB"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-md": "16px",
"base": "8px",
"stack-lg": "32px",
"margin-page": "20px",
"stack-sm": "4px",
"gutter-card": "12px"
},
"fontFamily": {
"headline-lg": ["Manrope"],
"headline-xl": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"headline-md": ["Manrope"],
"body-lg": ["Be Vietnam Pro"]
},
"fontSize": {
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "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");
}
.red-glow {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
</style>
</head>
<body class="paper-texture min-h-screen flex flex-col items-center justify-center p-margin-page text-on-surface" style="background-position: 1.59px 2.57px;">
<!-- Logo & Branding -->
<div class="mb-stack-lg text-center">
<div class="w-20 h-20 mx-auto mb-4 bg-heritage-red rounded-full flex items-center justify-center red-glow">
<span class="material-symbols-outlined text-white text-4xl" style="font-variation-settings: 'FILL' 1;">wine_bar</span>
</div>
<h1 class="font-headline-xl text-headline-xl tracking-tight text-heritage-red">杜康好客</h1>
<p class="font-headline-md text-headline-md text-subtle-gray mt-1">城市合伙人端</p>
</div>
<!-- Login Card -->
<main class="w-full max-w-md bg-surface-container-lowest rounded-xl p-stack-lg shadow-lg border border-surface-container-highest">
<h2 class="font-headline-lg-mobile text-headline-lg-mobile mb-stack-lg text-center text-ink-black">城市合伙人登录</h2>
<form class="space-y-stack-md" onsubmit="return false;">
<!-- Phone Input -->
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-subtle-gray text-[20px]">smartphone</span>
</div>
<input class="block w-full pl-11 pr-4 py-4 bg-background border-transparent rounded-xl font-body-md text-body-md focus:ring-2 focus:ring-heritage-red focus:border-transparent transition-all placeholder:text-subtle-gray" placeholder="请输入手机号" type="tel">
</div>
<!-- SMS Code Input -->
<div class="flex gap-2">
<div class="relative flex-grow">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-subtle-gray text-[20px]">shield</span>
</div>
<input class="block w-full pl-11 pr-4 py-4 bg-background border-transparent rounded-xl font-body-md text-body-md focus:ring-2 focus:ring-heritage-red focus:border-transparent transition-all placeholder:text-subtle-gray" placeholder="验证码" type="text">
</div>
<button class="px-4 py-4 font-label-md text-label-md text-heritage-red bg-surface-container-low rounded-xl hover:bg-surface-container-high active:scale-95 transition-all whitespace-nowrap border border-outline-variant/20" type="button">
获取验证码
</button>
</div>
<!-- Login Button -->
<div class="flex items-center gap-2 mt-stack-md px-1">
<input class="w-4 h-4 rounded text-heritage-red focus:ring-heritage-red border-outline-variant" id="remember-me" type="checkbox">
<label class="font-body-md text-[12px] text-on-surface-variant" for="remember-me">
记住账号
</label>
</div><button class="w-full mt-stack-lg py-4 bg-heritage-red text-on-primary rounded-xl font-headline-md text-headline-md flex items-center justify-center gap-2 hover:opacity-90 active:scale-[0.98] transition-all shadow-md" type="submit">
登录
<span class="material-symbols-outlined">arrow_forward</span>
</button><!-- Divider -->
<div class="flex items-center gap-3 my-stack-md">
<div class="flex-grow h-px bg-outline-variant/20"></div>
<span class="text-subtle-gray font-label-md text-[12px]">其他登录方式</span>
<div class="flex-grow h-px bg-outline-variant/20"></div>
</div>
<!-- WeChat Login Button -->
<button type="button" class="w-full py-4 bg-surface-container-low border border-outline-variant/20 text-on-surface rounded-xl font-headline-md text-headline-md flex items-center justify-center gap-2 hover:bg-surface-container-high active:scale-[0.98] transition-all">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="#07C160">
<path d="M8.25 4.5C4.52 4.5 1.5 7.04 1.5 10.17c0 1.78.98 3.37 2.5 4.48l-.63 1.88 2.19-1.09c.84.24 1.74.38 2.69.38.25 0 .5 0 .75-.03-.16-.53-.25-1.09-.25-1.66 0-3.13 3.02-5.67 6.75-5.67.57 0 1.13.06 1.66.17C15.17 6.13 12 4.5 8.25 4.5zm10.5 6.33c-3.11 0-5.62 2.12-5.62 4.73 0 2.61 2.51 4.73 5.62 4.73.79 0 1.54-.14 2.24-.38l1.83.91-.53-1.57c1.27-.92 2.08-2.25 2.08-3.73 0-2.61-2.51-4.73-5.62-4.73z"></path>
</svg>
微信一键登录
</button>
<!-- Terms -->
<div class="flex items-start gap-3 mt-stack-md px-1">
<div class="pt-1">
<input class="w-4 h-4 rounded text-heritage-red focus:ring-heritage-red border-outline-variant" id="terms" type="checkbox">
</div>
<label class="font-body-md text-[12px] leading-tight text-on-surface-variant" for="terms">
我已阅读并同意
<a class="text-heritage-red font-semibold" href="#">《用户协议》</a> 与
<a class="text-heritage-red font-semibold" href="#">《隐私政策》</a>
</label>
</div>
</form>
</main>
<!-- Decoration / Ambient Background Images -->
<div class="fixed bottom-0 left-0 -z-10 opacity-10">
</div>
<!-- Footer -->
<footer class="mt-stack-lg flex flex-col items-center gap-2">
<div class="flex items-center gap-1.5 text-subtle-gray">
<span class="material-symbols-outlined text-[16px]">verified_user</span>
<span class="font-label-md text-[10px] tracking-widest uppercase">SECURED BY DUKANG HERITAGE</span>
</div>
<div class="w-12 h-0.5 bg-outline-variant/30 rounded-full"></div>
</footer>
<script>
// Micro-interaction for the "Get Code" button
const getCodeBtn = document.querySelector('button[type="button"]');
getCodeBtn.addEventListener('click', function() {
if (this.classList.contains('disabled')) return;
let seconds = 60;
const originalText = this.innerText;
this.classList.add('opacity-50', 'pointer-events-none');
const timer = setInterval(() => {
seconds--;
this.innerText = `${seconds}s 后重发`;
if (seconds <= 0) {
clearInterval(timer);
this.innerText = originalText;
this.classList.remove('opacity-50', 'pointer-events-none');
}
}, 1000);
});
// Background parallax effect
document.addEventListener('mousemove', (e) => {
const moveX = (e.clientX - window.innerWidth / 2) * 0.01;
const moveY = (e.clientY - window.innerHeight / 2) * 0.01;
document.querySelector('.paper-texture').style.backgroundPosition = `${moveX}px ${moveY}px`;
});
</script>
</body></html>
pages/partner/10_城市合伙人登录页_e7968455/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "城市合伙人登录页",
"screenId": "e79684551802423ab570ced4a425f01a",
"category": "partner",
"syncedAt": "2026-06-29T02:33:45.223Z"
}
pages/partner/10_城市合伙人登录页_e7968455/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

pages/partner/10_城市合伙人订单详情页_423aac86/code.html
+312
View File
@@ -0,0 +1,312 @@
<!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&amp;family=Inter:wght@400;500;600&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#37413b",
"on-tertiary-container": "#c2cdc6",
"subtle-gray": "#999999",
"inverse-on-surface": "#f1f1ef",
"primary-fixed": "#ffdad7",
"tertiary-fixed": "#dae5dd",
"aged-amber": "#FFBF00",
"on-secondary-fixed": "#241a00",
"on-surface": "#1a1c1b",
"on-background": "#1a1c1b",
"on-primary": "#ffffff",
"surface-container-highest": "#e3e2e0",
"surface-container-high": "#e9e8e6",
"surface-dim": "#dadad8",
"primary-fixed-dim": "#ffb3ae",
"on-secondary-container": "#745c00",
"background": "#faf9f7",
"secondary-fixed": "#ffe088",
"secondary-container": "#fed65b",
"on-secondary": "#ffffff",
"surface-container-low": "#f4f3f1",
"outline-variant": "#e2bebc",
"tertiary-container": "#4e5852",
"on-error-container": "#93000a",
"secondary": "#735c00",
"on-primary-container": "#ffb9b4",
"surface-container": "#efeeec",
"surface-bright": "#faf9f7",
"secondary-fixed-dim": "#e9c349",
"inverse-primary": "#ffb3ae",
"surface-variant": "#e3e2e0",
"on-surface-variant": "#5a413f",
"on-secondary-fixed-variant": "#574500",
"error-container": "#ffdad6",
"surface": "#faf9f7",
"outline": "#8d706e",
"surface-tint": "#b3272c",
"primary-container": "#a61d24",
"primary": "#820012",
"tertiary-fixed-dim": "#bec9c2",
"on-tertiary-fixed": "#141e19",
"ink-black": "#1A1A1A",
"on-tertiary-fixed-variant": "#3f4943",
"on-tertiary": "#ffffff",
"on-primary-fixed": "#410004",
"heritage-red": "#A61D24",
"success-green": "#2D6A4F",
"on-primary-fixed-variant": "#910817",
"inverse-surface": "#2f3130",
"error": "#ba1a1a",
"on-error": "#ffffff",
"surface-container-lowest": "#ffffff",
"status-blue": "#2A6EBB"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-md": "16px",
"base": "8px",
"stack-lg": "32px",
"margin-page": "20px",
"stack-sm": "4px",
"gutter-card": "12px"
},
"fontFamily": {
"headline-lg": ["Manrope"],
"headline-xl": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"headline-md": ["Manrope"],
"body-lg": ["Be Vietnam Pro"]
},
"fontSize": {
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.notch-badge {
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
}
body {
background-color: #faf9f7;
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body class="font-body-md text-on-surface pb-24">
<!-- TopAppBar -->
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface-container-low shadow-sm z-50">
<button class="w-10 h-10 flex items-center justify-start active:opacity-80 transition-opacity">
<span class="material-symbols-outlined text-primary">arrow_back</span>
</button>
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">订单详情</h1>
<div class="w-10"></div> <!-- Placeholder for centering -->
</header>
<main class="mt-14">
<!-- Status Banner -->
<section class="bg-heritage-red px-margin-page py-6 text-white relative overflow-hidden">
<!-- Subtle background texture/pattern -->
<div class="absolute inset-0 opacity-10 pointer-events-none">
<div class="absolute right-[-20%] top-[-20%] w-64 h-64 border-[20px] border-white rounded-full"></div>
</div>
<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;">local_shipping</span>
<h2 class="font-headline-md text-headline-md">运输中</h2>
</div>
<p class="font-body-md text-body-md opacity-90">预计今日 18:00 前送达</p>
</div>
</section>
<!-- Delivery Track -->
<section class="mx-margin-page mt-stack-md p-margin-page bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="space-y-0 relative">
<!-- Vertical Line -->
<div class="absolute left-[11px] top-4 bottom-4 w-[2px] bg-surface-container-highest"></div>
<!-- Track Items -->
<div class="flex items-start gap-4 relative pb-6">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-heritage-red flex items-center justify-center">
<span class="material-symbols-outlined text-[14px] text-white" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-on-surface">待确认</p>
</div>
</div>
<div class="flex items-start gap-4 relative pb-6">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-heritage-red flex items-center justify-center">
<span class="material-symbols-outlined text-[14px] text-white" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-on-surface">已接单</p>
</div>
</div>
<div class="flex items-start gap-4 relative pb-6">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-heritage-red flex items-center justify-center">
<span class="material-symbols-outlined text-[14px] text-white" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-on-surface">配送中</p>
</div>
</div>
<div class="flex items-start gap-4 relative pb-6">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-heritage-red border-4 border-primary-fixed flex items-center justify-center">
<div class="w-2 h-2 rounded-full bg-white"></div>
</div>
<div class="flex-1">
<p class="font-headline-md text-headline-md text-heritage font-bold">运输中</p>
<p class="font-body-md text-body-md text-subtle-gray mt-1">包裹正在送往目的地</p>
</div>
</div>
<div class="flex items-start gap-4 relative">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-surface-container-highest flex items-center justify-center">
<div class="w-2 h-2 rounded-full bg-subtle-gray"></div>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-subtle-gray">已送达</p>
</div>
</div>
</div>
</section>
<!-- Product Section -->
<section class="mx-margin-page mt-stack-md p-margin-page bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-heritage-red">
<div class="flex gap-4">
<div class="relative w-24 h-24 bg-surface rounded-lg overflow-hidden flex-shrink-0">
<img class="w-full h-full object-cover" data-alt="A professional studio product photograph of a premium bottle of Jiu Zu Du Kang Xiao Feng Tan liquor. The bottle is elegantly designed with traditional Chinese motifs, set against a warm, minimalist background with soft cinematic lighting. The atmosphere is sophisticated and highlights the heritage quality of the 52-degree spirit." src="https://lh3.googleusercontent.com/aida-public/AB6AXuABoOtezDzxDQTSxW7esl-R7-P6FWVJjQHOS3dDiuALtC3vbgL_mDq0oGgCmwGXu4nxON7bN_NoDb7iEnKq-T9JoY4ieJ0ZTLfxmEe21A4VHdPJekvpWZxg38xwFIL2eBGRP01dDtgEcsT3rOAhhwv3yG98REzJ3Z0WAKgEnpK4DwEbWuRwZMHt7b55oJNFY4YAYHhbBtajSP5Egscjqqp3-KDr_Vi6u6cpZlSnc4BN8pRTnqz6kFFe3qgOAjCb2uIJJ5cVYTyByf8">
<div class="absolute bottom-0 left-0 right-0 bg-heritage-red/80 py-0.5 text-center">
<span class="text-[10px] text-white font-label-md">正品保证</span>
</div>
</div>
<div class="flex-1">
<h3 class="font-headline-md text-headline-md text-on-surface leading-tight">酒祖杜康 · 小封坛 (52°)</h3>
<div class="mt-1 flex items-center gap-2">
<span class="font-body-md text-body-md text-subtle-gray">500ml × 6瓶/箱</span>
<span class="font-body-md text-body-md text-on-surface font-semibold">x6</span>
</div>
<div class="mt-2 flex items-baseline gap-1">
<span class="text-label-md font-label-md text-heritage-red">¥</span>
<span class="text-headline-lg font-headline-lg text-heritage-red">5,880</span>
</div>
</div>
</div>
</section>
<!-- Commission & Benefits (Accent Card) -->
<section class="mx-margin-page mt-stack-md grid grid-cols-2 gap-stack-md">
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-t-2 border-heritage-red"><p class="text-subtle-gray font-label-md text-label-md mb-2">佣金明细</p><div class="space-y-1"><div class="flex justify-between items-center"><span class="text-[10px] text-subtle-gray">订单佣金</span><span class="text-heritage-red font-bold text-[12px]">¥235.20</span></div><div class="flex justify-between items-center"><span class="text-[10px] text-subtle-gray">权益核销</span><span class="text-heritage-red font-bold text-[12px]">¥235.20</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-t-2 border-aged-amber overflow-hidden relative">
<p class="text-subtle-gray font-label-md text-label-md mb-1">赠送好客权益</p>
<div class="flex items-center gap-1">
<span class="text-aged-amber font-headline-lg text-headline-lg font-bold">¥1,200</span>
<div class="notch-badge bg-aged-amber/10 px-2 py-0.5 ml-auto">
<span class="text-[10px] text-aged-amber font-bold">可核销</span>
</div>
</div><div class="w-full h-1 bg-surface-container-highest rounded-full mt-2 overflow-hidden"><div class="h-full bg-aged-amber rounded-full" style="width: 33.33%"></div></div><div class="flex justify-between items-center mt-1">
<span class="text-[10px] text-subtle-gray font-body-md whitespace-nowrap">已核销 ¥400</span>
<span class="text-[10px] text-subtle-gray font-body-md whitespace-nowrap">待核销 ¥800</span>
</div>
<div class="absolute -right-2 -bottom-2 opacity-10">
<span class="material-symbols-outlined text-4xl text-aged-amber">confirmation_number</span>
</div>
</div>
</section>
<!-- Order Info -->
<section class="mx-margin-page mt-stack-md p-margin-page bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<h4 class="font-headline-md text-headline-md mb-4 flex items-center gap-2">
<span class="w-1 h-4 bg-heritage-red rounded-full"></span>
订单信息
</h4>
<div class="space-y-3">
<div class="flex justify-between items-start">
<span class="text-subtle-gray font-body-md">订单编号</span>
<div class="flex items-center gap-2">
<span class="text-on-surface font-body-md">DK202310248819</span>
<button class="text-heritage-red active:scale-95 transition-transform">
<span class="material-symbols-outlined text-[18px]">content_copy</span>
</button>
</div>
</div>
<div class="flex justify-between">
<span class="text-subtle-gray font-body-md">下单时间</span>
<span class="text-on-surface font-body-md">2026-06-18 14:20:05</span>
</div>
<div class="flex justify-between items-start">
<span class="text-subtle-gray font-body-md">营销推广</span>
<div class="text-right">
<p class="text-on-surface font-body-md">品鉴会营销码</p>
<p class="text-heritage-red font-label-md text-label-md font-semibold">DJH001</p>
</div>
</div>
</div>
</section>
<!-- Receiver Info -->
<section class="mx-margin-page mt-stack-md p-margin-page bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<h4 class="font-headline-md text-headline-md mb-4 flex items-center gap-2">
<span class="w-1 h-4 bg-heritage-red rounded-full"></span>
收货地址
</h4>
<div class="flex items-start gap-3">
<span class="material-symbols-outlined text-subtle-gray mt-0.5">location_on</span>
<div class="flex-1">
<p class="text-on-surface font-headline-md text-headline-md">张先生 <span class="ml-2 font-normal text-body-lg">138****8888</span></p>
<p class="text-subtle-gray font-body-md mt-1 leading-relaxed">河南省洛阳市涧西区南昌路街道锦绣花园12号楼2单元804室</p>
</div>
</div>
</section>
</main>
<!-- Sticky Bottom Action -->
<footer class="fixed bottom-0 left-0 w-full bg-white/80 backdrop-blur-md px-margin-page py-4 flex items-center justify-between border-t border-surface-container-high z-50">
<div class="flex flex-col">
<span class="text-label-md font-label-md text-subtle-gray">佣金合计</span>
<span class="text-heritage-red font-headline-md text-headline-md font-bold">¥470.40</span>
</div>
<div class="flex gap-stack-md">
<button class="px-6 py-2 rounded-xl border border-heritage-red text-heritage-red font-body-md active:bg-heritage-red/5 transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">support_agent</span>
联系配送员
</button>
</div>
</footer>
<!-- Bottom Navigation (Shared Component Context) -->
<!-- Suppressed on detail pages per mandate, but structure logic included if needed for other screens -->
<script>
// Micro-interactions
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('touchstart', () => {
btn.style.transform = 'scale(0.98)';
});
btn.addEventListener('touchend', () => {
btn.style.transform = 'scale(1)';
});
});
// Copy feedback
const copyBtn = document.querySelector('[data-copy]'); // hypothetical
// In actual implementation, we'd add copy logic here.
</script>
</body></html>
pages/partner/10_城市合伙人订单详情页_423aac86/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "城市合伙人订单详情页",
"screenId": "423aac8633d04e59b007a8c397ace9ae",
"category": "partner",
"syncedAt": "2026-06-29T08:06:46.705Z"
}
pages/partner/10_城市合伙人订单详情页_423aac86/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

pages/partner/11-周报.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

pages/partner/12-订单列表.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

pages/partner/12_合伙人门店管理页_增加搜索筛选_6899aa96/code.html
+469
View File
@@ -0,0 +1,469 @@
<!DOCTYPE html><html lang="zh-CN"><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;600;700;800&amp;family=Be+Vietnam+Pro:wght@400;500&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<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>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
background-color: #faf9f7;
-webkit-tap-highlight-color: transparent;
}
.tonal-layer {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
.scroll-hide::-webkit-scrollbar {
display: none;
}
.active-step-line {
background: linear-gradient(90deg, #A61D24 0%, #A61D24 100%);
}
.step-transition {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="font-body-md text-on-surface">
<!-- Top Navigation Bar -->
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim shadow-sm z-50">
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康好客</h1>
</header>
<main class="pt-20 pb-24 px-margin-page min-h-screen">
<!-- Header Section -->
<section class="mb-4">
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black mb-1">门店管理</h2>
<p class="text-subtle-gray font-body-md">管理您的合作门店及其运营状态</p>
</section><div class="sticky top-14 z-40 bg-surface/95 backdrop-blur-sm -mx-margin-page px-margin-page py-4 mb-4 border-b border-surface-container">
<div class="space-y-4">
<!-- Search Bar -->
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-gray">search</span>
<input class="w-full h-11 pl-10 pr-4 bg-surface-container-low border-none rounded-xl focus:ring-2 focus:ring-heritage-red/20 text-body-md outline-none transition-all" placeholder="搜索门店名称/地址" type="text">
</div>
<!-- Filter Chips -->
<div class="flex gap-2 overflow-x-auto scroll-hide pb-1">
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-heritage-red text-white text-label-md font-medium transition-colors">全部</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-medium active:bg-heritage-red/5 transition-colors">营业中</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-medium active:bg-heritage-red/5 transition-colors">暂时闭店</button>
<button class="whitespace-nowrap px-4 py-1.5 rounded-full bg-surface-container-high text-on-surface-variant text-label-md font-medium active:bg-heritage-red/5 transition-colors">已关闭</button>
</div>
</div>
</div>
<!-- Section A: Store List -->
<div class="space-y-stack-md">
<!-- Store Card 1 -->
<div class="bg-surface-container-lowest rounded-xl tonal-layer p-4 border border-heritage-red/5">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-headline-md text-headline-md text-ink-black">洛阳醉仙居酒楼</h3>
<p class="text-label-md font-label-md text-subtle-gray mt-1">洛阳市洛龙区长兴街102号</p>
</div>
<span class="bg-success-green/10 text-success-green px-2 py-1 rounded-full font-label-md text-label-md">营业中</span>
</div>
<div class="flex flex-wrap gap-2 pt-4 border-t border-surface-container">
<button class="flex-1 py-2 rounded-lg border border-heritage-red text-heritage-red font-label-md text-label-md active:bg-heritage-red/5 transition-colors">暂时闭店</button>
<button class="flex-1 py-2 rounded-lg border border-subtle-gray text-subtle-gray font-label-md text-label-md">正式关闭</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-surface-container-high text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
</div>
</div>
<!-- Store Card 2 -->
<div class="bg-surface-container-lowest rounded-xl tonal-layer p-4 border border-heritage-red/5">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-headline-md text-headline-md text-ink-black">古法杜康品鉴馆</h3>
<p class="text-label-md font-label-md text-subtle-gray mt-1">洛阳市涧西区南昌路财富中心</p>
</div>
<span class="bg-aged-amber/10 text-secondary px-2 py-1 rounded-full font-label-md text-label-md">暂时闭店</span>
</div>
<div class="flex flex-wrap gap-2 pt-4 border-t border-surface-container">
<button class="flex-1 py-2 rounded-lg bg-heritage-red text-white font-label-md text-label-md active:opacity-90 transition-opacity">恢复营业</button>
<button class="flex-1 py-2 rounded-lg border border-subtle-gray text-subtle-gray font-label-md text-label-md">正式关闭</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-surface-container-high text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
</div>
</div>
<!-- Store Card 3 -->
<div class="bg-surface-container-lowest rounded-xl tonal-layer p-4 border border-heritage-red/5 opacity-70">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-headline-md text-headline-md text-ink-black">杜康龙门礼品店</h3>
<p class="text-label-md font-label-md text-subtle-gray mt-1">洛阳市洛龙区龙门大道22号</p>
</div>
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-1 rounded-full font-label-md text-label-md">已关闭</span>
</div>
<div class="flex flex-wrap gap-2 pt-4 border-t border-surface-container">
<button class="flex-1 py-2 rounded-lg bg-heritage-red text-white font-label-md text-label-md">重新开启</button>
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-surface-container-high text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
</div>
</div>
</div>
<!-- Section B: Store Entry Form Overlay -->
<div class="fixed inset-0 z-[100] hidden" id="entryFormOverlay">
<div class="absolute inset-0 bg-ink-black/40 backdrop-blur-sm" onclick="closeForm()"></div>
<div class="absolute bottom-0 w-full bg-white rounded-t-[24px] max-h-[813px] overflow-y-auto flex flex-col transform translate-y-full transition-transform duration-300" id="formContainer">
<!-- Grabber -->
<div class="w-12 h-1.5 bg-surface-container-highest rounded-full mx-auto mt-3"></div>
<div class="px-margin-page py-6">
<div class="flex justify-between items-center mb-8">
<h3 class="font-headline-lg text-headline-lg text-ink-black">录入新门店</h3>
<button class="text-subtle-gray" onclick="closeForm()">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<!-- Step Indicator -->
<div class="flex items-center justify-between mb-stack-lg relative px-4">
<div class="flex flex-col items-center z-10">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center text-label-md font-bold transition-colors" id="stepCircle1">1</div>
<span class="text-[10px] mt-1 font-medium text-heritage-red">基本信息</span>
</div>
<div class="flex-1 h-[2px] bg-surface-container-high mx-2 -mt-4">
<div class="h-full w-0 bg-heritage-red transition-all duration-300" id="line1"></div>
</div>
<div class="flex flex-col items-center z-10">
<div class="w-8 h-8 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center text-label-md font-bold transition-colors" id="stepCircle2">2</div>
<span class="text-[10px] mt-1 font-medium text-subtle-gray">照片上传</span>
</div>
<div class="flex-1 h-[2px] bg-surface-container-high mx-2 -mt-4">
<div class="h-full w-0 bg-heritage-red transition-all duration-300" id="line2"></div>
</div>
<div class="flex flex-col items-center z-10">
<div class="w-8 h-8 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center text-label-md font-bold transition-colors" id="stepCircle3">3</div>
<span class="text-[10px] mt-1 font-medium text-subtle-gray">财务结算</span>
</div>
</div>
<!-- Multi-step Form Content -->
<div class="overflow-hidden">
<div class="flex w-[300%] transition-transform duration-300 ease-in-out" id="formSteps">
<!-- Step 1: Basic Info -->
<div class="w-1/3 px-1">
<div class="space-y-4">
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">门店全称</label>
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red focus:border-heritage-red outline-none" placeholder="请输入营业执照上的名称" type="text">
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">联系电话</label>
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="请输入负责人手机号" type="tel">
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">地理位置</label>
<div class="relative">
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low outline-none pr-10" readonly="" type="text" value="河南省 洛阳市 洛龙区">
<span class="material-symbols-outlined absolute right-3 top-3 text-on-surface-variant">location_on</span>
</div>
<input class="w-full h-12 px-4 mt-2 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="详细地址：如街道、门牌号" type="text">
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">门店简介</label>
<textarea class="w-full p-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="介绍门店特色（选填）" rows="3"></textarea>
</div>
</div>
</div>
<!-- Step 2: Photo Upload -->
<div class="w-1/3 px-1">
<div class="space-y-6">
<div class="space-y-2">
<label class="font-label-md text-label-md text-ink-black font-semibold">门店门头照</label>
<div class="w-full aspect-[16/9] border-2 border-dashed border-surface-container-highest rounded-xl flex flex-col items-center justify-center bg-surface-container-low text-subtle-gray">
<span class="material-symbols-outlined text-4xl mb-2">add_a_photo</span>
<p class="text-label-md">上传清晰门头实景图</p>
</div>
</div>
<div class="space-y-2">
<label class="font-label-md text-label-md text-ink-black font-semibold">店内环境 (1-3张)</label>
<div class="grid grid-cols-3 gap-2">
<div class="aspect-square border-2 border-dashed border-surface-container-highest rounded-xl flex items-center justify-center bg-surface-container-low text-subtle-gray">
<span class="material-symbols-outlined">add</span>
</div>
<div class="aspect-square bg-surface-container-high rounded-xl relative overflow-hidden">
<img class="w-full h-full object-cover" data-alt="A clean, bright interior of a traditional Chinese liquor specialty store, featuring wooden shelves stocked with premium bottles of Dukang liquor, warm lighting, and elegant minimalist furniture." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLELbGgCXFw0Zz39xj1NSQQaZePn2Vvi5TMm8vKn1WayIIYL82JprBwDX35ueW12IXHlopViMaCGcEzdz6ZFCBOqMEDmMcccLhCA53DWOd_fSlwJlLfKeDDm80Rl4sSxAybvE8oeVSaxVNSZe7kFuGAYVUYDiC9pnd2Pkg6jBIYjlN_VtD3RsFRL7oTc5kR0JMOTygLvulQgL0ZWVDDUmyShM3LwbdEjbdH-6f2raWwLVL5Zka-bA8RwVgC_Tb0DxWhn6OaYEDGSQ">
</div>
</div>
</div>
<div class="space-y-2">
<label class="font-label-md text-label-md text-ink-black font-semibold">合作合同</label>
<div class="flex items-center p-4 rounded-xl bg-heritage-red/5 border border-heritage-red/10">
<span class="material-symbols-outlined text-heritage-red mr-3">description</span>
<div class="flex-1">
<p class="text-body-md font-medium text-ink-black">杜康城市伙伴合作协议.pdf</p>
<p class="text-label-md text-subtle-gray">2.4 MB</p>
</div>
<span class="material-symbols-outlined text-subtle-gray">check_circle</span>
</div>
</div>
</div>
</div>
<!-- Step 3: Bank Info -->
<div class="w-1/3 px-1">
<div class="space-y-4">
<div class="p-4 bg-aged-amber/10 rounded-xl border border-aged-amber/20 mb-2">
<div class="flex items-start">
<span class="material-symbols-outlined text-secondary mr-2 text-[20px]">info</span>
<p class="text-label-md text-secondary leading-tight">请务必填写真实有效的结算信息，确保账户名与营业执照法人一致。</p>
</div>
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">开户银行</label>
<select class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none appearance-none">
<option>中国工商银行</option>
<option>中国建设银行</option>
<option>招商银行</option>
</select>
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">银行卡号</label>
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="请输入16-19位银行卡号" type="number">
</div>
<div class="space-y-1">
<label class="font-label-md text-label-md text-on-surface-variant">开户人姓名</label>
<input class="w-full h-12 px-4 rounded-xl border-surface-container-highest bg-surface-container-low focus:ring-1 focus:ring-heritage-red outline-none" placeholder="请输入收款人姓名" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Form Actions -->
<div class="p-margin-page border-t border-surface-container-high bg-white safe-area-inset-bottom">
<div class="flex gap-4" id="formActionButtons">
<button class="hidden flex-1 h-12 rounded-xl border border-subtle-gray text-on-surface-variant font-semibold" id="prevBtn" onclick="prevStep()">上一步</button>
<button class="flex-[2] h-12 rounded-xl bg-heritage-red text-white font-semibold shadow-lg shadow-heritage-red/20 active:scale-95 transition-transform" id="nextBtn" onclick="nextStep()">下一步</button>
<button class="hidden flex-[2] h-12 rounded-xl bg-heritage-red text-white font-semibold shadow-lg shadow-heritage-red/20 active:scale-95 transition-transform" id="submitBtn" onclick="submitForm()">确认提交</button>
</div>
</div>
</div>
</div>
</main>
<!-- Floating Action Button -->
<button class="fixed bottom-24 right-5 w-auto px-6 h-14 bg-heritage-red text-white rounded-full flex items-center justify-center shadow-xl shadow-heritage-red/30 z-40 active:scale-90 transition-transform" onclick="openForm()">
<span class="material-symbols-outlined mr-2">add</span>
<span class="font-semibold text-body-md">录入新门店</span>
</button>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 left-0 w-full h-16 flex justify-around items-center px-4 bg-surface-container-lowest dark:bg-surface-container-low z-50 rounded-t-xl shadow-[0px_-4px_20px_rgba(166,29,36,0.05)]"><div class="flex flex-col items-center justify-center text-subtle-gray hover:text-primary transition-colors">
<span class="material-symbols-outlined">home</span>
<span class="font-label-md text-label-md">首页</span>
</div>
<div class="flex flex-col items-center justify-center text-heritage-red font-semibold">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">storefront</span>
<span class="font-label-md text-label-md">门店管理</span>
</div>
<div class="flex flex-col items-center justify-center text-subtle-gray hover:text-primary transition-colors">
<span class="material-symbols-outlined">account_circle</span>
<span class="font-label-md text-label-md">合伙人中心</span>
</div></nav>
<script>
let currentStep = 1;
const entryFormOverlay = document.getElementById('entryFormOverlay');
const formContainer = document.getElementById('formContainer');
const formSteps = document.getElementById('formSteps');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const submitBtn = document.getElementById('submitBtn');
function openForm() {
entryFormOverlay.classList.remove('hidden');
setTimeout(() => {
formContainer.classList.remove('translate-y-full');
}, 10);
currentStep = 1;
updateStepUI();
}
function closeForm() {
formContainer.classList.add('translate-y-full');
setTimeout(() => {
entryFormOverlay.classList.add('hidden');
}, 300);
}
function nextStep() {
if (currentStep < 3) {
currentStep++;
updateStepUI();
}
}
function prevStep() {
if (currentStep > 1) {
currentStep--;
updateStepUI();
}
}
function updateStepUI() {
// Translate form
formSteps.style.transform = `translateX(-${(currentStep - 1) * (100 / 3)}%)`;
// Buttons visibility
if (currentStep === 1) {
prevBtn.classList.add('hidden');
nextBtn.classList.remove('hidden');
submitBtn.classList.add('hidden');
} else if (currentStep === 2) {
prevBtn.classList.remove('hidden');
nextBtn.classList.remove('hidden');
submitBtn.classList.add('hidden');
} else {
prevBtn.classList.remove('hidden');
nextBtn.classList.add('hidden');
submitBtn.classList.remove('hidden');
}
// Step Indicator UI
const circles = [
document.getElementById('stepCircle1'),
document.getElementById('stepCircle2'),
document.getElementById('stepCircle3')
];
const lines = [
document.getElementById('line1'),
document.getElementById('line2')
];
circles.forEach((circle, idx) => {
const stepIdx = idx + 1;
if (stepIdx <= currentStep) {
circle.classList.add('bg-heritage-red', 'text-white');
circle.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
} else {
circle.classList.remove('bg-heritage-red', 'text-white');
circle.classList.add('bg-surface-container-high', 'text-on-surface-variant');
}
});
lines.forEach((line, idx) => {
const stepIdx = idx + 1;
if (stepIdx < currentStep) {
line.style.width = '100%';
} else {
line.style.width = '0%';
}
});
}
function submitForm() {
alert('门店信息提交成功！正在审核中。');
closeForm();
}
</script>
</body></html>
pages/partner/12_合伙人门店管理页_增加搜索筛选_6899aa96/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人门店管理页 - 增加搜索筛选",
"screenId": "6899aa96b0f24c95ba28f8a9186b23a0",
"category": "partner",
"syncedAt": "2026-06-29T08:06:53.021Z"
}
pages/partner/12_合伙人门店管理页_增加搜索筛选_6899aa96/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

pages/partner/12_录入新门店_照片上传_feae43dc/code.html
+253
View File
@@ -0,0 +1,253 @@
<!DOCTYPE html><html lang="zh-CN"><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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#8d706e",
"tertiary-container": "#4e5852",
"primary": "#820012",
"on-tertiary-container": "#c2cdc6",
"on-primary": "#ffffff",
"surface": "#faf9f7",
"on-secondary-fixed": "#241a00",
"success-green": "#2D6A4F",
"secondary-fixed-dim": "#e9c349",
"aged-amber": "#FFBF00",
"inverse-surface": "#2f3130",
"heritage-red": "#A61D24",
"surface-container": "#efeeec",
"inverse-primary": "#ffb3ae",
"tertiary-fixed-dim": "#bec9c2",
"primary-fixed": "#ffdad7",
"on-surface-variant": "#5a413f",
"tertiary-fixed": "#dae5dd",
"on-error-container": "#93000a",
"surface-tint": "#b3272c",
"surface-container-low": "#f4f3f1",
"outline-variant": "#e2bebc",
"on-secondary-fixed-variant": "#574500",
"subtle-gray": "#999999",
"primary-container": "#a61d24",
"primary-fixed-dim": "#ffb3ae",
"on-primary-container": "#ffb9b4",
"secondary": "#735c00",
"status-blue": "#2A6EBB",
"on-primary-fixed": "#410004",
"on-tertiary": "#ffffff",
"on-tertiary-fixed": "#141e19",
"on-background": "#1a1c1b",
"on-tertiary-fixed-variant": "#3f4943",
"ink-black": "#1A1A1A",
"surface-container-high": "#e9e8e6",
"background": "#faf9f7",
"secondary-fixed": "#ffe088",
"on-primary-fixed-variant": "#910817",
"error": "#ba1a1a",
"on-secondary": "#ffffff",
"surface-dim": "#dadad8",
"on-error": "#ffffff",
"surface-variant": "#e3e2e0",
"surface-container-highest": "#e3e2e0",
"on-surface": "#1a1c1b",
"surface-container-lowest": "#ffffff",
"inverse-on-surface": "#f1f1ef",
"tertiary": "#37413b",
"on-secondary-container": "#745c00",
"surface-bright": "#faf9f7",
"error-container": "#ffdad6",
"secondary-container": "#fed65b"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"base": "8px",
"margin-page": "20px",
"stack-md": "16px",
"gutter-card": "12px",
"stack-sm": "4px",
"stack-lg": "32px"
},
"fontFamily": {
"headline-xl": ["Manrope"],
"headline-lg": ["Manrope"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"body-lg": ["Be Vietnam Pro"],
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"headline-md": ["Manrope"]
},
"fontSize": {
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
vertical-align: middle;
}
.upload-dashed {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23A61D244D' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
border-radius: 12px;
}
.step-line {
height: 2px;
flex-grow: 1;
background-color: #E2BEBC;
margin: 0 12px;
}
.step-line.active {
background-color: #A61D24;
}
</style>
</head>
<body class="bg-surface-container-low min-h-screen font-body-md text-on-surface">
<!-- Top AppBar -->
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim shadow-sm z-50">
<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>
</header>
<main class="pt-20 pb-32 px-margin-page">
<!-- Step Indicator -->
<nav class="mb-stack-lg flex items-center justify-between">
<div class="flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center">
<span class="material-symbols-outlined text-sm">check</span>
</div>
<span class="font-label-md text-label-md text-on-surface-variant">基本信息</span>
</div>
<div class="step-line active"></div>
<div class="flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center font-bold">2</div>
<span class="font-label-md text-label-md text-heritage-red font-semibold">照片上传</span>
</div>
<div class="step-line"></div>
<div class="flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-full bg-surface-container-highest text-subtle-gray flex items-center justify-center">3</div>
<span class="font-label-md text-label-md text-subtle-gray">结算资质</span>
</div>
</nav>
<!-- Section Title -->
<div class="flex items-center gap-3 mb-stack-md">
<div class="w-10 h-10 rounded-lg bg-primary-fixed flex items-center justify-center text-heritage-red">
<span class="material-symbols-outlined">photo_library</span>
</div>
<h2 class="font-headline-md text-headline-md text-ink-black">门店图片上传</h2>
</div>
<!-- Upload Groups -->
<div class="space-y-stack-lg">
<!-- Store Front Photo -->
<section class="bg-surface-container-lowest p-gutter-card rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="mb-stack-md">
<div class="flex items-baseline gap-2">
<label class="font-headline-md text-headline-md text-on-surface">门头照 *</label>
</div>
<p class="font-label-md text-label-md text-subtle-gray mt-1">至少1张，需包含完整招牌</p>
</div>
<button class="w-full aspect-[16/9] upload-dashed flex flex-col items-center justify-center gap-3 bg-surface-container-low active:scale-[0.98] transition-transform">
<span class="material-symbols-outlined text-primary text-4xl" data-weight="fill">add_a_photo</span>
<span class="text-primary font-medium">点击或拖拽上传</span>
</button>
</section>
<!-- Environment Photos Grid -->
<section class="bg-surface-container-lowest p-gutter-card rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="mb-stack-md">
<div class="flex items-baseline gap-2">
<label class="font-headline-md text-headline-md text-on-surface">环境照片 *</label>
</div>
<p class="font-label-md text-label-md text-subtle-gray mt-1">至少3张，展示店内整洁环境</p>
</div>
<div class="grid grid-cols-3 gap-base">
<!-- Placeholder Uploaded Image -->
<div class="aspect-square rounded-lg overflow-hidden relative group">
<img class="w-full h-full object-cover" data-alt="A clean, minimalist restaurant interior featuring wooden tables, warm lighting, and Dukang liquor bottles displayed elegantly on a shelf. The style is heritage modernism with a focus on high-end hospitality and traditional Chinese decorative elements in a bright, light-mode setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBpKdltzVr07TfibZJBOO2yXt94-X_zJLoJgb9oh7Avs300MhZDn3oGZblHnLI0agh_zXAnNQdfS6SwemG1wCwZDloYzQJPqYylHOPv5JkUVLcEbdp-NxTewojR5I8jXCY4-lovYVRj-B135w3-zyyGFshtWR-WNgZfi5UCKAWJwxhm1LlGiz0fMhCdIp5lXCBweYY3yNcNyNNf_9eW9OFfSsQu4N1Xjy7_lZ5y53bMpBtbDZPHK1xXfZw8tFTHsXIuyuDILan_Bn4">
<div class="absolute top-1 right-1 bg-ink-black/60 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined text-xs">close</span>
</div>
</div>
<!-- Empty Upload Boxes -->
<button class="aspect-square upload-dashed flex flex-col items-center justify-center bg-surface-container-low active:opacity-80 transition-opacity">
<span class="material-symbols-outlined text-primary">add_a_photo</span>
<span class="text-[10px] text-primary mt-1">添加照片</span>
</button>
<button class="aspect-square upload-dashed flex flex-col items-center justify-center bg-surface-container-low active:opacity-80 transition-opacity">
<span class="material-symbols-outlined text-primary">add_a_photo</span>
<span class="text-[10px] text-primary mt-1">添加照片</span>
</button>
</div>
</section>
<!-- Contract Documents -->
<section class="bg-surface-container-lowest p-gutter-card rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="mb-stack-md">
<div class="flex items-baseline gap-2">
<label class="font-headline-md text-headline-md text-on-surface">签约合同 *</label>
</div>
<p class="font-label-md text-label-md text-subtle-gray mt-1">拍照上传签约协议首页与盖章页</p>
</div>
<button class="w-full h-24 upload-dashed flex items-center justify-center gap-4 bg-surface-container-low active:scale-[0.99] transition-transform">
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim flex items-center justify-center text-heritage-red">
<span class="material-symbols-outlined text-3xl">description</span>
</div>
<div class="text-left">
<span class="block text-primary font-bold">上传合同副本</span>
<span class="text-xs text-subtle-gray">支持 JPG, PNG, PDF</span>
</div>
</button>
</section>
</div>
<!-- Info Tip -->
<div class="mt-stack-lg p-base bg-secondary-container/20 border border-secondary-container rounded-lg flex gap-3">
<span class="material-symbols-outlined text-secondary text-sm">info</span>
<p class="text-xs text-on-secondary-container leading-relaxed">
温馨提示：请确保照片清晰无反光，避免遮挡关键信息。如上传失败，请检查网络或联系客户经理。
</p>
</div>
</main>
<!-- Bottom Navigation Bar (Action Buttons) -->
<footer class="fixed bottom-0 left-0 w-full h-20 flex justify-between items-center px-margin-page bg-surface-container-lowest shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] z-50">
<button class="flex-1 mr-base h-12 rounded-xl border border-outline text-on-surface font-semibold font-headline-md active:bg-surface-container-high transition-colors">
上一步
</button>
<button class="flex-[2] h-12 rounded-xl bg-heritage-red text-white font-bold font-headline-md shadow-lg shadow-heritage-red/20 active:scale-[0.97] transition-transform">
下一步
</button>
</footer>
<script>
// Simple Interaction logic for upload boxes
document.querySelectorAll('.upload-dashed').forEach(box => {
box.addEventListener('click', () => {
// Mock click visual feedback
box.classList.add('opacity-70');
setTimeout(() => box.classList.remove('opacity-70'), 150);
});
});
</script>
</body></html>
pages/partner/12_录入新门店_照片上传_feae43dc/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "录入新门店 - 照片上传",
"screenId": "feae43dcbe1e4e388c0490bbab9bd2a3",
"category": "partner",
"syncedAt": "2026-06-29T02:33:58.430Z"
}
pages/partner/12_录入新门店_照片上传_feae43dc/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

pages/partner/13-订单详情.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

pages/partner/14-贡献榜.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

pages/partner/14_合伙人待确认账单页_f9b208b8/code.html
+293
View File
@@ -0,0 +1,293 @@
<!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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&amp;family=Be+Vietnam+Pro:wght@400;500&amp;family=Inter:wght@400;500&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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;
}
.paper-texture {
background-color: #faf9f7;
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
}
.glass-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.coupon-notch {
position: relative;
}
.coupon-notch::before, .coupon-notch::after {
content: '';
position: absolute;
left: -10px;
width: 20px;
height: 20px;
background: #faf9f7;
border-radius: 50%;
z-index: 10;
}
.coupon-notch::before { top: -10px; }
.coupon-notch::after { bottom: -10px; }
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"success-green": "#2D6A4F",
"secondary-container": "#fed65b",
"inverse-primary": "#ffb3ae",
"tertiary-container": "#4e5852",
"surface-container-lowest": "#ffffff",
"subtle-gray": "#999999",
"heritage-red": "#A61D24",
"outline-variant": "#e2bebc",
"surface-dim": "#dadad8",
"on-tertiary-fixed": "#141e19",
"inverse-surface": "#2f3130",
"on-primary-container": "#ffb9b4",
"on-error-container": "#93000a",
"on-secondary": "#ffffff",
"tertiary-fixed-dim": "#bec9c2",
"on-secondary-fixed": "#241a00",
"primary-fixed-dim": "#ffb3ae",
"status-blue": "#2A6EBB",
"surface-container-low": "#f4f3f1",
"ink-black": "#1A1A1A",
"surface": "#faf9f7",
"surface-container": "#efeeec",
"on-surface": "#1a1c1b",
"on-primary": "#ffffff",
"primary": "#820012",
"on-primary-fixed": "#410004",
"primary-container": "#a61d24",
"secondary-fixed": "#ffe088",
"secondary": "#735c00",
"outline": "#8d706e",
"on-tertiary": "#ffffff",
"surface-container-high": "#e9e8e6",
"aged-amber": "#FFBF00",
"on-surface-variant": "#5a413f",
"on-tertiary-container": "#c2cdc6",
"on-secondary-container": "#745c00",
"surface-variant": "#e3e2e0",
"tertiary": "#37413b",
"surface-bright": "#faf9f7",
"on-background": "#1a1c1b",
"error-container": "#ffdad6",
"background": "#faf9f7",
"on-secondary-fixed-variant": "#574500",
"on-primary-fixed-variant": "#910817",
"secondary-fixed-dim": "#e9c349",
"on-tertiary-fixed-variant": "#3f4943",
"primary-fixed": "#ffdad7",
"inverse-on-surface": "#f1f1ef",
"tertiary-fixed": "#dae5dd",
"on-error": "#ffffff",
"surface-tint": "#b3272c",
"surface-container-highest": "#e3e2e0",
"error": "#ba1a1a"
},
"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": {
"coupon-amount": ["Manrope"],
"headline-md": ["Manrope"],
"headline-lg": ["Manrope"],
"label-md": ["Inter"],
"headline-lg-mobile": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"headline-xl": ["Manrope"],
"body-lg": ["Be Vietnam Pro"]
},
"fontSize": {
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="paper-texture min-h-screen text-on-surface flex flex-col font-body-md text-body-md">
<!-- Top AppBar -->
<header class="fixed top-0 w-full z-50 bg-surface-container-low shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-xl mx-auto">
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-high transition-colors active:scale-95 duration-200">
<span class="material-symbols-outlined text-primary">arrow_back</span>
</button>
<h1 class="font-headline-md text-headline-md-mobile text-primary font-bold">待确认账单</h1>
<div class="w-10 h-10 flex items-center justify-center rounded-full overflow-hidden border border-outline-variant/20">
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow pt-24 pb-32 px-margin-page w-full max-w-md mx-auto">
<!-- Status Indicator -->
<div class="flex items-center justify-between mb-stack-lg px-2">
<div class="flex flex-col items-center gap-1">
<div class="w-6 h-6 rounded-full bg-heritage-red text-white flex items-center justify-center">
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<span class="font-label-md text-label-md text-heritage-red">数据核算</span>
</div>
<div class="flex-grow h-[2px] bg-heritage-red mx-2 -mt-4"></div>
<div class="flex flex-col items-center gap-1">
<div class="w-6 h-6 rounded-full bg-heritage-red border-2 border-heritage-red text-white flex items-center justify-center font-bold text-[12px]">2</div>
<span class="font-label-md text-label-md text-heritage-red">账单确认</span>
</div>
<div class="flex-grow h-[2px] bg-surface-container-highest mx-2 -mt-4"></div>
<div class="flex flex-col items-center gap-1">
<div class="w-6 h-6 rounded-full bg-surface-container-highest text-subtle-gray flex items-center justify-center font-bold text-[12px]">3</div>
<span class="font-label-md text-label-md text-subtle-gray">申请打款</span>
</div>
</div>
<!-- Hero Bill Card -->
<section class="relative bg-white rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10 overflow-hidden mb-stack-md">
<!-- Decorative Header -->
<div class="h-2 bg-heritage-red w-full"></div>
<div class="p-stack-md">
<div class="flex justify-between items-start mb-6">
<div>
<p class="text-subtle-gray font-label-md text-label-md uppercase tracking-wider mb-1">SETTLEMENT PERIOD</p>
<h2 class="font-headline-lg text-headline-lg-mobile text-ink-black">10月度结算账单</h2>
</div>
<div class="bg-aged-amber/10 text-aged-amber px-3 py-1 rounded-full border border-aged-amber/20">
<span class="font-label-md text-label-md font-bold">待确认</span>
</div>
</div>
<div class="flex flex-col items-center py-6 border-y border-dashed border-outline-variant/30 relative">
<p class="text-subtle-gray mb-2">应结总金额</p>
<div class="flex items-baseline gap-1">
<span class="text-primary font-bold text-xl">¥</span>
<span class="text-primary font-coupon-amount text-coupon-amount">12,500.00</span>
</div>
</div>
<div class="mt-6 space-y-4">
<div class="flex justify-between items-center text-body-md">
<span class="text-on-surface-variant">订单分佣收入</span>
<span class="font-bold text-ink-black">¥ 10,200.00</span>
</div>
<div class="flex justify-between items-center text-body-md">
<span class="text-on-surface-variant">核销权益分佣</span>
<span class="font-bold text-ink-black">¥ 1,800.00</span>
</div>
</div>
<a class="flex items-center justify-center gap-2 mt-8 py-3 text-status-blue font-medium hover:bg-surface-container-low rounded-lg transition-colors group" href="#">
<span class="">查看详情</span>
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
</section>
<!-- Informational Notice -->
<div class="bg-surface-container-low rounded-lg p-4 mb-stack-lg border border-outline-variant/10">
<div class="flex gap-3">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">info</span>
<div class="text-body-md text-on-surface-variant leading-relaxed">
账单确认后将正式进入打款流程。如有异议，请在确认前联系城市运营经理核实数据。
</div>
</div>
</div>
</main>
<!-- Fixed Bottom Confirmation Section -->
<footer class="fixed bottom-0 w-full glass-panel border-t border-outline-variant/20 px-margin-page pb-10 pt-4 z-50">
<div class="max-w-md mx-auto space-y-4">
<label class="flex items-start gap-3 cursor-pointer group">
<div class="relative mt-0.5">
<input class="peer hidden" id="confirmCheck" type="checkbox">
<div class="w-5 h-5 border-2 border-outline rounded flex items-center justify-center peer-checked:bg-heritage-red peer-checked:border-heritage-red transition-all">
<span class="material-symbols-outlined text-white text-[16px] hidden peer-checked:block" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
</div>
<span class="text-body-md text-on-surface-variant group-hover:text-ink-black transition-colors">我已核对数据无误，同意根据此账单进行结算</span>
</label>
<button class="w-full h-14 bg-subtle-gray text-white font-bold rounded-xl shadow-lg opacity-50 cursor-not-allowed transition-all active:scale-[0.98] flex items-center justify-center gap-2" disabled="" id="submitBtn">
<span class="">确认并申请打款</span>
<span class="material-symbols-outlined">payments</span>
</button>
</div>
</footer>
<!-- Bottom Nav Bar (Simulated Context) -->
<nav class="fixed bottom-0 w-full h-20 bg-surface-container-lowest border-t border-outline-variant/20 flex justify-around items-center px-4 pb-safe z-40 md:hidden">
<div class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80">
<span class="material-symbols-outlined">dashboard</span>
<span class="font-label-md text-label-md">工作台</span>
</div>
<div class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80">
<span class="material-symbols-outlined">storefront</span>
<span class="font-label-md text-label-md">门店</span>
</div>
<div class="flex flex-col items-center justify-center text-primary bg-primary-fixed/30 rounded-xl px-3 py-1">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
<span class="font-label-md text-label-md">财务</span>
</div>
<div class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80">
<span class="material-symbols-outlined">person</span>
<span class="font-label-md text-label-md">我的</span>
</div>
</nav>
<script>
const checkbox = document.getElementById('confirmCheck');
const submitBtn = document.getElementById('submitBtn');
checkbox.addEventListener('change', function() {
if (this.checked) {
submitBtn.disabled = false;
submitBtn.classList.remove('bg-subtle-gray', 'opacity-50', 'cursor-not-allowed');
submitBtn.classList.add('bg-heritage-red', 'opacity-100', 'cursor-pointer');
} else {
submitBtn.disabled = true;
submitBtn.classList.add('bg-subtle-gray', 'opacity-50', 'cursor-not-allowed');
submitBtn.classList.remove('bg-heritage-red', 'opacity-100', 'cursor-pointer');
}
});
submitBtn.addEventListener('click', function() {
if (!this.disabled) {
this.innerHTML = `<span class="material-symbols-outlined animate-spin">sync</span> 正在提交...`;
setTimeout(() => {
alert('申请已提交，请耐心等待打款审核。');
this.innerHTML = `<span>已申请</span> <span class="material-symbols-outlined">check_circle</span>`;
this.disabled = true;
this.classList.add('bg-success-green');
this.classList.remove('bg-heritage-red');
}, 1500);
}
});
</script>
</body></html>
pages/partner/14_合伙人待确认账单页_f9b208b8/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人待确认账单页",
"screenId": "f9b208b809034ac0b4ef718c95caa61b",
"category": "partner",
"syncedAt": "2026-06-29T02:34:28.717Z"
}
pages/partner/14_合伙人待确认账单页_f9b208b8/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

pages/partner/14_城市合伙人登录页_e7968455/code.html
+232
View File
@@ -0,0 +1,232 @@
<!DOCTYPE html><html class="light" 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&amp;family=Inter:wght@400;500;600&amp;family=Be+Vietnam+Pro:wght@400;500&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#37413b",
"on-tertiary-container": "#c2cdc6",
"subtle-gray": "#999999",
"inverse-on-surface": "#f1f1ef",
"primary-fixed": "#ffdad7",
"tertiary-fixed": "#dae5dd",
"aged-amber": "#FFBF00",
"on-secondary-fixed": "#241a00",
"on-surface": "#1a1c1b",
"on-background": "#1a1c1b",
"on-primary": "#ffffff",
"surface-container-highest": "#e3e2e0",
"surface-container-high": "#e9e8e6",
"surface-dim": "#dadad8",
"primary-fixed-dim": "#ffb3ae",
"on-secondary-container": "#745c00",
"background": "#faf9f7",
"secondary-fixed": "#ffe088",
"secondary-container": "#fed65b",
"on-secondary": "#ffffff",
"surface-container-low": "#f4f3f1",
"outline-variant": "#e2bebc",
"tertiary-container": "#4e5852",
"on-error-container": "#93000a",
"secondary": "#735c00",
"on-primary-container": "#ffb9b4",
"surface-container": "#efeeec",
"surface-bright": "#faf9f7",
"secondary-fixed-dim": "#e9c349",
"inverse-primary": "#ffb3ae",
"surface-variant": "#e3e2e0",
"on-surface-variant": "#5a413f",
"on-secondary-fixed-variant": "#574500",
"error-container": "#ffdad6",
"surface": "#faf9f7",
"outline": "#8d706e",
"surface-tint": "#b3272c",
"primary-container": "#a61d24",
"primary": "#820012",
"tertiary-fixed-dim": "#bec9c2",
"on-tertiary-fixed": "#141e19",
"ink-black": "#1A1A1A",
"on-tertiary-fixed-variant": "#3f4943",
"on-tertiary": "#ffffff",
"on-primary-fixed": "#410004",
"heritage-red": "#A61D24",
"success-green": "#2D6A4F",
"on-primary-fixed-variant": "#910817",
"inverse-surface": "#2f3130",
"error": "#ba1a1a",
"on-error": "#ffffff",
"surface-container-lowest": "#ffffff",
"status-blue": "#2A6EBB"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-md": "16px",
"base": "8px",
"stack-lg": "32px",
"margin-page": "20px",
"stack-sm": "4px",
"gutter-card": "12px"
},
"fontFamily": {
"headline-lg": ["Manrope"],
"headline-xl": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"headline-md": ["Manrope"],
"body-lg": ["Be Vietnam Pro"]
},
"fontSize": {
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "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");
}
.red-glow {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
</style>
</head>
<body class="paper-texture min-h-screen flex flex-col items-center justify-center p-margin-page text-on-surface" style="background-position: 1.59px 2.57px;">
<!-- Logo & Branding -->
<div class="mb-stack-lg text-center">
<div class="w-20 h-20 mx-auto mb-4 bg-heritage-red rounded-full flex items-center justify-center red-glow">
<span class="material-symbols-outlined text-white text-4xl" style="font-variation-settings: 'FILL' 1;">wine_bar</span>
</div>
<h1 class="font-headline-xl text-headline-xl tracking-tight text-heritage-red">杜康好客</h1>
<p class="font-headline-md text-headline-md text-subtle-gray mt-1">城市合伙人端</p>
</div>
<!-- Login Card -->
<main class="w-full max-w-md bg-surface-container-lowest rounded-xl p-stack-lg shadow-lg border border-surface-container-highest">
<h2 class="font-headline-lg-mobile text-headline-lg-mobile mb-stack-lg text-center text-ink-black">城市合伙人登录</h2>
<form class="space-y-stack-md" onsubmit="return false;">
<!-- Phone Input -->
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-subtle-gray text-[20px]">smartphone</span>
</div>
<input class="block w-full pl-11 pr-4 py-4 bg-background border-transparent rounded-xl font-body-md text-body-md focus:ring-2 focus:ring-heritage-red focus:border-transparent transition-all placeholder:text-subtle-gray" placeholder="请输入手机号" type="tel">
</div>
<!-- SMS Code Input -->
<div class="flex gap-2">
<div class="relative flex-grow">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-subtle-gray text-[20px]">shield</span>
</div>
<input class="block w-full pl-11 pr-4 py-4 bg-background border-transparent rounded-xl font-body-md text-body-md focus:ring-2 focus:ring-heritage-red focus:border-transparent transition-all placeholder:text-subtle-gray" placeholder="验证码" type="text">
</div>
<button class="px-4 py-4 font-label-md text-label-md text-heritage-red bg-surface-container-low rounded-xl hover:bg-surface-container-high active:scale-95 transition-all whitespace-nowrap border border-outline-variant/20" type="button">
获取验证码
</button>
</div>
<!-- Login Button -->
<div class="flex items-center gap-2 mt-stack-md px-1">
<input class="w-4 h-4 rounded text-heritage-red focus:ring-heritage-red border-outline-variant" id="remember-me" type="checkbox">
<label class="font-body-md text-[12px] text-on-surface-variant" for="remember-me">
记住账号
</label>
</div><button class="w-full mt-stack-lg py-4 bg-heritage-red text-on-primary rounded-xl font-headline-md text-headline-md flex items-center justify-center gap-2 hover:opacity-90 active:scale-[0.98] transition-all shadow-md" type="submit">
登录
<span class="material-symbols-outlined">arrow_forward</span>
</button><!-- Divider -->
<div class="flex items-center gap-3 my-stack-md">
<div class="flex-grow h-px bg-outline-variant/20"></div>
<span class="text-subtle-gray font-label-md text-[12px]">其他登录方式</span>
<div class="flex-grow h-px bg-outline-variant/20"></div>
</div>
<!-- WeChat Login Button -->
<button type="button" class="w-full py-4 bg-surface-container-low border border-outline-variant/20 text-on-surface rounded-xl font-headline-md text-headline-md flex items-center justify-center gap-2 hover:bg-surface-container-high active:scale-[0.98] transition-all">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="#07C160">
<path d="M8.25 4.5C4.52 4.5 1.5 7.04 1.5 10.17c0 1.78.98 3.37 2.5 4.48l-.63 1.88 2.19-1.09c.84.24 1.74.38 2.69.38.25 0 .5 0 .75-.03-.16-.53-.25-1.09-.25-1.66 0-3.13 3.02-5.67 6.75-5.67.57 0 1.13.06 1.66.17C15.17 6.13 12 4.5 8.25 4.5zm10.5 6.33c-3.11 0-5.62 2.12-5.62 4.73 0 2.61 2.51 4.73 5.62 4.73.79 0 1.54-.14 2.24-.38l1.83.91-.53-1.57c1.27-.92 2.08-2.25 2.08-3.73 0-2.61-2.51-4.73-5.62-4.73z"></path>
</svg>
微信一键登录
</button>
<!-- Terms -->
<div class="flex items-start gap-3 mt-stack-md px-1">
<div class="pt-1">
<input class="w-4 h-4 rounded text-heritage-red focus:ring-heritage-red border-outline-variant" id="terms" type="checkbox">
</div>
<label class="font-body-md text-[12px] leading-tight text-on-surface-variant" for="terms">
我已阅读并同意
<a class="text-heritage-red font-semibold" href="#">《用户协议》</a> 与
<a class="text-heritage-red font-semibold" href="#">《隐私政策》</a>
</label>
</div>
</form>
</main>
<!-- Decoration / Ambient Background Images -->
<div class="fixed bottom-0 left-0 -z-10 opacity-10">
</div>
<!-- Footer -->
<footer class="mt-stack-lg flex flex-col items-center gap-2">
<div class="flex items-center gap-1.5 text-subtle-gray">
<span class="material-symbols-outlined text-[16px]">verified_user</span>
<span class="font-label-md text-[10px] tracking-widest uppercase">SECURED BY DUKANG HERITAGE</span>
</div>
<div class="w-12 h-0.5 bg-outline-variant/30 rounded-full"></div>
</footer>
<script>
// Micro-interaction for the "Get Code" button
const getCodeBtn = document.querySelector('button[type="button"]');
getCodeBtn.addEventListener('click', function() {
if (this.classList.contains('disabled')) return;
let seconds = 60;
const originalText = this.innerText;
this.classList.add('opacity-50', 'pointer-events-none');
const timer = setInterval(() => {
seconds--;
this.innerText = `${seconds}s 后重发`;
if (seconds <= 0) {
clearInterval(timer);
this.innerText = originalText;
this.classList.remove('opacity-50', 'pointer-events-none');
}
}, 1000);
});
// Background parallax effect
document.addEventListener('mousemove', (e) => {
const moveX = (e.clientX - window.innerWidth / 2) * 0.01;
const moveY = (e.clientY - window.innerHeight / 2) * 0.01;
document.querySelector('.paper-texture').style.backgroundPosition = `${moveX}px ${moveY}px`;
});
</script>
</body></html>
pages/partner/14_城市合伙人登录页_e7968455/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "城市合伙人登录页",
"screenId": "e79684551802423ab570ced4a425f01a",
"category": "partner",
"syncedAt": "2026-06-29T08:07:00.115Z"
}
pages/partner/14_城市合伙人登录页_e7968455/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

pages/partner/15-子账号管理.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

pages/partner/16-添加子账号.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

pages/partner/16_合伙人工作台首页_9564734e/code.html
+347
View File
@@ -0,0 +1,347 @@
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 1242px; overflow: hidden; position: relative;"><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;500;600;700;800&amp;family=Inter:wght@400;500;600&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary": "#ffffff",
"surface-container": "#efeeec",
"tertiary-fixed": "#dae5dd",
"outline-variant": "#e2bebc",
"success-green": "#2D6A4F",
"on-tertiary-container": "#c2cdc6",
"secondary": "#735c00",
"primary-fixed": "#ffdad7",
"inverse-surface": "#2f3130",
"on-background": "#1a1c1b",
"tertiary": "#37413b",
"primary-fixed-dim": "#ffb3ae",
"secondary-fixed": "#ffe088",
"status-blue": "#2A6EBB",
"on-tertiary": "#ffffff",
"background": "#faf9f7",
"error": "#ba1a1a",
"surface-container-high": "#e9e8e6",
"secondary-container": "#fed65b",
"surface": "#faf9f7",
"on-tertiary-fixed-variant": "#3f4943",
"tertiary-fixed-dim": "#bec9c2",
"outline": "#8d706e",
"inverse-primary": "#ffb3ae",
"on-primary-fixed-variant": "#910817",
"ink-black": "#1A1A1A",
"error-container": "#ffdad6",
"on-primary-fixed": "#410004",
"surface-tint": "#b3272c",
"surface-container-low": "#f4f3f1",
"aged-amber": "#FFBF00",
"on-secondary-container": "#745c00",
"surface-container-highest": "#e3e2e0",
"subtle-gray": "#999999",
"surface-container-lowest": "#ffffff",
"secondary-fixed-dim": "#e9c349",
"on-primary-container": "#ffb9b4",
"surface-variant": "#e3e2e0",
"on-error-container": "#93000a",
"heritage-red": "#A61D24",
"surface-dim": "#dadad8",
"primary": "#820012",
"on-error": "#ffffff",
"tertiary-container": "#4e5852",
"on-surface-variant": "#5a413f",
"on-surface": "#1a1c1b",
"on-secondary": "#ffffff",
"on-secondary-fixed": "#241a00",
"inverse-on-surface": "#f1f1ef",
"on-secondary-fixed-variant": "#574500",
"primary-container": "#a61d24",
"on-tertiary-fixed": "#141e19",
"surface-bright": "#faf9f7"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-sm": "4px",
"margin-page": "20px",
"gutter-card": "12px",
"stack-lg": "32px",
"base": "8px",
"stack-md": "16px"
},
"fontFamily": {
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"headline-md": ["Manrope"],
"headline-lg": ["Manrope"],
"body-lg": ["Be Vietnam Pro"],
"headline-xl": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"coupon-amount": ["Manrope"]
},
"fontSize": {
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.paper-texture {
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
}
.heritage-gradient {
background: linear-gradient(135deg, #A61D24 0%, #820012 100%);
}
.soft-shadow {
shadow-[0px_4px_20px_rgba(166,29,36,0.05)];
}
</style>
</head>
<body class="bg-background font-body-md text-on-surface selection:bg-primary-fixed selection:text-primary">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 bg-surface-container-low shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-xl mx-auto">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary">menu</span>
<h1 class="font-headline-md text-headline-md-mobile text-primary">工作台</h1>
</div>
<div class="flex items-center gap-4">
<div class="relative p-2 hover:bg-surface-container-high transition-colors rounded-full active:scale-95">
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
<span class="absolute top-1 right-1 w-2 h-2 bg-heritage-red rounded-full border-2 border-surface"></span>
</div>
<img class="w-10 h-10 rounded-full border-2 border-heritage-red/10 object-cover" data-alt="A professional high-end business portrait of a modern city partner, wearing a tailored blazer in a minimalist architectural office with soft daylight and warm heritage red accents in the background. The lighting is editorial and sophisticated, emphasizing a clean light-mode aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFL2lV4OZbU8b5LUqByJtEYbldq2D-ItYhiHawZb4C8NBelgnRieIk3-_3e_4G2z5hrk-FmQdFz4UVqmQ_uulzTQUajdSFaKlus44_w0P3RbFd6SNDzOGm2_1anC8MWGGkmnKpqCvaHHQ_wPhridz2gLXQuNIj3-__wUdI-HL9KHw6EDO5ezi_xzL5RlNyg2HI0k4eDV6qqczXUSd4okig5PVWX9J2YlrdgzgBODvjul0Npd02OC_uhXtVLUCfSlUKhASFysmsbpM">
</div>
</div>
</header>
<main class="pt-24 pb-32 px-margin-page max-w-screen-xl mx-auto space-y-stack-lg">
<!-- Financial Card -->
<section class="relative overflow-hidden heritage-gradient rounded-xl p-6 text-white shadow-xl">
<div class="absolute -right-12 -top-12 w-48 h-48 bg-white/5 rounded-full blur-3xl"></div>
<div class="relative z-10">
<p class="font-label-md text-white/80 flex items-center gap-1">
实时营业额 (CNY)
<span class="material-symbols-outlined text-[14px]">info</span>
</p>
<div class="flex items-baseline gap-2 mt-2">
<span class="font-headline-xl text-[36px]">128,450.00</span>
</div>
<div class="grid grid-cols-2 gap-4 mt-6 pt-6 border-t border-white/10">
<div>
<p class="font-label-md text-white/60">预计利润</p>
<p class="font-headline-md mt-1">¥ 32,112.50</p>
</div>
</div>
</div>
</section>
<!-- Store Overview & Quick Actions Bento -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter-card">
<!-- Store Overview (Col 7) -->
<section class="md:col-span-7 bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex justify-between items-center mb-stack-md">
<h2 class="font-headline-md text-on-surface">门店总数</h2>
<span class="font-headline-lg text-primary">156</span>
</div>
<div class="flex gap-4">
<div class="flex-1 bg-surface-container-low rounded-lg p-3 flex items-center gap-3">
<span class="w-3 h-3 bg-success-green rounded-full shadow-[0_0_8px_rgba(45,106,79,0.4)]"></span>
<div>
<p class="text-xs text-subtle-gray">正常运营</p>
<p class="font-headline-md">148</p>
</div>
</div>
<div class="flex-1 bg-surface-container-low rounded-lg p-3 flex items-center gap-3">
<span class="w-3 h-3 bg-heritage-red rounded-full shadow-[0_0_8px_rgba(166,29,36,0.4)] animate-pulse"></span>
<div>
<p class="text-xs text-subtle-gray">异常/闭店</p>
<p class="font-headline-md">8</p>
</div>
</div>
</div>
</section>
<!-- Quick Actions (Col 5) -->
<section class="md:col-span-5 bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex gap-4 h-full items-center overflow-x-auto pb-2">
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-heritage-red group-active:scale-90 transition-transform">
<span class="material-symbols-outlined">add_business</span>
</div>
<span class="text-[10px] font-medium text-on-surface-variant">录入新店</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-aged-amber group-active:scale-90 transition-transform relative">
<span class="material-symbols-outlined">assignment_return</span>
<span class="absolute -right-1 -top-1 w-5 h-5 bg-heritage-red text-white text-[10px] font-bold flex items-center justify-center rounded-full border-2 border-white">3</span></div>
<span class="text-[10px] font-medium text-on-surface-variant">补发处理</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center text-success-green group-active:scale-90 transition-transform">
<span class="material-symbols-outlined">account_balance</span>
</div>
<span class="text-[10px] font-medium text-on-surface-variant">财务对账</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-status-blue group-active:scale-90 transition-transform">
<span class="material-symbols-outlined">monitoring</span>
</div>
<span class="text-[10px] font-medium text-on-surface-variant">数据周报</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0 min-w-[64px]" data-stitch-orig-opacity="0"><div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-heritage-red group-active:scale-90 transition-transform"><span class="material-symbols-outlined">block</span></div><span class="text-[10px] font-medium text-on-surface-variant">拦截配送</span></div></div>
</section>
</div>
<!-- Order Summary -->
<section class="space-y-stack-md">
<div class="flex justify-between items-center w-full mb-stack-md"><h2 class="font-headline-md text-on-surface">今日订单量 1000</h2><button class="text-xs text-primary hover:underline flex items-center gap-1">查看订单详情 <span class="material-symbols-outlined text-[14px]">chevron_right</span></button></div>
<div class="grid grid-cols-3 gap-gutter-card">
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-aged-amber">
<p class="text-xs text-subtle-gray mb-1">待发货</p>
<p class="font-headline-lg text-ink-black">42</p>
</div>
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-status-blue">
<p class="text-xs text-subtle-gray mb-1">配送中</p>
<p class="font-headline-lg text-ink-black">115</p>
</div>
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-success-green">
<p class="text-xs text-subtle-gray mb-1">已完成</p>
<p class="font-headline-lg text-ink-black">896</p>
</div>
</div>
</section>
<!-- Expansion Stats -->
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<h2 class="font-headline-md text-on-surface mb-stack-md">拓店情况</h2>
<div class="flex divide-x divide-outline-variant/20 mb-stack-lg">
<div class="flex-1 pr-4">
<p class="text-xs text-subtle-gray mb-1">本月新增签约</p>
<div class="flex items-center gap-2">
<span class="font-headline-lg">12</span>
<span class="text-[10px] text-success-green flex items-center">
<span class="material-symbols-outlined text-[12px]">trending_up</span> 18%
</span>
</div>
</div>
<div class="flex-1 pl-4">
<p class="text-xs text-subtle-gray mb-1">待审核门店</p>
<p class="font-headline-lg">5</p>
</div>
</div>
<div class="space-y-stack-md pt-stack-md border-t border-outline-variant/10">
<div class="flex justify-between items-center">
<h3 class="font-body-md font-bold text-on-surface-variant flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[18px]">military_tech</span>
合伙人贡献榜
</h3>
<button class="text-xs text-primary hover:underline">查看全部</button>
</div>
<div class="space-y-stack-sm">
<!-- Top Performer 1 -->
<div class="flex items-center justify-between p-2 hover:bg-surface-container-low rounded-lg transition-colors group">
<div class="flex items-center gap-3">
<div class="relative">
<img class="w-10 h-10 rounded-full object-cover" data-alt="A close-up portrait of a successful business manager, professional studio lighting, warm skin tones, blurred corporate background with high-end glass and wood textures, premium feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBDulJR0QVymlFX_gSToQlsaotB95_R0d4ldDmV0Ot-6tiNOFv_szA0uQ_shTHkx8oO24FWGKj8EGPhPpedkUs7uqbr47GD-Wx4ftnnKQ5n8ttZD5X-FvmxhNTIMzm21sOOR5G2TzsDA2EkSydyyc41NEsE6szSM0w1nbCXRZUowzvZD8D-Imk7bKtwhUMNyeoRTUTqe2rzuHKsGgMbiyhUZTbO9GZ4fgWJsvwvgzahWxh2shj0Us2BRyhU1cuEZEWL9-selOsIdzc">
<span class="absolute -top-1 -left-1 w-5 h-5 bg-aged-amber text-white text-[10px] font-bold flex items-center justify-center rounded-full border-2 border-white">1</span>
</div>
<div>
<p class="font-body-md font-semibold text-on-surface">陈经理 <span class="text-[10px] font-normal text-subtle-gray ml-1">(内部员工)</span></p>
<p class="text-[10px] text-subtle-gray">累计拓店: 45 间</p>
</div>
</div>
<div class="text-right">
<p class="font-headline-md text-primary">8 间</p>
<p class="text-[10px] text-subtle-gray">本月新增</p>
</div>
</div>
<!-- Top Performer 2 -->
<div class="flex items-center justify-between p-2 hover:bg-surface-container-low rounded-lg transition-colors">
<div class="flex items-center gap-3">
<div class="relative">
<img class="w-10 h-10 rounded-full object-cover" data-alt="A sharp, minimalist profile photo of a corporate executive, professional photography, soft shadows, neutral background, modern business attire, high clarity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKnCwe6S_Ptns70i1_qbhiGfmTiKaEhHr0F1-jT_eyMnPkiohY8V2eSsLJyxsMw10yiRfL1Y9B-DhdZKacgfhe2Gs9A0G0A-60bEllKd7bqDWQDWsCedVupzKyRRt5ciyiaDiJ5dYu_J4A9MI-umpJ8lVEIQqh1OU45txxUUzu_QOwMT-_yMW787X-VXDirO-7DoJCLAcUdDWRlC3zDzHX8M2x_U4PyYjmRE2dHgAM4VTX61mox4SzmqOXS0RKG8B2aE-IkDgEj6g">
<span class="absolute -top-1 -left-1 w-5 h-5 bg-slate-300 text-white text-[10px] font-bold flex items-center justify-center rounded-full border-2 border-white">2</span>
</div>
<div>
<p class="font-body-md font-semibold text-on-surface">李华 <span class="text-[10px] font-normal text-subtle-gray ml-1">(城市合伙人)</span></p>
<p class="text-[10px] text-subtle-gray">累计拓店: 32 间</p>
</div>
</div>
<div class="text-right">
<p class="font-headline-md text-on-surface-variant">5 间</p>
<p class="text-[10px] text-subtle-gray">本月新增</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 w-full z-50 bg-surface-container-lowest border-t border-outline-variant/20 shadow-[0px_-4px_16px_rgba(0,0,0,0.04)] rounded-t-xl h-20 px-4 pb-safe flex justify-around items-center"><button class="flex flex-col items-center justify-center text-primary bg-primary-fixed/30 rounded-xl px-5 py-2 active:scale-90 transition-transform">
<span class="material-symbols-outlined">home</span>
<span class="font-label-md mt-1 font-bold">首页</span>
</button>
<button class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80 active:scale-90 transition-transform">
<span class="material-symbols-outlined">storefront</span>
<span class="font-label-md mt-1">门店管理</span>
</button>
<button class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80 active:scale-90 transition-transform">
<span class="material-symbols-outlined">account_circle</span>
<span class="font-label-md mt-1">合伙人中心</span>
</button></nav>
<script>
// Micro-interactions for counts or chart simulations could be added here
document.addEventListener('DOMContentLoaded', () => {
// Simple animation for the big number on load
const revenueDisplay = document.querySelector('.font-headline-xl');
if(revenueDisplay) {
let startValue = 120000;
const endValue = 128450;
const duration = 1500;
const step = (endValue - startValue) / (duration / 16);
const updateValue = () => {
startValue += step;
if(startValue < endValue) {
revenueDisplay.textContent = startValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
requestAnimationFrame(updateValue);
} else {
revenueDisplay.textContent = endValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
};
updateValue();
}
});
</script>
</body></html>
pages/partner/16_合伙人工作台首页_9564734e/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人工作台首页",
"screenId": "9564734e32dc4c699445f15272c37fd6",
"category": "partner",
"syncedAt": "2026-06-29T08:07:03.844Z"
}
pages/partner/16_合伙人工作台首页_9564734e/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

pages/partner/16_录入新门店_基本信息_a996d705/code.html
+303
View File
@@ -0,0 +1,303 @@
<!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">
<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&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
-webkit-tap-highlight-color: transparent;
font-family: 'Be Vietnam Pro', sans-serif;
background-color: #faf9f7;
}
.notch-cut {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
position: relative;
}
/* Subtle paper texture effect */
.paper-texture {
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
background-repeat: repeat;
}
.input-focus-ring:focus-within {
border-color: #A61D24;
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed-dim": "#bec9c2",
"surface": "#faf9f7",
"on-surface": "#1a1c1b",
"on-secondary-fixed": "#241a00",
"surface-bright": "#faf9f7",
"heritage-red": "#A61D24",
"secondary": "#735c00",
"aged-amber": "#FFBF00",
"on-error": "#ffffff",
"inverse-surface": "#2f3130",
"surface-container-high": "#e9e8e6",
"surface-variant": "#e3e2e0",
"on-primary-fixed-variant": "#910817",
"on-secondary-fixed-variant": "#574500",
"tertiary": "#37413b",
"secondary-container": "#fed65b",
"on-secondary-container": "#745c00",
"background": "#faf9f7",
"surface-container-low": "#f4f3f1",
"error-container": "#ffdad6",
"success-green": "#2D6A4F",
"outline": "#8d706e",
"on-background": "#1a1c1b",
"on-primary-container": "#ffb9b4",
"subtle-gray": "#999999",
"inverse-primary": "#ffb3ae",
"on-error-container": "#93000a",
"primary-fixed-dim": "#ffb3ae",
"on-primary-fixed": "#410004",
"error": "#ba1a1a",
"tertiary-fixed": "#dae5dd",
"on-tertiary-container": "#c2cdc6",
"on-tertiary-fixed": "#141e19",
"surface-container-lowest": "#ffffff",
"surface-tint": "#b3272c",
"secondary-fixed": "#ffe088",
"on-secondary": "#ffffff",
"primary-container": "#a61d24",
"primary": "#820012",
"on-tertiary": "#ffffff",
"on-tertiary-fixed-variant": "#3f4943",
"status-blue": "#2A6EBB",
"primary-fixed": "#ffdad7",
"on-surface-variant": "#5a413f",
"ink-black": "#1A1A1A",
"surface-dim": "#dadad8",
"on-primary": "#ffffff",
"tertiary-container": "#4e5852",
"surface-container-highest": "#e3e2e0",
"secondary-fixed-dim": "#e9c349",
"outline-variant": "#e2bebc",
"surface-container": "#efeeec",
"inverse-on-surface": "#f1f1ef"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-md": "16px",
"stack-sm": "4px",
"stack-lg": "32px",
"base": "8px",
"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"],
"label-md": ["Inter"],
"headline-lg": ["Manrope"]
},
"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"}],
"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-surface min-h-screen pb-32">
<!-- TopAppBar -->
<header class="w-full top-0 sticky z-50 bg-surface dark:bg-on-surface shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-md mx-auto">
<button aria-label="返回" class="active:scale-95 transition-transform">
<span class="material-symbols-outlined text-heritage-red dark:text-primary-fixed-dim" data-icon="arrow_back">arrow_back</span>
</button>
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red dark:text-primary-fixed-dim">
录入新门店
</h1>
<div class="w-6"></div> <!-- Spacer for centering -->
</div>
</header>
<main class="max-w-screen-md mx-auto px-margin-page pt-stack-md">
<!-- Step Indicator -->
<section class="mb-stack-lg">
<div class="flex items-center justify-between relative px-4">
<!-- Progress Line -->
<div class="absolute top-4 left-0 w-full h-[2px] bg-surface-container-high -z-10 mx-margin-page">
<div class="h-full bg-heritage-red w-0 transition-all duration-500" id="progress-line" style="width: 16.66%;"></div>
</div>
<!-- Step 1: Active -->
<div class="flex flex-col items-center gap-base">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center font-bold text-label-md shadow-lg shadow-heritage-red/20 ring-4 ring-heritage-red/10">
1
</div>
<span class="font-label-md text-label-md text-heritage-red font-semibold">基本信息</span>
</div>
<!-- Step 2 -->
<div class="flex flex-col items-center gap-base">
<div class="w-8 h-8 rounded-full bg-surface-container-high text-subtle-gray flex items-center justify-center font-bold text-label-md">
2
</div>
<span class="font-label-md text-label-md text-subtle-gray">照片上传</span>
</div>
<!-- Step 3 -->
<div class="flex flex-col items-center gap-base">
<div class="w-8 h-8 rounded-full bg-surface-container-high text-subtle-gray flex items-center justify-center font-bold text-label-md">
3
</div>
<span class="font-label-md text-label-md text-subtle-gray">结算资质</span>
</div>
</div>
</section>
<!-- Form Card - Section 1 -->
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10">
<div class="flex items-center gap-2 mb-stack-md">
<div class="w-1 h-5 bg-heritage-red rounded-full"></div>
<h2 class="font-headline-md text-headline-md text-ink-black">门店基本信息</h2>
</div>
<form class="space-y-stack-md" id="store-form">
<!-- Store Name -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
门店名称 <span class="text-heritage-red">*</span>
</label>
<div class="input-focus-ring flex items-center border border-outline-variant/30 rounded-lg bg-surface-container-low px-3 h-12 transition-all">
<span class="material-symbols-outlined text-subtle-gray text-[20px] mr-2" data-icon="store">store</span>
<input class="w-full bg-transparent border-none focus:ring-0 text-body-md text-on-surface placeholder:text-subtle-gray/60" placeholder="请输入门店名称" required="" type="text">
</div>
</div>
<!-- Store Phone -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
联系电话 <span class="text-heritage-red">*</span>
</label>
<div class="input-focus-ring flex items-center border border-outline-variant/30 rounded-lg bg-surface-container-low px-3 h-12 transition-all">
<span class="material-symbols-outlined text-subtle-gray text-[20px] mr-2" data-icon="call">call</span>
<input class="w-full bg-transparent border-none focus:ring-0 text-body-md text-on-surface placeholder:text-subtle-gray/60" placeholder="请输入联系电话" required="" type="tel">
</div>
</div>
<!-- Address Picker -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
门店地址 <span class="text-heritage-red">*</span>
</label>
<button class="w-full flex items-center justify-between border border-outline-variant/30 rounded-lg bg-surface-container-low px-3 h-12 active:bg-surface-container-high transition-colors" type="button">
<div class="flex items-center">
<span class="material-symbols-outlined text-subtle-gray text-[20px] mr-2" data-icon="location_on">location_on</span>
<span class="text-body-md text-subtle-gray/60">请选择地址</span>
</div>
<span class="material-symbols-outlined text-subtle-gray" data-icon="chevron_right">chevron_right</span>
</button>
</div>
<!-- Detailed Address -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant">详细门牌号</label>
<div class="input-focus-ring border border-outline-variant/30 rounded-lg bg-surface-container-low p-3 transition-all">
<textarea class="w-full bg-transparent border-none focus:ring-0 text-body-md text-on-surface placeholder:text-subtle-gray/60 resize-none" placeholder="请输入详细门牌号" rows="2"></textarea>
</div>
</div>
<!-- Store Description -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant">门店简介</label>
<div class="input-focus-ring border border-outline-variant/30 rounded-lg bg-surface-container-low p-3 transition-all">
<textarea class="w-full bg-transparent border-none focus:ring-0 text-body-md text-on-surface placeholder:text-subtle-gray/60 resize-none" placeholder="请输入门店简介 (10-500字)" rows="4"></textarea>
<div class="text-right mt-1">
<span class="text-label-md text-subtle-gray font-label-md">0 / 500</span>
</div>
</div>
</div>
</form>
</section>
<!-- Identity & Decoration Section -->
<section class="mt-stack-lg p-stack-md rounded-xl bg-heritage-red/5 border border-heritage-red/10 flex items-center gap-stack-md">
<div class="w-12 h-12 bg-heritage-red/10 rounded-full flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-heritage-red" data-icon="verified_user">verified_user</span>
</div>
<div>
<h3 class="text-body-md font-bold text-heritage-red">杜康合伙人身份认证</h3>
<p class="text-label-md text-on-surface-variant leading-tight mt-1">
传承千年窖香，共筑美酒传奇。录入信息后，系统将在 1-3 个工作日内完成审核。
</p>
</div>
</section>
<!-- Aesthetic Decoration -->
<div class="mt-stack-lg flex justify-center opacity-20 pointer-events-none">
<div class="paper-texture w-full h-24 rounded-lg flex items-center justify-center">
<span class="font-headline-xl text-heritage-red tracking-[1em] ml-[1em] select-none">杜康</span>
</div>
</div>
</main>
<!-- Fixed Action Bar -->
<footer class="fixed bottom-0 left-0 w-full bg-surface-container-lowest shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] px-margin-page py-4 pb-safe z-50">
<div class="max-w-screen-md mx-auto">
<button class="w-full bg-heritage-red text-white h-12 rounded-xl font-headline-md flex items-center justify-center gap-2 active:scale-95 transition-transform shadow-lg shadow-heritage-red/20" id="next-btn">
<span>下一步</span>
<span class="material-symbols-outlined text-[20px]" data-icon="navigate_next">navigate_next</span>
</button>
</div>
</footer>
<script>
// Micro-interactions for form inputs
const inputs = document.querySelectorAll('input, textarea');
inputs.forEach(input => {
input.addEventListener('focus', () => {
input.parentElement.classList.add('bg-white');
});
input.addEventListener('blur', () => {
input.parentElement.classList.remove('bg-white');
});
});
// Simulating "Next" button click for step transition (visual only)
document.getElementById('next-btn').addEventListener('click', () => {
// Check form validity before (visual feedback only for this mockup)
const form = document.getElementById('store-form');
if(form.checkValidity()) {
console.log('Form is valid, proceeding to photo upload...');
// In a real app, this would navigate to the next step
} else {
form.reportValidity();
}
});
// Character count simulation for textarea
const storeDesc = document.querySelector('textarea[placeholder*="10-500字"]');
const countSpan = storeDesc.nextElementSibling.querySelector('span');
storeDesc.addEventListener('input', (e) => {
const length = e.target.value.length;
countSpan.textContent = `${length} / 500`;
if (length > 500) {
countSpan.classList.add('text-heritage-red');
} else {
countSpan.classList.remove('text-heritage-red');
}
});
</script>
</body></html>
pages/partner/16_录入新门店_基本信息_a996d705/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "录入新门店 - 基本信息",
"screenId": "a996d705b1fa468aa3f3a176f02ca2c9",
"category": "partner",
"syncedAt": "2026-06-29T02:34:53.650Z"
}
pages/partner/16_录入新门店_基本信息_a996d705/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

pages/partner/17-合伙人中心.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

pages/partner/18-员工管理.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

pages/partner/18_城市合伙人订单详情页_423aac86/code.html
+312
View File
@@ -0,0 +1,312 @@
<!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&amp;family=Inter:wght@400;500;600&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#37413b",
"on-tertiary-container": "#c2cdc6",
"subtle-gray": "#999999",
"inverse-on-surface": "#f1f1ef",
"primary-fixed": "#ffdad7",
"tertiary-fixed": "#dae5dd",
"aged-amber": "#FFBF00",
"on-secondary-fixed": "#241a00",
"on-surface": "#1a1c1b",
"on-background": "#1a1c1b",
"on-primary": "#ffffff",
"surface-container-highest": "#e3e2e0",
"surface-container-high": "#e9e8e6",
"surface-dim": "#dadad8",
"primary-fixed-dim": "#ffb3ae",
"on-secondary-container": "#745c00",
"background": "#faf9f7",
"secondary-fixed": "#ffe088",
"secondary-container": "#fed65b",
"on-secondary": "#ffffff",
"surface-container-low": "#f4f3f1",
"outline-variant": "#e2bebc",
"tertiary-container": "#4e5852",
"on-error-container": "#93000a",
"secondary": "#735c00",
"on-primary-container": "#ffb9b4",
"surface-container": "#efeeec",
"surface-bright": "#faf9f7",
"secondary-fixed-dim": "#e9c349",
"inverse-primary": "#ffb3ae",
"surface-variant": "#e3e2e0",
"on-surface-variant": "#5a413f",
"on-secondary-fixed-variant": "#574500",
"error-container": "#ffdad6",
"surface": "#faf9f7",
"outline": "#8d706e",
"surface-tint": "#b3272c",
"primary-container": "#a61d24",
"primary": "#820012",
"tertiary-fixed-dim": "#bec9c2",
"on-tertiary-fixed": "#141e19",
"ink-black": "#1A1A1A",
"on-tertiary-fixed-variant": "#3f4943",
"on-tertiary": "#ffffff",
"on-primary-fixed": "#410004",
"heritage-red": "#A61D24",
"success-green": "#2D6A4F",
"on-primary-fixed-variant": "#910817",
"inverse-surface": "#2f3130",
"error": "#ba1a1a",
"on-error": "#ffffff",
"surface-container-lowest": "#ffffff",
"status-blue": "#2A6EBB"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-md": "16px",
"base": "8px",
"stack-lg": "32px",
"margin-page": "20px",
"stack-sm": "4px",
"gutter-card": "12px"
},
"fontFamily": {
"headline-lg": ["Manrope"],
"headline-xl": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"headline-md": ["Manrope"],
"body-lg": ["Be Vietnam Pro"]
},
"fontSize": {
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.notch-badge {
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
}
body {
background-color: #faf9f7;
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body class="font-body-md text-on-surface pb-24">
<!-- TopAppBar -->
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface-container-low shadow-sm z-50">
<button class="w-10 h-10 flex items-center justify-start active:opacity-80 transition-opacity">
<span class="material-symbols-outlined text-primary">arrow_back</span>
</button>
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">订单详情</h1>
<div class="w-10"></div> <!-- Placeholder for centering -->
</header>
<main class="mt-14">
<!-- Status Banner -->
<section class="bg-heritage-red px-margin-page py-6 text-white relative overflow-hidden">
<!-- Subtle background texture/pattern -->
<div class="absolute inset-0 opacity-10 pointer-events-none">
<div class="absolute right-[-20%] top-[-20%] w-64 h-64 border-[20px] border-white rounded-full"></div>
</div>
<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;">local_shipping</span>
<h2 class="font-headline-md text-headline-md">运输中</h2>
</div>
<p class="font-body-md text-body-md opacity-90">预计今日 18:00 前送达</p>
</div>
</section>
<!-- Delivery Track -->
<section class="mx-margin-page mt-stack-md p-margin-page bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="space-y-0 relative">
<!-- Vertical Line -->
<div class="absolute left-[11px] top-4 bottom-4 w-[2px] bg-surface-container-highest"></div>
<!-- Track Items -->
<div class="flex items-start gap-4 relative pb-6">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-heritage-red flex items-center justify-center">
<span class="material-symbols-outlined text-[14px] text-white" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-on-surface">待确认</p>
</div>
</div>
<div class="flex items-start gap-4 relative pb-6">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-heritage-red flex items-center justify-center">
<span class="material-symbols-outlined text-[14px] text-white" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-on-surface">已接单</p>
</div>
</div>
<div class="flex items-start gap-4 relative pb-6">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-heritage-red flex items-center justify-center">
<span class="material-symbols-outlined text-[14px] text-white" style="font-variation-settings: 'FILL' 1;">check</span>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-on-surface">配送中</p>
</div>
</div>
<div class="flex items-start gap-4 relative pb-6">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-heritage-red border-4 border-primary-fixed flex items-center justify-center">
<div class="w-2 h-2 rounded-full bg-white"></div>
</div>
<div class="flex-1">
<p class="font-headline-md text-headline-md text-heritage font-bold">运输中</p>
<p class="font-body-md text-body-md text-subtle-gray mt-1">包裹正在送往目的地</p>
</div>
</div>
<div class="flex items-start gap-4 relative">
<div class="z-10 w-[24px] h-[24px] rounded-full bg-surface-container-highest flex items-center justify-center">
<div class="w-2 h-2 rounded-full bg-subtle-gray"></div>
</div>
<div class="flex-1">
<p class="font-label-md text-label-md text-subtle-gray">已送达</p>
</div>
</div>
</div>
</section>
<!-- Product Section -->
<section class="mx-margin-page mt-stack-md p-margin-page bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-heritage-red">
<div class="flex gap-4">
<div class="relative w-24 h-24 bg-surface rounded-lg overflow-hidden flex-shrink-0">
<img class="w-full h-full object-cover" data-alt="A professional studio product photograph of a premium bottle of Jiu Zu Du Kang Xiao Feng Tan liquor. The bottle is elegantly designed with traditional Chinese motifs, set against a warm, minimalist background with soft cinematic lighting. The atmosphere is sophisticated and highlights the heritage quality of the 52-degree spirit." src="https://lh3.googleusercontent.com/aida-public/AB6AXuABoOtezDzxDQTSxW7esl-R7-P6FWVJjQHOS3dDiuALtC3vbgL_mDq0oGgCmwGXu4nxON7bN_NoDb7iEnKq-T9JoY4ieJ0ZTLfxmEe21A4VHdPJekvpWZxg38xwFIL2eBGRP01dDtgEcsT3rOAhhwv3yG98REzJ3Z0WAKgEnpK4DwEbWuRwZMHt7b55oJNFY4YAYHhbBtajSP5Egscjqqp3-KDr_Vi6u6cpZlSnc4BN8pRTnqz6kFFe3qgOAjCb2uIJJ5cVYTyByf8">
<div class="absolute bottom-0 left-0 right-0 bg-heritage-red/80 py-0.5 text-center">
<span class="text-[10px] text-white font-label-md">正品保证</span>
</div>
</div>
<div class="flex-1">
<h3 class="font-headline-md text-headline-md text-on-surface leading-tight">酒祖杜康 · 小封坛 (52°)</h3>
<div class="mt-1 flex items-center gap-2">
<span class="font-body-md text-body-md text-subtle-gray">500ml × 6瓶/箱</span>
<span class="font-body-md text-body-md text-on-surface font-semibold">x6</span>
</div>
<div class="mt-2 flex items-baseline gap-1">
<span class="text-label-md font-label-md text-heritage-red">¥</span>
<span class="text-headline-lg font-headline-lg text-heritage-red">5,880</span>
</div>
</div>
</div>
</section>
<!-- Commission & Benefits (Accent Card) -->
<section class="mx-margin-page mt-stack-md grid grid-cols-2 gap-stack-md">
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-t-2 border-heritage-red"><p class="text-subtle-gray font-label-md text-label-md mb-2">佣金明细</p><div class="space-y-1"><div class="flex justify-between items-center"><span class="text-[10px] text-subtle-gray">订单佣金</span><span class="text-heritage-red font-bold text-[12px]">¥235.20</span></div><div class="flex justify-between items-center"><span class="text-[10px] text-subtle-gray">权益核销</span><span class="text-heritage-red font-bold text-[12px]">¥235.20</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-t-2 border-aged-amber overflow-hidden relative">
<p class="text-subtle-gray font-label-md text-label-md mb-1">赠送好客权益</p>
<div class="flex items-center gap-1">
<span class="text-aged-amber font-headline-lg text-headline-lg font-bold">¥1,200</span>
<div class="notch-badge bg-aged-amber/10 px-2 py-0.5 ml-auto">
<span class="text-[10px] text-aged-amber font-bold">可核销</span>
</div>
</div><div class="w-full h-1 bg-surface-container-highest rounded-full mt-2 overflow-hidden"><div class="h-full bg-aged-amber rounded-full" style="width: 33.33%"></div></div><div class="flex justify-between items-center mt-1">
<span class="text-[10px] text-subtle-gray font-body-md whitespace-nowrap">已核销 ¥400</span>
<span class="text-[10px] text-subtle-gray font-body-md whitespace-nowrap">待核销 ¥800</span>
</div>
<div class="absolute -right-2 -bottom-2 opacity-10">
<span class="material-symbols-outlined text-4xl text-aged-amber">confirmation_number</span>
</div>
</div>
</section>
<!-- Order Info -->
<section class="mx-margin-page mt-stack-md p-margin-page bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<h4 class="font-headline-md text-headline-md mb-4 flex items-center gap-2">
<span class="w-1 h-4 bg-heritage-red rounded-full"></span>
订单信息
</h4>
<div class="space-y-3">
<div class="flex justify-between items-start">
<span class="text-subtle-gray font-body-md">订单编号</span>
<div class="flex items-center gap-2">
<span class="text-on-surface font-body-md">DK202310248819</span>
<button class="text-heritage-red active:scale-95 transition-transform">
<span class="material-symbols-outlined text-[18px]">content_copy</span>
</button>
</div>
</div>
<div class="flex justify-between">
<span class="text-subtle-gray font-body-md">下单时间</span>
<span class="text-on-surface font-body-md">2026-06-18 14:20:05</span>
</div>
<div class="flex justify-between items-start">
<span class="text-subtle-gray font-body-md">营销推广</span>
<div class="text-right">
<p class="text-on-surface font-body-md">品鉴会营销码</p>
<p class="text-heritage-red font-label-md text-label-md font-semibold">DJH001</p>
</div>
</div>
</div>
</section>
<!-- Receiver Info -->
<section class="mx-margin-page mt-stack-md p-margin-page bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<h4 class="font-headline-md text-headline-md mb-4 flex items-center gap-2">
<span class="w-1 h-4 bg-heritage-red rounded-full"></span>
收货地址
</h4>
<div class="flex items-start gap-3">
<span class="material-symbols-outlined text-subtle-gray mt-0.5">location_on</span>
<div class="flex-1">
<p class="text-on-surface font-headline-md text-headline-md">张先生 <span class="ml-2 font-normal text-body-lg">138****8888</span></p>
<p class="text-subtle-gray font-body-md mt-1 leading-relaxed">河南省洛阳市涧西区南昌路街道锦绣花园12号楼2单元804室</p>
</div>
</div>
</section>
</main>
<!-- Sticky Bottom Action -->
<footer class="fixed bottom-0 left-0 w-full bg-white/80 backdrop-blur-md px-margin-page py-4 flex items-center justify-between border-t border-surface-container-high z-50">
<div class="flex flex-col">
<span class="text-label-md font-label-md text-subtle-gray">佣金合计</span>
<span class="text-heritage-red font-headline-md text-headline-md font-bold">¥470.40</span>
</div>
<div class="flex gap-stack-md">
<button class="px-6 py-2 rounded-xl border border-heritage-red text-heritage-red font-body-md active:bg-heritage-red/5 transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">support_agent</span>
联系配送员
</button>
</div>
</footer>
<!-- Bottom Navigation (Shared Component Context) -->
<!-- Suppressed on detail pages per mandate, but structure logic included if needed for other screens -->
<script>
// Micro-interactions
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('touchstart', () => {
btn.style.transform = 'scale(0.98)';
});
btn.addEventListener('touchend', () => {
btn.style.transform = 'scale(1)';
});
});
// Copy feedback
const copyBtn = document.querySelector('[data-copy]'); // hypothetical
// In actual implementation, we'd add copy logic here.
</script>
</body></html>
pages/partner/18_城市合伙人订单详情页_423aac86/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "城市合伙人订单详情页",
"screenId": "423aac8633d04e59b007a8c397ace9ae",
"category": "partner",
"syncedAt": "2026-06-29T02:35:03.275Z"
}
pages/partner/18_城市合伙人订单详情页_423aac86/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

pages/partner/19-门店核销列表.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

pages/partner/2-快捷登录.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

pages/partner/20-资产列表.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

pages/partner/20_合伙人中心_c31c874b/code.html
+332
View File
@@ -0,0 +1,332 @@
<!DOCTYPE html><html class="light" lang="zh-CN" style="width: 390px; height: 1312px; overflow: hidden; position: relative;"><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&amp;family=Inter:wght@400;500;600&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<!-- Use the exact Tailwind Config provided -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary-container": "#fed65b",
"surface": "#faf9f7",
"subtle-gray": "#999999",
"inverse-on-surface": "#f1f1ef",
"tertiary-fixed": "#dae5dd",
"surface-bright": "#faf9f7",
"primary-container": "#a61d24",
"error": "#ba1a1a",
"aged-amber": "#FFBF00",
"outline": "#8d706e",
"surface-container": "#efeeec",
"surface-container-lowest": "#ffffff",
"on-tertiary-container": "#c2cdc6",
"tertiary": "#37413b",
"on-error": "#ffffff",
"status-blue": "#2A6EBB",
"on-surface": "#1a1c1b",
"error-container": "#ffdad6",
"inverse-primary": "#ffb3ae",
"ink-black": "#1A1A1A",
"heritage-red": "#A61D24",
"on-surface-variant": "#5a413f",
"on-background": "#1a1c1b",
"surface-container-high": "#e9e8e6",
"on-primary-fixed": "#410004",
"success-green": "#2D6A4F",
"on-secondary-fixed-variant": "#574500",
"on-secondary-fixed": "#241a00",
"on-secondary-container": "#745c00",
"on-error-container": "#93000a",
"inverse-surface": "#2f3130",
"primary": "#820012",
"surface-variant": "#e3e2e0",
"primary-fixed": "#ffdad7",
"on-tertiary-fixed-variant": "#3f4943",
"tertiary-container": "#4e5852",
"background": "#faf9f7",
"secondary-fixed-dim": "#e9c349",
"surface-container-low": "#f4f3f1",
"surface-container-highest": "#e3e2e0",
"on-primary-container": "#ffb9b4",
"secondary-fixed": "#ffe088",
"on-tertiary-fixed": "#141e19",
"on-primary": "#ffffff",
"tertiary-fixed-dim": "#bec9c2",
"outline-variant": "#e2bebc",
"primary-fixed-dim": "#ffb3ae",
"on-tertiary": "#ffffff",
"surface-tint": "#b3272c",
"surface-dim": "#dadad8",
"on-primary-fixed-variant": "#910817",
"on-secondary": "#ffffff",
"secondary": "#735c00"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"gutter-card": "12px",
"stack-sm": "4px",
"stack-md": "16px",
"stack-lg": "32px",
"base": "8px",
"margin-page": "20px"
},
"fontFamily": {
"headline-lg": ["Manrope"],
"label-md": ["Inter"],
"headline-md": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"coupon-amount": ["Manrope"],
"headline-xl": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"body-lg": ["Be Vietnam Pro"]
},
"fontSize": {
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
body {
background-color: #faf9f7;
-webkit-tap-highlight-color: transparent;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.glass-effect {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.8);
}
.tonal-shadow {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
.ticket-notch {
position: relative;
}
.ticket-notch::before, .ticket-notch::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
background-color: #faf9f7;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.ticket-notch::before { left: -6px; }
.ticket-notch::after { right: -6px; }
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="antialiased text-on-background">
<!-- TopAppBar -->
<header class="bg-background dark:bg-background docked full-width top-0 sticky z-40 transition-colors duration-200 flex justify-between items-center px-margin-page w-full h-14">
<button class="flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-container transition-colors duration-200">
<span class="material-symbols-outlined text-heritage-red dark:text-inverse-primary" data-icon="arrow_back">arrow_back</span>
</button>
<h1 class="font-headline-md text-headline-md-mobile dark:text-on-background font-bold text-heritage-red">杜康好客</h1>
<button class="flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-container transition-colors duration-200">
<span class="material-symbols-outlined text-heritage-red dark:text-inverse-primary" data-icon="settings">settings</span>
</button>
</header>
<main class="pb-24">
<!-- Profile Header Section -->
<section class="px-margin-page pt-stack-md">
<div class="bg-surface-container-lowest p-stack-md rounded-xl tonal-shadow flex items-center space-x-stack-md border border-heritage-red/5">
<div class="relative">
<img class="w-16 h-16 rounded-full object-cover border-2 border-heritage-red/10" data-alt="A professional studio portrait of a distinguished Chinese business leader in a tailored dark suit. The lighting is soft and cinematic, highlighting a calm and confident expression. The background is a minimalist, warm off-white, reflecting a high-end heritage brand aesthetic with premium clarity and depth." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBsjzWQtbs4GqPdKFjln-x3niqTNfgG8Xat72e56Fbp-vxVJoWOBhk0yTXm7NRmUW_gZDtuyYx35paB26UfCucXtEVGDRLkkUseLuGJTQwyglYXkeVE-E6eKmh0BdI9Ix9dPmvabDdFnj0wBsN_PIjbjjBwhTd_jcnN3bhxhxtebSFIjUdq4SYD3fN1U7b9mlJZI-cHU5KJdGecyZUBulzjk5J0x3_tguDWm059lFX6GvEp2F8Cs4vvuDRcMOGSYov6U-n0Mo_zcbY">
<div class="absolute -bottom-1 -right-1 bg-aged-amber text-on-secondary px-2 py-0.5 rounded-full border-2 border-white shadow-sm flex items-center">
<span class="material-symbols-outlined text-[12px]" data-icon="stars" style="font-variation-settings: 'FILL' 1;">stars</span>
</div>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h2 class="font-headline-lg-mobile text-headline-lg-mobile text-ink-black">张建国</h2>
<span class="bg-secondary-container text-on-secondary-container px-2 py-1 rounded-lg font-label-md text-[10px] uppercase tracking-wider">城市合伙人</span>
</div>
<div class="flex items-center mt-1 text-subtle-gray space-x-1">
<span class="material-symbols-outlined text-body-md" data-icon="location_on">location_on</span>
<span class="font-body-md text-body-md">洛阳市 · 涧西区</span>
</div>
</div>
</div>
</section>
<!-- Financial Section -->
<section class="mt-stack-lg px-margin-page">
<div class="flex items-center justify-between mb-stack-sm">
<h3 class="font-headline-md text-headline-md text-ink-black">资产概览</h3>
<button class="text-heritage-red font-label-md flex items-center">
明细 <span class="material-symbols-outlined text-[16px]" data-icon="chevron_right">chevron_right</span>
</button>
</div>
<!-- Bento-style Financial Cards -->
<div class="mb-3 bg-heritage-red/5 border border-heritage-red/10 p-4 rounded-xl flex items-center justify-between active:opacity-80 transition-colors">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-heritage-red/10 flex items-center justify-center">
<span class="material-symbols-outlined text-heritage-red" data-icon="pending_actions">pending_actions</span>
</div>
<div>
<p class="font-body-lg text-ink-black font-medium">待确认账单</p>
<p class="text-label-md text-heritage-red">您有 3 笔账单待确认</p>
</div>
</div>
<span class="material-symbols-outlined text-heritage-red" data-icon="chevron_right">chevron_right</span>
</div><div class="grid grid-cols-2 gap-3">
<div class="col-span-2 bg-heritage-red p-stack-md rounded-xl text-white shadow-lg relative overflow-hidden">
<div class="relative z-10">
<p class="font-label-md opacity-80 mb-1">账户余额 (元)</p>
<div class="flex items-baseline justify-between">
<span class="font-coupon-amount text-headline-xl">128,450.00</span>
</div>
</div>
</div>
<div class="bg-surface-container-lowest p-stack-md rounded-xl tonal-shadow border border-heritage-red/5">
<p class="font-label-md text-subtle-gray mb-1">待结算</p>
<div class="flex items-center space-x-1">
<span class="text-heritage-red font-headline-md">¥</span>
<span class="font-headline-md text-ink-black">12,680.00</span>
</div>
</div>
<div class="bg-surface-container-lowest p-stack-md rounded-xl tonal-shadow border border-heritage-red/5">
<p class="font-label-md text-subtle-gray mb-1">提现记录</p>
<div class="flex items-center justify-between">
<span class="font-headline-md text-ink-black">15 笔</span>
<span class="material-symbols-outlined text-subtle-gray" data-icon="history">history</span>
</div>
</div>
</div>
</section>
<!-- Management Tools -->
<section class="mt-stack-lg px-margin-page">
<h3 class="font-headline-md text-headline-md text-ink-black mb-stack-sm">运营管理</h3>
<div class="bg-surface-container-lowest rounded-xl tonal-shadow overflow-hidden border border-heritage-red/5">
<!-- Tool Item -->
<div class="flex items-center justify-between p-4 border-b border-surface-container hover:bg-surface-container-low transition-colors group">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-heritage-red/5 flex items-center justify-center">
<span class="material-symbols-outlined text-heritage-red" data-icon="badge">badge</span>
</div>
<span class="font-body-lg text-ink-black">我的员工</span>
</div>
<div class="flex items-center space-x-2">
<span class="bg-heritage-red/10 text-heritage-red px-2 py-0.5 rounded-full font-label-md">12人</span>
<span class="material-symbols-outlined text-subtle-gray group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
</div>
<!-- Tool Item -->
<div class="flex items-center justify-between p-4 border-b border-surface-container hover:bg-surface-container-low transition-colors group">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-heritage-red/5 flex items-center justify-center">
<span class="material-symbols-outlined text-heritage-red" data-icon="store">store</span>
</div>
<span class="font-body-lg text-ink-black">门店审核记录</span>
</div>
<span class="material-symbols-outlined text-subtle-gray group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
<!-- Tool Item -->
<div class="flex items-center justify-between p-4 hover:bg-surface-container-low transition-colors group">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-heritage-red/5 flex items-center justify-center">
<span class="material-symbols-outlined text-heritage-red" data-icon="description">description</span>
</div>
<span class="font-body-lg text-ink-black">合同管理</span>
</div>
<div class="flex items-center space-x-2">
<span class="font-label-md text-status-blue">待续约</span>
<span class="material-symbols-outlined text-subtle-gray group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
</div>
</div>
</section>
<!-- Support & Settings -->
<section class="mt-stack-lg px-margin-page">
<div class="bg-surface-container-lowest rounded-xl tonal-shadow overflow-hidden border border-heritage-red/5">
<button class="w-full flex items-center justify-center p-4 hover:bg-error-container/20 transition-colors group">
<span class="material-symbols-outlined text-error mr-2" data-icon="logout">logout</span>
<span class="font-body-lg text-error font-medium">退出登录</span>
</button>
</div>
</section>
<!-- Aesthetic Branding Element -->
<div class="mt-12 mb-8 flex flex-col items-center justify-center opacity-30">
<img class="w-16 h-16 grayscale mb-2" data-alt="A stylized minimalist watermark logo of ancient Chinese calligraphy representing Dukang liquor, rendered in a very subtle, pale earth-toned outline on a light background. The style is clean, editorial, and sophisticated." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJwsfHcjEGuUXImV012a29rYlqzDwDjNeSws1D5Y7oC_uOjjjmhD1RrcmefngFfHHmPzTdlN_b7KTLp51B4-TGAv0OxhCKWnTCP5u1xyxT1nnzZEOt0EE2eAHBoHCqxi_lG0EG91n0gG9Wxzq0X2nnObleJSi5uJS1hiitpLFEuRfkiKEF1HuztSPXHjljT4m4AFIXfrSF2bBnFV9lFzsI5nOJll3M0YrLtUcqw0aYoishKp4aKybHJhlIv4LCkO5wSlUU7YePpTE">
<p class="font-label-md text-subtle-gray">传承千年 · 杜康好客</p>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 w-full z-50 flex justify-around items-center px-4 py-2 h-16 bg-surface dark:bg-surface-dim shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] rounded-t-xl">
<a class="flex flex-col items-center justify-center text-subtle-gray dark:text-on-surface-variant active:opacity-80 scale-95 transition-transform duration-150" href="#">
<span class="material-symbols-outlined" data-icon="home">home</span>
<span class="font-label-md text-label-md">首页</span>
</a>
<a class="flex flex-col items-center justify-center text-subtle-gray dark:text-on-surface-variant active:opacity-80 scale-95 transition-transform duration-150" href="#">
<span class="material-symbols-outlined" data-icon="work">work</span>
<span class="font-label-md text-label-md">门店管理</span>
</a>
<a class="flex flex-col items-center justify-center text-heritage-red dark:text-primary-fixed-dim font-bold active:opacity-80 scale-95 transition-transform duration-150" href="#">
<span class="material-symbols-outlined" data-icon="account_circle" style="font-variation-settings: 'FILL' 1;">account_circle</span>
<span class="font-label-md text-label-md">合伙人中心</span>
</a>
</nav>
<script>
// Simple micro-interaction for list items
document.querySelectorAll('.group').forEach(item => {
item.addEventListener('touchstart', function() {
this.classList.add('bg-surface-container-low');
});
item.addEventListener('touchend', function() {
setTimeout(() => {
this.classList.remove('bg-surface-container-low');
}, 100);
});
});
// Sticky header transition logic
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 20) {
header.classList.add('shadow-md', 'glass-effect');
} else {
header.classList.remove('shadow-md', 'glass-effect');
}
});
</script>
<div id="snapdom-sandbox" data-snapdom-sandbox="true" aria-hidden="true" style="position: absolute; left: -9999px; top: -9999px; width: 0px; height: 0px; overflow: hidden;"></div></body></html>
pages/partner/20_合伙人中心_c31c874b/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人中心",
"screenId": "c31c874b8c0f47a987846e18a2de8cbb",
"category": "partner",
"syncedAt": "2026-06-29T08:07:16.204Z"
}
pages/partner/20_合伙人中心_c31c874b/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

pages/partner/20_合伙人订单中心页_增加待发货与异常示例_b7c630ed/code.html
+401
View File
@@ -0,0 +1,401 @@
<!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&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
pages/partner/20_合伙人订单中心页_增加待发货与异常示例_b7c630ed/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人订单中心页 - 增加待发货与异常示例",
"screenId": "b7c630ed3ae4434a98d9fceaf30574da",
"category": "partner",
"syncedAt": "2026-06-29T02:35:14.739Z"
}
pages/partner/20_合伙人订单中心页_增加待发货与异常示例_b7c630ed/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

pages/partner/21-合同管理.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

pages/partner/22-确认账单.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

pages/partner/22_合伙人工作台首页_9564734e/code.html
+347
View File
@@ -0,0 +1,347 @@
<!DOCTYPE html><html lang="zh-CN" style="width: 390px; height: 1242px; overflow: hidden; position: relative;"><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;500;600;700;800&amp;family=Inter:wght@400;500;600&amp;family=Be+Vietnam+Pro:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary": "#ffffff",
"surface-container": "#efeeec",
"tertiary-fixed": "#dae5dd",
"outline-variant": "#e2bebc",
"success-green": "#2D6A4F",
"on-tertiary-container": "#c2cdc6",
"secondary": "#735c00",
"primary-fixed": "#ffdad7",
"inverse-surface": "#2f3130",
"on-background": "#1a1c1b",
"tertiary": "#37413b",
"primary-fixed-dim": "#ffb3ae",
"secondary-fixed": "#ffe088",
"status-blue": "#2A6EBB",
"on-tertiary": "#ffffff",
"background": "#faf9f7",
"error": "#ba1a1a",
"surface-container-high": "#e9e8e6",
"secondary-container": "#fed65b",
"surface": "#faf9f7",
"on-tertiary-fixed-variant": "#3f4943",
"tertiary-fixed-dim": "#bec9c2",
"outline": "#8d706e",
"inverse-primary": "#ffb3ae",
"on-primary-fixed-variant": "#910817",
"ink-black": "#1A1A1A",
"error-container": "#ffdad6",
"on-primary-fixed": "#410004",
"surface-tint": "#b3272c",
"surface-container-low": "#f4f3f1",
"aged-amber": "#FFBF00",
"on-secondary-container": "#745c00",
"surface-container-highest": "#e3e2e0",
"subtle-gray": "#999999",
"surface-container-lowest": "#ffffff",
"secondary-fixed-dim": "#e9c349",
"on-primary-container": "#ffb9b4",
"surface-variant": "#e3e2e0",
"on-error-container": "#93000a",
"heritage-red": "#A61D24",
"surface-dim": "#dadad8",
"primary": "#820012",
"on-error": "#ffffff",
"tertiary-container": "#4e5852",
"on-surface-variant": "#5a413f",
"on-surface": "#1a1c1b",
"on-secondary": "#ffffff",
"on-secondary-fixed": "#241a00",
"inverse-on-surface": "#f1f1ef",
"on-secondary-fixed-variant": "#574500",
"primary-container": "#a61d24",
"on-tertiary-fixed": "#141e19",
"surface-bright": "#faf9f7"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-sm": "4px",
"margin-page": "20px",
"gutter-card": "12px",
"stack-lg": "32px",
"base": "8px",
"stack-md": "16px"
},
"fontFamily": {
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"headline-md": ["Manrope"],
"headline-lg": ["Manrope"],
"body-lg": ["Be Vietnam Pro"],
"headline-xl": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"coupon-amount": ["Manrope"]
},
"fontSize": {
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.paper-texture {
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
}
.heritage-gradient {
background: linear-gradient(135deg, #A61D24 0%, #820012 100%);
}
.soft-shadow {
shadow-[0px_4px_20px_rgba(166,29,36,0.05)];
}
</style>
</head>
<body class="bg-background font-body-md text-on-surface selection:bg-primary-fixed selection:text-primary">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 bg-surface-container-low shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex items-center justify-between px-margin-page h-16 w-full max-w-screen-xl mx-auto">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary">menu</span>
<h1 class="font-headline-md text-headline-md-mobile text-primary">工作台</h1>
</div>
<div class="flex items-center gap-4">
<div class="relative p-2 hover:bg-surface-container-high transition-colors rounded-full active:scale-95">
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
<span class="absolute top-1 right-1 w-2 h-2 bg-heritage-red rounded-full border-2 border-surface"></span>
</div>
<img class="w-10 h-10 rounded-full border-2 border-heritage-red/10 object-cover" data-alt="A professional high-end business portrait of a modern city partner, wearing a tailored blazer in a minimalist architectural office with soft daylight and warm heritage red accents in the background. The lighting is editorial and sophisticated, emphasizing a clean light-mode aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFL2lV4OZbU8b5LUqByJtEYbldq2D-ItYhiHawZb4C8NBelgnRieIk3-_3e_4G2z5hrk-FmQdFz4UVqmQ_uulzTQUajdSFaKlus44_w0P3RbFd6SNDzOGm2_1anC8MWGGkmnKpqCvaHHQ_wPhridz2gLXQuNIj3-__wUdI-HL9KHw6EDO5ezi_xzL5RlNyg2HI0k4eDV6qqczXUSd4okig5PVWX9J2YlrdgzgBODvjul0Npd02OC_uhXtVLUCfSlUKhASFysmsbpM">
</div>
</div>
</header>
<main class="pt-24 pb-32 px-margin-page max-w-screen-xl mx-auto space-y-stack-lg">
<!-- Financial Card -->
<section class="relative overflow-hidden heritage-gradient rounded-xl p-6 text-white shadow-xl">
<div class="absolute -right-12 -top-12 w-48 h-48 bg-white/5 rounded-full blur-3xl"></div>
<div class="relative z-10">
<p class="font-label-md text-white/80 flex items-center gap-1">
实时营业额 (CNY)
<span class="material-symbols-outlined text-[14px]">info</span>
</p>
<div class="flex items-baseline gap-2 mt-2">
<span class="font-headline-xl text-[36px]">128,450.00</span>
</div>
<div class="grid grid-cols-2 gap-4 mt-6 pt-6 border-t border-white/10">
<div>
<p class="font-label-md text-white/60">预计利润</p>
<p class="font-headline-md mt-1">¥ 32,112.50</p>
</div>
</div>
</div>
</section>
<!-- Store Overview & Quick Actions Bento -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter-card">
<!-- Store Overview (Col 7) -->
<section class="md:col-span-7 bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex justify-between items-center mb-stack-md">
<h2 class="font-headline-md text-on-surface">门店总数</h2>
<span class="font-headline-lg text-primary">156</span>
</div>
<div class="flex gap-4">
<div class="flex-1 bg-surface-container-low rounded-lg p-3 flex items-center gap-3">
<span class="w-3 h-3 bg-success-green rounded-full shadow-[0_0_8px_rgba(45,106,79,0.4)]"></span>
<div>
<p class="text-xs text-subtle-gray">正常运营</p>
<p class="font-headline-md">148</p>
</div>
</div>
<div class="flex-1 bg-surface-container-low rounded-lg p-3 flex items-center gap-3">
<span class="w-3 h-3 bg-heritage-red rounded-full shadow-[0_0_8px_rgba(166,29,36,0.4)] animate-pulse"></span>
<div>
<p class="text-xs text-subtle-gray">异常/闭店</p>
<p class="font-headline-md">8</p>
</div>
</div>
</div>
</section>
<!-- Quick Actions (Col 5) -->
<section class="md:col-span-5 bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<div class="flex gap-4 h-full items-center overflow-x-auto pb-2">
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-heritage-red group-active:scale-90 transition-transform">
<span class="material-symbols-outlined">add_business</span>
</div>
<span class="text-[10px] font-medium text-on-surface-variant">录入新店</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-aged-amber group-active:scale-90 transition-transform relative">
<span class="material-symbols-outlined">assignment_return</span>
<span class="absolute -right-1 -top-1 w-5 h-5 bg-heritage-red text-white text-[10px] font-bold flex items-center justify-center rounded-full border-2 border-white">3</span></div>
<span class="text-[10px] font-medium text-on-surface-variant">补发处理</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center text-success-green group-active:scale-90 transition-transform">
<span class="material-symbols-outlined">account_balance</span>
</div>
<span class="text-[10px] font-medium text-on-surface-variant">财务对账</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0">
<div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-status-blue group-active:scale-90 transition-transform">
<span class="material-symbols-outlined">monitoring</span>
</div>
<span class="text-[10px] font-medium text-on-surface-variant">数据周报</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer flex-shrink-0 min-w-[64px]" data-stitch-orig-opacity="0"><div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-heritage-red group-active:scale-90 transition-transform"><span class="material-symbols-outlined">block</span></div><span class="text-[10px] font-medium text-on-surface-variant">拦截配送</span></div></div>
</section>
</div>
<!-- Order Summary -->
<section class="space-y-stack-md">
<div class="flex justify-between items-center w-full mb-stack-md"><h2 class="font-headline-md text-on-surface">今日订单量 1000</h2><button class="text-xs text-primary hover:underline flex items-center gap-1">查看订单详情 <span class="material-symbols-outlined text-[14px]">chevron_right</span></button></div>
<div class="grid grid-cols-3 gap-gutter-card">
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-aged-amber">
<p class="text-xs text-subtle-gray mb-1">待发货</p>
<p class="font-headline-lg text-ink-black">42</p>
</div>
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-status-blue">
<p class="text-xs text-subtle-gray mb-1">配送中</p>
<p class="font-headline-lg text-ink-black">115</p>
</div>
<div class="bg-surface-container-lowest p-4 rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border-l-4 border-success-green">
<p class="text-xs text-subtle-gray mb-1">已完成</p>
<p class="font-headline-lg text-ink-black">896</p>
</div>
</div>
</section>
<!-- Expansion Stats -->
<section class="bg-surface-container-lowest rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
<h2 class="font-headline-md text-on-surface mb-stack-md">拓店情况</h2>
<div class="flex divide-x divide-outline-variant/20 mb-stack-lg">
<div class="flex-1 pr-4">
<p class="text-xs text-subtle-gray mb-1">本月新增签约</p>
<div class="flex items-center gap-2">
<span class="font-headline-lg">12</span>
<span class="text-[10px] text-success-green flex items-center">
<span class="material-symbols-outlined text-[12px]">trending_up</span> 18%
</span>
</div>
</div>
<div class="flex-1 pl-4">
<p class="text-xs text-subtle-gray mb-1">待审核门店</p>
<p class="font-headline-lg">5</p>
</div>
</div>
<div class="space-y-stack-md pt-stack-md border-t border-outline-variant/10">
<div class="flex justify-between items-center">
<h3 class="font-body-md font-bold text-on-surface-variant flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[18px]">military_tech</span>
合伙人贡献榜
</h3>
<button class="text-xs text-primary hover:underline">查看全部</button>
</div>
<div class="space-y-stack-sm">
<!-- Top Performer 1 -->
<div class="flex items-center justify-between p-2 hover:bg-surface-container-low rounded-lg transition-colors group">
<div class="flex items-center gap-3">
<div class="relative">
<img class="w-10 h-10 rounded-full object-cover" data-alt="A close-up portrait of a successful business manager, professional studio lighting, warm skin tones, blurred corporate background with high-end glass and wood textures, premium feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBDulJR0QVymlFX_gSToQlsaotB95_R0d4ldDmV0Ot-6tiNOFv_szA0uQ_shTHkx8oO24FWGKj8EGPhPpedkUs7uqbr47GD-Wx4ftnnKQ5n8ttZD5X-FvmxhNTIMzm21sOOR5G2TzsDA2EkSydyyc41NEsE6szSM0w1nbCXRZUowzvZD8D-Imk7bKtwhUMNyeoRTUTqe2rzuHKsGgMbiyhUZTbO9GZ4fgWJsvwvgzahWxh2shj0Us2BRyhU1cuEZEWL9-selOsIdzc">
<span class="absolute -top-1 -left-1 w-5 h-5 bg-aged-amber text-white text-[10px] font-bold flex items-center justify-center rounded-full border-2 border-white">1</span>
</div>
<div>
<p class="font-body-md font-semibold text-on-surface">陈经理 <span class="text-[10px] font-normal text-subtle-gray ml-1">(内部员工)</span></p>
<p class="text-[10px] text-subtle-gray">累计拓店: 45 间</p>
</div>
</div>
<div class="text-right">
<p class="font-headline-md text-primary">8 间</p>
<p class="text-[10px] text-subtle-gray">本月新增</p>
</div>
</div>
<!-- Top Performer 2 -->
<div class="flex items-center justify-between p-2 hover:bg-surface-container-low rounded-lg transition-colors">
<div class="flex items-center gap-3">
<div class="relative">
<img class="w-10 h-10 rounded-full object-cover" data-alt="A sharp, minimalist profile photo of a corporate executive, professional photography, soft shadows, neutral background, modern business attire, high clarity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKnCwe6S_Ptns70i1_qbhiGfmTiKaEhHr0F1-jT_eyMnPkiohY8V2eSsLJyxsMw10yiRfL1Y9B-DhdZKacgfhe2Gs9A0G0A-60bEllKd7bqDWQDWsCedVupzKyRRt5ciyiaDiJ5dYu_J4A9MI-umpJ8lVEIQqh1OU45txxUUzu_QOwMT-_yMW787X-VXDirO-7DoJCLAcUdDWRlC3zDzHX8M2x_U4PyYjmRE2dHgAM4VTX61mox4SzmqOXS0RKG8B2aE-IkDgEj6g">
<span class="absolute -top-1 -left-1 w-5 h-5 bg-slate-300 text-white text-[10px] font-bold flex items-center justify-center rounded-full border-2 border-white">2</span>
</div>
<div>
<p class="font-body-md font-semibold text-on-surface">李华 <span class="text-[10px] font-normal text-subtle-gray ml-1">(城市合伙人)</span></p>
<p class="text-[10px] text-subtle-gray">累计拓店: 32 间</p>
</div>
</div>
<div class="text-right">
<p class="font-headline-md text-on-surface-variant">5 间</p>
<p class="text-[10px] text-subtle-gray">本月新增</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 w-full z-50 bg-surface-container-lowest border-t border-outline-variant/20 shadow-[0px_-4px_16px_rgba(0,0,0,0.04)] rounded-t-xl h-20 px-4 pb-safe flex justify-around items-center"><button class="flex flex-col items-center justify-center text-primary bg-primary-fixed/30 rounded-xl px-5 py-2 active:scale-90 transition-transform">
<span class="material-symbols-outlined">home</span>
<span class="font-label-md mt-1 font-bold">首页</span>
</button>
<button class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80 active:scale-90 transition-transform">
<span class="material-symbols-outlined">storefront</span>
<span class="font-label-md mt-1">门店管理</span>
</button>
<button class="flex flex-col items-center justify-center text-subtle-gray hover:opacity-80 active:scale-90 transition-transform">
<span class="material-symbols-outlined">account_circle</span>
<span class="font-label-md mt-1">合伙人中心</span>
</button></nav>
<script>
// Micro-interactions for counts or chart simulations could be added here
document.addEventListener('DOMContentLoaded', () => {
// Simple animation for the big number on load
const revenueDisplay = document.querySelector('.font-headline-xl');
if(revenueDisplay) {
let startValue = 120000;
const endValue = 128450;
const duration = 1500;
const step = (endValue - startValue) / (duration / 16);
const updateValue = () => {
startValue += step;
if(startValue < endValue) {
revenueDisplay.textContent = startValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
requestAnimationFrame(updateValue);
} else {
revenueDisplay.textContent = endValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
};
updateValue();
}
});
</script>
</body></html>
pages/partner/22_合伙人工作台首页_9564734e/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "合伙人工作台首页",
"screenId": "9564734e32dc4c699445f15272c37fd6",
"category": "partner",
"syncedAt": "2026-06-29T02:35:35.049Z"
}
pages/partner/22_合伙人工作台首页_9564734e/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

pages/partner/22_录入新门店_结算资质_5f7a87a5/code.html
+245
View File
@@ -0,0 +1,245 @@
<!DOCTYPE html><html lang="zh-CN"><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&amp;family=Be+Vietnam+Pro:wght@400;500&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<!-- Tailwind Config Verbatim -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#8d706e",
"tertiary-container": "#4e5852",
"primary": "#820012",
"on-tertiary-container": "#c2cdc6",
"on-primary": "#ffffff",
"surface": "#faf9f7",
"on-secondary-fixed": "#241a00",
"success-green": "#2D6A4F",
"secondary-fixed-dim": "#e9c349",
"aged-amber": "#FFBF00",
"inverse-surface": "#2f3130",
"heritage-red": "#A61D24",
"surface-container": "#efeeec",
"inverse-primary": "#ffb3ae",
"tertiary-fixed-dim": "#bec9c2",
"primary-fixed": "#ffdad7",
"on-surface-variant": "#5a413f",
"tertiary-fixed": "#dae5dd",
"on-error-container": "#93000a",
"surface-tint": "#b3272c",
"surface-container-low": "#f4f3f1",
"outline-variant": "#e2bebc",
"on-secondary-fixed-variant": "#574500",
"subtle-gray": "#999999",
"primary-container": "#a61d24",
"primary-fixed-dim": "#ffb3ae",
"on-primary-container": "#ffb9b4",
"secondary": "#735c00",
"status-blue": "#2A6EBB",
"on-primary-fixed": "#410004",
"on-tertiary": "#ffffff",
"on-tertiary-fixed": "#141e19",
"on-background": "#1a1c1b",
"on-tertiary-fixed-variant": "#3f4943",
"ink-black": "#1A1A1A",
"surface-container-high": "#e9e8e6",
"background": "#faf9f7",
"secondary-fixed": "#ffe088",
"on-primary-fixed-variant": "#910817",
"error": "#ba1a1a",
"on-secondary": "#ffffff",
"surface-dim": "#dadad8",
"on-error": "#ffffff",
"surface-variant": "#e3e2e0",
"surface-container-highest": "#e3e2e0",
"on-surface": "#1a1c1b",
"surface-container-lowest": "#ffffff",
"inverse-on-surface": "#f1f1ef",
"tertiary": "#37413b",
"on-secondary-container": "#745c00",
"surface-bright": "#faf9f7",
"error-container": "#ffdad6",
"secondary-container": "#fed65b"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"base": "8px",
"margin-page": "20px",
"stack-md": "16px",
"gutter-card": "12px",
"stack-sm": "4px",
"stack-lg": "32px"
},
"fontFamily": {
"headline-xl": ["Manrope"],
"headline-lg": ["Manrope"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"body-lg": ["Be Vietnam Pro"],
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"],
"headline-md": ["Manrope"]
},
"fontSize": {
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
body {
background-color: #faf9f7;
-webkit-tap-highlight-color: transparent;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.step-line {
height: 2px;
flex-grow: 1;
margin: 0 12px;
}
.card-shadow {
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
</style>
</head>
<body class="font-body-md text-on-surface">
<!-- TopAppBar - Map style_ keys from JSON -->
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim shadow-sm z-50">
<div class="flex items-center">
<button class="material-symbols-outlined text-primary dark:text-primary-fixed-dim hover:bg-surface-container-high transition-colors p-2 rounded-full">menu</button>
</div>
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">杜康合作伙伴</h1>
<div class="flex items-center">
</div>
</header>
<main class="pt-20 pb-32 px-margin-page max-w-lg mx-auto">
<!-- StepIndicator -->
<div class="flex items-center justify-between mb-stack-lg px-2">
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center mb-1">
<span class="material-symbols-outlined text-[18px]">check</span>
</div>
<span class="font-label-md text-label-md text-heritage-red">基本信息</span>
</div>
<div class="step-line bg-heritage-red"></div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center mb-1">
<span class="material-symbols-outlined text-[18px]">check</span>
</div>
<span class="font-label-md text-label-md text-heritage-red">照片上传</span>
</div>
<div class="step-line bg-surface-container-high"></div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-heritage-red text-white flex items-center justify-center mb-1 ring-4 ring-primary-fixed">
<span class="text-label-md font-bold">3</span>
</div>
<span class="font-label-md text-label-md text-heritage-red font-bold">结算资质</span>
</div>
</div>
<!-- Section Title -->
<div class="flex items-center gap-2 mb-stack-md">
<span class="material-symbols-outlined text-heritage-red">account_balance</span>
<h2 class="font-headline-md text-headline-md text-ink-black">结算信息配置</h2>
</div>
<!-- Form Section -->
<div class="bg-surface-container-lowest rounded-xl p-stack-md card-shadow border border-surface-container mb-stack-md space-y-stack-md">
<!-- FormField: 户主姓名 -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant ml-1">户主姓名 *</label>
<input class="w-full h-12 px-4 rounded-lg bg-surface border-transparent focus:border-heritage-red focus:ring-0 text-on-surface placeholder-subtle-gray transition-all" placeholder="请输入银行卡实名姓名" type="text">
</div>
<!-- FormField: 银行卡号 -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant ml-1">银行卡号 *</label>
<input class="w-full h-12 px-4 rounded-lg bg-surface border-transparent focus:border-heritage-red focus:ring-0 text-on-surface placeholder-subtle-gray transition-all" placeholder="请输入16-19位银行卡号" type="number">
</div>
<!-- FormField: 开户支行 -->
<div class="space-y-stack-sm">
<label class="block font-label-md text-label-md text-on-surface-variant ml-1">开户支行 *</label>
<input class="w-full h-12 px-4 rounded-lg bg-surface border-transparent focus:border-heritage-red focus:ring-0 text-on-surface placeholder-subtle-gray transition-all" placeholder="例如：中国工商银行洛阳分行" type="text">
</div>
</div>
<!-- InfoCard -->
<div class="bg-secondary-container bg-opacity-10 rounded-xl p-stack-md flex gap-3 border border-secondary-container border-opacity-20 mb-stack-lg">
<span class="material-symbols-outlined text-secondary shrink-0">info</span>
<p class="font-body-md text-body-md text-on-secondary-container">
请确保银行卡信息准确，以免影响每月的餐费结算。结算将按合同约定账期执行。
</p>
</div>
<!-- BrandWatermark -->
<div class="flex flex-col items-center justify-center opacity-30 mt-12 py-8">
<img class="w-12 h-12 mb-2 grayscale brightness-50" data-alt="A sophisticated digital rendering of a traditional Chinese red wax seal featuring the characters for Dukang in elegant calligraphy. The seal sits on a textured, off-white handmade paper background with subtle fiber inclusions. The lighting is warm and directional, casting a soft shadow that gives the seal a tactile, three-dimensional presence. The overall mood is one of heritage, authority, and timeless quality." src="https://lh3.googleusercontent.com/aida-public/AB6AXuATNhMs0RuZOyG8YJHEMtebj2ZjEwfq-dCbKPXCakqUtR0Ld1DUbWQcmLZqVqU99TxQuEL-chBTjyRtPM3MZqdmhti1CWH8GVx8HfzwsIo2i7P4UY6yWpwFesbI5BqWjXTfjpSIdJ-7lMltW5-f4psvWIwG9Pbrm7LV_L046rXs04u-_de3kGB3TUY72E-g3WRFsE9YoDf2se9wOuQaW3ic6tI9mGpKLDyXolj7bfZ64nt-x0eUmrl1Dnc5iTM60UJjcgUo6wWQzoA">
<p class="font-headline-lg-mobile text-headline-lg-mobile tracking-widest text-subtle-gray font-light">杜康 · 传承千年好客</p>
</div>
</main>
<!-- Bottom Action Bar (Contextual override for Shell) -->
<nav class="fixed bottom-0 left-0 w-full h-20 bg-surface-container-lowest flex items-center px-margin-page gap-4 shadow-[0px_-4px_20px_rgba(0,0,0,0.05)] z-50">
<button class="flex-1 h-12 rounded-xl border border-outline-variant text-on-surface-variant font-label-md text-label-md hover:bg-surface-container-low transition-colors active:scale-95 duration-200">
上一步
</button>
<button class="flex-[2] h-12 rounded-xl bg-heritage-red text-white font-headline-md text-headline-md shadow-lg shadow-primary/20 active:opacity-90 active:scale-95 transition-all duration-200">
提交审核
</button>
</nav>
<!-- BottomNavBar (Hidden for transactional flow) -->
<!-- Suppressed per "The Destination Rule" - Task-focused page with back action -->
<script>
// Micro-interaction for input focus
document.querySelectorAll('input').forEach(input => {
input.addEventListener('focus', () => {
input.parentElement.classList.add('scale-[1.01]');
});
input.addEventListener('blur', () => {
input.parentElement.classList.remove('scale-[1.01]');
});
});
// Simple validation simulation
const submitBtn = document.querySelector('button.bg-heritage-red');
submitBtn.addEventListener('click', () => {
const inputs = document.querySelectorAll('input');
let allFilled = true;
inputs.forEach(i => {
if(!i.value) {
i.classList.add('border-error');
allFilled = false;
} else {
i.classList.remove('border-error');
}
});
if(allFilled) {
submitBtn.innerHTML = '<span class="material-symbols-outlined animate-spin">progress_activity</span> 提交中...';
setTimeout(() => {
alert('提交成功！我们将会在3个工作日内完成审核。');
submitBtn.textContent = '提交审核';
}, 2000);
}
});
</script>
</body></html>
pages/partner/22_录入新门店_结算资质_5f7a87a5/meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"title": "录入新门店 - 结算资质",
"screenId": "5f7a87a55f8d40f4b5577eb5f291cb15",
"category": "partner",
"syncedAt": "2026-06-29T08:07:24.863Z"
}
pages/partner/22_录入新门店_结算资质_5f7a87a5/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

pages/partner/23-申请打款.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

pages/partner/3-首页.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

pages/partner/4-拦截配送.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

pages/partner/5-门店管理.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

pages/partner/6-录入门店.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

pages/partner/7-录入门店-合同.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

pages/partner/8-录入门店银行卡号.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

pages/partner/9-补发处理.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB