这是游戏行业的二次元游戏官网，不是 B2B 公司站、也不是行业方案站。它的行业属性可以从三点看出来：内容形态是角色 / 资讯 / 下载 / 社区，语气是品牌氛围向而不是功能说明向，转化目标是装机量而不是询盘。
网站在整个发行链路里承担门户角色：用户在搜索、广告、社交平台看到游戏后落到的第一站。所以它不负责"讲清楚功能"，而是负责三件事——建立氛围、给出内容、促成下载。
访问场景是 PC 和手机双端，而且两端的版式是分别设计的，不是一套版式等比缩放。原因是横屏 PC 有宽度可以铺开，竖屏手机的可用宽度只有 390px 左右，同一套布局没法两边都好用。
网站还有一个容易被忽略的结构特征：两段式。先是一个纯氛围的启动页（index.html），用户点「进入官网」才真正进到主站（bengyi/index.html）。这是国内二次元游戏官网的常见做法——第一屏不谈信息，只造氛围，让用户带着情绪进入正式内容。
全屏 KV 视频打底。这里有个实现细节值得说：视频解码完成前会先用 poster 封面图兜底，解码出画之后才把视频淡入，避免用户看到的开屏是黑屏或者空白。
视频之上叠了两层装饰：一层是动态图层（速度线、星芒），一层是卡片轮播（几张卡交错漂浮）。
底部是引导入口「进入官网」。再往下是适龄提示弹窗（16+ CADPA 标识，点开看提示内容，内容做了防复制处理）和页脚（用户协议等链接、举报入口、合作方徽标）。
另外配了一个 启动-音乐自动播放.bat，用来解决浏览器拦截自动播放背景音乐的问题。
再说主站（bengyi/index.html），它是五屏分屏结构：首页 / 资讯 / 角色 / 社区 / 充值中心。
首页屏是核心：KV 视频 + 播放按钮（点开弹窗看完整宣传片）、标语文案、一张二维码加六个下载入口（PC 下载 / Android 下载 / App Store 下载 / TapTap 下载 / 云·崩异 网页版 / 云·崩异 下载）。
资讯屏是列表形态，数据不写死在 HTML 里，来自 bengyi/data/news.json，改资讯不用动页面结构。
角色屏做角色展示。社区屏和充值中心屏承接对应入口。
手机端在功能上有一处结构性改动：顶部导航整个换成底部标签栏。这不是审美选择——五个栏目加两个工具图标放在 390px 宽的顶栏里会挤成一团，挪到底部才有点击区。
服务端部分（server/） 是配套的，不属于页面功能但决定登录能不能用：五个 PHP 文件组成短信代理，前端只调自己的接口，短信平台的 api_key / api_secret 全部留在服务端的 config.php 里，前端代码不含任何凭证。template_code 目前是 48。
技术栈是纯静态：HTML + CSS + 原生 JavaScript，没有构建步骤。改完文件直接上传就生效，不需要打包、不需要 Node 环境。这是这类官网的常规选择——页面量小，引入构建反而增加维护负担。
移动端适配用了两套不同方案，这是这个项目最有意思的地方：
启动页（index.html）不用媒体查询，而是在 js/main.js 里用 UA 正则判断设备，往 html 上写 data-device="mobile" 属性，CSS 里靠这个属性选择器切版式。同时 rem 基准也随设备切换：手机是 视口宽 / 750 × 100，PC 是 max(视口宽, 1280) / 1920 × 100。这么做的代价是判定依赖 UA，好处是可以在 JS 里干预和覆盖（代码里还留了 ?plat_type=pc 这样的强制开关）。
主站（bengyi/）用媒体查询，两档断点：860px 和 560px。560 那一档里做了三件事——导航改底部标签栏、分屏内容允许内部滚动（配套 JS 函数 canScroll()，用来区分"屏内滚到底"和"切下一屏"的手势）、角色区标题脱离绝对定位（原本 top:34px 会和左上角 logo 叠在一起）。
素材组织上，角色图是分层的：char-1-base.png 加左右翼 char-1-wing-l.png / char-1-wing-r.png 三张分开，便于做动效。视频有两条（kv.mp4 15717KB、bengyi-kv.mp4 13631KB），加上 7MB 的 BGM，素材占了整站 38.92MB 的绝大部分。
视频处理是性能上的关键点：preload 控制预加载、poster 兜底、playing 事件触发淡入，三层配合避免开屏空窗。
可访问性与合规方面：prefers-reduced-motion 做了降级（关掉动画）；适龄提示独立
评论