Conference-Signup-Vue（脱敏开源版）

一个面向移动端的会议报名用户端静态项目，基于 Vue 3（CDN 版本）+ Tailwind（离线脚本）构建。

该仓库来自一个真实企业会议项目的脱敏整理版本：

• 已移除真实公司、人员、接口、品牌等敏感信息；
• 已对页面样式进行脱敏处理，使用 Tailwind CSS 对样式层进行整体重构，并完全移除原项目中的自定义 CSS 样式；
• 保留完整的用户端流程与页面结构。

项目定位

• 开箱即跑：纯静态资源，不依赖构建工具。
• 移动端优先：页面样式和交互针对手机端优化。
• 流程完整：覆盖会议报名常见链路（选场次 → 邀请函/报名/日程/交通/入场码）。

---

快速开始

方式一：直接双击打开（仅静态预览）

直接打开 index.html 即可查看页面结构。

注意：部分浏览器对本地文件（file://）有安全限制，建议使用本地 HTTP 服务方式运行。

方式二：本地 HTTP 服务（推荐）

在项目根目录执行：

python3 -m http.server 8080

然后访问：

• http://localhost:8080

---

页面说明（可当作产品导航）

本项目核心页面均在 index.html 中通过 Vue 条件渲染切换。

1) 首页（home）

• 会议主视觉（Logo、标题、副标题）
• 场次选择入口
• 功能宫格入口：邀请函、参会登记、会议日程、交通路线、入场码

2) 邀请函（invite）

• 展示会议信息与视觉封面
• 用于用户查看活动主题和基本介绍

3) 报名前置认证（signupAuth）

• 进入报名前的身份确认入口

4) 登录（login）

• 支持验证码登录流程
• 作为“查看/管理报名信息”的前置步骤

5) 参会登记（signup）

• 参会人列表管理
• 新增/编辑/删除参会人
• 住宿、车牌等会务字段填写

6) 参会人编辑（ProfileEdit）

• 参会人详情编辑页
• 含字段校验逻辑

7) 报名状态（status）

• 提交结果反馈
• 提供返回首页等路径

8) 入场码前置页（AccessPre1 / AccessPre2）

• 入场码展示前的说明与准备页

9) 入场码页（Access）

• 动态生成二维码并展示
• 供现场核验使用

10) 入场码异常页（AccessError）

• 入场码拉取失败或异常状态反馈

11) 会议日程（agenda）

• 展示会议议程信息

12) 交通路线（hotel）

• 展示会场交通/到达说明

---

配置与二次开发

1) 修改会议基础信息

编辑 index.html 中的 CONFERENCE_INFO：

• title：会议主标题
• subtitle：会议副标题
• meetings：场次列表（日期、城市、酒店日期等）

2) API 接口接入

默认是离线演示：

const API_CONFIG = {
  BASE_URL: "OFFLINE_DISABLED"
};

如需接入后端，请替换为真实服务地址，并按你们接口协议对 js/start.js / js/login.js / js/check.js 做联调。

3) 资源替换

• Logo：img/logo.svg
• 背景图：img/bg.png
• 样式：css/style.css

---

项目结构

.
├── index.html                # 主页面（包含页面模板与 Vue 应用逻辑）
├── css/
│   ├── style.css             # 业务样式
│   ├── alert-custom.css      # 弹窗样式
│   └── ...
├── js/
│   ├── start.js              # 页面流程相关逻辑
│   ├── login.js              # 登录相关逻辑
│   ├── check.js              # 校验相关逻辑
│   ├── utils.js              # 工具函数
│   └── ...
└── img/
    ├── logo.svg
    └── bg.png

---

许可与免责声明

• 本项目为脱敏后的演示用途示例。
• 请勿将示例中的文案、图片、流程直接视为实际业务规则。
• 若用于生产环境，请补齐安全、权限、风控、日志与合规设计。