2026 是马年,打工人的精神状态还好吗?来测测你是职场里的什么马!
一个有趣的 H5 测评小应用,通过回答职场相关问题,测出你是哪种"职场马"。支持生成分享图片,方便发朋友圈。
开发起因是刷抖音看到有人发类似的结果图片 但是只是PS一张图片 于是想结合测评来生成
测评共有 15 种马,总有一款属于你:
| 马名 | 特点 |
|---|---|
| 牛马 | 全公司最好用的牲口,996是福报 |
| 白聋马 | 选择性耳聋,老板叫你装没听见 |
| 马冬梅 | 健忘症晚期,开完会啥也没记住 |
| 马bee | 改了99版甲方要第一版,随时爆炸 |
| 皇阿马 | 天老大我老二,老板算什么 |
| 刀马 | 一上班就想毁灭世界 |
| 战马 | 热爱工作,两眼一睁就是干 |
| 爱马仕 | 梦想奢侈品,现实爱玛电动车 |
| 收款马 | 工资到账是唯一清醒的一天 |
| 马卡笼 | 踩坑专业户,运气差到离谱 |
| 千里马 | 离家千里,抢票难回家更难 |
| 河马 | 能吃能睡能躺平 |
| 搬马 | 哪里需要哪里搬,全能工具人 |
| 傻马特 | "嗯嗯嗯好的好的",敷衍大师 |
| 饿了马 | 干饭第一名,工位抽屉是小卖部 |
- 15 道沙雕职场测评题
- 15 种马的测评结果
- 毒舌结果描述
- 自动生成分享图片(带圆角 PNG)
- 支持长按保存 / 点击下载
- 移动端适配
- Vue 3 - 前端框架
- Vite - 构建工具
- html2canvas - 生成分享图片
npm installnpm run devnpm run buildnpm run preview├── index.html
├── package.json
├── vite.config.js
├── src/
│ ├── App.vue # 主应用
│ ├── main.js # 入口文件
│ ├── assets/
│ │ ├── horses/ # 马的配图
│ │ └── qrcode/ # 二维码图片
│ ├── components/
│ │ ├── StartPage.vue # 开始页
│ │ ├── Question.vue # 答题页
│ │ └── ResultPage.vue # 结果页
│ ├── data/
│ │ ├── questions.js # 题目数据
│ │ └── horses.js # 马类型数据
│ ├── styles/
│ │ └── main.css # 全局样式
│ └── utils/
│ └── calculate.js # 计算逻辑
└── public/
└── favicon.ico
编辑 src/data/horses.js,每个马包含以下字段:
{
id: 'niuma', // 唯一标识
name: '牛马', // 显示名称
description: '...', // 毒舌描述
shortDesc: '...', // 短语(显示在图片上)
attributes: { // 属性值(0-100)
摸鱼指数: 5,
暴躁值: 20,
干饭能力: 30,
卷度: 100
},
color: '#8B4513' // 主题色
}编辑 src/data/questions.js,每道题包含问题和 4 个选项,每个选项有对应的得分数组。
- 马的配图:放入
src/assets/horses/目录,命名为{马的id}.jpg - 二维码:放入
src/assets/qrcode/qrcode.png
构建后的文件在 dist/ 目录,可以部署到任何静态托管服务:
- GitHub Pages
- Vercel
- Netlify
- 阿里云 OSS
- 腾讯云 COS
欢迎提交 Issue 和 Pull Request!
- 新增马的类型
- 新增测评题目
- 优化 UI 设计
- Bug 修复
- 项目素材来自网络,如有侵权请联系删除
- 本项目仅供娱乐,测评结果不代表任何实际意义
如果觉得有趣,欢迎 Star 支持一下!