基于 HTML + CSS + jQuery 打造的企业员工社区运营活动模板。开箱即用，替换品牌素材即可上线。
企业内部社区与员工福利运营，是 HR 与行政团队一年到头都在赶工的活：许愿墙、活动报名、投票、答题、抽奖、积分商城、排行榜……每一项都意味着一批移动端页面。从零设计开发，一个活动模块往往就要一周以上。这套模板把一家集团公司员工社区所需的完整页面体系一次性做完——42 个功能页覆盖 11 个运营模块，形成可整体复用的移动端 H5 解决方案。
模板为移动端 WAP 页面（viewport 已锁定缩放），以”积分 / 金币 / 钻石”财富体系为主线串联全部模块，主色为集团红 #a72e3e。根目录 index.html 为模板演示导航页，按模块分组列出全部 42 个功能页，方便逐页查看与演示。
模板亮点
1. 42 个功能页，11 大运营模块开箱即用
| 模块 | 页面数 | 覆盖内容 |
|---|---|---|
| 许愿墙 | 5 | 许愿墙瀑布流、开始许愿、许愿详情、我的愿望、Ta 的愿望 |
| 活动报名 | 5 | 活动列表、报名参加、签到 / 已签到状态、我参加的活动 |
| 活动申请 | 3 | 公开申请、指定成员申请、活动协议 |
| 投票 | 7 | 进行中 / 未投票 / 结果页 / 评论 / 已结束，含带图与无图两种版式 |
| 答题问卷 | 2 | 常规答题（倒计时单选）、常规问卷答题 |
| 抽奖 / 红包 | 3 | Canvas 大转盘抽奖、抽奖历史记录、红包领取弹出层 |
| 商城兑换 | 4 | 商城、购物车、领取详情、分配列表 |
| 财富 / 排行榜 | 5 | 我的财富、财富查询、积分 / 金币 / 钻石三榜 |
| 个人中心 | 2 | 我的（订单 / 地址 / 购物车入口）、我的权限 |
| 账号验证 | 5 | 手机号 / 邮箱验证及提交结果页 |
| 帮助 | 1 | 帮助说明 |
2. 财富体系贯穿全局
积分、金币、钻石三种虚拟资产在商城、抽奖、排行榜、个人中心各页保持统一的展示口径，会员等级（LV）、金币余额等状态位随处可复用，天然适配”做任务得积分—兑换好礼—排行榜 PK”的运营闭环。
3. 真实可用的活动交互
- Canvas 大转盘抽奖：基于 awardRotate 实现旋转抽奖，奖品、配色、可用金币 / 消费金币等参数均在页面顶部集中配置
- 红包弹层：基于 jquery.reveal 的模态弹出，含”领取红包 → 拆开 → 入账提示”完整链路
- 触屏焦点图轮播：商城首页 TouchSlide 自动轮播，支持自动分页
- 答题倒计时与选项判定：题目携带正确答案标记（right-key），选中即判对错
4. 状态齐全，直接对接后端
同一功能覆盖多状态版本：报名（未报 / 已报 / 签到 / 已签到）、投票（进行中 / 已结束 / 未投票 / 结果 / 评论）、验证（输入 / 提交成功）等，前端状态流转已完整呈现，后端只需替换数据源。
5. 演示导航首页
index.html 将 42 个功能页按 11 个模块分组列出，标注对应文件名，既是模板演示入口，也可作为开发阶段的页面索引清单。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| HTML5 / CSS3 | – | 页面结构与移动端布局 |
| jQuery | 1.7.1 | 弹层与页面交互 |
| TouchSlide | 1.1 | 触屏焦点图轮播 |
| awardRotate | – | Canvas 大转盘抽奖 |
| jquery.reveal | – | 模态弹窗（红包 / 中奖提示） |
| Masonry | – | 瀑布流布局 |
| normalize.css | – | 浏览器样式统一 |
项目结构
wywawj/
├── index.html # 模板演示导航页（42 个功能页索引）
│
│── 许愿墙 ──────────────────────────────────────────────
├── 许愿墙.html # 许愿墙瀑布流列表
├── 开始许愿.html # 发布愿望表单
├── 许愿详情.html # 单条愿望详情
├── 我的愿望.html # 我发布的愿望
├── Ta的愿望.html # 他人愿望列表
│
│── 活动报名 ────────────────────────────────────────────
├── 活动报名.html # 活动列表
├── 活动报名_报名参加.html # 活动详情与报名
├── 活动报名_报名参加_签到.html # 签到状态
├── 活动报名_报名参加_已签到.html # 已签到状态
├── 我参加的活动.html # 我的活动记录
│
│── 活动申请 ────────────────────────────────────────────
├── 活动申请_公开.html # 公开活动申请
├── 活动申请_指定成员.html # 指定成员活动申请
├── 活动协议.html # 活动协议文案
│
│── 投票 ────────────────────────────────────────────────
├── 投票_进行中.html # 投票结果进度条
├── 投票_进行中_未投票.html # 待投票选项
├── 投票_进行中_未投票_无图.html # 待投票（无图版式）
├── 投票_进行中_结果页.html # 投票结果
├── 投票_进行中_结果页_无图.html # 投票结果（无图版式）
├── 投票_进行中_评论.html # 投票评论
├── 投票_已结束.html # 已结束状态
│
│── 答题问卷 ────────────────────────────────────────────
├── 常规答题.html # 计时答题（单选判分）
├── 常规问卷答题.html # 问卷答题
│
│── 抽奖 / 红包 ─────────────────────────────────────────
├── 抽奖.html # Canvas 大转盘抽奖
├── 抽奖历史记录.html # 中奖记录列表
├── 红包_弹出.html # 红包领取弹层
│
│── 商城兑换 ────────────────────────────────────────────
├── 商城.html # 积分商城（轮播 + 分类）
├── 购物车.html # 购物车
├── 领取详情.html # 兑换领取详情
├── 分配列表.html # 奖品分配列表
│
│── 财富 / 排行榜 ────────────────────────────────────────
├── 我的财富.html # 个人财富总览
├── 财富查询.html # 财富明细查询
├── 积分排行榜.html # 积分榜
├── 金币排行榜.html # 金币榜
├── 钻石排行榜.html # 钻石榜
│
│── 个人中心 ────────────────────────────────────────────
├── 我的.html # 个人中心（财富 / 订单入口）
├── 我的权限.html # 权限说明
│
│── 账号验证 ────────────────────────────────────────────
├── 手机号邮箱验证.html # 双通道验证入口
├── 手机号验证.html # 手机号验证
├── 手机号验证_提交.html # 手机验证提交结果
├── 邮箱验证.html # 邮箱验证
├── 邮箱验证_提交.html # 邮箱验证提交结果
│
│── 帮助 ────────────────────────────────────────────────
├── 帮助说明.html # 帮助中心
│
├── css/
│ ├── style.css # 全部页面样式
│ └── normalize.css # 样式重置
├── js/
│ ├── jquery.min.js # jQuery 1.7.1
│ ├── TouchSlide.1.1.js # 触屏轮播
│ ├── awardRotate.js # 大转盘抽奖
│ ├── jquery.reveal.js # 模态弹窗
│ └── masonry.pkgd.min.js # 瀑布流布局
└── img/ # 页面图片素材快速开始
纯静态模板，无需安装任何依赖。
# 方式一：浏览器直接打开
双击 index.html，通过演示导航页逐页浏览 42 个功能页
# 方式二：本地静态服务器（推荐，便于在手机上真机调试）
cd wywawj
python3 -m http.server 8000
# 浏览器访问 http://localhost:8000
# 方式三：VS Code 安装 Live Server 插件，右键 index.html → Open with Live Server建议使用浏览器开发者工具切换到手机视口（iPhone / Android 尺寸）预览。
二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌素材 | 替换 img/ 中的 banner、商品图、头像等，同名覆盖即可 |
| 修改文案 / 链接 | 各页面文字与 href 直接编辑；演示导航页 index.html 同步更新链接 |
| 更换主题色 | 全局替换 css/style.css 与 index.html 内嵌样式中的 #a72e3e |
| 调整抽奖奖品 | 编辑 抽奖.html 顶部 turnplate 配置：奖品名称、区块颜色、金币参数 |
| 增删功能页 | 复制同模块页面修改内容即可，无构建流程，保存即生效 |
适用场景
企业员工社区、集团内部活动平台、HR 福利运营、工会活动专题、会员积分商城，也可拆分单模块用于年会抽奖、问卷调研、社区投票等独立活动页。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 11 个模块约 2~3 个月 | 替换素材与文案后数天上线 |
| 页面还原度 | 需逐页设计评审 | 42 页运营场景体系化交付 |
| 交互与动画 | 转盘 / 弹层需自行开发 | 抽奖转盘、红包弹层、轮播均已内置 |
| 移动端适配 | 需逐一适配 | WAP 布局与多档媒体查询已完成 |
| 维护成本 | 自行承担 | 纯静态结构，按页修改即可迭代 |
在线预览
模板为纯静态页面，将整个目录上传至任意静态托管（GitHub Pages、Vercel、阿里云 OSS 等）即可获得在线访问地址，可在企业微信 / 微信内直接分发。
http://case.fedshare.cn/wywawj/
评论0