年会招标抽奖活动软件———仙盟创梦IDE

       年会是企业一年的总结与欢庆时刻，而抽奖环节更是点燃全场气氛的关键。如何让抽奖环节既大气又充满仪式感？选对抽奖软件至关重要！本文精心挑选了 3 款兼具实用性与氛围感的年会抽奖软件，从界面设计到功能特色，全方位为你剖析，助你轻松打造令人难忘的年会高光时刻

设置开发

奖品设置

名单导入

名单添加

抽奖记录

1. 参与者信息

• 必备字段：姓名、工号 / 编号、部门、联系方式（可选）
  • 意义：
    • 精准定位：确保奖品准确发放至个人，避免重名或混淆（如 “张三” 可能来自不同部门）。
    • 数据管理：支持按部门、岗位等维度筛选抽奖范围（如先抽基层员工，再抽管理层），灵活适配活动流程。
    • 隐私保护：联系方式可选填，平衡活动参与度与员工隐私需求。

2. 奖品信息

• 必备字段：奖品名称、奖品等级（如一等奖、二等奖）、奖品数量、中奖概率（可预设）
  • 意义：
    • 流程可控：明确各等级奖品的发放规则（如 “一等奖仅限 1 名”“三等奖中奖率 20%”），避免临时调整导致混乱。
    • 悬念营造：通过中奖概率设置，配合主持人话术（如 “本轮有 50% 的中奖机会”），提升现场紧张感和期待值。
    • 成本管理：实时显示剩余奖品数量，防止超发或漏发，便于财务核对。

二、抽奖功能字段

1. 抽奖模式

• 必备字段：随机抽奖、分组抽奖（如按部门、入职年限分组）、指定抽奖（手动选择中奖者）
  • 意义：
    • 灵活互动：随机模式营造公平感，分组模式增强团队归属感（如 “新员工专属抽奖池”），指定模式可用于嘉宾特别抽奖。
    • 节奏把控：不同模式适配不同环节（如开场用随机模式暖场，压轴环节用指定模式邀请高管抽奖），避免流程单调。

2. 展示效果

• 必备字段：滚动动画（如走马灯、扇形轮盘）、中奖特效（如弹窗、音效、全屏高光）、实时名单公示
  • 意义：
    • 仪式感拉满：动态滚动效果配合大屏展示，模拟 “开奖时刻” 的紧张氛围；中奖特效（如金色光芒、掌声音效）强化惊喜感。
    • 公平透明：实时公示中奖名单，支持回看历史记录，避免员工对结果产生质疑，增强活动公信力。

三、管理与复盘字段

1. 过程管理

• 必备字段：抽奖状态（进行中 / 已结束）、暂停 / 继续功能、弃奖补抽
  • 意义：
    • 应对突发情况：如中奖者临时离场，可暂停抽奖并启动补抽机制，确保活动流畅进行。
    • 灵活调整流程：主持人可根据现场气氛随时暂停滚动，插入互动环节（如让中奖者发表感言），提升参与感。

2. 数据复盘

• 必备字段：中奖率统计、各部门中奖分布、未中奖名单导出
  • 意义：
    • 效果评估：活动结束后分析中奖率是否符合预期（如 “原定三等奖中奖率 30%，实际为 28%”），为后续策划提供数据参考。
    • 人文关怀：导出未中奖名单，企业可针对性发送安慰奖或感谢语，避免员工因未中奖产生失落感，体现团队温度。

四、扩展增值字段（提升体验）

1. 互动功能

• 可选字段：弹幕留言、扫码签到抽奖、照片墙抽奖（显示参与者头像）
  • 意义：
    • 增强参与感：扫码签到自动加入抽奖池，减少人工录入成本；弹幕实时上墙（如 “求中大奖”）活跃现场气氛。
    • 视觉升级：照片墙抽奖用头像替代文字，配合动画缩放效果，让抽奖更具个性化和观赏性

