说明：为了更加方便快捷的制作用户隐私协议相关页面，如果能提供下面的要求的文档会大大提升制作速度；1.页面中仅使用加粗样式和段落；2.段落要么统一缩进2个字符，要么不缩进；3.禁止使用word项目符号（如：1、2、3; a、b、c、d;I、II、III等等）；4.如果修改上个版本某些地方有少量修改，可以标识出来（例如加黄色背景），方便识别，不用全部重做；5.文案一律提供文字版；6.需要某些文字加超链接（点击跳转到外链）的需要特殊说明 总结：如何产出比较合适的文档：1.把word文档内容粘贴到记事本中，再重新copy到word新文档中，对照原文档进行对应文字加粗（注意不能使用预定义样式）2.请把此规范文档给产出方，从源头控制格式后面维护更简单

PathHash.js/** * @author 贾迎博 * @description 生成路径中用于混淆的目录名。 * 使用方式：直接在命令行运行即可：node PathHash.js * * @version 20231205 */ const crypto = require('crypto'); // hash算法 function encrypt() { // 生成一个随机密钥 const secretKey = crypto.randomBytes(32).toString('base64'); // 加密 const hash = crypto.createHmac('sha256', secretKey) // 注入密钥 .update(new Date().getTime() + '') // 注入需要加密的字符串 .digest('hex'); // 可选参数'base64'可生成大小写+数字组合 // 保留前12位作为结果返回 可根据需求自行修改 原始长度为32位 return hash.substring(0, 6); } console.log(` 生成结果为： ${encrypt()} 复制到粘贴板使用即可 `);

说明：移动端和PC通用：1.图片背景按钮，是活字的按钮背景需要对称，里面文字增删，文字可以始终保证居中；2.涉及登录的界面页面，一般登录后登录按隐藏，需设计出放欢迎XXX,个人中心、注销等文案显示位置；3.需要做活字的模块，请使用普通字体（如微软雅黑）等；4.web页面字体大小最小不小于12px,过小浏览器无法设置；5.需要独立模块或者按钮相关背景图，需要可以独立分层导出，不推荐按钮外发光，建议做成内发光边界清晰，保证不同人员切图按钮尺寸一致。6.强烈不推荐使用给页面活字指定规定特殊字体，（比如某些字体20M，整个专题或者网站素材可能才5-10M,字体严重影响加载）7.非活字部分字体必须使用有版权字体或者免费版权字体；8.需要后期独立更换的轮播图、素材图等，不要做成跟外框粘连的异形图片，比如某个人物的帽子在轮播框外面；9.动态变化内容的部分，需要考虑留足空间，比如：参与人数、持有某个奖励点数等极限值。10.特殊字体，不是浏览器自带字体且可编辑文案，需要提供字体包；动态加载数据字体尽量不要使用特殊字体。 一、移动端页面：1.单页设计稿尺寸750 * 1624px，如果页面高度不够，可以让页面渐变到纯色向下延展；2.需要首屏显示的内容设计主要内容750 * 1200以内安全区，全屏页面一般考虑主要内容居中或者居顶；3.竖屏非全屏弹窗高度不超过1000px，横屏弹窗高度不超过600px; 二、PC端页面：1.弹窗高度一般600px以内2.普通页面设计稿一般1920宽，如果要求首屏看到重要的主体内容，那么主体内容在600px以内居顶；3.普通单屏页面主体内容1200px*600px，在1920px宽度设计稿中居中上部，保障窄屏设备能看到主要内容；

海外项目重构规范 点击查看通用规范

移动端页面兼容要求兼容微信、手Q、UC浏览器，如果是游戏APP内置页面，必须兼容游戏对应的MSDK浏览器。 兼容安卓4.4及以上、iOS最新版本，页面能正常预览，无错位。 检查视频、音频是否正常播放；涉及自动播放的视频H5，推荐使用移动端视频组件 页面不需要强制横/竖屏时，可根据实际需求，在屏幕旋转时候给予提示 移动端必须加此样式，防止浏览器自动调整字体影响布局 -webkit-text-size-adjust: none; px布局设计稿是640就填640、750设计稿就填750,正常按实际像素px布局即可。(推荐使用，部分页面布局及弹窗可以比较容易复用pc端的结构和代码，特别是专题和官网) <meta name="viewport" content="width=750,minimum-scale=0,maximum-scale=5,user-scalable=no"/> REM布局规范只列举了rem布局这一种适配方式，但不是说限制只能用这种布局方式。 无论用何种方式，需要保证在不同比例、不同尺寸的手机上，测试微信、手Q、safari、UC等主流浏览器无明显错位、变形。 不管你拿到的设计稿宽度是640px还是750px，多大都一样。和我们平时做PC页面的做法基本一样， 只需要把单位px换算成rem，所有设计稿的的元素大小全除以100单位换成rem， 例如设计稿上个某个文字的大小为30px，直接写font-size:0.3rem。 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script> //屏幕适应 (function (win, doc) { if (!win.addEventListener) return; var html = document.documentElement; function setFont() { var html = document.documentElement; var k = 750;//设计稿是640就填640、750设计稿就填750 html.style.fontSize = html.clientWidth / k * 100 + "px"; } setFont(); setTimeout(function () { setFont(); }, 300); doc.addEventListener('DOMContentLoaded', setFont, false); win.addEventListener('resize', setFont, false); win.addEventListener('load', setFont, false); })(window, document); </script>

event.changyou.com 静态专题重构规范 点击查看通用规范

