379 lines
16 KiB
HTML
379 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>微信授权登录 - 纸条AI衣橱</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #F2F2F7;
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
min-height: 100vh;
|
||
padding: 24px 0 40px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.device-screen {
|
||
width: 375px;
|
||
height: 812px;
|
||
background: #FFFFFF;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
|
||
border-radius: 44px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 微信小程序原生胶囊 */
|
||
.wechat-capsule {
|
||
position: absolute;
|
||
top: 48px;
|
||
right: 12px;
|
||
width: 87px;
|
||
height: 32px;
|
||
border-radius: 16px;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: blur(10px);
|
||
border: 0.5px solid rgba(0, 0, 0, 0.15);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
z-index: 50;
|
||
box-sizing: border-box;
|
||
}
|
||
.capsule-divider {
|
||
width: 0.5px;
|
||
height: 18px;
|
||
background: rgba(0, 0, 0, 0.15);
|
||
}
|
||
.capsule-dots {
|
||
display: flex;
|
||
gap: 3px;
|
||
align-items: center;
|
||
}
|
||
.capsule-dot {
|
||
width: 4px;
|
||
height: 4px;
|
||
background: #000000;
|
||
border-radius: 50%;
|
||
}
|
||
.capsule-circle {
|
||
width: 13px;
|
||
height: 13px;
|
||
border-radius: 50%;
|
||
border: 1.8px solid #000000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.capsule-inner-dot {
|
||
width: 3.5px;
|
||
height: 3.5px;
|
||
background: #000000;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* 状态栏时间 */
|
||
.status-bar {
|
||
height: 44px;
|
||
padding: 10px 24px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
letter-spacing: -0.2px;
|
||
z-index: 40;
|
||
}
|
||
|
||
/* 底部安全区横条 */
|
||
.home-indicator {
|
||
position: absolute;
|
||
bottom: 8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 134px;
|
||
height: 5px;
|
||
background-color: #000000;
|
||
border-radius: 100px;
|
||
opacity: 0.25;
|
||
}
|
||
|
||
/* 顶部淡蓝视觉区 */
|
||
.hero-art-area {
|
||
height: 320px;
|
||
background: linear-gradient(180deg, #E8F2FF 0%, #F5F9FF 75%, #FFFFFF 100%);
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-deco-circle-1 {
|
||
position: absolute;
|
||
top: -30px;
|
||
left: -20px;
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 50%;
|
||
background: rgba(232, 242, 255, 0.8);
|
||
filter: blur(20px);
|
||
}
|
||
.hero-deco-circle-2 {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: -20px;
|
||
width: 160px;
|
||
height: 160px;
|
||
border-radius: 50%;
|
||
background: rgba(88, 86, 214, 0.08);
|
||
filter: blur(25px);
|
||
}
|
||
|
||
/* 按钮交互 */
|
||
.btn-login {
|
||
background-color: #007AFF;
|
||
color: #FFFFFF;
|
||
transition: opacity 0.15s ease, transform 0.1s ease;
|
||
}
|
||
.btn-login:active {
|
||
opacity: 0.82;
|
||
transform: scale(0.99);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 画板标题标注 -->
|
||
<div class="mb-4 flex items-center justify-between w-[375px] px-2 text-xs font-semibold text-[#8E8E93] tracking-wide">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="inline-block w-2 h-2 rounded-full bg-[#007AFF]"></span>
|
||
<span class="text-[#000000] font-medium text-sm">第 1 屏｜微信授权登录</span>
|
||
</div>
|
||
<span>375 × 812 pt</span>
|
||
</div>
|
||
|
||
<!-- 主画布 -->
|
||
<div class="device-screen">
|
||
|
||
<!-- iOS 顶部状态栏 -->
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<div class="flex items-center gap-1.5 text-xs">
|
||
<svg class="w-4 h-3.5" viewBox="0 0 16 12" fill="currentColor">
|
||
<path d="M1 9h2v2H1V9zm4-3h2v5H5V6zm4-3h2v8H9V3zm4-3h2v11h-2V0z"/>
|
||
</svg>
|
||
<svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
|
||
<path d="M8 3.5c2.6 0 5 1.1 6.7 2.8l-1.4 1.4C11.9 6.3 10 5.5 8 5.5s-3.9.8-5.3 2.2L1.3 6.3C3 4.6 5.4 3.5 8 3.5zm0 4c1.5 0 2.9.6 3.9 1.6l-1.4 1.4c-.6-.6-1.5-1-2.5-1s-1.9.4-2.5 1L4.1 9.1C5.1 8.1 6.5 7.5 8 7.5zm0 4c.8 0 1.5.7 1.5 1.5S8.8 14.5 8 14.5 6.5 13.8 6.5 13 7.2 11.5 8 11.5z"/>
|
||
</svg>
|
||
<div class="w-5 h-2.5 border border-black rounded-sm p-0.5 flex items-center">
|
||
<div class="h-full w-3 bg-black rounded-2xs"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 微信原生胶囊按钮（规范保留区域） -->
|
||
<div class="wechat-capsule">
|
||
<div class="capsule-dots">
|
||
<div class="capsule-dot"></div>
|
||
<div class="capsule-dot"></div>
|
||
<div class="capsule-dot"></div>
|
||
</div>
|
||
<div class="capsule-divider"></div>
|
||
<div class="capsule-circle">
|
||
<div class="capsule-inner-dot"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 顶部 1/3：淡蓝 #E8F2FF 块面 + 轻盈线稿插画 -->
|
||
<div class="hero-art-area">
|
||
<div class="hero-deco-circle-1"></div>
|
||
<div class="hero-deco-circle-2"></div>
|
||
|
||
<!-- 线稿插画：衣架、连衣裙、T恤、鞋子错落摆放，线条 #007AFF，块面 #E8F2FF 与 #5856D6 -->
|
||
<svg class="w-[310px] h-[220px] relative z-10" viewBox="0 0 310 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- 柔和阴影水彩底斑 -->
|
||
<ellipse cx="155" cy="195" rx="120" ry="12" fill="#E8F2FF" />
|
||
|
||
<!-- 装饰小闪光/星芒 (AI 意象) -->
|
||
<path d="M50 48L52 42L54 48L60 50L54 52L52 58L50 52L44 50L50 48Z" fill="#5856D6" fill-opacity="0.45"/>
|
||
<path d="M260 70L261.5 65L263 70L268 71.5L263 73L261.5 78L260 73L255 71.5L260 70Z" fill="#007AFF" fill-opacity="0.5"/>
|
||
<circle cx="280" cy="110" r="3" fill="#5856D6" fill-opacity="0.25"/>
|
||
<circle cx="35" cy="130" r="2.5" fill="#007AFF" fill-opacity="0.3"/>
|
||
|
||
<!-- 1. 悬挂的主衣架 (中央顶部) -->
|
||
<g stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- 挂钩 -->
|
||
<path d="M155 30C155 24 161 22 163 27C165 32 155 36 155 42" />
|
||
<!-- 架身 -->
|
||
<path d="M155 42L112 66C108 68 109 72 113 72H197C201 72 202 68 198 66L155 42Z" fill="#FFFFFF" />
|
||
<!-- 横杆 -->
|
||
<line x1="114" y1="72" x2="196" y2="72" />
|
||
</g>
|
||
|
||
<!-- 2. 连衣裙 (左侧主体) -->
|
||
<g>
|
||
<!-- 连衣裙衣架 -->
|
||
<path d="M85 52C85 47 90 45 92 49C94 53 85 56 85 61" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round"/>
|
||
<path d="M85 61L58 75H112L85 61Z" stroke="#007AFF" stroke-width="1.8" fill="#FFFFFF" stroke-linejoin="round"/>
|
||
<!-- 裙身块面填充 -->
|
||
<path d="M68 76L64 105C64 105 72 110 85 110C98 110 106 105 106 105L102 76H68Z" fill="#E8F2FF"/>
|
||
<path d="M64 105L48 168C48 168 70 176 85 176C100 176 122 168 122 168L106 105C106 105 98 110 85 110C72 110 64 105 64 105Z" fill="#E8F2FF" fill-opacity="0.6"/>
|
||
<!-- 裙身腰带点缀色 #5856D6 -->
|
||
<path d="M63 103C63 103 72 108 85 108C98 108 107 103 107 103L106 108C106 108 98 113 85 113C72 113 64 108 64 108L63 103Z" fill="#5856D6" fill-opacity="0.85"/>
|
||
<!-- 裙身主描边 -->
|
||
<path d="M68 76L63 104L47 170C58 174 72 176 85 176C98 176 112 174 123 170L107 104L102 76" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<!-- 领口线 -->
|
||
<path d="M75 76C75 82 95 82 95 76" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round"/>
|
||
<!-- 裙褶细节 -->
|
||
<path d="M85 113V175" stroke="#007AFF" stroke-width="1.4" stroke-dasharray="2 3" stroke-linecap="round"/>
|
||
</g>
|
||
|
||
<!-- 3. 短袖 T 恤 (右侧中层) -->
|
||
<g>
|
||
<!-- T恤衣架 -->
|
||
<path d="M215 56C215 51 220 49 222 53C224 57 215 60 215 65" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round"/>
|
||
<path d="M215 65L185 78H245L215 65Z" stroke="#007AFF" stroke-width="1.8" fill="#FFFFFF" stroke-linejoin="round"/>
|
||
<!-- T恤块面 -->
|
||
<path d="M192 79L170 94L180 110L190 105V152H240V105L250 110L260 94L238 79H192Z" fill="#E8F2FF"/>
|
||
<!-- T恤口袋细节 #5856D6 块面 -->
|
||
<rect x="218" y="98" width="14" height="15" rx="3" fill="#5856D6" fill-opacity="0.18" stroke="#5856D6" stroke-width="1.4"/>
|
||
<!-- T恤描边 -->
|
||
<path d="M192 79L169 94L180 110L190 105V152C190 154 192 155 194 155H236C238 155 240 154 240 152V105L250 110L261 94L238 79" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<!-- 圆领 -->
|
||
<path d="M202 79C202 87 228 87 228 79" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round"/>
|
||
</g>
|
||
|
||
<!-- 4. 单鞋 / 优雅高跟与乐福鞋 (底部右侧错落摆放) -->
|
||
<g>
|
||
<!-- 鞋子底块面 -->
|
||
<path d="M215 192C205 192 200 188 203 182C206 177 218 174 235 174C252 174 262 181 260 188C258 192 245 192 215 192Z" fill="#E8F2FF"/>
|
||
<!-- 鞋子轮廓描边 -->
|
||
<path d="M202 184C208 177 222 173 236 173C248 173 258 177 263 183C265 185 264 189 260 190C252 192 225 192 212 192C204 192 200 188 202 184Z" stroke="#007AFF" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M212 180C220 180 230 182 238 185" stroke="#5856D6" stroke-width="1.5" stroke-linecap="round"/>
|
||
<!-- 小鞋跟/鞋底线 -->
|
||
<line x1="254" y1="187" x2="259" y2="194" stroke="#007AFF" stroke-width="2" stroke-linecap="round"/>
|
||
</g>
|
||
|
||
<!-- 5. 飘带与标签小纸条 (呼应产品「纸条」意向) -->
|
||
<g>
|
||
<rect x="135" y="125" width="28" height="38" rx="4" fill="#FFFFFF" stroke="#007AFF" stroke-width="1.8"/>
|
||
<!-- 纸条小孔与挂绳 -->
|
||
<circle cx="149" cy="132" r="2" fill="#5856D6"/>
|
||
<path d="M149 130C149 122 153 118 153 112" stroke="#5856D6" stroke-width="1.4" stroke-linecap="round" stroke-dasharray="2 2"/>
|
||
<!-- 纸条上的条纹 -->
|
||
<line x1="141" y1="142" x2="157" y2="142" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round"/>
|
||
<line x1="141" y1="148" x2="153" y2="148" stroke="#8E8E93" stroke-width="1.4" stroke-linecap="round"/>
|
||
<line x1="141" y1="154" x2="150" y2="154" stroke="#8E8E93" stroke-width="1.4" stroke-linecap="round"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 中部：Logo、产品名与 Slogan -->
|
||
<div class="flex-1 flex flex-col items-center justify-center px-6 -mt-2">
|
||
|
||
<!-- 线性衣架组成的 Logo 图标 -->
|
||
<div class="w-18 h-18 w-[72px] h-[72px] rounded-2xl bg-[#F2F2F7] flex items-center justify-center mb-5 shadow-xs">
|
||
<svg class="w-10 h-10 text-[#007AFF]" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<!-- 钩子 -->
|
||
<path d="M20 10C20 6.5 23.5 5 25 8C26.5 11 20 13.5 20 17" stroke-width="2.2"/>
|
||
<!-- 极简 Apple 风格线性衣架 -->
|
||
<path d="M20 17L7 25.5C5.8 26.3 6.2 28 7.8 28H32.2C33.8 28 34.2 26.3 33 25.5L20 17Z" stroke-width="2.2" fill="#FFFFFF"/>
|
||
<line x1="7.8" y1="28" x2="32.2" y2="28" stroke-width="2.2"/>
|
||
<!-- 衣架中心 AI 闪烁小星点 -->
|
||
<path d="M20 21.5L20.8 23.2L22.5 24L20.8 24.8L20 26.5L19.2 24.8L17.5 24L19.2 23.2L20 21.5Z" fill="#5856D6" stroke="none"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 产品名 -->
|
||
<h1 class="text-[26px] font-bold text-[#000000] tracking-tight mb-2">
|
||
纸条AI衣橱
|
||
</h1>
|
||
|
||
<!-- Slogan -->
|
||
<p class="text-[15px] text-[#8E8E93] font-normal tracking-normal text-center">
|
||
把你的衣橱，交给 AI 打理
|
||
</p>
|
||
|
||
<!-- 特性小胶囊标签（轻量克制呈现核心价值） -->
|
||
<div class="flex items-center gap-2 mt-5">
|
||
<span class="px-2.5 py-1 rounded-full bg-[#E8F2FF] text-[#007AFF] text-[11px] font-medium">
|
||
智能抠图
|
||
</span>
|
||
<span class="px-2.5 py-1 rounded-full bg-[#E8F2FF] text-[#007AFF] text-[11px] font-medium">
|
||
15维属性识别
|
||
</span>
|
||
<span class="px-2.5 py-1 rounded-full bg-[#E8F2FF] text-[#007AFF] text-[11px] font-medium">
|
||
星座运势穿搭
|
||
</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 底部操作区（安全区上方） -->
|
||
<div class="px-4 pb-10 w-full flex flex-col items-center">
|
||
|
||
<!-- 微信一键登录按钮 (高 48pt，圆角 14pt，整宽左右留 16pt，系统蓝填充) -->
|
||
<button class="btn-login w-full h-[48px] rounded-[14px] flex items-center justify-center gap-2.5 shadow-sm font-medium text-[16px] tracking-normal cursor-pointer select-none">
|
||
<!-- 微信官方图标 (纯白) -->
|
||
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
|
||
<path d="M8.691 2.188C3.891 2.188 0 5.477 0 9.531c0 2.211 1.156 4.195 2.969 5.531l-.75 2.25 2.656-1.344c1.188.375 2.453.563 3.816.563.348 0 .695-.016 1.039-.043-.223-.629-.34-1.305-.34-2.008 0-4.047 3.891-7.336 8.691-7.336.563 0 1.109.047 1.641.137C18.602 4.316 14.078 2.188 8.691 2.188zm-2.25 4.344c.625 0 1.125.5 1.125 1.125s-.5 1.125-1.125 1.125-1.125-.5-1.125-1.125.5-1.125 1.125-1.125zm4.875 0c.625 0 1.125.5 1.125 1.125s-.5 1.125-1.125 1.125-1.125-.5-1.125-1.125.5-1.125 1.125-1.125zm4.063 4.172c-4.125 0-7.5 2.813-7.5 6.281 0 1.898.992 3.594 2.547 4.742l-.641 1.922 2.277-1.148c1.02.32 2.109.484 3.316.484 4.125 0 7.5-2.813 7.5-6.281s-3.375-6.281-7.5-6.281zm-2.25 3.719c.531 0 .969.438.969.969s-.438.969-.969.969-.969-.438-.969-.969.438-.969.969-.969zm4.188 0c.531 0 .969.438.969.969s-.438.969-.969.969-.969-.438-.969-.969.438-.969.969-.969z"/>
|
||
</svg>
|
||
<span>微信一键登录</span>
|
||
</button>
|
||
|
||
<!-- 协议条款说明 -->
|
||
<div class="mt-3.5 text-[11px] text-[#8E8E93] text-center tracking-tight flex items-center justify-center flex-wrap">
|
||
<span>登录即代表同意</span>
|
||
<a href="javascript:void(0)" class="text-[#007AFF] hover:underline mx-0.5">《用户协议》</a>
|
||
<span>和</span>
|
||
<a href="javascript:void(0)" class="text-[#007AFF] hover:underline mx-0.5">《隐私政策》</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- iOS 底部指示条 -->
|
||
<div class="home-indicator"></div>
|
||
|
||
</div>
|
||
|
||
<!-- 规范要求的同画板附带状态展示（异常态/空态） -->
|
||
<div class="w-[375px] mt-6 px-1 flex flex-col gap-3">
|
||
<div class="text-xs font-semibold text-[#8E8E93] flex items-center gap-1">
|
||
<span>伴生交互状态原型说明</span>
|
||
</div>
|
||
|
||
<!-- iOS 风格 轻提示 / 错误提示示例 (白色 80% 毛玻璃浮层，圆角 12pt) -->
|
||
<div class="bg-white/90 backdrop-blur-md rounded-[14px] p-3.5 border border-[#E5E5EA] shadow-sm flex items-center justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="w-7 h-7 rounded-full bg-[#FF3B30]/10 flex items-center justify-center text-[#FF3B30]">
|
||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<line x1="12" y1="8" x2="12" y2="12"></line>
|
||
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
||
</svg>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<span class="text-[13px] font-semibold text-[#000000]">微信授权取消或失败</span>
|
||
<span class="text-[11px] text-[#8E8E93]">网络波动或用户未授权，提示「授权登录未完成，请重试」</span>
|
||
</div>
|
||
</div>
|
||
<span class="text-[11px] font-medium px-2 py-0.5 rounded-full bg-[#F2F2F7] text-[#8E8E93]">Toast 异常态</span>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|