sujianhua/knowledge-base
Archived
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(user-guide): 调整演示页面卡片为自适应高度

Browse Source 
- 将 iphone-card 固定高度改为 min-height，解决内容被遮挡问题
- card-body overflow 改为 visible，确保内容完整显示
- 优化排版：字体大小、间距调整
- 更新章节标题编号格式（如 "01" → "一、")
- 补充实名认证表格、申摊步骤等说明内容
This commit is contained in:
SoKingwah
2026-04-20 01:27:31 +08:00
parent 7465ed7eb3
commit 71c4556e16
1 changed files with 94 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user-guide/演示h5_v2_iPhone16竖屏比例.html
+94 -82
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿尼坊小程序 - 用户指南 (截图排版版)</title> <title>阿尼坊小程序 - 用户指南（公众号截图版）</title>
<style> <style>
:root { :root {
--primary-color: #6366f1; --primary-color: #6366f1;
@@ -27,27 +27,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 60px 0; padding: 20px 0;
line-height: 1.5; line-height: 1.7;
} }
/* 顶部提示工具栏 */ /* 顶部提示工具栏 - 已隐藏 */
.toolbar { .toolbar {
position: fixed; display: none;
top: 0; left: 0; right: 0;
background: #0f172a;
color: #fff;
text-align: center;
padding: 12px;
font-size: 14px;
z-index: 100;
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
} }
/* 核心：iPhone16 竖屏卡片 9:19.5 (393x852) */ /* 核心：iPhone16 竖屏卡片 9:19.5 (393x852) - 自适应高度 */
.iphone-card { .iphone-card {
width: 393px; width: 393px;
height: 852px; min-height: 852px;
background-color: var(--bg-content); background-color: var(--bg-content);
margin-bottom: 40px; margin-bottom: 40px;
position: relative; position: relative;
@@ -72,9 +64,9 @@
} }
.card-body { .card-body {
padding: 24px 20px; padding: 28px 24px;
flex: 1; flex: 1;
overflow: hidden; overflow: visible;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -92,21 +84,21 @@
} }
/* 内部排版样式 */ /* 内部排版样式 */
h1 { font-size: 22px; margin-bottom: 16px; color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 8px; } h1 { font-size: 24px; margin-bottom: 20px; color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }
h2 { font-size: 18px; margin: 16px 0 8px; color: var(--text-main); } h2 { font-size: 20px; margin: 18px 0 10px; color: var(--text-main); }
h3 { font-size: 15px; margin: 12px 0 6px; color: var(--text-main); font-weight: 600; } h3 { font-size: 17px; margin: 14px 0 8px; color: var(--text-main); font-weight: 600; }
p { margin-bottom: 10px; font-size: 14px; color: var(--text-muted); } p { margin-bottom: 12px; font-size: 16px; color: var(--text-muted); }
ul, ol { margin-bottom: 12px; padding-left: 20px; font-size: 14px; color: var(--text-muted); } ul, ol { margin-bottom: 14px; padding-left: 22px; font-size: 16px; color: var(--text-muted); }
li { margin-bottom: 6px; } li { margin-bottom: 8px; }
/* 封面特殊排版 */ /* 封面特殊排版 */
.cover-body { justify-content: center; align-items: center; text-align: center; } .cover-body { justify-content: center; align-items: center; text-align: center; }
.cover-icon { font-size: 64px; margin-bottom: 20px; } .cover-icon { font-size: 64px; margin-bottom: 20px; }
.cover-title { font-size: 28px; color: var(--primary-color); margin-bottom: 10px; border: none;} .cover-title { font-size: 28px; color: var(--primary-color); margin-bottom: 12px; border: none;}
.cover-subtitle { font-size: 16px; color: var(--text-muted); margin-bottom: 40px; } .cover-subtitle { font-size: 17px; color: var(--text-muted); margin-bottom: 40px; }
.cover-list { text-align: left; background: #f8fafc; padding: 20px 30px; border-radius: 12px; width: 100%; border: 1px solid var(--border-color); } .cover-list { text-align: left; background: #f8fafc; padding: 22px 32px; border-radius: 12px; width: 100%; border: 1px solid var(--border-color); }
.cover-list ol { margin-bottom: 0; } .cover-list ol { margin-bottom: 0; }
.cover-list li { margin-bottom: 12px; font-weight: 500;} .cover-list li { margin-bottom: 14px; font-weight: 500; font-size: 16px;}
/* 截图图片控制 */ /* 截图图片控制 */
.img-wrapper { text-align: center; margin: 10px 0; flex-shrink: 0; } .img-wrapper { text-align: center; margin: 10px 0; flex-shrink: 0; }
@@ -119,25 +111,25 @@
} }
/* 表格样式适配移动端 */ /* 表格样式适配移动端 */
table { width: 100%; border-collapse: collapse; margin: 12px 0; background-color: white; font-size: 12px; } table { width: 100%; border-collapse: collapse; margin: 14px 0; background-color: white; font-size: 14px; }
th, td { border: 1px solid var(--border-color); padding: 8px; text-align: left; } th, td { border: 1px solid var(--border-color); padding: 10px; text-align: left; }
th { background-color: #f8fafc; font-weight: 600; color: var(--text-main); } th { background-color: #f8fafc; font-weight: 600; color: var(--text-main); }
/* 提示框样式 */ /* 提示框样式 */
.alert { padding: 12px 14px; border-radius: 8px; margin: 12px 0; display: flex; flex-direction: column; font-size: 13px; } .alert { padding: 14px 16px; border-radius: 8px; margin: 14px 0; display: flex; flex-direction: column; font-size: 14px; }
.alert.warning { background-color: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; } .alert.warning { background-color: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; }
.alert.info { background-color: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; } .alert.info { background-color: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }
.alert strong { margin-bottom: 4px; font-size: 14px; } .alert strong { margin-bottom: 6px; font-size: 16px; }
.alert p { margin-bottom: 4px; font-size: 13px; color: inherit; } .alert p { margin-bottom: 4px; font-size: 14px; color: inherit; }
.alert p:last-child { margin-bottom: 0; } .alert p:last-child { margin-bottom: 0; }
/* 代码块样式 */ /* 代码块样式 */
pre { pre {
background-color: #1e293b; color: #e2e8f0; padding: 12px; border-radius: 8px; background-color: #1e293b; color: #e2e8f0; padding: 14px; border-radius: 8px;
margin: 10px 0; font-size: 12px; white-space: pre-wrap; word-wrap: break-word; margin: 12px 0; font-size: 14px; white-space: pre-wrap; word-wrap: break-word;
} }
code { font-family: ui-monospace, monospace; } code { font-family: ui-monospace, monospace; }
p code, li code { background-color: #f1f5f9; color: #ef4444; padding: 2px 4px; border-radius: 4px; } p code, li code { background-color: #f1f5f9; color: #ef4444; padding: 2px 6px; border-radius: 4px; font-size: 14px; }
</style> </style>
</head> </head>
<body> <body>
@@ -152,25 +144,25 @@
<div class="cover-icon">🦊</div> <div class="cover-icon">🦊</div>
<h1 class="cover-title">阿尼坊小程序</h1> <h1 class="cover-title">阿尼坊小程序</h1>
<div class="cover-subtitle">用户操作指南</div> <div class="cover-subtitle">用户操作指南</div>
<div class="cover-list"> <div class="cover-list">
<ol> <ol>
<li><strong style="color:var(--primary-color)">登录流程</strong> - 微信授权登录</li> <li><strong style="color:var(--primary-color)">一、登录流程</strong> - 微信授权登录</li>
<li><strong style="color:var(--primary-color)">实名认证</strong> - 完成身份验证</li> <li><strong style="color:var(--primary-color)">二、实名认证</strong> - 完成身份验证</li>
<li><strong style="color:var(--primary-color)">申摊流程</strong> - 申请摊位参展</li> <li><strong style="color:var(--primary-color)">三、申摊流程</strong> - 申请摊位参展</li>
<li><strong style="color:var(--primary-color)">预约详情</strong> - 查看申请状态</li> <li><strong style="color:var(--primary-color)">四、预约详情</strong> - 查看申请状态</li>
</ol> </ol>
</div> </div>
<p style="margin-top: 30px; font-size: 13px;">欢迎使用阿尼坊！本指南将帮助您快速上手，顺利参与动漫市集。如有问题请通过「我的」-「意见反馈」联系客服。</p> <p style="margin-top: 30px; font-size: 15px;">欢迎使用阿尼坊！本指南将帮助您快速上手，顺利参与动漫市集。如有问题请通过「我的」-「意见反馈」联系客服。</p>
</div> </div>
<div class="card-footer">- 官方运营指南 -</div> <div class="card-footer">- 官方运营指南 -</div>
</div> </div>
<!-- Page 2: 登录流程 (上) --> <!-- Page 2: 登录流程 -->
<div class="iphone-card"> <div class="iphone-card">
<div class="card-header"><span>🦊 阿尼坊</span><span>02 / 07</span></div> <div class="card-header"><span>🦊 阿尼坊</span><span>02 / 07</span></div>
<div class="card-body"> <div class="card-body">
<h1>01 登录流程</h1> <h1>一、登录流程</h1>
<p>首次打开阿尼坊小程序时，系统会引导您完成微信登录。</p> <p>首次打开阿尼坊小程序时，系统会引导您完成微信登录。</p>
<h3>1. 打开小程序</h3> <h3>1. 打开小程序</h3>
@@ -191,12 +183,12 @@
<div class="card-footer">- 官方运营指南 -</div> <div class="card-footer">- 官方运营指南 -</div>
</div> </div>
<!-- Page 3: 登录流程 (下) --> <!-- Page 3: 登录流程 (续) -->
<div class="iphone-card"> <div class="iphone-card">
<div class="card-header"><span>🦊 阿尼坊</span><span>03 / 07</span></div> <div class="card-header"><span>🦊 阿尼坊</span><span>03 / 07</span></div>
<div class="card-body"> <div class="card-body">
<h1>01 登录流程 (续)</h1> <h1>一、登录流程 (续)</h1>
<h3>3. 填写个人信息</h3> <h3>3. 填写个人信息</h3>
<p>登录表单包含头像选择、昵称填写和用户协议勾选。</p> <p>登录表单包含头像选择、昵称填写和用户协议勾选。</p>
<div class="img-wrapper"> <div class="img-wrapper">
@@ -210,7 +202,7 @@
</div> </div>
<h3>5. 完成登录</h3> <h3>5. 完成登录</h3>
<p>授权完成后，您的头像和昵称将显示在「我的」页面，表示登录成功。</p> <p>授权完成后，您的头像和昵称将显示在「我的」页面，系统自动生成唯一 UID。</p>
</div> </div>
<div class="card-footer">- 官方运营指南 -</div> <div class="card-footer">- 官方运营指南 -</div>
</div> </div>
@@ -219,7 +211,7 @@
<div class="iphone-card"> <div class="iphone-card">
<div class="card-header"><span>🦊 阿尼坊</span><span>04 / 07</span></div> <div class="card-header"><span>🦊 阿尼坊</span><span>04 / 07</span></div>
<div class="card-body"> <div class="card-body">
<h1>02 实名认证</h1> <h1>二、实名认证</h1>
<p>实名认证是使用设施预约和摊位申请功能的前置条件。</p> <p>实名认证是使用设施预约和摊位申请功能的前置条件。</p>
<h3>认证入口</h3> <h3>认证入口</h3>
@@ -229,9 +221,17 @@
</div> </div>
<h3>认证信息填写</h3> <h3>认证信息填写</h3>
<p>填写姓名和身份证号（必须与身份证保持一致）。</p> <table>
<thead>
<tr><th>字段</th><th>说明</th><th>要求</th></tr>
</thead>
<tbody>
<tr><td>真实姓名</td><td>与身份证一致</td><td>2-20个汉字</td></tr>
<tr><td>身份证号码</td><td>18位身份证号</td><td>正确格式验证</td></tr>
</tbody>
</table>
<div class="img-wrapper"> <div class="img-wrapper">
<img src="screenshots/6_填写实名认证信息.png" alt="实名认证表单" class="actual-img" style="max-height: 220px;"> <img src="screenshots/6_填写实名认证信息.png" alt="实名认证表单" class="actual-img" style="max-height: 180px;">
</div> </div>
<div class="alert warning" style="margin-top: auto;"> <div class="alert warning" style="margin-top: auto;">
@@ -242,21 +242,19 @@
<div class="card-footer">- 官方运营指南 -</div> <div class="card-footer">- 官方运营指南 -</div>
</div> </div>
<!-- Page 5: 申摊流程 (上) --> <!-- Page 5: 申摊流程 -->
<div class="iphone-card"> <div class="iphone-card">
<div class="card-header"><span>🦊 阿尼坊</span><span>05 / 07</span></div> <div class="card-header"><span>🦊 阿尼坊</span><span>05 / 07</span></div>
<div class="card-body"> <div class="card-body">
<h1>03 申摊流程</h1> <h1>三、申摊流程</h1>
<p>申请摊位参加阿尼坊动漫市集。</p>
<div class="alert info"> <div class="alert info">
<strong>💡 前置条件</strong> <strong>💡 前置条件</strong>
<p>申请摊位前请确保：✅ 已完成登录 ✅ 已实名认证</p> <p>申请摊位前请确保：<br>✅ 已完成微信登录<br>✅ 已完成实名认证</p>
</div> </div>
<h3>申请入口</h3> <h3>申请入口</h3>
<p>进入「市集」页面，点击右上角「申摊」按钮。</p> <p>进入「市集」页面，点击右上角「申摊」按钮。</p>
<div class="img-wrapper">
<img src="screenshots/1_市集界面_右上角申摊.png" alt="申摊入口" class="actual-img" style="max-height: 280px;">
</div>
<h3>填写申请信息</h3> <h3>填写申请信息</h3>
<table> <table>
@@ -264,27 +262,31 @@
<tr><th>字段</th><th>限制</th><th>说明</th></tr> <tr><th>字段</th><th>限制</th><th>说明</th></tr>
</thead> </thead>
<tbody> <tbody>
<tr><td>标题</td><td>50字内</td><td>摊位卡片标题</td></tr> <tr><td>标题</td><td>50字内</td><td>卡片标题</td></tr>
<tr><td>正文</td><td>500字内</td><td>描述内容，可用 #标签</td></tr> <tr><td>正文</td><td>500字内</td><td>描述内容，可用 #标签</td></tr>
<tr><td>图片</td><td>1张,≤5MB</td><td>卡片封面图</td></tr> <tr><td>图片</td><td>1张,≤5MB</td><td>卡片封面图</td></tr>
<tr><td>联系QQ</td><td>可修改</td><td>客服联系渠道</td></tr>
<tr><td>预约场次</td><td>下拉选择</td><td>日期 + 区域</td></tr> <tr><td>预约场次</td><td>下拉选择</td><td>日期 + 区域</td></tr>
<tr><td>动漫IP</td><td>1-10个</td><td>必选至少1个标签</td></tr> <tr><td>动漫IP</td><td>1-10个</td><td>必选至少1个标签</td></tr>
</tbody> </tbody>
</table> </table>
<p><strong>填写步骤：</strong></p>
<ol>
<li>输入标题和内容描述（正文最多500字）</li>
<li>上传一张清晰图片作为封面（≤5MB）</li>
<li>选择参展场次（日期+区域）</li>
<li>选择动漫IP标签（至少1个，最多10个）</li>
<li>勾选已阅读申摊须知，点击确认提交</li>
</ol>
</div> </div>
<div class="card-footer">- 官方运营指南 -</div> <div class="card-footer">- 官方运营指南 -</div>
</div> </div>
<!-- Page 6: 申摊流程 (下) --> <!-- Page 6: 申摊流程 (续) -->
<div class="iphone-card"> <div class="iphone-card">
<div class="card-header"><span>🦊 阿尼坊</span><span>06 / 07</span></div> <div class="card-header"><span>🦊 阿尼坊</span><span>06 / 07</span></div>
<div class="card-body"> <div class="card-body">
<h1>03 申摊流程 (续)</h1> <h1>三、申摊流程 (续)</h1>
<div class="alert info">
<strong>💡 表单填写提示</strong>
<p>系统自动保存上次填写内容（存稿机制），30天后自动清理未提交的草稿。</p>
</div>
<h3>申请状态流转</h3> <h3>申请状态流转</h3>
<table> <table>
@@ -292,19 +294,25 @@
<tr><th>状态</th><th>说明</th></tr> <tr><th>状态</th><th>说明</th></tr>
</thead> </thead>
<tbody> <tbody>
<tr><td>待抽签</td><td>申请已提交，等待系统抽签</td></tr> <tr><td>待抽签</td><td>申请已提交，等待抽签</td></tr>
<tr><td>审核中</td><td>抽签已中签，等待人工审核</td></tr> <tr><td>审核中</td><td>抽签中签，等待审核</td></tr>
<tr><td>待缴费</td><td>审核通过，等待支付费用</td></tr> <tr><td>待缴费</td><td>审核通过，等待支付</td></tr>
<tr><td>未中签/驳回</td><td>未抽中 / 审核未通过</td></tr> <tr><td>未中签</td><td>抽签未中</td></tr>
<tr><td>成功</td><td>已公布摊位号，申摊完成</td></tr> <tr><td>审核驳回</td><td>审核未通过（显示原因）</td></tr>
<tr><td>成功</td><td>已公布摊位号</td></tr>
</tbody> </tbody>
</table> </table>
<div class="alert warning"> <div class="alert warning">
<strong>⚠️ 注意事项</strong> <strong>⚠️ 场次限制</strong>
<p>1. 每天仅能申请一个场次。<br>2. 请在规定时间内完成缴费，超时将自动取消资格。</p> <p>• 每天仅能申请一个场次<br>• 申请前请确认场次信息</p>
</div> </div>
<div class="alert info">
<strong>💡 存稿机制</strong>
<p>系统自动保存上次填写内容，30天后自动清理存稿。</p>
</div>
</div> </div>
<div class="card-footer">- 官方运营指南 -</div> <div class="card-footer">- 官方运营指南 -</div>
</div> </div>
@@ -313,13 +321,16 @@
<div class="iphone-card"> <div class="iphone-card">
<div class="card-header"><span>🦊 阿尼坊</span><span>07 / 07</span></div> <div class="card-header"><span>🦊 阿尼坊</span><span>07 / 07</span></div>
<div class="card-body"> <div class="card-body">
<h1>04 预约详情</h1> <h1>四、预约详情</h1>
<p>本页面集中展示您的摊位申请记录和设施预约记录。</p> <p>查看摊位申请和设施预约记录。</p>
<h3>入口位置</h3> <h3>入口位置</h3>
<p>进入「我的」页面，点击「预约详情」图标即可进入。</p> <p>进入「我的」页面，点击「预约详情」入口。</p>
<h3>状态与操作</h3> <h3>页面结构</h3>
<p>页面分为两个栏目：<br><strong>• 摊位栏目</strong> - 摊位申请记录<br><strong>• 设施栏目</strong> - 设施预约记录</p>
<h3>摊位申请状态</h3>
<table> <table>
<thead> <thead>
<tr><th>状态</th><th>显示内容</th><th>操作</th></tr> <tr><th>状态</th><th>显示内容</th><th>操作</th></tr>
@@ -328,16 +339,17 @@
<tr><td>待缴费</td><td>订单号、金额、截止时间</td><td>支付 / 取消</td></tr> <tr><td>待缴费</td><td>订单号、金额、截止时间</td><td>支付 / 取消</td></tr>
<tr><td>待公布</td><td>订单号、退款提示</td><td>申请退款</td></tr> <tr><td>待公布</td><td>订单号、退款提示</td><td>申请退款</td></tr>
<tr><td>成功</td><td>摊位号 (如: <code>2.1 A区13</code>)</td><td>无</td></tr> <tr><td>成功</td><td>摊位号 (如: <code>2.1 A区13</code>)</td><td>无</td></tr>
<tr><td>已失效</td><td>订单号</td><td>无</td></tr>
</tbody> </tbody>
</table> </table>
<div class="alert info"> <div class="alert warning">
<strong>💡 摊位号查看</strong> <strong>⚠️ 支付时限</strong>
<p>申请最终成功后，系统会公布具体摊位号，您可在本页面的卡片详情中查看。</p> <p>请在截止时间前完成支付，超时订单自动取消。</p>
</div> </div>
<h3>支付与退款</h3> <h3>退款申请</h3>
<p>点击「支付」进入微信支付，需在截止时间前完成；符合条件的订单可点击「申请退款」发起售后。</p> <p>符合退款条件时点击「申请退款」按钮，退款成功后状态变更为「已退款」。</p>
</div> </div>
<div class="card-footer">- 官方运营指南 -</div> <div class="card-footer">- 官方运营指南 -</div>
</div> </div>