zhouwentao
/
wz-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
wz-uniapp/docs/login_page.md

438 lines
22 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 微信小程序登录 -->
<!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=Public+Sans:wght@400;500;600;700&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: {
"primary": "#07c160", // WeChat Green for the main button
"brand": "#ec5b13", // Theme Primary
"background-light": "#f8f6f6",
"background-dark": "#221610",
},
fontFamily: {
"display": ["Public Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
body {
font-family: "Public Sans", sans-serif;
}
.wechat-green {
background-color: #07c160;
}
.checkbox-custom:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark min-h-screen flex flex-col">
<div class="flex flex-col w-full max-w-md mx-auto min-h-screen relative px-6">
<div class="flex items-center justify-center pt-16 pb-12">
<div class="flex flex-col items-center gap-4">
<div class="w-24 h-24 rounded-full bg-brand/10 flex items-center justify-center overflow-hidden border-2 border-brand/20">
<div class="w-16 h-16 bg-brand rounded-xl flex items-center justify-center shadow-lg shadow-brand/30">
<span class="material-symbols-outlined text-white text-4xl">polymer</span>
</div>
</div>
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100 tracking-tight">品牌小程序</h1>
<p class="text-slate-500 dark:text-slate-400 text-sm">连接精彩生活，发现无限可能</p>
</div>
</div>
<div class="mt-8 space-y-4">
<button class="w-full h-14 bg-primary hover:bg-opacity-90 text-white rounded-xl flex items-center justify-center gap-3 transition-all active:scale-[0.98] shadow-sm">
<span class="material-symbols-outlined">chat</span>
<span class="text-lg font-semibold">微信手机号快速登录</span>
</button>
<button class="w-full h-14 bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-200 rounded-xl flex items-center justify-center gap-3 transition-all">
<span class="text-base font-medium">其他方式登录</span>
</button>
</div>
<div class="mt-8 flex justify-center">
<a class="text-brand dark:text-brand font-medium text-sm hover:underline" href="#">账号密码登录</a>
</div>
<div class="mt-auto pb-10">
<div class="flex items-start gap-3">
<div class="pt-1">
<input class="checkbox-custom w-5 h-5 rounded border-slate-300 dark:border-slate-600 text-brand focus:ring-brand bg-white dark:bg-slate-700" id="agreement" type="checkbox"/>
</div>
<label class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed" for="agreement">
我已阅读并同意
<a class="text-brand font-medium" href="#">《用户服务协议》</a>、
<a class="text-brand font-medium" href="#">《隐私保护指引》</a>
以及
<a class="text-brand font-medium" href="#">《运营商服务条款》</a>
并授权小程序获取您的手机号用于登录。
</label>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-64 bg-gradient-to-b from-brand/5 to-transparent -z-10"></div>
</div>
<div class="hidden">
<div class="w-full h-full" data-alt="Abstract orange and white flowing artistic pattern"></div>
</div>
</body></html>
<!-- 用户服务协议 -->
<!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=Public+Sans:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@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: {
"primary": "#ec5b13",
"background-light": "#f8f6f6",
"background-dark": "#221610",
},
fontFamily: {
"display": ["Public Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<title>用户服务协议</title>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen">
<!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-primary/10">
<div class="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
<button class="flex items-center text-slate-600 dark:text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined">arrow_back</span>
</button>
<h1 class="text-lg font-bold tracking-tight text-center flex-1">用户服务协议</h1>
<div class="w-6"></div> <!-- Spacer for centering -->
</div>
<!-- Sticky Quick Navigation -->
<nav class="max-w-4xl mx-auto px-4 overflow-x-auto">
<div class="flex border-b border-primary/10">
<a class="flex flex-col items-center justify-center border-b-2 border-primary text-primary pb-3 pt-4 px-4 whitespace-nowrap" href="#preface">
<span class="text-sm font-bold">前言</span>
</a>
<a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-500 dark:text-slate-400 pb-3 pt-4 px-4 whitespace-nowrap hover:text-primary transition-colors" href="#services">
<span class="text-sm font-bold">服务内容</span>
</a>
<a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-500 dark:text-slate-400 pb-3 pt-4 px-4 whitespace-nowrap hover:text-primary transition-colors" href="#behavior">
<span class="text-sm font-bold">行为规范</span>
</a>
<a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-500 dark:text-slate-400 pb-3 pt-4 px-4 whitespace-nowrap hover:text-primary transition-colors" href="#disclaimer">
<span class="text-sm font-bold">免责声明</span>
</a>
</div>
</nav>
</header>
<main class="max-w-4xl mx-auto px-4 py-8 md:py-12">
<div class="prose prose-slate dark:prose-invert max-w-none">
<!-- Preface Section -->
<section class="mb-12 scroll-mt-32" id="preface">
<div class="flex items-center gap-2 mb-4">
<div class="w-1.5 h-6 bg-primary rounded-full"></div>
<h2 class="text-2xl font-bold m-0">一、前言</h2>
</div>
<div class="bg-white dark:bg-white/5 p-6 rounded-xl border border-primary/5 shadow-sm">
<p class="leading-relaxed text-slate-700 dark:text-slate-300 mb-4">
欢迎您使用我们的服务。本协议是用户（以下简称“您”）与公司之间关于使用产品及服务（以下简称“本服务”）所订立的权利义务规范。
</p>
<p class="leading-relaxed text-slate-700 dark:text-slate-300">
在注册或使用本服务前，请您务必审慎阅读并充分理解本协议各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，即表示您已充分阅读、理解并接受本协议的全部内容。
</p>
</div>
</section>
<!-- Services Section -->
<section class="mb-12 scroll-mt-32" id="services">
<div class="flex items-center gap-2 mb-4">
<div class="w-1.5 h-6 bg-primary rounded-full"></div>
<h2 class="text-2xl font-bold m-0">二、服务内容</h2>
</div>
<div class="space-y-4">
<p class="leading-relaxed text-slate-700 dark:text-slate-300">
1. 本公司向用户提供包括但不限于信息存储空间、搜索、社区交流、电子商务等技术服务。具体服务内容以届时实际提供的功能为准。
</p>
<p class="leading-relaxed text-slate-700 dark:text-slate-300">
2. 用户理解并同意，本公司有权根据业务发展需要，随时对服务内容进行变更、中止或终止，而无需提前通知用户，但法律法规另有规定的除外。
</p>
<div class="bg-primary/5 p-4 rounded-lg border-l-4 border-primary">
<p class="text-sm text-primary font-medium m-0">
注意：部分增值服务可能涉及收费，我们将会在相应页面进行明确提示，用户可根据需求自主选择。
</p>
</div>
</div>
</section>
<!-- User Behavior Section -->
<section class="mb-12 scroll-mt-32" id="behavior">
<div class="flex items-center gap-2 mb-4">
<div class="w-1.5 h-6 bg-primary rounded-full"></div>
<h2 class="text-2xl font-bold m-0">三、用户行为规范</h2>
</div>
<div class="grid gap-4">
<div class="flex gap-4 p-4 rounded-lg border border-primary/10 bg-white dark:bg-white/5">
<span class="material-symbols-outlined text-primary">security</span>
<div>
<h4 class="font-bold mb-1">账号安全</h4>
<p class="text-sm text-slate-600 dark:text-slate-400 m-0">用户应当妥善保管账号及密码，对其账号下发生的一切活动承担法律责任。不得将账号转让、出借、出租或售卖给他人。</p>
</div>
</div>
<div class="flex gap-4 p-4 rounded-lg border border-primary/10 bg-white dark:bg-white/5">
<span class="material-symbols-outlined text-primary">gavel</span>
<div>
<h4 class="font-bold mb-1">合法使用</h4>
<p class="text-sm text-slate-600 dark:text-slate-400 m-0">用户在使用本服务时，必须遵守法律法规，不得利用本服务制作、复制、发布、传播违法违规信息或从事非法活动。</p>
</div>
</div>
<div class="flex gap-4 p-4 rounded-lg border border-primary/10 bg-white dark:bg-white/5">
<span class="material-symbols-outlined text-primary">copyright</span>
<div>
<h4 class="font-bold mb-1">知识产权</h4>
<p class="text-sm text-slate-600 dark:text-slate-400 m-0">用户在平台上发布的原创内容，其著作权归用户本人所有，但用户授权本公司在全球范围内拥有免费的、永久的、不可撤销的非独占使用许可。</p>
</div>
</div>
</div>
</section>
<!-- Disclaimer Section -->
<section class="mb-12 scroll-mt-32" id="disclaimer">
<div class="flex items-center gap-2 mb-4">
<div class="w-1.5 h-6 bg-primary rounded-full"></div>
<h2 class="text-2xl font-bold m-0">四、免责声明</h2>
</div>
<div class="bg-slate-100 dark:bg-slate-800/50 p-6 rounded-xl border border-dashed border-slate-300 dark:border-slate-700">
<ul class="space-y-3 text-slate-700 dark:text-slate-300 list-none p-0 m-0">
<li class="flex items-start gap-2">
<span class="material-symbols-outlined text-xs mt-1 shrink-0">info</span>
<span>鉴于网络服务的特殊性，用户同意本公司有权随时变更、中断或终止部分或全部的网络服务。</span>
</li>
<li class="flex items-start gap-2">
<span class="material-symbols-outlined text-xs mt-1 shrink-0">info</span>
<span>本公司不保证网络服务一定能满足用户的要求，也不保证网络服务不会中断。</span>
</li>
<li class="flex items-start gap-2">
<span class="material-symbols-outlined text-xs mt-1 shrink-0">info</span>
<span>对于因不可抗力或本公司不能控制的原因造成的网络服务中断或其他缺陷，本公司不承担任何责任，但将尽力减少因此而给用户造成的损失和影响。</span>
</li>
</ul>
</div>
</section>
</div>
<!-- Footer Info -->
<footer class="mt-16 pt-8 border-t border-primary/10 text-center">
<p class="text-sm text-slate-500 dark:text-slate-400">更新日期：2023年10月24日</p>
<p class="text-sm text-slate-500 dark:text-slate-400 mb-8">生效日期：2023年10月24日</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="px-8 py-3 bg-primary text-white font-bold rounded-lg shadow-lg shadow-primary/20 hover:bg-primary/90 transition-all">
同意并接受
</button>
<button class="px-8 py-3 bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold rounded-lg hover:bg-slate-300 dark:hover:bg-slate-700 transition-all">
不同意
</button>
</div>
</footer>
</main>
<!-- Scroll to Top Button (Mobile) -->
<div class="fixed bottom-6 right-6 lg:hidden">
<button class="size-12 bg-primary text-white rounded-full shadow-xl flex items-center justify-center" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
<span class="material-symbols-outlined">expand_less</span>
</button>
</div>
</body></html>
<!-- 隐私保护指引 -->
<!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=Public+Sans:wght@400;500;600;700&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: {
"primary": "#ec5b13",
"background-light": "#f8f6f6",
"background-dark": "#221610",
},
fontFamily: {
"display": ["Public Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 antialiased">
<!-- Top Navigation Bar -->
<nav class="sticky top-0 z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-primary/10">
<div class="max-w-3xl mx-auto px-4 h-16 flex items-center justify-between">
<button class="p-2 hover:bg-primary/10 rounded-full transition-colors">
<span class="material-symbols-outlined block">arrow_back</span>
</button>
<h1 class="text-lg font-bold tracking-tight">隐私保护指引</h1>
<div class="w-10"></div> <!-- Spacer for centering -->
</div>
</nav>
<main class="max-w-3xl mx-auto px-4 py-8">
<!-- Header Section -->
<header class="mb-8">
<h2 class="text-3xl font-bold mb-4">个人信息保护政策</h2>
<p class="text-slate-600 dark:text-slate-400 leading-relaxed">
我们非常重视您的个人信息保护。本指引将详细说明我们如何收集、使用、共享及保护您的信息，请您务必仔细阅读并理解。
</p>
</header>
<!-- Content Sections -->
<div class="space-y-10">
<!-- Section 1: Collection -->
<section class="bg-white dark:bg-slate-900/50 p-6 rounded-xl border border-primary/5 shadow-sm">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary">data_usage</span>
<h3 class="text-xl font-bold">一、我们如何收集信息</h3>
</div>
<p class="text-slate-600 dark:text-slate-400 mb-4 text-sm">为了向您提供基本服务，我们需要收集以下必要信息：</p>
<div class="grid gap-3">
<div class="flex items-start gap-3 p-3 rounded-lg bg-background-light dark:bg-background-dark">
<span class="material-symbols-outlined text-primary text-sm mt-1">check_circle</span>
<div>
<p class="font-semibold text-sm">账号基础信息</p>
<p class="text-xs text-slate-500">手机号码、头像、昵称等用于身份验证的信息。</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 rounded-lg bg-background-light dark:bg-background-dark">
<span class="material-symbols-outlined text-primary text-sm mt-1">check_circle</span>
<div>
<p class="font-semibold text-sm">设备及网络信息</p>
<p class="text-xs text-slate-500">IP地址、设备型号、操作系统版本、唯一设备标识符。</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 rounded-lg bg-background-light dark:bg-background-dark">
<span class="material-symbols-outlined text-primary text-sm mt-1">check_circle</span>
<div>
<p class="font-semibold text-sm">位置及日志信息</p>
<p class="text-xs text-slate-500">在使用特定功能时，经您授权收集的地理位置信息。</p>
</div>
</div>
</div>
</section>
<!-- Section 2: Usage -->
<section class="p-2">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary">analytics</span>
<h3 class="text-xl font-bold">二、我们如何使用信息</h3>
</div>
<ul class="space-y-4 text-slate-600 dark:text-slate-400">
<li class="flex gap-3">
<span class="text-primary font-bold">01.</span>
<p><strong>服务提供：</strong>利用收集的信息实现软件的基本功能与核心服务。</p>
</li>
<li class="flex gap-3">
<span class="text-primary font-bold">02.</span>
<p><strong>安全保障：</strong>用于身份验证、客户服务、安全防范及诈骗监测。</p>
</li>
<li class="flex gap-3">
<span class="text-primary font-bold">03.</span>
<p><strong>产品改进：</strong>通过数据分析优化产品体验，开发新的功能模块。</p>
</li>
</ul>
</section>
<!-- Section 3: Sharing -->
<section class="bg-primary/5 p-6 rounded-xl border border-primary/10">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary">share</span>
<h3 class="text-xl font-bold">三、我们如何共享信息</h3>
</div>
<p class="text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
我们不会向第三方转让您的个人信息，除非获得您的明确同意或法律法规另有规定。在以下情形中，我们可能会共享信息：
</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white dark:bg-background-dark rounded-full text-xs border border-primary/20 text-primary font-medium">第三方SDK集成</span>
<span class="px-3 py-1 bg-white dark:bg-background-dark rounded-full text-xs border border-primary/20 text-primary font-medium">关联公司业务合规</span>
<span class="px-3 py-1 bg-white dark:bg-background-dark rounded-full text-xs border border-primary/20 text-primary font-medium">法律程序要求</span>
</div>
</section>
<!-- Section 4: Protection -->
<section class="p-2">
<div class="flex items-center gap-3 mb-4">
<span class="material-symbols-outlined text-primary">shield</span>
<h3 class="text-xl font-bold">四、我们如何保护您的信息</h3>
</div>
<div class="space-y-4 text-slate-600 dark:text-slate-400 leading-relaxed">
<p>
我们采用行业领先的安全技术（如SSL加密传输、匿名化处理）来保护您的信息不被泄露、毁损或丢失。
</p>
<p>
我们建立了专门的管理制度、流程和组织以保障信息的安全。严格限制访问信息的人员范围，并要求他们履行保密义务。
</p>
</div>
</section>
<!-- Bottom Consent/Agreement -->
<section class="mt-12 pt-8 border-t border-primary/10">
<div class="flex flex-col gap-4">
<label class="flex items-start gap-3 cursor-pointer group">
<div class="relative flex items-center mt-1">
<input class="peer h-5 w-5 rounded border-primary/30 text-primary focus:ring-primary/50 transition-all cursor-pointer" type="checkbox"/>
</div>
<span class="text-sm text-slate-500 dark:text-slate-400 group-hover:text-primary transition-colors">
我已阅读并同意上述《个人信息保护政策》的所有条款，了解我所享有的权利及其行使方式。
</span>
</label>
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-4 rounded-xl shadow-lg shadow-primary/20 transition-all">
同意并继续
</button>
<button class="w-full py-2 text-sm text-slate-400 hover:text-primary transition-colors">
不同意并退出
</button>
</div>
</section>
</div>
<!-- Footer -->
<footer class="mt-16 text-center text-xs text-slate-400 pb-10">
<p>最近更新日期：2023年10月27日</p>
<p class="mt-1">© 2023 隐私保护中心 版权所有</p>
</footer>
</main>
</body></html>
Reference in New Issue View Git Blame Copy Permalink