前端模板化指引文档

【重要】完成页面重构后,截图给对应的对接人确认文案及效果。

1.文件及文件夹结构

a.preview文件夹popup.htmlpopup.js是用来预览,不能修改

b.preview文件夹的popupCustom.css文件可以自定义样式,

c.preview文件夹的popupJson.js可以填充活动的文案及图片

2.开发模式

点击preview/popup.html便可以预览本次的模板,请在url加入?debug=1参数进入开发模式 如:

file:///E:/tweb/storage/app/public/template42/preview/popup.html?debug=1

3.调试页面

利用popupJson.js来调试页面的图片及文案。

1.tabFocusImg 是移动端对应头图的地址(图片尺寸640*640)

2.popupJson 里面如下图所示是一个数组,数组顺序与页面的tab一一对应,各个字段对应页面的位置请参考4中模板字段与html结构对应关系

4.模板字段与html结构对应的关系

a.领取1

b.领取2(其他领取可参考这个)

c.兑换

d.抽奖

e.手机预约

f.任务

任务暂时只提供五列列表,除蓝色框框相关的数据可参考领取模块

1.蓝色框框的按钮个数,各个项目可根据项目只展示对应需要的个数,并定位到需要的位置。如只展示4个按钮,则可以添加.rw-tit4{display:none}相关的样式来隐藏最后一个按钮

2.蓝色框框下面的图片列表,各个项目可根据项目需要隐藏border-right来分组。如要把第一二张分一组,第三四五张分一组,则添加.line2{border-right:none}相关的样式覆盖原有的样式。

5.各个模板对应的图片尺寸的大小(模板请参考http://codol.qq.com/2017/atemple/guider.html)

1.领取模块

A.领取1: 679*286

B.领取2: 396*284

C.领取3: 283*284

D.领取4: 210*320

E.领取4-2: 283*143

F.领取5: 166*320

G.领取5-2: 283*143

H.领取6: 283*143

I.领取7: 123*268

J.领取7-2: 213*143

K.领取8: 213*143

2.兑换模块

A.兑换9: 216*84

B.兑换10: 154*124

C.兑换12: 204*84

D.兑换15: 153*84

E.兑换18: 149*84

3.抽奖模块

A.抽奖6: 823*347

B.抽奖8: 823*385

C.抽奖9: 823*395

D.抽奖10: 821*385

E.抽奖12: 821*385

F.抽奖15: 826*395

G.抽奖16: 823*385

H.抽奖18: 823*395

I.抽奖20: 826*395

J.抽奖24: 823*395

4.兑换模块

A.手机预约:725*242

6.注意事项

A.PC弹窗页面总宽高为980*590不可更改覆盖