Skip to content
ChengX3Public

About

测你马 测测2026你是什么马

Resources

Stars

3 stars

Watchers

0 watching

Forks

Latest commit

 

History

6 Commits

Folders and files

Repository files navigation

2026 马年职场测评 - 你是什么马?(简称 测你马)

2026 是马年,打工人的精神状态还好吗?来测测你是职场里的什么马!

一个有趣的 H5 测评小应用,通过回答职场相关问题,测出你是哪种"职场马"。支持生成分享图片,方便发朋友圈。

开发起因是刷抖音看到有人发类似的结果图片 但是只是PS一张图片 于是想结合测评来生成

预览

马的类型

测评共有 15 种马,总有一款属于你:

马名 特点
牛马 全公司最好用的牲口,996是福报
白聋马 选择性耳聋,老板叫你装没听见
马冬梅 健忘症晚期,开完会啥也没记住
马bee 改了99版甲方要第一版,随时爆炸
皇阿马 天老大我老二,老板算什么
刀马 一上班就想毁灭世界
战马 热爱工作,两眼一睁就是干
爱马仕 梦想奢侈品,现实爱玛电动车
收款马 工资到账是唯一清醒的一天
马卡笼 踩坑专业户,运气差到离谱
千里马 离家千里,抢票难回家更难
河马 能吃能睡能躺平
搬马 哪里需要哪里搬,全能工具人
傻马特 "嗯嗯嗯好的好的",敷衍大师
饿了马 干饭第一名,工位抽屉是小卖部

功能特点

  • 15 道沙雕职场测评题
  • 15 种马的测评结果
  • 毒舌结果描述
  • 自动生成分享图片(带圆角 PNG)
  • 支持长按保存 / 点击下载
  • 移动端适配

技术栈

  • Vue 3 - 前端框架
  • Vite - 构建工具
  • html2canvas - 生成分享图片

快速开始

安装依赖

npm install

本地开发

npm run dev

构建生产版本

npm run build

预览生产版本

npm 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 修复

声明

  • 项目素材来自网络,如有侵权请联系删除
  • 本项目仅供娱乐,测评结果不代表任何实际意义

开源协议

Apache-2.0 License


如果觉得有趣,欢迎 Star 支持一下!

About

测你马 测测2026你是什么马

Resources

Stars

3 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages