LOG1997 5fe2279586 96 UI optimization (#141)
* fix(home): 🐛 解决多次切换路由后页面卡顿的问题 #96

卸载路由时清除requestAnimationFrame

* feat:  文件存储使用Blob格式

* style: 💄 修改部分类型any为具体类型

* feat:  界面设置中模块使用瀑布流布局 #96

* fix: 🐛 md文档更换文件夹解决控制台警告

* style: 💄 switch按钮改回使用daisyui组件

* refactor: ♻️ 所有人员列表提取tableColumn

* style: 💄 奖项列表中的图片类型修复

* fix(globalConfig): 修复当前音乐项类型缺失问题

* feat:  single person not done

* feat:  可添加单人 #96

* build(.gitignore): 添加 auto-imports.d.ts 到忽略文件

* fix: 🐛 上传、下载excel文件时修复路径错误

打包成应用和网页端的baseUrl不一样,使用环境变量来表示

* fix: 🐛 导入人员列表时处理有值为空的情况

* style: 💄 改变toaster的组件

* fix: 🐛 上传文件、解析数据与存储/读取数据的处理

、

* fix(Config): 更新备案信息链接样式

将备案信息的段落标签替换为可点击的链接标签,使用户能够直接跳转到工信部备案查询页面。同时添加了悬停效果样式,提升用户体验。

* feat:  首页奖项列表样式修改 not done #96

* chore(deps): ✏️ 更新依赖版本

* chore: ✏️ gsap list demo

* build: 🏗️ docker构建优化

* chore: ✏️ gsap scroll demo

* style: 💄 gsap demno

* feat:  demo smooth scroll gsap scrolltrigger

* feat(Demo): 添加更多颜色选项并注释GSAP动画

* refactor(PrizeList): 重构奖品列表组件结构

* feat(PrizeList): 重构奖品列表组件并添加滚动动画

* feat:  增加定时抽取功能 #96

* feat:  添加定时抽取功能的说明

* feat:  优化gsap #96

项数不多时不触发gsap

* style: 💄 文本修改

* feat:  优化

* feat:  优化奖项列表

* fix(Home): 修复奖品列表滚动检测逻辑

* fix(home): 修复抽奖停止逻辑避免重复执行;调整卡片垂直居中位置计算

* feat:  播放中奖音频 #96

* style: 💄 下载模板成功后进行提示

* docs: 📝 readme更新

* ci: 👷 git action触发改为推送release版本时执行
2025-12-29 15:44:56 +08:00
2025-12-29 15:44:56 +08:00
2025-12-10 22:17:26 +08:00
2024-01-02 21:50:01 +08:00
2025-12-18 17:32:00 +08:00
2025-12-28 14:37:52 +08:00
2025-12-29 15:44:56 +08:00
2025-01-08 00:07:04 +08:00
2025-12-22 17:28:10 +08:00
2024-01-02 21:50:01 +08:00
2024-01-02 21:50:01 +08:00
2025-12-28 00:04:20 +08:00
2025-12-10 00:10:33 +08:00
2024-01-17 15:12:54 +08:00
2024-01-11 00:11:27 +08:00
2025-12-28 00:04:20 +08:00
2025-12-28 00:04:20 +08:00
2025-12-29 15:44:56 +08:00
2024-11-22 16:41:14 +08:00
2024-01-02 21:50:01 +08:00

log-lottery 🚀🚀🚀🚀

MIT MIT github vue3 build

log-lottery是一个可配置可定制化的抽奖应用炫酷3D球体可用于年会抽奖等活动支持奖品、人员、界面、图片音乐配置。

如果进入网站遇到图片无法显示或有报错的情况,请先到【全局配置】-【界面配置】菜单中点击【重置所有数据】按钮清除数据后进行更新。 该项目将在近期进行内部代码重构开发新功能,预计元旦节前三天上线新版本。

要求

使用PC端最新版Chrome或Edge浏览器。

访问地址:

https://to2026.xyz/log-lottery

or

https://log1997.github.io/log-lottery/

TODO

  • 🕍 炫酷3D球体年会抽奖必备开箱即用
  • 💾 本地持久化存储
  • 🎁 奖品奖项配置
  • 👱 抽奖名单设置管理
  • 🎼 播放背景音乐
  • 🖼️ excel表格导入人员名单、抽奖结果使用excel导出
  • 🎈 可增加临时抽奖
  • 🧨 国际化多语言
  • 🍃 更换背景图片
  • 🚅 添加docker构建
  • 😘 弹幕(开发中)
  • 🧵 卡片组成多种形状

... 需要更多功能或发现bug请留言issues

详细介绍

配置参与人员

于人员配置管理界面下载excel模板按要求填好数据后导入即可。

配置奖项

于奖项配置管理界面添加奖项后,自定义修改名称、抽取人数、是否全员参加、图片显示。

界面配置

可自定义配置标题、列数、卡片颜色、首页图案等。

图片和音乐管理

上传图片或音乐即可数据使用indexdb在浏览器本地进行存储。

预览

首页

img2-1 img2-2

抽奖

img2-1 img2-2

配置

img2-1 img2-1 img2-1 img2-1

图片音乐配置

技术

  • vue3
  • threejs
  • indexdb
  • pinia
  • daisyui

开发

安装依赖

pnpm i
or
npm install

开发运行

pnpm dev
or
npm run dev

打包

pnpm build
or
npm run build

项目思路来源于 https://github.com/moshang-xc/lottery

Docker支持

以下任意方式选一种即可

  1. 拉取镜像从Docker Hub拉取镜像log-lottery

    docker pull log1997/log-lottery:latest
    

    运行容器

    docker run -d --name log-lottery -p 9279:80 log1997/log-lottery:latest
    
  2. 手动构建镜像

    docker build -t log-lottery .
    

    运行容器

    docker run -d -p 9279:80 log-lottery
    

    容器运行成功后即可在本地通过http://localhost:9279/log-lottery/访问

  3. 软件安装包

    可前往Releases下载。 目前只支持windows平台使用跨平台安装包暂不支持如有需要请自行编译参照贡献文档

支持项目

💝 赞助支持

如果您觉得 log-lottery 对您有帮助,欢迎赞助支持,您的支持是我们不断前进的动力!

WeChat Code

Star History

Star History Chart

License

MIT

Description
No description provided
Readme MIT 26 MiB
Languages
TypeScript 44.4%
Vue 41.3%
CSS 6.3%
SCSS 3%
JavaScript 2.8%
Other 2.1%