896 lines
33 KiB
HTML
896 lines
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>iShare 设计文档 - 页面结构与交互流程</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
color: #e8e8e8;
|
||
min-height: 100vh;
|
||
line-height: 1.6;
|
||
}
|
||
.container { max-width: 1400px; margin: 0 auto; padding: 40px 20px; }
|
||
|
||
/* Header */
|
||
header {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
background: linear-gradient(135deg, #370CE2 0%, #E94C89 100%);
|
||
margin-bottom: 40px;
|
||
border-radius: 20px;
|
||
}
|
||
header h1 { font-size: 3em; margin-bottom: 10px; color: white; }
|
||
header p { font-size: 1.3em; opacity: 0.9; color: white; }
|
||
|
||
/* Navigation */
|
||
.nav-tabs {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin-bottom: 40px;
|
||
position: sticky;
|
||
top: 0;
|
||
background: rgba(26, 26, 46, 0.95);
|
||
padding: 20px;
|
||
border-radius: 15px;
|
||
backdrop-filter: blur(10px);
|
||
z-index: 100;
|
||
}
|
||
.nav-tab {
|
||
padding: 12px 24px;
|
||
background: rgba(55, 12, 226, 0.3);
|
||
border: 1px solid #370CE2;
|
||
border-radius: 25px;
|
||
color: white;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-decoration: none;
|
||
}
|
||
.nav-tab:hover, .nav-tab.active {
|
||
background: #370CE2;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Section */
|
||
section {
|
||
background: rgba(255,255,255,0.05);
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
margin-bottom: 40px;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
section h2 {
|
||
font-size: 2em;
|
||
margin-bottom: 30px;
|
||
color: #E94C89;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
section h2::before {
|
||
content: '';
|
||
width: 5px;
|
||
height: 40px;
|
||
background: linear-gradient(180deg, #370CE2, #E94C89);
|
||
border-radius: 3px;
|
||
}
|
||
section h3 {
|
||
font-size: 1.4em;
|
||
margin: 30px 0 15px;
|
||
color: #FBC7D4;
|
||
}
|
||
|
||
/* Figma Embed */
|
||
.figma-container {
|
||
background: #2a2a3e;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
margin: 20px 0;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||
}
|
||
.figma-header {
|
||
background: linear-gradient(90deg, #370CE2, #E94C89);
|
||
padding: 15px 25px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.figma-header h4 {
|
||
color: white;
|
||
font-size: 1.1em;
|
||
}
|
||
.figma-header a {
|
||
color: white;
|
||
background: rgba(255,255,255,0.2);
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
text-decoration: none;
|
||
font-size: 0.9em;
|
||
transition: background 0.3s;
|
||
}
|
||
.figma-header a:hover {
|
||
background: rgba(255,255,255,0.3);
|
||
}
|
||
.figma-embed {
|
||
width: 100%;
|
||
height: 600px;
|
||
border: none;
|
||
}
|
||
.figma-tabs {
|
||
display: flex;
|
||
gap: 5px;
|
||
padding: 15px;
|
||
background: rgba(0,0,0,0.2);
|
||
flex-wrap: wrap;
|
||
}
|
||
.figma-tab {
|
||
padding: 10px 20px;
|
||
background: rgba(255,255,255,0.1);
|
||
border: none;
|
||
border-radius: 8px;
|
||
color: #ccc;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-size: 0.95em;
|
||
}
|
||
.figma-tab:hover {
|
||
background: rgba(55, 12, 226, 0.5);
|
||
color: white;
|
||
}
|
||
.figma-tab.active {
|
||
background: #370CE2;
|
||
color: white;
|
||
}
|
||
|
||
/* Flow Chart Container */
|
||
.mermaid {
|
||
background: rgba(255,255,255,0.03);
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
margin: 20px 0;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
/* Page Structure */
|
||
.page-structure {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
.page-card {
|
||
background: linear-gradient(145deg, rgba(55,12,226,0.2), rgba(233,76,137,0.1));
|
||
border: 1px solid rgba(255,255,255,0.15);
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
transition: all 0.3s;
|
||
}
|
||
.page-card:hover {
|
||
transform: translateY(-5px);
|
||
border-color: #E94C89;
|
||
box-shadow: 0 10px 30px rgba(233,76,137,0.2);
|
||
}
|
||
.page-card h4 {
|
||
color: #FBC7D4;
|
||
font-size: 1.2em;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.page-card .badge {
|
||
font-size: 0.7em;
|
||
padding: 4px 10px;
|
||
background: #370CE2;
|
||
border-radius: 20px;
|
||
color: white;
|
||
}
|
||
.page-card ul {
|
||
list-style: none;
|
||
margin-top: 15px;
|
||
}
|
||
.page-card li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
font-size: 0.95em;
|
||
}
|
||
.page-card li:last-child { border-bottom: none; }
|
||
.page-card li::before {
|
||
content: '→';
|
||
color: #E94C89;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
/* Flow Steps */
|
||
.flow-steps {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
margin: 20px 0;
|
||
}
|
||
.flow-step {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
background: rgba(55,12,226,0.15);
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.flow-step::after {
|
||
content: '→';
|
||
position: absolute;
|
||
right: -20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #E94C89;
|
||
font-size: 1.5em;
|
||
}
|
||
.flow-step:last-child::after { display: none; }
|
||
.flow-step .step-num {
|
||
width: 35px;
|
||
height: 35px;
|
||
background: #370CE2;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Color Palette */
|
||
.color-palette {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
margin: 20px 0;
|
||
}
|
||
.color-item {
|
||
text-align: center;
|
||
}
|
||
.color-swatch {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 15px;
|
||
margin-bottom: 8px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||
}
|
||
.color-item span {
|
||
font-size: 0.85em;
|
||
display: block;
|
||
}
|
||
|
||
/* Info Box */
|
||
.info-box {
|
||
background: rgba(55,12,226,0.2);
|
||
border-left: 4px solid #370CE2;
|
||
padding: 20px;
|
||
border-radius: 0 10px 10px 0;
|
||
margin: 20px 0;
|
||
}
|
||
.info-box.warning {
|
||
background: rgba(233,76,137,0.2);
|
||
border-left-color: #E94C89;
|
||
}
|
||
|
||
/* Table */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
}
|
||
th, td {
|
||
padding: 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
th {
|
||
background: rgba(55,12,226,0.3);
|
||
color: #FBC7D4;
|
||
}
|
||
tr:hover {
|
||
background: rgba(255,255,255,0.05);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
header h1 { font-size: 2em; }
|
||
.nav-tabs { flex-direction: column; }
|
||
.flow-step::after { display: none; }
|
||
.figma-embed { height: 400px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>🎬 iShare 设计文档</h1>
|
||
<p>流媒体订阅合租分享平台 - 页面结构与交互流程</p>
|
||
</header>
|
||
|
||
<nav class="nav-tabs">
|
||
<a href="#figma-preview" class="nav-tab">🎨 设计预览</a>
|
||
<a href="#overview" class="nav-tab">📋 项目概述</a>
|
||
<a href="#sitemap" class="nav-tab">🗺️ 页面架构</a>
|
||
<a href="#flow-auth" class="nav-tab">🔐 登录注册流程</a>
|
||
<a href="#flow-purchase" class="nav-tab">💳 购买流程</a>
|
||
<a href="#flow-carpool" class="nav-tab">🚗 拼车流程</a>
|
||
<a href="#pages" class="nav-tab">📱 页面详情</a>
|
||
<a href="#design" class="nav-tab">🎨 设计规范</a>
|
||
</nav>
|
||
|
||
<!-- Figma 设计预览 -->
|
||
<section id="figma-preview">
|
||
<h2>🎨 Figma 设计预览</h2>
|
||
<p style="margin-bottom: 20px;">以下是嵌入的Figma设计文件，你可以直接在这里浏览和交互查看所有设计页面。点击下方标签切换不同页面。</p>
|
||
|
||
<div class="figma-container">
|
||
<div class="figma-header">
|
||
<h4>📐 iShare 完整设计稿</h4>
|
||
<a href="https://www.figma.com/design/LdrKDCBrE4ve4UAYjQxWrC/iShare--Copy-" target="_blank">↗ 在Figma中打开</a>
|
||
</div>
|
||
<div class="figma-tabs">
|
||
<button class="figma-tab active" onclick="switchFigmaPage('2-6')">🔐 登录/注册</button>
|
||
<button class="figma-tab" onclick="switchFigmaPage('1146-302')">🏠 首页</button>
|
||
<button class="figma-tab" onclick="switchFigmaPage('1145-913')">📱 主页/服务列表</button>
|
||
<button class="figma-tab" onclick="switchFigmaPage('1446-350')">🚗 广场/拼车</button>
|
||
<button class="figma-tab" onclick="switchFigmaPage('1560-673')">📣 推广中心</button>
|
||
<button class="figma-tab" onclick="switchFigmaPage('245-173')">🎨 设计规范</button>
|
||
<button class="figma-tab" onclick="switchFigmaPage('0-1')">📊 竞品分析</button>
|
||
</div>
|
||
<iframe id="figma-frame" class="figma-embed"
|
||
src="https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/design/LdrKDCBrE4ve4UAYjQxWrC/iShare--Copy-?node-id=2-6"
|
||
allowfullscreen></iframe>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<strong>💡 使用提示</strong><br>
|
||
<ul style="margin-top: 10px; padding-left: 20px;">
|
||
<li>点击上方标签可快速切换到不同设计页面</li>
|
||
<li>在嵌入的预览中可以缩放、平移查看设计细节</li>
|
||
<li>点击"在Figma中打开"可进入完整的Figma编辑器</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 项目概述 -->
|
||
<section id="overview">
|
||
<h2>📋 项目概述</h2>
|
||
<p style="font-size: 1.1em; margin-bottom: 20px;">
|
||
<strong>iShare (AiShare)</strong> 是一个流媒体订阅服务合租分享平台。用户可以在平台上购买、分享和合租各种流媒体服务账号（如 Netflix、Spotify、Apple TV 等），通过"拼车"模式降低订阅成本。
|
||
</p>
|
||
|
||
<div class="info-box">
|
||
<strong>💡 核心价值主张</strong><br>
|
||
通过合租模式，让用户以 <strong>10%-30%</strong> 的价格享受正版流媒体服务
|
||
</div>
|
||
|
||
<h3>支持的平台</h3>
|
||
<div class="flow-steps">
|
||
<div class="flow-step">
|
||
<div class="step-num">🖥️</div>
|
||
<strong>Web端</strong><br>
|
||
<small>响应式桌面网站</small>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">📱</div>
|
||
<strong>Wap端</strong><br>
|
||
<small>移动端H5页面</small>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页面架构 -->
|
||
<section id="sitemap">
|
||
<h2>🗺️ 整体页面架构</h2>
|
||
|
||
<div class="mermaid">
|
||
graph TD
|
||
subgraph 入口
|
||
A[首页/欢迎页] --> B{用户状态}
|
||
end
|
||
|
||
subgraph 认证模块
|
||
B -->|未登录| C[登录页面]
|
||
B -->|未注册| D[注册页面]
|
||
C --> E[忘记密码]
|
||
E --> F[获取验证码]
|
||
F --> G[设置新密码]
|
||
D --> H[验证码验证]
|
||
end
|
||
|
||
subgraph 主功能区
|
||
B -->|已登录| I[主页/服务列表]
|
||
I --> J[服务详情页]
|
||
J --> K[支付页面]
|
||
I --> L[广场/拼车]
|
||
L --> M[车票详情]
|
||
M --> K
|
||
I --> N[推广中心]
|
||
I --> O[个人中心]
|
||
end
|
||
|
||
subgraph 底部导航
|
||
P[首页] --- Q[广场] --- R[推广] --- S[我的]
|
||
end
|
||
|
||
style A fill:#370CE2,color:#fff
|
||
style I fill:#E94C89,color:#fff
|
||
style K fill:#C22F6C,color:#fff
|
||
style L fill:#E94C89,color:#fff
|
||
</div>
|
||
|
||
<h3>页面层级关系</h3>
|
||
<table>
|
||
<tr>
|
||
<th>层级</th>
|
||
<th>页面</th>
|
||
<th>功能说明</th>
|
||
<th>入口</th>
|
||
<th>查看设计</th>
|
||
</tr>
|
||
<tr>
|
||
<td>L0</td>
|
||
<td>首页/欢迎页</td>
|
||
<td>品牌展示、引导登录</td>
|
||
<td>直接访问</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('1146-302')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>L1</td>
|
||
<td>主页(服务列表)</td>
|
||
<td>浏览所有可购买的服务</td>
|
||
<td>登录后默认页、底部导航</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('1145-913')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>L1</td>
|
||
<td>广场</td>
|
||
<td>查看他人发起的合租</td>
|
||
<td>底部导航</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('1446-350')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>L1</td>
|
||
<td>推广中心</td>
|
||
<td>邀请好友、获取返现</td>
|
||
<td>底部导航</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('1560-673')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td>L1</td>
|
||
<td>登录/注册</td>
|
||
<td>用户认证</td>
|
||
<td>首页点击登录</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('2-6')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- 登录注册流程 -->
|
||
<section id="flow-auth">
|
||
<h2>🔐 登录注册流程</h2>
|
||
|
||
<h3>完整认证流程图</h3>
|
||
<div class="mermaid">
|
||
flowchart LR
|
||
subgraph 登录流程
|
||
A1[登录页面] --> A2{选择方式}
|
||
A2 -->|社交登录| A3[微信/谷歌/FB/Twitter]
|
||
A2 -->|账号登录| A4[输入手机/邮箱+密码]
|
||
A3 --> A5[授权回调]
|
||
A4 --> A6[验证账号]
|
||
A5 --> A7[登录成功]
|
||
A6 --> A7
|
||
A4 -->|忘记密码| B1
|
||
end
|
||
|
||
subgraph 忘记密码
|
||
B1[选择验证方式] --> B2{手机/邮箱}
|
||
B2 -->|手机| B3[输入手机号]
|
||
B2 -->|邮箱| B4[输入邮箱]
|
||
B3 --> B5[获取验证码]
|
||
B4 --> B5
|
||
B5 --> B6[输入验证码]
|
||
B6 --> B7[设置新密码]
|
||
B7 --> A1
|
||
end
|
||
|
||
subgraph 注册流程
|
||
C1[注册页面] --> C2[输入手机/邮箱]
|
||
C2 --> C3[获取验证码]
|
||
C3 --> C4[输入验证码]
|
||
C4 --> C5[设置密码]
|
||
C5 --> C6[注册成功]
|
||
C6 --> A7
|
||
end
|
||
|
||
style A7 fill:#370CE2,color:#fff
|
||
style C6 fill:#370CE2,color:#fff
|
||
</div>
|
||
|
||
<div style="text-align:center; margin: 20px 0;">
|
||
<button class="figma-tab active" onclick="switchFigmaPage('2-6')" style="padding: 15px 30px; font-size: 1em;">
|
||
🔍 查看登录/注册设计稿
|
||
</button>
|
||
</div>
|
||
|
||
<h3>登录页面状态</h3>
|
||
<div class="page-structure">
|
||
<div class="page-card">
|
||
<h4>登录_默认 <span class="badge">入口</span></h4>
|
||
<ul>
|
||
<li>iShare Logo 展示</li>
|
||
<li>社交登录按钮 (微信/谷歌/FB/Twitter)</li>
|
||
<li>分隔线 "Or"</li>
|
||
<li>手机号/邮箱输入框</li>
|
||
<li>密码输入框</li>
|
||
<li>记住账号复选框</li>
|
||
<li>忘记密码链接</li>
|
||
<li>登录按钮 (主色)</li>
|
||
<li>创建账户链接</li>
|
||
</ul>
|
||
</div>
|
||
<div class="page-card">
|
||
<h4>登录_输入 <span class="badge">交互</span></h4>
|
||
<ul>
|
||
<li>输入框获得焦点样式</li>
|
||
<li>实时格式验证</li>
|
||
<li>密码显示/隐藏切换</li>
|
||
<li>按钮激活状态</li>
|
||
</ul>
|
||
</div>
|
||
<div class="page-card">
|
||
<h4>忘记密码_手机验证</h4>
|
||
<ul>
|
||
<li>标题：找回密码</li>
|
||
<li>手机号输入框</li>
|
||
<li>获取验证码按钮</li>
|
||
<li>验证码输入框</li>
|
||
<li>下一步按钮</li>
|
||
</ul>
|
||
</div>
|
||
<div class="page-card">
|
||
<h4>注册_默认</h4>
|
||
<ul>
|
||
<li>创建账户标题</li>
|
||
<li>手机号/邮箱输入框</li>
|
||
<li>验证码输入框</li>
|
||
<li>密码输入框</li>
|
||
<li>用户协议勾选</li>
|
||
<li>注册按钮</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 购买流程 -->
|
||
<section id="flow-purchase">
|
||
<h2>💳 服务购买流程</h2>
|
||
|
||
<h3>购买流程图</h3>
|
||
<div class="mermaid">
|
||
flowchart LR
|
||
A[主页/服务列表] -->|点击服务卡片| B[服务详情页]
|
||
B -->|查看| C[服务介绍]
|
||
B -->|查看| D[价格套餐]
|
||
B -->|查看| E[会员权益]
|
||
B -->|查看| F[常见问题]
|
||
B -->|点击购买| G[确认订单]
|
||
G --> H[选择支付方式]
|
||
H --> I[完成支付]
|
||
I -->|成功| J[获取账号信息]
|
||
I -->|失败| K[重新支付]
|
||
K --> H
|
||
|
||
style A fill:#370CE2,color:#fff
|
||
style I fill:#E94C89,color:#fff
|
||
style J fill:#C22F6C,color:#fff
|
||
</div>
|
||
|
||
<div style="text-align:center; margin: 20px 0;">
|
||
<button class="figma-tab active" onclick="switchFigmaPage('1145-913')" style="padding: 15px 30px; font-size: 1em;">
|
||
🔍 查看主页/服务列表设计稿
|
||
</button>
|
||
</div>
|
||
|
||
<h3>操作步骤</h3>
|
||
<div class="flow-steps">
|
||
<div class="flow-step">
|
||
<div class="step-num">1</div>
|
||
<strong>浏览服务</strong><br>
|
||
<small>在主页查看服务列表</small>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">2</div>
|
||
<strong>选择服务</strong><br>
|
||
<small>点击感兴趣的服务</small>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">3</div>
|
||
<strong>查看详情</strong><br>
|
||
<small>了解价格和权益</small>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">4</div>
|
||
<strong>确认购买</strong><br>
|
||
<small>选择套餐，确认订单</small>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">5</div>
|
||
<strong>完成支付</strong><br>
|
||
<small>支付并获取账号</small>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 拼车流程 -->
|
||
<section id="flow-carpool">
|
||
<h2>🚗 广场/拼车流程</h2>
|
||
|
||
<h3>拼车流程图</h3>
|
||
<div class="mermaid">
|
||
flowchart LR
|
||
A[进入广场] --> B[浏览车票列表]
|
||
B --> C{筛选}
|
||
C -->|按服务类型| D[Netflix/Spotify等]
|
||
C -->|按价格| E[价格区间]
|
||
C -->|按状态| F[可上车/已满员]
|
||
D --> G[查看车票详情]
|
||
E --> G
|
||
F --> G
|
||
G --> H{决定}
|
||
H -->|上车| I[确认加入]
|
||
H -->|返回| B
|
||
I --> J[支付车费]
|
||
J --> K[上车成功]
|
||
K --> L[获取账号信息]
|
||
|
||
style A fill:#370CE2,color:#fff
|
||
style K fill:#E94C89,color:#fff
|
||
style L fill:#C22F6C,color:#fff
|
||
</div>
|
||
|
||
<div style="text-align:center; margin: 20px 0;">
|
||
<button class="figma-tab active" onclick="switchFigmaPage('1446-350')" style="padding: 15px 30px; font-size: 1em;">
|
||
🔍 查看广场/拼车设计稿
|
||
</button>
|
||
</div>
|
||
|
||
<div class="info-box warning">
|
||
<strong>⚠️ 拼车规则说明</strong><br>
|
||
<ul style="margin-top: 10px; padding-left: 20px;">
|
||
<li>每个车票有固定的座位数量（通常4-6人）</li>
|
||
<li>上车后不支持退款，请确认后再操作</li>
|
||
<li>账号信息会在支付成功后自动显示</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页面详情 -->
|
||
<section id="pages">
|
||
<h2>📱 所有页面清单</h2>
|
||
|
||
<h3>Figma 设计文件结构</h3>
|
||
<table>
|
||
<tr>
|
||
<th>Page</th>
|
||
<th>包含的Frame</th>
|
||
<th>说明</th>
|
||
<th>查看</th>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>原型分析</strong></td>
|
||
<td>奈飞小镇、银河录像局、Sharesub</td>
|
||
<td>竞品分析与参考</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('0-1')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>全局样式</strong></td>
|
||
<td>颜色系统、字体规范</td>
|
||
<td>设计系统基础</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('245-173')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>登录/注册</strong></td>
|
||
<td>登录_默认、登录_输入、注册、忘记密码、流程图</td>
|
||
<td>用户认证完整流程</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('2-6')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>首页</strong></td>
|
||
<td>登录欢迎页（Web/Mobile）</td>
|
||
<td>品牌落地页</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('1146-302')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>主页</strong></td>
|
||
<td>服务列表、详情页、支付页、FAQ、导航</td>
|
||
<td>核心功能页面</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('1145-913')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>广场</strong></td>
|
||
<td>车票_全部、车票_已上车、车票详情</td>
|
||
<td>拼车社区功能</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('1446-350')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>推广</strong></td>
|
||
<td>推广页面、邀请规则说明</td>
|
||
<td>用户增长功能</td>
|
||
<td><button class="figma-tab" onclick="switchFigmaPage('1560-673')" style="padding:5px 10px;font-size:0.8em;">查看</button></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>底部导航结构</h3>
|
||
<div class="mermaid">
|
||
graph LR
|
||
A[首页] --- B[广场] --- C[推广] --- D[我的]
|
||
|
||
A --> A1[服务列表]
|
||
B --> B1[车票列表]
|
||
C --> C1[邀请返现]
|
||
D --> D1[个人中心]
|
||
|
||
style A fill:#370CE2,color:#fff
|
||
style B fill:#E94C89,color:#fff
|
||
style C fill:#E94C89,color:#fff
|
||
style D fill:#E94C89,color:#fff
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 设计规范 -->
|
||
<section id="design">
|
||
<h2>🎨 设计规范</h2>
|
||
|
||
<div style="text-align:center; margin-bottom: 30px;">
|
||
<button class="figma-tab active" onclick="switchFigmaPage('245-173')" style="padding: 15px 30px; font-size: 1em;">
|
||
🔍 查看完整设计规范
|
||
</button>
|
||
</div>
|
||
|
||
<h3>主题色 (Theme Colors)</h3>
|
||
<div class="color-palette">
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #370CE2;"></div>
|
||
<span><strong>#370CE2</strong></span>
|
||
<span>Pink 700 · 主色</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #C22F6C;"></div>
|
||
<span><strong>#C22F6C</strong></span>
|
||
<span>Pink 600 · 点击</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #E94C89;"></div>
|
||
<span><strong>#E94C89</strong></span>
|
||
<span>Pink 500 · 常规</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #ED6997;"></div>
|
||
<span><strong>#ED6997</strong></span>
|
||
<span>Pink 400 · 悬停</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #FBC7D4;"></div>
|
||
<span><strong>#FBC7D4</strong></span>
|
||
<span>Pink 100</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #FFE8ED;"></div>
|
||
<span><strong>#FFE8ED</strong></span>
|
||
<span>Pink 50</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>中性色 (Neutral Colors)</h3>
|
||
<div class="color-palette">
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #1D222A;"></div>
|
||
<span><strong>#1D222A</strong></span>
|
||
<span>Neutral 700 · 主文字</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #4E596A;"></div>
|
||
<span><strong>#4E596A</strong></span>
|
||
<span>Neutral 600</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #838C99;"></div>
|
||
<span><strong>#838C99</strong></span>
|
||
<span>Neutral 500</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #B8BBBF;"></div>
|
||
<span><strong>#B8BBBF</strong></span>
|
||
<span>Neutral 400 · 占位符</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #F5F5F5; border: 1px solid #999;"></div>
|
||
<span><strong>#F5F5F5</strong></span>
|
||
<span>Neutral 100</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-swatch" style="background: #FFFFFF; border: 1px solid #999;"></div>
|
||
<span><strong>#FFFFFF</strong></span>
|
||
<span>Neutral 50 · 背景</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>字体规范</h3>
|
||
<table>
|
||
<tr>
|
||
<th>样式</th>
|
||
<th>字号</th>
|
||
<th>字重</th>
|
||
<th>用途</th>
|
||
</tr>
|
||
<tr><td>Header</td><td>24px</td><td>700 (Bold)</td><td>页面标题</td></tr>
|
||
<tr><td>Subtitle</td><td>20px</td><td>700 (Bold)</td><td>副标题、区块标题</td></tr>
|
||
<tr><td>Body Bold</td><td>16px</td><td>700 (Bold)</td><td>强调文字、按钮</td></tr>
|
||
<tr><td>Body Regular</td><td>16px</td><td>400 (Regular)</td><td>正文内容</td></tr>
|
||
<tr><td>Caption Bold</td><td>14px</td><td>700 (Bold)</td><td>标签、小标题</td></tr>
|
||
<tr><td>Caption Regular</td><td>14px</td><td>400 (Regular)</td><td>辅助说明</td></tr>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer style="text-align: center; padding: 40px; opacity: 0.7;">
|
||
<p>📎 Figma 设计源文件：<a href="https://www.figma.com/design/LdrKDCBrE4ve4UAYjQxWrC/iShare--Copy-" target="_blank" style="color: #E94C89;">点击查看</a></p>
|
||
<p style="margin-top: 10px;">生成日期：2026年2月1日</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// Initialize Mermaid
|
||
mermaid.initialize({
|
||
startOnLoad: true,
|
||
theme: 'dark',
|
||
themeVariables: {
|
||
primaryColor: '#370CE2',
|
||
primaryTextColor: '#fff',
|
||
primaryBorderColor: '#E94C89',
|
||
lineColor: '#E94C89',
|
||
secondaryColor: '#E94C89',
|
||
tertiaryColor: '#1a1a2e'
|
||
}
|
||
});
|
||
|
||
// Switch Figma page
|
||
function switchFigmaPage(nodeId) {
|
||
const iframe = document.getElementById('figma-frame');
|
||
iframe.src = `https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/design/LdrKDCBrE4ve4UAYjQxWrC/iShare--Copy-?node-id=${nodeId}`;
|
||
|
||
// Update active tab
|
||
document.querySelectorAll('.figma-tabs .figma-tab').forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
event.target.classList.add('active');
|
||
|
||
// Scroll to preview section
|
||
document.getElementById('figma-preview').scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
|
||
// Smooth scroll for navigation
|
||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||
tab.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
target.scrollIntoView({ behavior: 'smooth' });
|
||
|
||
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|