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

init

Browse Source
This commit is contained in:
Jacy
2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/user/10_门店详情编辑页_dd6ecea7/code.html
+342
View File
@@ -0,0 +1,342 @@
<!DOCTYPE html><html class="light" 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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@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">
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-dim": "#dadad8",
"surface-container-highest": "#e3e2e0",
"heritage-red": "#A61D24",
"surface-variant": "#e3e2e0",
"on-surface": "#1a1c1b",
"surface-bright": "#faf9f7",
"on-secondary-fixed": "#241a00",
"primary": "#820012",
"on-tertiary-container": "#c2cdc6",
"on-primary": "#ffffff",
"on-error-container": "#93000a",
"status-blue": "#2A6EBB",
"surface-tint": "#b3272c",
"surface-container-low": "#f4f3f1",
"primary-container": "#a61d24",
"inverse-on-surface": "#f1f1ef",
"secondary-fixed-dim": "#e9c349",
"tertiary-fixed": "#dae5dd",
"on-primary-fixed": "#410004",
"surface-container": "#efeeec",
"primary-fixed": "#ffdad7",
"error-container": "#ffdad6",
"secondary": "#735c00",
"background": "#faf9f7",
"on-error": "#ffffff",
"secondary-container": "#fed65b",
"on-secondary": "#ffffff",
"ink-black": "#1A1A1A",
"on-tertiary-fixed-variant": "#3f4943",
"inverse-primary": "#ffb3ae",
"on-tertiary-fixed": "#141e19",
"on-secondary-fixed-variant": "#574500",
"inverse-surface": "#2f3130",
"on-surface-variant": "#5a413f",
"error": "#ba1a1a",
"tertiary": "#37413b",
"outline-variant": "#e2bebc",
"on-primary-container": "#ffb9b4",
"surface-container-high": "#e9e8e6",
"on-background": "#1a1c1b",
"outline": "#8d706e",
"surface-container-lowest": "#ffffff",
"tertiary-fixed-dim": "#bec9c2",
"aged-amber": "#FFBF00",
"tertiary-container": "#4e5852",
"on-primary-fixed-variant": "#910817",
"secondary-fixed": "#ffe088",
"surface": "#faf9f7",
"on-tertiary": "#ffffff",
"subtle-gray": "#999999",
"primary-fixed-dim": "#ffb3ae",
"on-secondary-container": "#745c00",
"success-green": "#2D6A4F"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"stack-md": "16px",
"stack-sm": "4px",
"stack-lg": "32px",
"margin-page": "20px",
"gutter-card": "12px",
"base": "8px"
},
"fontFamily": {
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"label-md": ["Inter"],
"headline-xl": ["Manrope"],
"body-lg": ["Be Vietnam Pro"],
"headline-md": ["Manrope"],
"headline-lg": ["Manrope"],
"headline-lg-mobile": ["Manrope"]
},
"fontSize": {
"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-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
line-height: 1;
}
.notch-badge {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 8px 50%);
}
.custom-shadow {
shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
}
input:focus, textarea:focus {
outline: none;
border-color: #A61D24 !important;
ring: 1px #A61D24;
}
/* Mobile-first scroll behavior */
body {
-webkit-tap-highlight-color: transparent;
background-color: #faf9f7;
}
</style>
</head>
<body class="font-body-md text-on-surface">
<!-- TopAppBar -->
<header class="bg-surface-bright dark:bg-surface-dim text-heritage-red w-full top-0 sticky z-40 shadow-sm flex justify-between items-center px-margin-page h-16">
<div class="flex items-center gap-4">
<button class="active:scale-95 duration-150 p-2 -ml-2">
<span class="material-symbols-outlined text-2xl">arrow_back</span>
</button>
<h1 class="font-headline-md text-headline-md-mobile md:text-headline-md">门店详情</h1>
</div>
<div class="h-10 w-10 rounded-full overflow-hidden border border-outline-variant/30">
</div>
</header>
<main class="max-w-3xl mx-auto px-margin-page pt-stack-md pb-32 space-y-stack-md">
<!-- Section 1: Store Status Card -->
<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 justify-between items-center mb-4">
<h3 class="font-label-md text-label-md text-subtle-gray uppercase tracking-wider">运营状态</h3>
<span class="px-3 py-1 bg-success-green/10 text-success-green rounded-full font-label-md text-xs flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-success-green animate-pulse"></span>
营业中
</span>
</div>
<div class="grid grid-cols-3 gap-2">
<button class="flex-1 py-2 rounded-lg border border-heritage-red bg-heritage-red text-white text-body-md font-medium transition-all active:scale-95">
营业中
</button>
<button class="flex-1 py-2 rounded-lg border border-outline-variant text-on-surface-variant hover:bg-surface-container-high text-body-md transition-all active:scale-95">
暂停服务
</button>
<button class="flex-1 py-2 rounded-lg border border-outline-variant text-on-surface-variant hover:bg-surface-container-high text-body-md transition-all active:scale-95">
已下线
</button>
</div>
</section>
<!-- Section 2: Basic Information -->
<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 space-y-4">
<h3 class="font-headline-md text-on-surface mb-2 border-l-4 border-heritage-red pl-3">基本信息</h3>
<!-- Store Image -->
<div class="relative group aspect-video rounded-xl overflow-hidden mb-6 border border-outline-variant/20">
<img class="w-full h-full object-cover" data-alt="A wide-angle, high-end photography shot of a traditional Chinese luxury storefront. The architecture features exquisite dark wood carvings and a prominent red Dukang distillery plaque. The lighting is early evening golden hour, casting long, warm shadows and highlighting the texture of the stone entrance. The mood is distinguished and historically significant." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhXxH5suJxjt-FApbJCnPF9-_TPCAhW-5H56_7hGT9drTHIDW0sahcNak9IPbJHEwe1Y7KkYIykCbt8_pXhYL1NBpWeEGEeflH_otAzJ06lWOkyLe2gWKv7hGe-o4EMARs8pxalDNduzK8zCB2Y6zBI-coIeZsNTJA6wH1GHwJHQLes8pdaw6H7aj9f2QJaO6PizCWjJ_FcO4Bnlht1ZgLBHuDdYVTY-qxyocwaWVmGkXKco-wTpmeNFGkOhNaPxuipLaMfEa5pUQ">
<div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
<div class="bg-white/90 p-3 rounded-full shadow-lg flex items-center gap-2">
<span class="material-symbols-outlined text-heritage-red">photo_camera</span>
<span class="text-heritage-red font-medium text-sm">更换封面</span>
</div>
</div>
</div>
<!-- Fields -->
<div class="space-y-4">
<div>
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">门店名称</label>
<input class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-lg font-medium focus:border-heritage-red transition-colors" type="text" value="杜康大酒店（洛阳总店）">
</div>
<div>
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">联系电话</label>
<div class="relative">
<span class="absolute left-4 top-1/2 -translate-y-1/2 material-symbols-outlined text-subtle-gray text-xl">call</span>
<input class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg pl-11 pr-4 py-3 text-body-lg focus:border-heritage-red transition-colors" type="tel" value="0379-6888 8888">
</div>
</div>
<div>
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">门店地址</label>
<div class="relative group">
<textarea class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-md focus:border-heritage-red transition-colors pr-12" rows="2">河南省洛阳市涧西区中州西路188号杜康大厦1-3层</textarea>
<button class="absolute right-3 top-3 text-heritage-red p-1 bg-heritage-red/10 rounded-md active:scale-90 transition-transform">
<span class="material-symbols-outlined text-xl">location_on</span>
</button>
</div>
</div>
<div>
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">门店简介</label>
<textarea class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-md focus:border-heritage-red transition-colors" placeholder="请输入门店简介（10-500字）" rows="4">传承千年杜康酿酒技艺，本店不仅是杜康酒的品鉴中心，更是集餐饮、商务宴请、文化交流于一体的高端社交场所。室内装修融合古典意蕴与现代简约，旨在为宾客提供最正宗的酒文化体验。</textarea>
<div class="text-right mt-1">
<span class="text-xs text-subtle-gray font-label-md">112 / 500</span>
</div>
</div>
</div>
</section>
<!-- Section 3: Environment Photos -->
<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 justify-between items-end mb-4">
<h3 class="font-headline-md text-on-surface border-l-4 border-heritage-red pl-3">店内环境</h3>
<span class="font-label-md text-subtle-gray">最多12张</span>
</div>
<div class="grid grid-cols-3 gap-3">
<div class="relative aspect-square rounded-lg overflow-hidden border border-outline-variant/20">
<img class="w-full h-full object-cover" data-alt="Close-up detailed shot of a luxury private dining room in a high-end Chinese restaurant. The table is set with premium porcelain, crystal Dukang liquor glasses, and a centerpiece of fresh flowers. The lighting is dramatic and moody, utilizing warm internal lights and deep shadows to emphasize a sense of exclusivity and heritage." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEBbbm-JsKY5XjmTsDOPg0qbyqjv43IUIIbPpCWKOgjYUyh-8CV3RY4gr3WGJpIMth8WvwreLXmjKGlFyDiU_2YRLqRuXbwHSbsdR4_FcW-V4q5sjVkWJej8rx3HzgFXRiX9f-xtcUweBt1V2cULqtoHwND3BkXToJUJvyO7hbV2PL3MMH6JOLNDORJHkuifxRITH3geleLgpcaFTCsOI1vnxa3OPkJ6oQPy4fR-d32G-frna0c0KrXkYQD27NeQXvmUsawYysjNA">
<button class="absolute top-1 right-1 bg-black/50 text-white rounded-full p-1 leading-none hover:bg-heritage-red transition-colors">
<span class="material-symbols-outlined text-xs">close</span>
</button>
</div>
<div class="relative aspect-square rounded-lg overflow-hidden border border-outline-variant/20">
<img class="w-full h-full object-cover" data-alt="A photograph of a modern wine cellar featuring backlit wooden racks holding premium bottles of Dukang liquor. The space is minimalist and sleek, with polished concrete floors reflecting the warm amber glow from the liquor cabinets. The overall style is clean, modern, and high-tech, showcasing the brand's contemporary authority." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAq41eRQEwpPhHu-yAzUvGcZTFHmbOj6J-vVSgis2TVn0pSBvuVN2lWhATbI70ULgwQ02gvD3rPqdjtsz4Ua_mo5BwnASjhNhrH0sNfOod9OX_qH4FBsFeBOxWUUIAO8hb5ZRmqYkqE5P3lD7jlp9LsKWyLmozOK3FPuXEX6unCQR7QIZlUrMj5EjFEaCSwSGJh_FpyeDX5S6GIspDiotomAx04Mg9p-EgG_HI97D0-8Gq0Gq5E5AS3AQ_UY_7RwVrKEPfky5fLJz8">
<button class="absolute top-1 right-1 bg-black/50 text-white rounded-full p-1 leading-none hover:bg-heritage-red transition-colors">
<span class="material-symbols-outlined text-xs">close</span>
</button>
</div>
<div class="relative aspect-square rounded-lg overflow-hidden border border-outline-variant/20">
<img class="w-full h-full object-cover" data-alt="A wide view of a spacious hotel lobby inspired by ancient Chinese architecture but with modern structural elements. The ceiling features hanging lanterns that cast a soft glow over a seating area with plush furniture in heritage red and charcoal gray. The atmosphere is hospitable and grand, suitable for a flagship brand headquarters." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDErxfde49JRf-xx2ffZFOoS-ACC4pybtIVbs3PY_5R5-kZ6x9rQ9XOVVd-q-TGrde9qr6Qo8jXK8D95rNG3JYSwTO5YUWDWl7Ts_cTsofToLbHCvEc434vvbxPTXEzROZYS-gq66muvofIrB-fGW1g4hHWIyM2AAo01uPvgVNp4avs9C8kiH8HalRwAc5SpoLJILa-C8amvuKAp1BFBLUiibNREw17YUlwlyInZzcUX6B5BYg4fD-_Y973c1Q1uMo0xqxebOThPow">
<button class="absolute top-1 right-1 bg-black/50 text-white rounded-full p-1 leading-none hover:bg-heritage-red transition-colors">
<span class="material-symbols-outlined text-xs">close</span>
</button>
</div>
<button class="aspect-square rounded-lg border-2 border-dashed border-outline-variant flex flex-col items-center justify-center gap-1 text-subtle-gray hover:text-heritage-red hover:border-heritage-red hover:bg-heritage-red/5 transition-all active:scale-95">
<span class="material-symbols-outlined text-2xl">add</span>
<span class="text-xs font-label-md">添加照片</span>
</button>
</div>
</section>
<!-- Section 4: Contract & Settlement -->
<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 space-y-4">
<h3 class="font-headline-md text-on-surface mb-2 border-l-4 border-heritage-red pl-3">签约与结算</h3>
<div class="space-y-4">
<div>
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">合同扫描件</label>
<div class="flex items-center gap-4">
<div class="w-24 h-24 rounded-lg overflow-hidden border border-outline-variant/30 flex-shrink-0">
<img class="w-full h-full object-cover" data-alt="A high-quality scan of a business contract document on a clean desk surface. The document features official red seals and clear black typography. Beside the document sits a high-end fountain pen. The image is lit with soft natural daylight, conveying a sense of transparency, legality, and business integrity." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCiyrkgb9O3t0hN48YdiiR_WsuavXZhJeel8qQQi523HD_vOlBVCbMt0_yeiewIIvGj99g6U32kaZurYWlaL5IxWnhCd-QIxTOg3Tlli1lFSjjRRu2ufUxQtN1-OZNFh_tAhpeBjfQuXXWpxvzexFfRC0Fn0vQQWitR3KCSf5ND_CNIcnnHE3F3z6bZf__E-slvzVXybkNjucPMwbu0ufNqKgnl6QztmeA-TogAqx5ArNC5SID60YINvk-SONarxL5JOklo9yVhxZk">
</div>
<div class="flex-1">
<p class="text-xs text-subtle-gray mb-2">已上传《杜康品牌联营入驻合同_v2.pdf》</p>
<button class="text-heritage-red font-medium text-sm flex items-center gap-1 hover:underline">
<span class="material-symbols-outlined text-lg">upload_file</span>
重新上传
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">银行卡号</label>
<input class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-md focus:border-heritage-red transition-colors" type="text" value="6222 0000 1111 2222 888">
</div>
<div>
<label class="block font-label-md text-subtle-gray mb-1.5 ml-1">持卡人姓名</label>
<input class="w-full bg-surface-bright border border-outline-variant/50 rounded-lg px-4 py-3 text-body-md focus:border-heritage-red transition-colors" type="text" value="王大伟">
</div>
</div>
</div>
</section>
<!-- Section 5: Management Info (Readonly) -->
<section class="bg-surface-container rounded-xl p-stack-md border border-outline-variant/10 space-y-4">
<h3 class="font-headline-md text-on-surface mb-2 border-l-4 border-subtle-gray pl-3">管理信息</h3>
<div class="grid grid-cols-2 gap-y-4 gap-x-6">
<div>
<label class="block font-label-md text-subtle-gray mb-0.5">关联城市合伙人</label>
<p class="text-body-md font-medium text-on-surface">张三 (138 1234 5678)</p>
</div>
<div>
<label class="block font-label-md text-subtle-gray mb-0.5">申请类型</label>
<p class="text-body-md font-medium text-on-surface">首次入驻</p>
</div>
<div>
<label class="block font-label-md text-subtle-gray mb-0.5">入驻时间</label>
<p class="text-body-md font-medium text-on-surface">2023-10-15</p>
</div>
<div>
<label class="block font-label-md text-subtle-gray mb-0.5">后台ID</label>
<p class="text-body-md font-mono text-on-surface">DK-ST-20231015-01</p>
</div>
</div>
</section>
</main>
<!-- Sticky Bottom Bar -->
<footer class="fixed bottom-0 left-0 w-full z-50 bg-white/80 backdrop-blur-md border-t border-outline-variant/20 px-margin-page py-4 pb-safe-offset-4">
<div class="max-w-3xl mx-auto flex items-center gap-4">
<button class="flex-[1] h-12 rounded-xl border border-outline-variant text-on-surface-variant font-medium active:scale-95 transition-all">
取消
</button>
<button class="flex-[2] h-12 rounded-xl bg-heritage-red text-white font-medium shadow-lg shadow-heritage-red/20 active:scale-95 active:bg-primary transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-xl">save</span>
保存修改
</button>
</div>
</footer>
<!-- Safe area padding for iPhones -->
<style>
.pb-safe-offset-4 {
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
</style>
<script>
// Simple Interaction logic
document.querySelectorAll('.grid > button').forEach(btn => {
btn.addEventListener('click', function() {
// If it's the status buttons
if (this.parentElement.parentElement.querySelector('h3').textContent.includes('状态')) {
this.parentElement.querySelectorAll('button').forEach(b => {
b.classList.remove('bg-heritage-red', 'text-white', 'border-heritage-red');
b.classList.add('border-outline-variant', 'text-on-surface-variant');
});
this.classList.remove('border-outline-variant', 'text-on-surface-variant');
this.classList.add('bg-heritage-red', 'text-white', 'border-heritage-red');
}
});
});
// Toggle focus state for visual feedback
const inputs = document.querySelectorAll('input, textarea');
inputs.forEach(input => {
input.addEventListener('focus', () => {
input.parentElement.classList.add('scale-[1.01]');
input.parentElement.style.transition = 'transform 0.2s ease';
});
input.addEventListener('blur', () => {
input.parentElement.classList.remove('scale-[1.01]');
});
});
</script>
</body></html>