277 lines
16 KiB
HTML
277 lines
16 KiB
HTML
<!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;800&family=Inter:wght@400;500;600&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-primary-fixed-variant": "#910817",
|
|
"primary-fixed-dim": "#ffb3ae",
|
|
"on-tertiary-fixed": "#141e19",
|
|
"surface-container": "#efeeec",
|
|
"surface": "#faf9f7",
|
|
"on-primary-container": "#ffb9b4",
|
|
"tertiary-container": "#4e5852",
|
|
"status-blue": "#2A6EBB",
|
|
"outline": "#8d706e",
|
|
"tertiary": "#37413b",
|
|
"on-secondary": "#ffffff",
|
|
"surface-tint": "#b3272c",
|
|
"on-error-container": "#93000a",
|
|
"on-surface-variant": "#5a413f",
|
|
"on-tertiary-fixed-variant": "#3f4943",
|
|
"surface-variant": "#e3e2e0",
|
|
"on-secondary-fixed": "#241a00",
|
|
"on-secondary-container": "#745c00",
|
|
"on-primary": "#ffffff",
|
|
"primary-container": "#a61d24",
|
|
"background": "#faf9f7",
|
|
"inverse-on-surface": "#f1f1ef",
|
|
"aged-amber": "#FFBF00",
|
|
"error": "#ba1a1a",
|
|
"inverse-surface": "#2f3130",
|
|
"primary": "#820012",
|
|
"secondary": "#735c00",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-container-highest": "#e3e2e0",
|
|
"tertiary-fixed": "#dae5dd",
|
|
"surface-dim": "#dadad8",
|
|
"heritage-red": "#A61D24",
|
|
"on-secondary-fixed-variant": "#574500",
|
|
"on-background": "#1a1c1b",
|
|
"inverse-primary": "#ffb3ae",
|
|
"tertiary-fixed-dim": "#bec9c2",
|
|
"surface-container-low": "#f4f3f1",
|
|
"on-error": "#ffffff",
|
|
"surface-container-high": "#e9e8e6",
|
|
"on-tertiary-container": "#c2cdc6",
|
|
"primary-fixed": "#ffdad7",
|
|
"error-container": "#ffdad6",
|
|
"surface-bright": "#faf9f7",
|
|
"secondary-fixed-dim": "#e9c349",
|
|
"outline-variant": "#e2bebc",
|
|
"success-green": "#2D6A4F",
|
|
"on-primary-fixed": "#410004",
|
|
"on-surface": "#1a1c1b",
|
|
"ink-black": "#1A1A1A",
|
|
"secondary-container": "#fed65b",
|
|
"surface-container-lowest": "#ffffff",
|
|
"subtle-gray": "#999999",
|
|
"secondary-fixed": "#ffe088"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"base": "8px",
|
|
"stack-sm": "4px",
|
|
"stack-md": "16px",
|
|
"margin-page": "20px",
|
|
"gutter-card": "12px",
|
|
"stack-lg": "32px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Manrope"],
|
|
"label-md": ["Inter"],
|
|
"headline-xl": ["Manrope"],
|
|
"coupon-amount": ["Manrope"],
|
|
"headline-lg-mobile": ["Manrope"],
|
|
"headline-lg": ["Manrope"],
|
|
"body-md": ["Be Vietnam Pro"],
|
|
"body-lg": ["Be Vietnam Pro"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
|
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
|
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #faf9f7;
|
|
color: #1a1c1b;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.input-focus-ring:focus-within {
|
|
border-color: #A61D24;
|
|
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
|
|
}
|
|
.custom-shadow {
|
|
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body-md text-body-md min-h-screen pb-32">
|
|
<!-- TopAppBar -->
|
|
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-page h-16 bg-surface dark:bg-surface-dim shadow-[0px_4px_20px_rgba(166,29,36,0.05)]">
|
|
<div class="flex items-center gap-3">
|
|
<button class="active:scale-95 transition-transform hover:opacity-80">
|
|
<span class="material-symbols-outlined text-primary dark:text-primary-fixed">arrow_back</span>
|
|
</button>
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">编辑城市信息</h1>
|
|
</div>
|
|
|
|
</header>
|
|
<main class="mt-20 px-margin-page space-y-stack-md">
|
|
<!-- Section 1: City Status -->
|
|
<section class="bg-surface-container-lowest p-5 rounded-xl custom-shadow space-y-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-heritage-red">location_on</span>
|
|
<h2 class="font-headline-md text-headline-md text-ink-black">城市运营状态</h2>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<button class="status-btn flex flex-col items-center justify-center py-4 rounded-lg border-2 border-heritage-red bg-primary-container/5 text-heritage-red transition-all" id="status-active" onclick="setStatus('active')">
|
|
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
<span class="font-label-md text-label-md">已开城</span>
|
|
</button>
|
|
<button class="status-btn flex flex-col items-center justify-center py-4 rounded-lg border-2 border-surface-variant text-on-surface-variant transition-all hover:bg-surface-container-low" id="status-paused" onclick="setStatus('paused')">
|
|
<span class="material-symbols-outlined mb-1">pause_circle</span>
|
|
<span class="font-label-md text-label-md">暂停</span>
|
|
</button>
|
|
<button class="status-btn flex flex-col items-center justify-center py-4 rounded-lg border-2 border-surface-variant text-on-surface-variant transition-all hover:bg-surface-container-low" id="status-inactive" onclick="setStatus('inactive')">
|
|
<span class="material-symbols-outlined mb-1">cancel</span>
|
|
<span class="font-label-md text-label-md">未开城</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- Section 2: Partner Info -->
|
|
<section class="bg-surface-container-lowest p-5 rounded-xl custom-shadow space-y-4">
|
|
<div class="flex items-center gap-2 border-b border-surface-variant pb-3">
|
|
<span class="material-symbols-outlined text-heritage-red">handshake</span>
|
|
<h2 class="font-headline-md text-headline-md text-ink-black">合伙人信息</h2>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="space-y-1.5">
|
|
<label class="font-label-md text-label-md text-subtle-gray ml-1">城市名称 (只读)</label>
|
|
<div class="bg-surface-container-low px-4 py-3 rounded-lg border border-surface-variant flex items-center">
|
|
<span class="text-on-surface-variant font-medium">洛阳市</span>
|
|
<span class="material-symbols-outlined text-subtle-gray ml-auto text-[18px]">lock</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="font-label-md text-label-md text-on-surface-variant ml-1">合伙人姓名</label>
|
|
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black" placeholder="输入姓名" type="text" value="王德礼">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="font-label-md text-label-md text-on-surface-variant ml-1">合伙人手机号</label>
|
|
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black" placeholder="输入手机号" type="tel" value="138 **** 8888">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Section 3: Contract & Financials -->
|
|
<section class="bg-surface-container-lowest p-5 rounded-xl custom-shadow space-y-5">
|
|
<div class="flex items-center gap-2 border-b border-surface-variant pb-3">
|
|
<span class="material-symbols-outlined text-heritage-red">account_balance_wallet</span>
|
|
<h2 class="font-headline-md text-headline-md text-ink-black">合同与结算</h2>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md text-on-surface-variant ml-1">签约合同扫描件</label>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="relative aspect-[3/4] rounded-lg border border-surface-variant overflow-hidden group">
|
|
<div class="w-full h-full bg-cover bg-center" data-alt="A high-resolution photograph of a legally binding business contract for Dukang liquor distribution. The document features elegant Chinese calligraphy and official red circular stamps. It is placed on a textured fine-paper background with warm, editorial lighting and subtle red accents from the brand's identity. The aesthetic is professional, authoritative, and grounded in heritage." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBhEi28C6gKasHQkK7KyxwKUJp4qRmW0j22c6-JiiXf76M_XOKU3Gy7NphH0o2lVtEQLmzyRZTiDjQgPY1xaQ9Y0J8nTdBSsoyeY5v-xeR6M0yUZZfgq79uTelRZafGooPaM7GqkkPTQZek43RCtdcq7l7IQ11RSol5tH0-0U6xvOoc2V2W1zdnOiFoUdYs76YnVSvae7CFx4fQgPMAlcDocgwYUj2gpRkm85UexA7c0htCyHLRZ5sJDdOZSKCXJFArCxC8GUTUvoM')"></div>
|
|
<button class="absolute top-2 right-2 bg-black/50 text-white w-7 h-7 rounded-full flex items-center justify-center backdrop-blur-sm active:scale-90 transition-transform">
|
|
<span class="material-symbols-outlined text-[16px]">close</span>
|
|
</button>
|
|
</div>
|
|
<button class="aspect-[3/4] rounded-lg border-2 border-dashed border-surface-variant bg-surface-container-low flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red hover:border-heritage-red transition-all group active:scale-95">
|
|
<span class="material-symbols-outlined text-[32px] mb-2 group-hover:scale-110 transition-transform">add_a_photo</span>
|
|
<span class="font-label-md text-label-md">上传合同</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-md text-label-md text-on-surface-variant ml-1">上传电子附件</label>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button class="aspect-[3/4] rounded-lg border-2 border-dashed border-surface-variant bg-surface-container-low flex flex-col items-center justify-center text-subtle-gray hover:text-heritage-red hover:border-heritage-red transition-all group active:scale-95">
|
|
<span class="material-symbols-outlined text-[32px] mb-2 group-hover:scale-110 transition-transform">upload_file</span>
|
|
<span class="font-label-md text-label-md">上传附件</span>
|
|
</button>
|
|
</div>
|
|
</div><div class="space-y-1.5">
|
|
<label class="font-label-md text-label-md text-on-surface-variant ml-1">结算银行卡号</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black pl-11" placeholder="输入卡号" type="text" value="6222 **** **** 9012">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-gray">credit_card</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="font-label-md text-label-md text-on-surface-variant ml-1">开户主姓名</label>
|
|
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black" placeholder="输入开户名" type="text" value="洛阳杜康商贸有限公司">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="font-label-md text-label-md text-on-surface-variant ml-1">开户银行 (结算用)</label>
|
|
<input class="w-full bg-white px-4 py-3 rounded-lg border border-surface-variant focus:outline-none focus:border-heritage-red focus:ring-1 focus:ring-heritage-red/20 transition-all font-medium text-ink-black" placeholder="输入结算银行名称" type="text" value="中国工商银行">
|
|
</div></div>
|
|
</section>
|
|
</main>
|
|
<!-- Bottom Bar -->
|
|
<footer class="fixed bottom-0 left-0 w-full z-50 bg-surface/80 backdrop-blur-md px-margin-page py-4 pb-safe-area-inset-bottom flex justify-between items-center shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] border-t border-surface-variant/30">
|
|
<button class="flex-1 mr-3 h-12 rounded-xl border border-outline-variant text-on-surface-variant font-medium active:scale-95 transition-transform">
|
|
取消
|
|
</button>
|
|
<button class="flex-[2] h-12 bg-heritage-red text-white rounded-xl font-medium shadow-lg shadow-heritage-red/20 active:scale-[0.98] transition-all flex items-center justify-center gap-2" id="saveBtn">
|
|
<span class="material-symbols-outlined text-[20px]">save</span>
|
|
保存修改
|
|
</button>
|
|
</footer>
|
|
<script>
|
|
function setStatus(status) {
|
|
const btns = document.querySelectorAll('.status-btn');
|
|
btns.forEach(btn => {
|
|
btn.classList.remove('border-heritage-red', 'bg-primary-container/5', 'text-heritage-red');
|
|
btn.classList.add('border-surface-variant', 'text-on-surface-variant');
|
|
const icon = btn.querySelector('.material-symbols-outlined');
|
|
icon.style.fontVariationSettings = "'FILL' 0";
|
|
});
|
|
|
|
const activeBtn = document.getElementById('status-' + status);
|
|
activeBtn.classList.add('border-heritage-red', 'bg-primary-container/5', 'text-heritage-red');
|
|
activeBtn.classList.remove('border-surface-variant', 'text-on-surface-variant');
|
|
const activeIcon = activeBtn.querySelector('.material-symbols-outlined');
|
|
activeIcon.style.fontVariationSettings = "'FILL' 1";
|
|
}
|
|
|
|
document.getElementById('saveBtn').addEventListener('click', function() {
|
|
const btn = this;
|
|
const originalContent = btn.innerHTML;
|
|
btn.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> 保存中...';
|
|
btn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<span class="material-symbols-outlined">check</span> 修改成功';
|
|
btn.classList.replace('bg-heritage-red', 'bg-success-green');
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = originalContent;
|
|
btn.classList.replace('bg-success-green', 'bg-heritage-red');
|
|
btn.disabled = false;
|
|
}, 2000);
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
|
|
|
|
</body></html> |