feat: 技术支持工单/企微权限/开发版本管理/消息推送等迭代
This commit is contained in:
@@ -1,306 +0,0 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport">
|
||||
<title>HQ Management - 新增开城</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&family=Be+Vietnam+Pro:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed-dim": "#bec9c2",
|
||||
"surface-container-highest": "#e3e2e0",
|
||||
"success-green": "#2D6A4F",
|
||||
"tertiary": "#37413b",
|
||||
"surface-variant": "#e3e2e0",
|
||||
"surface-tint": "#b3272c",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-dim": "#dadad8",
|
||||
"surface-container-high": "#e9e8e6",
|
||||
"on-primary-fixed-variant": "#910817",
|
||||
"outline": "#8d706e",
|
||||
"background": "#faf9f7",
|
||||
"surface": "#faf9f7",
|
||||
"on-tertiary-fixed-variant": "#3f4943",
|
||||
"inverse-surface": "#2f3130",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary": "#735c00",
|
||||
"heritage-red": "#A61D24",
|
||||
"on-tertiary-container": "#c2cdc6",
|
||||
"on-secondary-container": "#745c00",
|
||||
"aged-amber": "#FFBF00",
|
||||
"surface-container": "#efeeec",
|
||||
"secondary-fixed-dim": "#e9c349",
|
||||
"status-blue": "#2A6EBB",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-fixed-dim": "#ffb3ae",
|
||||
"on-primary-container": "#ffb9b4",
|
||||
"outline-variant": "#e2bebc",
|
||||
"inverse-on-surface": "#f1f1ef",
|
||||
"ink-black": "#1A1A1A",
|
||||
"subtle-gray": "#999999",
|
||||
"surface-container-low": "#f4f3f1",
|
||||
"surface-bright": "#faf9f7",
|
||||
"error-container": "#ffdad6",
|
||||
"error": "#ba1a1a",
|
||||
"on-surface-variant": "#5a413f",
|
||||
"on-secondary-fixed": "#241a00",
|
||||
"on-primary-fixed": "#410004",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#4e5852",
|
||||
"on-secondary-fixed-variant": "#574500",
|
||||
"on-tertiary-fixed": "#141e19",
|
||||
"secondary-fixed": "#ffe088",
|
||||
"tertiary-fixed": "#dae5dd",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#ffb3ae",
|
||||
"primary-fixed": "#ffdad7",
|
||||
"secondary-container": "#fed65b",
|
||||
"on-primary": "#ffffff",
|
||||
"primary-container": "#a61d24",
|
||||
"on-surface": "#1a1c1b",
|
||||
"on-background": "#1a1c1b",
|
||||
"primary": "#820012"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-page": "20px",
|
||||
"stack-lg": "32px",
|
||||
"stack-sm": "4px",
|
||||
"stack-md": "16px",
|
||||
"base": "8px",
|
||||
"gutter-card": "12px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-lg": ["Be Vietnam Pro"],
|
||||
"headline-xl": ["Manrope"],
|
||||
"headline-md": ["Manrope"],
|
||||
"body-md": ["Be Vietnam Pro"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"coupon-amount": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
||||
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
||||
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-input-focus:focus-within {
|
||||
border-color: #A61D24;
|
||||
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
.ios-momentum {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
/* Custom scrollbar for better aesthetic */
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #e3e2e0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen text-on-surface">
|
||||
<!-- TopAppBar from JSON Guidance -->
|
||||
<header class="w-full top-0 sticky bg-surface shadow-sm flex items-center justify-between px-margin-page h-16 w-full z-50">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 -ml-2 rounded-full hover:bg-surface-container-high transition-colors active:scale-95 duration-150 text-primary">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline-md text-headline-md-mobile md:text-headline-md text-primary">新增开城</h1>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<button class="p-2 rounded-full hover:bg-surface-container-high transition-colors active:scale-95 duration-150 text-primary">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-1 overflow-y-auto pb-32 ios-momentum">
|
||||
<div class="max-w-md mx-auto px-margin-page pt-stack-md space-y-6">
|
||||
<!-- Hero Decorative Header -->
|
||||
<div class="relative overflow-hidden rounded-xl bg-primary h-32 flex items-center px-6 text-white shadow-lg">
|
||||
|
||||
<div class="relative z-10">
|
||||
<h2 class="font-headline-lg text-headline-lg-mobile text-white/90">扩充版图</h2>
|
||||
<p class="font-label-md text-label-md opacity-80 uppercase tracking-widest mt-1">Expansion & Partnership</p>
|
||||
</div>
|
||||
<div class="absolute right-[-20px] top-[-20px] opacity-10">
|
||||
<span class="material-symbols-outlined text-[120px]" style="font-variation-settings: "FILL" 1;">location_city</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- City Info Section -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-5 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-1 h-4 bg-heritage-red rounded-full"></div>
|
||||
<h3 class="font-headline-md text-headline-md">城市及合伙人信息</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- Dropdown -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">城市名称</label>
|
||||
<div class="relative group">
|
||||
<select class="w-full h-12 pl-4 pr-10 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 appearance-none font-body-md text-body-md transition-all">
|
||||
<option disabled="" selected="" value="">选择目标城市</option>
|
||||
<option value="zhengzhou">郑州市 (Zhengzhou)</option>
|
||||
<option value="luoyang">洛阳市 (Luoyang)</option>
|
||||
<option value="kaifeng">开封市 (Kaifeng)</option>
|
||||
<option value="anyang">安阳市 (Anyang)</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-subtle-gray">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Text Inputs -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">合伙人姓名</label>
|
||||
<input class="w-full h-12 px-4 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 font-body-md text-body-md transition-all placeholder:text-subtle-gray/60" placeholder="输入真实姓名" type="text">
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
|
||||
|
||||
</div><div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">合伙人手机号</label>
|
||||
<div class="flex items-center bg-surface-container rounded-lg border-transparent overflow-hidden group focus-within:ring-1 focus-within:ring-heritage-red">
|
||||
<span class="pl-4 pr-2 font-label-md text-label-md text-subtle-gray border-r border-outline-variant/20">+86</span>
|
||||
<input class="flex-1 h-12 px-3 bg-transparent border-none focus:ring-0 font-body-md text-body-md placeholder:text-subtle-gray/60" placeholder="输入11位手机号" type="tel">
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5 pt-4 border-t border-outline-variant/10">
|
||||
|
||||
|
||||
</div></div>
|
||||
</section>
|
||||
<!-- Contract & Legal Section -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-5 shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-outline-variant/10">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-1 h-4 bg-heritage-red rounded-full"></div>
|
||||
<h3 class="font-headline-md text-headline-md">签约与财务资质</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- Image Upload Placeholder -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">签约合同图片</label>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="aspect-[3/2] bg-surface-container-low rounded-lg border-2 border-dashed border-outline-variant/50 flex flex-col items-center justify-center cursor-pointer hover:border-heritage-red/50 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-subtle-gray mb-1">add_a_photo</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">上传首页</span>
|
||||
</div>
|
||||
<div class="aspect-[3/2] bg-surface-container-low rounded-lg border-2 border-dashed border-outline-variant/50 flex flex-col items-center justify-center cursor-pointer hover:border-heritage-red/50 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-subtle-gray mb-1">add_a_photo</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">上传末页盖章</span>
|
||||
</div>
|
||||
<div class="aspect-[3/2] bg-surface-container-low rounded-lg border-2 border-dashed border-outline-variant/50 flex flex-col items-center justify-center cursor-pointer hover:border-heritage-red/50 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-subtle-gray mb-1">upload_file</span>
|
||||
<span class="font-label-md text-label-md text-subtle-gray">上传电子附件</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">结算银行卡号</label>
|
||||
<input class="w-full h-12 px-4 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 font-body-md text-body-md transition-all placeholder:text-subtle-gray/60" placeholder="输入银行卡号" type="number">
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">开户银行</label>
|
||||
<input class="w-full h-12 px-4 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 font-body-md text-body-md transition-all placeholder:text-subtle-gray/60" placeholder="输入开户银行名称" type="text">
|
||||
</div><div class="space-y-1.5">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant block ml-1">开户主姓名</label>
|
||||
<input class="w-full h-12 px-4 bg-surface-container rounded-lg border-transparent focus:border-heritage-red focus:ring-0 font-body-md text-body-md transition-all placeholder:text-subtle-gray/60" placeholder="须与合伙人姓名一致" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Hint/Info -->
|
||||
<div class="flex items-start gap-3 px-2 py-3 bg-aged-amber/10 rounded-lg border border-aged-amber/20">
|
||||
<span class="material-symbols-outlined text-aged-amber text-[20px]">info</span>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
|
||||
系统将根据手机号<span class="text-heritage-red font-medium">自动生成</span>管理员账号。开城成功后，初始密码将以短信形式发送至合伙人手机。
|
||||
</p>
|
||||
</div>
|
||||
<!-- Spacing for bottom action -->
|
||||
<div class="h-8"></div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Fixed Bottom Action Bar -->
|
||||
<div class="fixed bottom-0 left-0 w-full bg-surface-container-lowest px-margin-page pt-4 pb-8 shadow-[0px_-4px_24px_rgba(0,0,0,0.06)] z-50">
|
||||
<div class="max-w-md mx-auto"><div class="flex gap-3">
|
||||
<button class="flex-1 h-14 border-2 border-heritage-red text-heritage-red rounded-xl font-headline-md text-headline-md active:scale-[0.98] transition-all flex items-center justify-center gap-2 bg-transparent">
|
||||
<span class="material-symbols-outlined">save</span>
|
||||
<span class="">暂存</span>
|
||||
</button>
|
||||
<button class="flex-[2] h-14 bg-heritage-red text-white rounded-xl font-headline-md text-headline-md shadow-md active:scale-[0.98] transition-all flex items-center justify-center gap-2 group" id="submitBtn">
|
||||
<span class="">保存并开城</span>
|
||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">rocket_launch</span>
|
||||
</button>
|
||||
</div></div>
|
||||
</div>
|
||||
<!-- Micro-interaction Script -->
|
||||
<script>
|
||||
document.getElementById('submitBtn').addEventListener('click', function() {
|
||||
const btn = this;
|
||||
const originalContent = btn.innerHTML;
|
||||
|
||||
// Simple visual feedback
|
||||
btn.innerHTML = `
|
||||
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span>正在处理...</span>
|
||||
`;
|
||||
btn.classList.add('opacity-80');
|
||||
btn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = `
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
<span>开城指令已发送</span>
|
||||
`;
|
||||
btn.classList.replace('bg-heritage-red', 'bg-success-green');
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalContent;
|
||||
btn.classList.replace('bg-success-green', 'bg-heritage-red');
|
||||
btn.classList.remove('opacity-80');
|
||||
btn.disabled = false;
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user