activity-ui活动专题整体架构及注意事项说明 点击查看通用规范

新版官网的架构是pc端与移动端的在同一目录下，移动端作为子文件夹存在，各个文件夹的作用请参考官网外包标准说明 官网目录结构例如《天龙怀旧版》官网tlhj.changyou.com pc官网目录tlhj.changyou.com/m 移动端官网目录

移动端页面布局使用px方式布局 viewport 方式适配 <meta name="viewport" content="width=750,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> 统计代码一般放碎片文件里面 通过include方式引入 <!--#include virtual="/inc/dma.html"--> pc端通调引入 <!--#include virtual="/inc/public_js_cyou.html" --> 其他参考目前官网 做之前尽量拿到原来官网结构做基础页面上进行制作或者换肤 全新制作官网，可以要一版其他类似官网源码做参考。 官网一般禁止使用字体文件(如需使用请联系需求方和技术同学确认) 制作中如遇到问题，随时沟通

官网整体架构及注意事项说明

PC官网使用说明 手机官网使用说明采取页面中引用碎片的方法。引用碎片前请引用zepto或jquery 1.端游、手游页面引入碎片 浅色：<!--#include virtual="/inc/cyou_public_js_white.html" --> 深色：<!--#include virtual="/inc/cyou_public_js_dark.html" -->

html文件示例 p { font-size: 24px; } hello world！ html文件会截取head，body内的部分插入页面，体验就像是iframe一样 alert('hello world！')

示例项目的部署方式复制项目到source目录下即可， [点击查看demo]卷轴

由于flash播放器将于21年彻底被放弃，所以将原先使用搜狐视频flash版本播放器的官网等迭代至H5版本, 出于兼容性考虑，将播放策略调整为，在IE11以下浏览器调用flash播放器，其余使用H5版本，为方便使用，将调整后的播放策略与原有的使用方法进行二次封装整合。

活动专题： 指需要有后端api数据对接调用数据展示、抽奖、登录等交互的专题。 示例：svn://gitee.com/amswait/cyou/source/demo/activity-ui 静态专题： 指纯做展示，后面不需要进一步与后端开发交互调用的专题。 示例：svn://gitee.com/amswait/cyou/source/demo/event.changyou.com注：如果只有pc端，设置viewport在m端也能正常访问，width设置1500、1300等适当的值布局不会错乱。 <meta name="viewport" content="width=1500,minimum-scale=0,maximum-scale=5,user-scalable=yes"/> 官网： 游戏官网项目，一般是静态网站，没有后端开发交互，偶尔有个可以跨域的预约功能。 示例：svn://gitee.com/amswait/cyou/source/demo/ldjsy注:svn检出需要用gitee帐号，可以根据需要自动检出对应项目目录汇总目录：https://gitee.com/amswait/cyou/tree/master/source/demo include 方式引用碎片一般可以用nginx服务器、apache服务等 <!--#include virtual="/inc/dma.html"--> # 移动端必须加此样式，防止浏览器自动调整字体影响布局-webkit-text-size-adjust: none; 通用规则 一般禁止使用字体文件(ttf/eof/svg/eot)(如需使用请联系需求方和技术同学确认) 检查专题文件包大小，如果超过10M看下专题是否包含了视频、mp3等大文件。一般mp4、mp3文件有我们技术同学上传后反馈地址进行调用或者使用搜狐h5播放方式，mp3压缩品质一般64k; 视频：mp4一般按720p品质电影压缩 1.（大小M/时长s）<1M/s，保证清晰度情况下尽量压缩 2.一般视频宽度640px小于1024px 3.一般mp4格式 h264编码 一般单张图片不超过300k,png图片必须压缩（在线图片压缩：https://tinypng.com/），jpg图片一般60品质，如果要求清晰度高可以调高些。 pc端页面header需要引入<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 活动或者专题images文件中小图icon，尽量合成一张图减少请求。无用的图片及时删除，交包前务必将图片压缩一遍，特别是弹框、首页、分享页的背景图。 活动css文件为减小资源最终格式化为横向排列。选择器 { display:none; background-color: #474747; border: 10px solid #474747; height: 390px; width: 640px;} 统计代码引入方式：官网： <!--#include virtual="/inc/dma.html"-->活动： <!--#include virtual="/all/dma/dma_activity.html"-->专题：<!--#include virtual="/all/dma/dma_static.html"--> 页面头部引入报错日志上报代码 活动：<script src="//www.changyou.com/cyouFile/loger/huodong.js"></script> 官网：<script src="//www.changyou.com/cyouFile/loger/guanwang.js"></script> 专题、活动中pc端和m端互跳(双端同时存在)// pc端跳转m端 (function () { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { var a = document.referrer, b = { "baidu.com": "seo_baidu", "sogou.com": "seo_sogou", "sm.cn": "seo_sm", "so.com": "seo_360", "bing.com": "seo_bing", "google.com": "seo_google" }, c; for (c in b) { if (-1 != a.indexOf(c)) { a = b[c]; if (window.sessionStorage) { sessionStorage.setItem("channel", a) } else { var d = d || 0, b = ""; 0 != d && (b = new Date, b.setTime(b.getTime() + 1000 * d), b = "; expires=" + b.toGMTString()); document.cookie = "channel=" + escape(a) + b + "; path=/" } break } } window.location.href = "../m/index.shtml" + location.search }; })(); // m端跳转pc端 if (! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { window.location.href = "../pc/index.shtml"; } 默认不使用vue、webpack等框架，基于jquery重构开发即可。