配置化活动设计重构规范

后台配置规范
概述

本文主要介绍配置化活动设计重构规范（v1.0）具体事项，凡涉及到图片更新事项，请参考以下规范标准。

模版配置化流程：
  1. 设计师理解完需求后，根据模版配置化的交互稿严格按照设计所需尺寸，设计好页面。
  2. 重构根据模版配置化要求，切出所需要的图片，修改模板样式css文件。可将模版页下载下来，替换掉 里面的图片地址，指向自己本地图片地址，本地运行，查看效果。确认无误后，将css模版样式包提交给产品。注：不允许添加或者删除样式名。仅允许修改样式内容。
  3. 产品通过配置化后台，生成HTML文件。

图片优化规范
  1. 图片必须压缩，一般 80% 品质即可，保证文字清晰；
  2. 图片必须使用 渐进式图片 ：使用Photoshop的“存储为web所用格式”时候，勾选“连续”；
  3. 图片必须使用压缩工具压缩后上传；
  4. 图片体积不要超过 300 k；
注意事项
  1. 字体加粗蓝色部分为重构需要注意事项，仅供参考。
  2. 雪碧图根据功能需要，自行生成。目前基本上全站的按钮宽高都一致。
  3. 不允许删除样式名。

顶部 banner

  1. 图片尺寸大小 1920 * 796 px；
  2. 图片格式 jpg；

顶部 banner 按钮

  1. 顶部 banner 按钮大小为 262px * 82px 。
  2. 图片格式 png 雪碧图。
  3. 距离顶部 595px ，水平居中，整体 banner 效果如下：

礼包模块背景

  1. 背景图片宽高为 1920px * 800px 。
  2. 内容背景宽高为 942px * 436px ，水平居中。
  3. 内容背景距离顶部 215px 。
  4. 图片格式 jpg 。
  5. 效果如下：
  1. 所有模块需要整合成一张背景图最后输出。重构可以在#app上对样式进行修改。了解更多

新手礼包

  1. 标题宽高为 311px * 47px，图片格式为 png 雪碧图，距离顶部 81px 。
  2. 轮播内容宽高为 785px * 233px，图片格式为 png。
  3. 轮播内容距离顶部 215px 。
  4. 轮播左右箭头宽高为 56px * 56px 图片格式为 png 雪碧图。
  5. 按钮宽高为 262px * 82px ，图片格式为 png 雪碧图。
  6. 按钮距离顶部 639px。
  7. 左右图片背景类名：#wrap .swiper-button-prev,.#wrap .swiper-button-next
  8. 左右滚动是在 .swiper-container 添加 相对应的 id 进行区分 。
  9.  function swiperOne() {
    var swiper = new Swiper('#swiper-container1', {
        nextButton: '#swiper-1 .swiper-button-next',
        prevButton: '#swiper-1  .swiper-button-prev',
        loop: true
    });
}
  10. 效果图如下:

回归礼包

  1. 标题宽高为 311px * 47px，图片格式为 png 雪碧图，距离顶部 81px 。
  2. 轮播内容宽高为 785px * 233px，图片格式为 png。
  3. 轮播内容距离顶部 215px 。
  4. 轮播左右箭头宽高为 56px * 56px 图片格式为 png 雪碧图。
  5. 按钮宽高为 262px * 82px ，图片格式为 png 雪碧图。
  6. 按钮距离顶部 639px。
  7. 左右图片背景类名：#wrap .swiper-button-prev,.#wrap .swiper-button-next
  8. 左右滚动是在 .swiper-container 添加 相对应的 id 进行区分 。
  9.  function swiperOne() {
    var swiper = new Swiper('#swiper-container1', {
        nextButton: '#swiper-1 .swiper-button-next',
        prevButton: '#swiper-1  .swiper-button-prev',
        loop: true
    });
}
  10. 效果图如下:

特权礼包

  1. 标题宽高为 311px * 47px，图片格式为 png 雪碧图，距离顶部 81px 。
  2. 轮播内容宽高为 785px * 233px，图片格式为 png。
  3. 轮播内容距离顶部 215px 。
  4. 轮播左右箭头宽高为 56px * 56px 图片格式为 png 雪碧图。
  5. 按钮宽高为 262px * 82px ，图片格式为 png 雪碧图。
  6. 按钮距离顶部 639px。
  7. 左右图片背景类名：#wrap .swiper-button-prev,.#wrap .swiper-button-next
  8. 左右滚动是在 .swiper-container 添加 相对应的 id 进行区分 。
  9.  function swiperOne() {
    var swiper = new Swiper('#swiper-container1', {
        nextButton: '#swiper-1 .swiper-button-next',
        prevButton: '#swiper-1  .swiper-button-prev',
        loop: true
    });
}
  10. 效果图如下:

充值礼包

  1. 标题宽高为 311px * 47px，图片格式为 png 雪碧图，距离顶部 81px 。
  2. 轮播内容宽高为 785px * 233px，图片格式为 png。
  3. 轮播内容距离顶部 215px 。
  4. 轮播左右箭头宽高为 56px * 56px 图片格式为 png 雪碧图。
  5. 按钮宽高为 262px * 82px ，图片格式为 png 雪碧图。
  6. 按钮距离顶部 639px。
  7. 左右图片背景类名：#wrap .swiper-button-prev,.#wrap .swiper-button-next
  8. 左右滚动是在 .swiper-container 添加 相对应的 id 进行区分 。
  9.  function swiperOne() {
    var swiper = new Swiper('#swiper-container1', {
        nextButton: '#swiper-1 .swiper-button-next',
        prevButton: '#swiper-1  .swiper-button-prev',
        loop: true
    });
}
  10. 效果图如下:

抽奖模块

  1. 标题宽高为 311px * 47px，图片格式为 png 雪碧图，距离顶部 81px 。
  2. 抽奖图片宽高为 831px * 549px ，图片格式为 png 。
  3. 抽奖图片距离顶部 207px。
  4. 按钮宽高为 262px * 82px 。

图片轮播模块背景

  1. 背景图片宽高 1920px * 937px 。
  2. 轮播背景宽高为 946px * 567px 。
  3. 轮播背景距离顶部 188。
  4. 图片格式为 jpg 。
  5. 效果如下：
  1. 所有模块需要整合成一张背景图最后输出。重构可以在#app上对样式进行修改。了解更多

图片轮播模块

  1. 标题宽高为 311px * 47px，图片格式为 png 雪碧图，距离顶部 81px 。
  2. 轮播内容图片宽高为 726px * 373px ，图片格式为 jpg 或者 png 。
  3. 轮播图片距离顶部 282px。

活动规则

  1. 背景图片宽高 1920px * 800px 。
  2. 重构可以修改规则颜色或者字体大小，对应类名:.rules
  3. 所有模块需要整合成一张背景图最后输出。重构可以在#app上对样式进行修改。了解更多
  4. 效果如下:

二维码弹层

  1. 弹层背景图片宽高 399px * 341px 。
  2. 弹层关闭按钮快高 60px * 60px 。

背景整合

  1. 所有模块需要整合成一张背景图最后输出。重构可以在#app上对样式进行修改。

以上规范如有问题或建议，请及时联系 v_aqqhuang(黄泉强) / v_qchaochen(陈钦潮)。