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/22_新增地址页面_d74560d0/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" 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=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">
<!-- Tailwind Config Execution -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"primary": "#820012",
"on-tertiary": "#ffffff",
"error-container": "#ffdad6",
"secondary": "#735c00",
"outline-variant": "#e2bebc",
"tertiary-container": "#4e5852",
"on-secondary-fixed-variant": "#574500",
"tertiary-fixed-dim": "#bec9c2",
"surface-container-highest": "#e3e2e0",
"on-background": "#1a1c1b",
"heritage-red": "#A61D24",
"primary-container": "#a61d24",
"background": "#faf9f7",
"surface-container-lowest": "#ffffff",
"on-tertiary-fixed-variant": "#3f4943",
"on-primary-container": "#ffb9b4",
"surface-dim": "#dadad8",
"secondary-fixed-dim": "#e9c349",
"tertiary": "#37413b",
"on-error-container": "#93000a",
"surface-tint": "#b3272c",
"error": "#ba1a1a",
"surface-variant": "#e3e2e0",
"secondary-container": "#fed65b",
"on-secondary-fixed": "#241a00",
"on-surface": "#1a1c1b",
"success-green": "#2D6A4F",
"inverse-surface": "#2f3130",
"surface": "#faf9f7",
"on-primary-fixed-variant": "#910817",
"on-primary": "#ffffff",
"on-error": "#ffffff",
"inverse-primary": "#ffb3ae",
"outline": "#8d706e",
"primary-fixed": "#ffdad7",
"surface-container-high": "#e9e8e6",
"on-surface-variant": "#5a413f",
"surface-bright": "#faf9f7",
"ink-black": "#1A1A1A",
"subtle-gray": "#999999",
"secondary-fixed": "#ffe088",
"on-tertiary-fixed": "#141e19",
"surface-container-low": "#f4f3f1",
"on-secondary": "#ffffff",
"inverse-on-surface": "#f1f1ef",
"aged-amber": "#FFBF00",
"status-blue": "#2A6EBB",
"primary-fixed-dim": "#ffb3ae",
"on-secondary-container": "#745c00",
"surface-container": "#efeeec",
"tertiary-fixed": "#dae5dd",
"on-tertiary-container": "#c2cdc6",
"on-primary-fixed": "#410004"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"base": "8px",
"stack-md": "16px",
"stack-lg": "32px",
"margin-page": "20px",
"stack-sm": "4px",
"gutter-card": "12px"
},
"fontFamily": {
"body-lg": ["Be Vietnam Pro"],
"headline-lg": ["Manrope"],
"coupon-amount": ["Manrope"],
"body-md": ["Be Vietnam Pro"],
"headline-xl": ["Manrope"],
"headline-md": ["Manrope"],
"headline-lg-mobile": ["Manrope"],
"label-md": ["Inter"]
},
"fontSize": {
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
.form-input-focus:focus-within {
border-color: #A61D24;
box-shadow: 0 0 0 1px rgba(166, 29, 36, 0.1);
}
.custom-toggle:checked + .toggle-dot {
transform: translateX(100%);
background-color: #ffffff;
}
.custom-toggle:checked ~ .toggle-bg {
background-color: #A61D24;
}
/* Ambient scroll bar for premium feel */
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: #faf9f7;
}
::-webkit-scrollbar-thumb {
background: #e2bebc;
border-radius: 10px;
}
</style>
</head>
<body class="bg-background text-on-surface font-body-md min-h-screen pb-32">
<!-- TopAppBar Execution -->
<header class="fixed top-0 w-full z-50 bg-background flex items-center justify-between px-margin-page h-14 w-full">
<button aria-label="返回" class="active:scale-95 transition-transform text-primary">
<span class="material-symbols-outlined">arrow_back</span>
</button>
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-semibold text-primary">添加收货地址</h1>
<div class="w-6"></div> <!-- Spacer for centering -->
</header>
<main class="pt-20 px-margin-page">
<!-- Decoration Background Element -->
<div class="fixed top-0 right-0 -z-10 opacity-5 pointer-events-none">
<div class="w-64 h-64 bg-contain bg-no-repeat" data-alt="A subtle, high-end background pattern featuring traditional Chinese cloud motifs and calligraphy brushstrokes. The design is minimalist, rendered in soft amber and pale gold tones on an off-white paper-textured background. The aesthetic is sophisticated and evokes the heritage of the Dukang liquor brand, maintaining a premium, tranquil mood." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDmJPCuB68Dg74VEHsaXsNtZzRmYEViYHJXRRLVICTK9XTsDj27gnq84WZL_Fj2GUWj0LXL5XiZ7FElLOPjdiIsMznQC9n9L2o512SIGKTmEuHiMvopwTnGKlzHsASd3LV9ocgAuN4M1zO5blxr4o35pSGb3hpIIItpaaONK5QctwL210uT8PyKyWt3Wb2xY8cXBwgqhwIdIkQg3unLwC_5FLcVfMwv9zH-N9ZskV3zlmhKXgGrduFoXS-S14RHdrzHqr4ReF_QcXs')"></div>
</div>
<!-- Form Section -->
<section class="space-y-stack-md">
<!-- Card Container -->
<div class="bg-white rounded-xl p-stack-md shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-primary/5">
<!-- Contact Name -->
<div class="mb-6">
<label class="block font-label-md text-on-surface-variant mb-2 ml-1">收货人姓名</label>
<div class="form-input-focus flex items-center border-b border-outline-variant py-2 transition-all">
<input class="w-full bg-transparent border-none focus:ring-0 text-body-lg font-body-lg placeholder:text-subtle-gray" placeholder="请输入姓名" type="text">
<span class="material-symbols-outlined text-outline text-sm">person</span>
</div>
</div>
<!-- Phone Number -->
<div class="mb-6">
<label class="block font-label-md text-on-surface-variant mb-2 ml-1">手机号码</label>
<div class="form-input-focus flex items-center border-b border-outline-variant py-2 transition-all">
<span class="text-body-lg font-body-lg mr-2 text-on-surface-variant">+86</span>
<input class="w-full bg-transparent border-none focus:ring-0 text-body-lg font-body-lg placeholder:text-subtle-gray" placeholder="请输入手机号" type="tel">
<span class="material-symbols-outlined text-outline text-sm">smartphone</span>
</div>
</div>
<!-- Region Picker -->
<div class="mb-6 cursor-pointer group" onclick="togglePicker()">
<label class="block font-label-md text-on-surface-variant mb-2 ml-1">所在地区</label>
<div class="flex items-center justify-between border-b border-outline-variant py-2 group-active:opacity-70 transition-all">
<div class="text-body-lg font-body-lg text-subtle-gray" id="region-display">请选择省/市/区</div>
<span class="material-symbols-outlined text-outline">chevron_right</span>
</div>
</div>
<!-- Detailed Address -->
<div class="mb-2">
<label class="block font-label-md text-on-surface-variant mb-2 ml-1">详细地址</label>
<div class="form-input-focus border border-outline-variant rounded-lg p-3 transition-all bg-surface-container-low">
<textarea class="w-full bg-transparent border-none focus:ring-0 text-body-lg font-body-lg placeholder:text-subtle-gray resize-none" placeholder="街道、门牌号、小区名称等" rows="3"></textarea>
</div>
</div>
</div>
<!-- Default Address Toggle -->
<div class="bg-white rounded-xl p-stack-md flex items-center justify-between shadow-[0px_4px_20px_rgba(166,29,36,0.05)] border border-primary/5">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center">
<span class="material-symbols-outlined text-primary text-xl" style="font-variation-settings: 'FILL' 1;">stars</span>
</div>
<div>
<h3 class="font-headline-md text-headline-md text-on-surface">设为默认地址</h3>
<p class="text-label-md font-label-md text-on-surface-variant">每次下单时将优先使用此地址</p>
</div>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only peer custom-toggle" type="checkbox">
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer transition-all toggle-bg"></div>
<div class="absolute left-[2px] top-[2px] bg-white border-gray-300 border rounded-full h-5 w-5 transition-all toggle-dot"></div>
</label>
</div>
</section>
<!-- Location Tip Section -->
<div class="mt-8 flex items-center justify-center gap-2 text-primary/60">
<span class="material-symbols-outlined text-lg">location_on</span>
<span class="text-label-md font-label-md">已通过杜康云安全加密处理</span>
</div>
</main>
<!-- BottomNavBar Execution as "Bottom Actions" -->
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-between items-center px-margin-page py-stack-md bg-surface shadow-[0px_-4px_20px_rgba(166,29,36,0.05)] rounded-t-xl">
<button class="flex items-center justify-center text-on-surface-variant dark:text-on-tertiary-fixed-variant px-6 py-3 w-1/3 mx-2 border border-outline rounded-lg active:scale-98 transition-all hover:bg-primary-container/10">
<span class="material-symbols-outlined mr-2">close</span>
<span class="font-label-md text-label-md">取消</span>
</button>
<button class="flex items-center justify-center bg-heritage-red text-white rounded-lg px-6 py-3 w-2/3 mx-2 active:scale-98 transition-all shadow-lg hover:opacity-80">
<span class="material-symbols-outlined mr-2">publish</span>
<span class="font-label-md text-label-md">保存并发布</span>
</button>
</nav>
<!-- Simple Overlay for Selection Mockup -->
<div class="fixed inset-0 z-[100] bg-ink-black/40 backdrop-blur-[4px] hidden items-end justify-center transition-opacity duration-300 opacity-0" id="region-picker">
<div class="bg-background w-full rounded-t-3xl p-stack-lg transform translate-y-full transition-transform duration-300">
<div class="flex justify-between items-center mb-6">
<h4 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">选择地区</h4>
<button class="text-on-surface-variant" onclick="togglePicker()">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<div class="space-y-4 max-h-96 overflow-y-auto">
<!-- Mock Region List -->
<div class="p-4 rounded-xl bg-white border border-outline-variant flex justify-between items-center active:bg-primary-fixed transition-colors">
<span class="font-body-lg text-body-lg">北京市 东城区</span>
<span class="material-symbols-outlined text-primary">check_circle</span>
</div>
<div class="p-4 rounded-xl bg-white border border-outline-variant flex justify-between items-center">
<span class="font-body-lg text-body-lg">上海市 黄浦区</span>
</div>
<div class="p-4 rounded-xl bg-white border border-outline-variant flex justify-between items-center">
<span class="font-body-lg text-body-lg">河南省 洛阳市</span>
</div>
<div class="p-4 rounded-xl bg-white border border-outline-variant flex justify-between items-center">
<span class="font-body-lg text-body-lg">陕西省 西安市</span>
</div>
</div>
<button class="w-full mt-8 bg-primary text-on-primary py-4 rounded-xl font-headline-md text-headline-md active:scale-95 transition-transform" onclick="togglePicker()">
确认选择
</button>
</div>
</div>
<script>
function togglePicker() {
const picker = document.getElementById('region-picker');
const content = picker.querySelector('div');
if (picker.classList.contains('hidden')) {
picker.classList.remove('hidden');
setTimeout(() => {
picker.classList.remove('opacity-0');
picker.classList.add('flex', 'opacity-100');
content.classList.remove('translate-y-full');
content.classList.add('translate-y-0');
}, 10);
} else {
picker.classList.remove('opacity-100');
picker.classList.add('opacity-0');
content.classList.remove('translate-y-0');
content.classList.add('translate-y-full');
setTimeout(() => {
picker.classList.add('hidden');
picker.classList.remove('flex');
}, 300);
}
}
// Simple form interaction logging
document.querySelectorAll('input, textarea').forEach(el => {
el.addEventListener('focus', () => {
el.parentElement.classList.add('border-primary');
});
el.addEventListener('blur', () => {
el.parentElement.classList.remove('border-primary');
});
});
</script>
</body></html>