一个vibe的 12306 App “本人车票” 页面的纯前端 HTML 实现，支持可视化编辑车票信息。
项目截图
功能特点
1. 高度还原的 UI 设计
-
精确还原 12306 官方 App 的界面布局和视觉风格
-
紧凑的排版：时间、站点、车次信息清晰展示
-
学生票提示：橙色圆角提示框，带感叹号图标
-
操作按钮：改签、退票、变更到站功能入口
-
附加服务：餐饮特产、订酒店、租车约车
2. 隐藏编辑模式
页面右上角有一个极小的绿色圆点（几乎不可见），点击后可进入编辑模式：
3. 可编辑内容
点击绿点进入编辑弹窗后，可以修改：
|
编辑项 |
说明 |
|---|---|
|
用户姓名 |
修改页面顶部显示的用户名 |
|
订单信息 |
订单号、车次、出发/到达站 |
|
时间信息 |
出发时间、到达时间、日期、星期 |
|
座位信息 |
座位类型、车厢号、座位号 |
|
价格信息 |
票价、折扣（留空则不显示） |
|
票种切换 |
学生票/成人票切换 |
|
增删车票 |
添加新车票块或删除现有块 |
4. 智能显示逻辑
-
学生票：勾选后显示橙色提示框，标签显示”学生票”
-
成人票：不显示提示框，标签显示”成人票”
-
折扣为空：价格旁不显示折扣标签
-
折扣有值：显示如”6折”、”5折”等折扣标签
使用方法
直接打开
-
将 HTML 文件保存为
ticket.html或使用我部署的GitHub page -
双击文件在浏览器中打开
-
即可查看默认的车票信息
进入编辑模式
-
将鼠标移动到页面右上角（”本人车票”标题右侧附近）
-
寻找极小的绿色圆点
-
点击绿点打开编辑弹窗
-
修改需要编辑的字段
-
点击”保存”应用更改
添加新车票
-
进入编辑模式
-
滚动到弹窗底部
-
点击”+ 添加新车票块“按钮
-
填写新车票信息
-
保存后即可看到新的车票卡片
项目地址
demo:
https://theforeveriris.github.io/simulated-12306-view/
github:7
https://github.com/theforeveriris/simulated-12306-view