代码

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧：名单区域 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-lg p-5 h-full">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-semibold text-dark flex items-center">
                            <i class="fa fa-users text-primary mr-2"></i>
                            参与名单
                        </h2>
                        <button id="import-list-btn" class="text-sm text-primary hover:text-primary/80 transition-colors flex items-center">
                            <i class="fa fa-upload mr-1"></i>
                            导入
                        </button>
                    </div>
                    
                    <div class="relative">
                        <input type="text" id="search-list" placeholder="搜索参与者..." class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 mb-3 text-sm">
                        <i class="fa fa-search absolute right-3 top-3 text-gray-400"></i>
                    </div>
                    
                    <div id="participants-list" class="overflow-y-auto max-h-[400px] pr-2">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                <i class="fa fa-user"></i>
                            </div>
                            <span>欧阳</span>
                        </div>
                        <button class="text-gray-400 hover:text-red-500 transition-colors delete-participant" data-id="1">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                <i class="fa fa-user"></i>
                            </div>
                            <span>上官燕</span>
                        </div>
                        <button class="text-gray-400 hover:text-red-500 transition-colors delete-participant" data-id="2">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                <i class="fa fa-user"></i>
                            </div>
                            <span>皇甫天华</span>
                        </div>
                        <button class="text-gray-400 hover:text-red-500 transition-colors delete-participant" data-id="3">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                </div>
                    
                    <div class="mt-4 flex justify-between items-center">
                        <span id="participants-count" class="text-sm text-gray-500">3 位参与者</span>
                        <button id="add-participant-btn" class="text-sm text-primary hover:text-primary/80 transition-colors flex items-center">
                            <i class="fa fa-plus mr-1"></i>
                            添加
                        </button>
                    </div>
                </div>
            </div>

            <!-- 中间：转盘区域 -->
            <div class="lg:col-span-1 flex flex-col items-center">
                <div class="bg-white rounded-xl shadow-lg p-5 w-full">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-semibold text-dark flex items-center">
                            <i class="fa fa-trophy text-secondary mr-2"></i>
                            抽奖转盘
                        </h2>
                        <div class="text-sm text-gray-500">
                            <span id="prize-level-display">平板电脑</span>
                        </div>
                    </div>
                    
                    <div class="relative w-full aspect-square max-w-md mx-auto mb-6">
                        <!-- 转盘容器 -->
                        <div id="wheel-container" class="absolute inset-0 rounded-full overflow-hidden shadow-lg border-4 border-white">
                            <!-- 转盘 -->
                            <div id="prize-wheel" class="absolute inset-0 spin-transition">
                    <div class="prize-item" style="transform: rotate(0deg); background-color: #F59E0B;">
                        <div style="transform: rotate(90deg); margin-left: 20px;">
                            二等奖
                        </div>
                    </div>
                
                    <div class="prize-item" style="transform: rotate(72deg); background-color: #10B981;">
                        <div style="transform: rotate(18deg); margin-left: 20px;">
                            三等奖
                        </div>
                    </div>
                
                    <div class="prize-item" style="transform: rotate(144deg); background-color: #3B82F6;">
                        <div style="transform: rotate(-54deg); margin-left: 20px;">
                            四等奖
                        </div>
                    </div>
                
                    <div class="prize-item" style="transform: rotate(216deg); background-color: #8B5CF6;">
                        <div style="transform: rotate(-126deg); margin-left: 20px;">
                            五等奖
                        </div>
                    </div>
                
                    <div class="prize-item" style="transform: rotate(288deg); background-color: #EC4899;">
                        <div style="transform: rotate(-198deg); margin-left: 20px;">
                            纪念奖
                        </div>
                    </div>
                </div>
                            
                            <!-- 转盘中心 -->
                            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                                <div class="w-16 h-16 bg-white rounded-full shadow-md flex items-center justify-center z-10">
                                    <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center">
                                        <i class="fa fa-gift text-white text-xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 指针 -->
                            <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/4 z-20">
                                <div class="w-8 h-16 bg-secondary rounded-b-lg shadow-md flex items-center justify-center">
                                    <div class="w-4 h-4 bg-white rounded-full"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex justify-center">
                        <button id="start-lottery-btn" class="bg-secondary hover:bg-secondary/90 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100" disabled="">
                            <i class="fa fa-play mr-2"></i>
                            开始抽奖
                        </button>
                    </div>
                </div>
                
                <!-- 当前中奖结果 -->
                <div id="result-container" class="mt-6 bg-white rounded-xl shadow-lg p-5 w-full transform transition-all duration-500 scale-0 opacity-0">
                    <h2 class="text-lg font-semibold text-dark flex items-center mb-3">
                        <i class="fa fa-star text-yellow-400 mr-2"></i>
                        中奖结果
                    </h2>
                    <div class="flex flex-col items-center justify-center py-4">
                        <div id="winner-name" class="text-2xl font-bold text-dark mb-2">--</div>
                        <div id="winner-prize" class="text-xl text-secondary">--</div>
                    </div>
                    <div class="mt-4 flex justify-center">
                        <button id="new-draw-btn" class="bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-6 rounded-full shadow-md transform hover:scale-105 transition-all">
                            继续抽奖
                        </button>
                    </div>
                </div>
            </div>

            <!-- 右侧：奖品设置和历史记录 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-lg p-5 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-semibold text-dark flex items-center">
                            <i class="fa fa-gift text-accent mr-2"></i>
                            奖品设置
                        </h2>
                        <button id="add-prize-btn" class="text-sm text-primary hover:text-primary/80 transition-colors flex items-center">
                            <i class="fa fa-plus mr-1"></i>
                            添加
                        </button>
                    </div>
                    
                    <div id="prizes-list" class="space-y-3">
                    <div class="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full #EF4444/10 flex items-center justify-center mr-3">
                                <div class="w-6 h-6 rounded-full #EF4444"></div>
                            </div>
                            <div>
                                <div class="font-medium">平板电脑</div>
                                <div class="text-sm text-gray-500">剩余: 0/1</div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="text-gray-400 hover:text-primary transition-colors edit-prize" data-id="1">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="text-gray-400 hover:text-red-500 transition-colors delete-prize" data-id="1">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="px-2 py-1 text-xs bg-primary text-white rounded-full select-prize" data-id="1">
                                已选择
                            </button>
                        </div>
                    </div>
                
                    <div class="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full #F59E0B/10 flex items-center justify-center mr-3">
                                <div class="w-6 h-6 rounded-full #F59E0B"></div>
                            </div>
                            <div>
                                <div class="font-medium">二等奖</div>
                                <div class="text-sm text-gray-500">剩余: 2/2</div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="text-gray-400 hover:text-primary transition-colors edit-prize" data-id="2">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="text-gray-400 hover:text-red-500 transition-colors delete-prize" data-id="2">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded-full select-prize" data-id="2">
                                选择
                            </button>
                        </div>
                    </div>
                
                    <div class="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full #10B981/10 flex items-center justify-center mr-3">
                                <div class="w-6 h-6 rounded-full #10B981"></div>
                            </div>
                            <div>
                                <div class="font-medium">三等奖</div>
                                <div class="text-sm text-gray-500">剩余: 3/3</div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="text-gray-400 hover:text-primary transition-colors edit-prize" data-id="3">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="text-gray-400 hover:text-red-500 transition-colors delete-prize" data-id="3">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded-full select-prize" data-id="3">
                                选择
                            </button>
                        </div>
                    </div>
                
                    <div class="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full #3B82F6/10 flex items-center justify-center mr-3">
                                <div class="w-6 h-6 rounded-full #3B82F6"></div>
                            </div>
                            <div>
                                <div class="font-medium">四等奖</div>
                                <div class="text-sm text-gray-500">剩余: 5/5</div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="text-gray-400 hover:text-primary transition-colors edit-prize" data-id="4">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="text-gray-400 hover:text-red-500 transition-colors delete-prize" data-id="4">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded-full select-prize" data-id="4">
                                选择
                            </button>
                        </div>
                    </div>
                
                    <div class="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full #8B5CF6/10 flex items-center justify-center mr-3">
                                <div class="w-6 h-6 rounded-full #8B5CF6"></div>
                            </div>
                            <div>
                                <div class="font-medium">五等奖</div>
                                <div class="text-sm text-gray-500">剩余: 10/10</div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="text-gray-400 hover:text-primary transition-colors edit-prize" data-id="5">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="text-gray-400 hover:text-red-500 transition-colors delete-prize" data-id="5">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded-full select-prize" data-id="5">
                                选择
                            </button>
                        </div>
                    </div>
                
                    <div class="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full #EC4899/10 flex items-center justify-center mr-3">
                                <div class="w-6 h-6 rounded-full #EC4899"></div>
                            </div>
                            <div>
                                <div class="font-medium">纪念奖</div>
                                <div class="text-sm text-gray-500">剩余: 20/20</div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <button class="text-gray-400 hover:text-primary transition-colors edit-prize" data-id="6">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="text-gray-400 hover:text-red-500 transition-colors delete-prize" data-id="6">
                                <i class="fa fa-trash"></i>
                            </button>
                            <button class="px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded-full select-prize" data-id="6">
                                选择
                            </button>
                        </div>
                    </div>
                </div>
                </div>
                
                <!-- 历史记录预览 -->
                <div class="bg-white rounded-xl shadow-lg p-5">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-semibold text-dark flex items-center">
                            <i class="fa fa-history text-primary mr-2"></i>
                            最近中奖记录
                        </h2>
                        <button id="view-all-history-btn" class="text-sm text-primary hover:text-primary/80 transition-colors">
                            查看全部
                        </button>
                    </div>
                    
                    <div id="recent-history" class="space-y-3 max-h-[200px] overflow-y-auto pr-2">
                <div class="p-3 bg-gray-50 rounded-lg flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full #EF4444/10 flex items-center justify-center text-EF4444 mr-3">
                            <i class="fa fa-user"></i>
                        </div>
                        <div>
                            <div class="font-medium">欧阳</div>
                            <div class="text-sm text-gray-500">2025/05/20 13:46:00</div>
                        </div>
                    </div>
                    <div class="px-2 py-1 text-xs rounded-full" style="background-color: #EF4444/10; color: #EF4444;">
                        平板电脑
                    </div>
                </div>
            </div>
                </div>
            </div>
        </div>