├── .sass-cache
    └── 7f29b080a90d9295ed17574f1181b77e6e3599c6
    │   └── index.scssc
├── css
    ├── index.css
    ├── index.css.map
    └── reset.css
├── data
    ├── list.json
    └── upcoming.json
├── font
    ├── iconfont.css
    ├── iconfont.eot
    ├── iconfont.svg
    ├── iconfont.ttf
    └── iconfont.woff
├── index.html
├── loading.html
└── scss
    └── index.scss


/.sass-cache/7f29b080a90d9295ed17574f1181b77e6e3599c6/index.scssc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JackCrysler/css-loading/501ac03d6551d9d27831178073c17fe7d9ca6522/.sass-cache/7f29b080a90d9295ed17574f1181b77e6e3599c6/index.scssc


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | /*flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。*/
  3 | .flex, .container, main, nav, .movie dl, .movie dd p:first-child, .movie dd p:nth-child(3), .load, .load .load-wrap {
  4 |   display: -webkit-box;
  5 |   display: -moz-box;
  6 |   display: -ms-flexbox;
  7 |   display: -webkit-flex;
  8 |   display: flex; }
  9 | 
 10 | .justify {
 11 |   justify-content: space-between; }
 12 | 
 13 | img {
 14 |   display: block;
 15 |   width: 100%; }
 16 | 
 17 | html, body {
 18 |   width: 100%;
 19 |   height: 100%; }
 20 | 
 21 | .container {
 22 |   background: #f4f4f4;
 23 |   width: 100%;
 24 |   height: 100%;
 25 |   overflow: hidden;
 26 |   flex-direction: column; }
 27 | 
 28 | main {
 29 |   flex: 1;
 30 |   overflow: hidden;
 31 |   flex-direction: column; }
 32 | 
 33 | header {
 34 |   background: #cd0000;
 35 |   line-height: 44px;
 36 |   flex: none; }
 37 | 
 38 | header a {
 39 |   display: inline-block;
 40 |   width: 60px;
 41 |   flex: none;
 42 |   text-align: center;
 43 |   color: #ffffff; }
 44 | 
 45 | header h2 {
 46 |   color: #ffffff; }
 47 | 
 48 | nav {
 49 |   flex: none;
 50 |   justify-content: space-around;
 51 |   background: #ffffff; }
 52 |   nav span {
 53 |     line-height: 44px;
 54 |     flex: auto;
 55 |     text-align: center;
 56 |     font-size: 16px;
 57 |     border-bottom: 2px solid #ffffff; }
 58 |     nav span.on {
 59 |       border-bottom-color: #cd0000; }
 60 | 
 61 | .swiper-container {
 62 |   width: 100%;
 63 |   height: 100%; }
 64 | 
 65 | .movie {
 66 |   height: 100%;
 67 |   overflow: auto; }
 68 |   .movie dl {
 69 |     padding: 10px;
 70 |     border-bottom: 1px solid #ccc; }
 71 |   .movie dt {
 72 |     width: 70px;
 73 |     margin-right: 10px; }
 74 |   .movie dd {
 75 |     flex: auto; }
 76 |     .movie dd p:first-child {
 77 |       font-size: 20px;
 78 |       justify-content: space-between; }
 79 |     .movie dd .range {
 80 |       font-size: 16px;
 81 |       color: #cd0000; }
 82 |     .movie dd p:nth-child(2) {
 83 |       font-size: 14px;
 84 |       line-height: 2; }
 85 |     .movie dd p:nth-child(3) {
 86 |       font-size: 12px;
 87 |       line-height: 3;
 88 |       justify-content: space-between; }
 89 |     .movie dd button {
 90 |       background: #cd0000;
 91 |       color: #ffffff;
 92 |       border-radius: 2px;
 93 |       padding: 5px 10px;
 94 |       border: none; }
 95 | 
 96 | .load {
 97 |   justify-content: center;
 98 |   -webkit-box-pack: center;
 99 |   -webkit-box-align: center;
100 |   align-items: center; }
101 |   .load .load-wrap {
102 |     width: 60%;
103 |     background: lightgreen;
104 |     justify-content: space-around; }
105 |   .load span {
106 |     display: inline-block;
107 |     width: 20px;
108 |     height: 20px;
109 |     background: #999;
110 |     border-radius: 100%;
111 |     animation: loading 1s linear infinite; }
112 |     .load span:first-of-type {
113 |       animation-delay: 0s; }
114 |     .load span:nth-of-type(2) {
115 |       animation-delay: 0.333s; }
116 |     .load span:nth-of-type(3) {
117 |       animation-delay: 0.666s; }
118 | 
119 | @keyframes loading {
120 |   0% {
121 |     opacity: 0; }
122 |   30% {
123 |     opacity: 1; }
124 |   60% {
125 |     opacity: 0; }
126 |   100% {
127 |     opacity: 0; } }
128 | 
129 | /*# sourceMappingURL=index.css.map */
130 | 


--------------------------------------------------------------------------------
/css/index.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "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",
4 | "sources": ["../scss/index.scss"],
5 | "names": [],
6 | "file": "index.css"
7 | }


--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
 1 | *{margin: 0;padding: 0;list-style: none;}
 2 | /*
 3 | KISSY CSS Reset
 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。
 8 | 维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
 9 |  */
10 | 
11 | /** 清除内外边距 **/
12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
14 | pre, /* text formatting elements 文本格式元素 */
15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
16 | th, td /* table elements 表格元素 */ {
17 |     margin: 0;
18 |     padding: 0;
19 | }
20 | 
21 | /** 设置默认字体 **/
22 | body,
23 | button, input, select, textarea /* for ie */ {
24 |     font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
25 | }
26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; }
27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
30 | 
31 | /** 重置列表元素 **/
32 | ul, ol { list-style: none; }
33 | 
34 | /** 重置文本格式元素 **/
35 | a { text-decoration: none; }
36 | a:hover { text-decoration: underline; }
37 | 
38 | 
39 | /** 重置表单元素 **/
40 | legend { color: #000; } /* for ie6 */
41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
43 | /* 注：optgroup 无法扶正 */
44 | 
45 | /** 重置表格元素 **/
46 | table { border-collapse: collapse; border-spacing: 0; }
47 | 
48 | /* 清除浮动 */
49 | .ks-clear:after, .clear:after {
50 |     content: '\20';
51 |     display: block;
52 |     height: 0;
53 |     clear: both;
54 | }
55 | .ks-clear, .clear {
56 |     *zoom: 1;
57 | }
58 | 


--------------------------------------------------------------------------------
/data/list.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "upcomingJson": {
  3 |     "status": 1,
  4 |     "isRedirect": 0,
  5 |     "errMsg": null,
  6 |     "msg": null,
  7 |     "url": "",
  8 |     "id": -1,
  9 |     "datas": [
 10 |       {
 11 |         "id": 3506,
 12 |         "cnName": "抢红",
 13 |         "enName": null,
 14 |         "alias": null,
 15 |         "summary": "张涵予坑钱坑妞坑兄弟",
 16 |         "synopsis": null,
 17 |         "cast": "张涵予/黎明/王耀庆/杜鹃",
 18 |         "director": "黎明",
 19 |         "producer": null,
 20 |         "writer": null,
 21 |         "shoot": null,
 22 |         "sourceTypeId": null,
 23 |         "sourceType": null,
 24 |         "genreTypeId": null,
 25 |         "genreType": null,
 26 |         "onlineTime": 1495123200000,
 27 |         "runtime": null,
 28 |         "isOnlineMonth": 0,
 29 |         "onlineTypeId": null,
 30 |         "onlineType": null,
 31 |         "nationId": null,
 32 |         "nation": null,
 33 |         "status": null,
 34 |         "editStatus": null,
 35 |         "publisherId": null,
 36 |         "makerId": null,
 37 |         "rank": null,
 38 |         "memo": null,
 39 |         "creatorId": null,
 40 |         "createTime": null,
 41 |         "modifierId": null,
 42 |         "updateTime": null,
 43 |         "oldId": null,
 44 |         "formatOnlineTime": "2017-05-19上映",
 45 |         "showDate": null,
 46 |         "moviePictures": null,
 47 |         "movieTrailer": null,
 48 |         "trailer": null,
 49 |         "picSavePath": "data/resource/file/dynamic/movie/2017/5/5/20170505181619793_2pzsf.jpg",
 50 |         "bgSavePath": null,
 51 |         "interestCount": 2805,
 52 |         "scoreCount": null,
 53 |         "score": null,
 54 |         "seeCount": null,
 55 |         "wxPicPath": null,
 56 |         "playNums": null,
 57 |         "detailUrl": null,
 58 |         "buyUrl": null,
 59 |         "seoTitle": null,
 60 |         "seoKeywords": null,
 61 |         "seoDes": null,
 62 |         "filmCode": null,
 63 |         "picUpdateTime": 1493979749000,
 64 |         "onlineTimeByIsOnlineMonthForApp": "05月19日"
 65 |       },
 66 |       {
 67 |         "id": 3523,
 68 |         "cnName": "逆路",
 69 |         "enName": null,
 70 |         "alias": null,
 71 |         "summary": "警察揭开地产黑幕",
 72 |         "synopsis": null,
 73 |         "cast": "王威/火婧楠/李坤/凯文·马汀",
 74 |         "director": "闫学开",
 75 |         "producer": null,
 76 |         "writer": null,
 77 |         "shoot": null,
 78 |         "sourceTypeId": null,
 79 |         "sourceType": null,
 80 |         "genreTypeId": null,
 81 |         "genreType": null,
 82 |         "onlineTime": 1495123200000,
 83 |         "runtime": null,
 84 |         "isOnlineMonth": 0,
 85 |         "onlineTypeId": null,
 86 |         "onlineType": null,
 87 |         "nationId": null,
 88 |         "nation": null,
 89 |         "status": null,
 90 |         "editStatus": null,
 91 |         "publisherId": null,
 92 |         "makerId": null,
 93 |         "rank": null,
 94 |         "memo": null,
 95 |         "creatorId": null,
 96 |         "createTime": null,
 97 |         "modifierId": null,
 98 |         "updateTime": null,
 99 |         "oldId": null,
100 |         "formatOnlineTime": "2017-05-19上映",
101 |         "showDate": null,
102 |         "moviePictures": null,
103 |         "movieTrailer": null,
104 |         "trailer": null,
105 |         "picSavePath": "data/resource/file/dynamic/movie/2017/5/12/20170512185104329_rgzdo.jpg",
106 |         "bgSavePath": null,
107 |         "interestCount": 137,
108 |         "scoreCount": null,
109 |         "score": null,
110 |         "seeCount": null,
111 |         "wxPicPath": null,
112 |         "playNums": null,
113 |         "detailUrl": null,
114 |         "buyUrl": null,
115 |         "seoTitle": null,
116 |         "seoKeywords": null,
117 |         "seoDes": null,
118 |         "filmCode": null,
119 |         "picUpdateTime": 1494586567000,
120 |         "onlineTimeByIsOnlineMonthForApp": "05月19日"
121 |       },
122 |       {
123 |         "id": 3527,
124 |         "cnName": "爱情邮局",
125 |         "enName": null,
126 |         "alias": null,
127 |         "summary": "霸道总裁深陷三角恋",
128 |         "synopsis": null,
129 |         "cast": "李至正/程媛媛/赵圆圆/李进荣",
130 |         "director": "郑真",
131 |         "producer": null,
132 |         "writer": null,
133 |         "shoot": null,
134 |         "sourceTypeId": null,
135 |         "sourceType": null,
136 |         "genreTypeId": null,
137 |         "genreType": null,
138 |         "onlineTime": 1495209600000,
139 |         "runtime": null,
140 |         "isOnlineMonth": 0,
141 |         "onlineTypeId": null,
142 |         "onlineType": null,
143 |         "nationId": null,
144 |         "nation": null,
145 |         "status": null,
146 |         "editStatus": null,
147 |         "publisherId": null,
148 |         "makerId": null,
149 |         "rank": null,
150 |         "memo": null,
151 |         "creatorId": null,
152 |         "createTime": null,
153 |         "modifierId": null,
154 |         "updateTime": null,
155 |         "oldId": null,
156 |         "formatOnlineTime": "2017-05-20上映",
157 |         "showDate": null,
158 |         "moviePictures": null,
159 |         "movieTrailer": null,
160 |         "trailer": null,
161 |         "picSavePath": "data/resource/file/dynamic/movie/2017/5/15/20170515163334804_tqrco.jpg",
162 |         "bgSavePath": null,
163 |         "interestCount": 1050,
164 |         "scoreCount": null,
165 |         "score": null,
166 |         "seeCount": null,
167 |         "wxPicPath": null,
168 |         "playNums": null,
169 |         "detailUrl": null,
170 |         "buyUrl": null,
171 |         "seoTitle": null,
172 |         "seoKeywords": null,
173 |         "seoDes": null,
174 |         "filmCode": null,
175 |         "picUpdateTime": 1494843414000,
176 |         "onlineTimeByIsOnlineMonthForApp": "05月20日"
177 |       },
178 |       {
179 |         "id": 3519,
180 |         "cnName": "放学后",
181 |         "enName": null,
182 |         "alias": null,
183 |         "summary": "记者父亲关注校园霸凌",
184 |         "synopsis": null,
185 |         "cast": "高健/李嘉诺/窦学兮/释小松",
186 |         "director": "刘一君",
187 |         "producer": null,
188 |         "writer": null,
189 |         "shoot": null,
190 |         "sourceTypeId": null,
191 |         "sourceType": null,
192 |         "genreTypeId": null,
193 |         "genreType": null,
194 |         "onlineTime": 1495209600000,
195 |         "runtime": null,
196 |         "isOnlineMonth": 2,
197 |         "onlineTypeId": null,
198 |         "onlineType": null,
199 |         "nationId": null,
200 |         "nation": null,
201 |         "status": null,
202 |         "editStatus": null,
203 |         "publisherId": null,
204 |         "makerId": null,
205 |         "rank": null,
206 |         "memo": null,
207 |         "creatorId": null,
208 |         "createTime": null,
209 |         "modifierId": null,
210 |         "updateTime": null,
211 |         "oldId": null,
212 |         "formatOnlineTime": "2017待定",
213 |         "showDate": null,
214 |         "moviePictures": null,
215 |         "movieTrailer": null,
216 |         "trailer": null,
217 |         "picSavePath": "data/resource/file/dynamic/movie/2017/5/11/20170511102748326_yzewt.jpg",
218 |         "bgSavePath": null,
219 |         "interestCount": 736,
220 |         "scoreCount": null,
221 |         "score": null,
222 |         "seeCount": null,
223 |         "wxPicPath": null,
224 |         "playNums": null,
225 |         "detailUrl": null,
226 |         "buyUrl": null,
227 |         "seoTitle": null,
228 |         "seoKeywords": null,
229 |         "seoDes": null,
230 |         "filmCode": null,
231 |         "picUpdateTime": 1494469807000,
232 |         "onlineTimeByIsOnlineMonthForApp": "2017年"
233 |       },
234 |       {
235 |         "id": 3529,
236 |         "cnName": "中国推销员",
237 |         "enName": null,
238 |         "alias": null,
239 |         "summary": "中国推销员走出国门的坎坷之旅",
240 |         "synopsis": null,
241 |         "cast": "李东学/安妮克·阿斯克渥德/迈克·泰森/李艾",
242 |         "director": "檀冰",
243 |         "producer": null,
244 |         "writer": null,
245 |         "shoot": null,
246 |         "sourceTypeId": null,
247 |         "sourceType": null,
248 |         "genreTypeId": null,
249 |         "genreType": null,
250 |         "onlineTime": 1495728000000,
251 |         "runtime": null,
252 |         "isOnlineMonth": 0,
253 |         "onlineTypeId": null,
254 |         "onlineType": null,
255 |         "nationId": null,
256 |         "nation": null,
257 |         "status": null,
258 |         "editStatus": null,
259 |         "publisherId": null,
260 |         "makerId": null,
261 |         "rank": null,
262 |         "memo": null,
263 |         "creatorId": null,
264 |         "createTime": null,
265 |         "modifierId": null,
266 |         "updateTime": null,
267 |         "oldId": null,
268 |         "formatOnlineTime": "2017-05-26上映",
269 |         "showDate": null,
270 |         "moviePictures": null,
271 |         "movieTrailer": null,
272 |         "trailer": null,
273 |         "picSavePath": "data/resource/file/dynamic/movie/2017/5/16/20170516115324413_hb1fg.jpg",
274 |         "bgSavePath": null,
275 |         "interestCount": 987,
276 |         "scoreCount": null,
277 |         "score": null,
278 |         "seeCount": null,
279 |         "wxPicPath": null,
280 |         "playNums": null,
281 |         "detailUrl": null,
282 |         "buyUrl": null,
283 |         "seoTitle": null,
284 |         "seoKeywords": null,
285 |         "seoDes": null,
286 |         "filmCode": null,
287 |         "picUpdateTime": 1494914401000,
288 |         "onlineTimeByIsOnlineMonthForApp": "05月26日"
289 |       },
290 |       {
291 |         "id": 3489,
292 |         "cnName": "加勒比海盗5：死无对证",
293 |         "enName": null,
294 |         "alias": null,
295 |         "summary": "杰克船长又要开船啦",
296 |         "synopsis": null,
297 |         "cast": "约翰尼·德普/哈维尔·巴登/杰弗里·拉什/奥兰多·布鲁姆",
298 |         "director": "艾斯彭·山德伯格/乔阿吉姆·罗恩尼",
299 |         "producer": null,
300 |         "writer": null,
301 |         "shoot": null,
302 |         "sourceTypeId": null,
303 |         "sourceType": null,
304 |         "genreTypeId": null,
305 |         "genreType": null,
306 |         "onlineTime": 1495728000000,
307 |         "runtime": null,
308 |         "isOnlineMonth": 1,
309 |         "onlineTypeId": null,
310 |         "onlineType": null,
311 |         "nationId": null,
312 |         "nation": null,
313 |         "status": null,
314 |         "editStatus": null,
315 |         "publisherId": null,
316 |         "makerId": null,
317 |         "rank": null,
318 |         "memo": null,
319 |         "creatorId": null,
320 |         "createTime": null,
321 |         "modifierId": null,
322 |         "updateTime": null,
323 |         "oldId": null,
324 |         "formatOnlineTime": "2017-05待定",
325 |         "showDate": null,
326 |         "moviePictures": null,
327 |         "movieTrailer": null,
328 |         "trailer": null,
329 |         "picSavePath": "data/resource/file/dynamic/movie/2017/4/18/20170418140535430_l1ob7.jpg",
330 |         "bgSavePath": null,
331 |         "interestCount": 20876,
332 |         "scoreCount": null,
333 |         "score": null,
334 |         "seeCount": null,
335 |         "wxPicPath": null,
336 |         "playNums": null,
337 |         "detailUrl": null,
338 |         "buyUrl": null,
339 |         "seoTitle": null,
340 |         "seoKeywords": null,
341 |         "seoDes": null,
342 |         "filmCode": null,
343 |         "picUpdateTime": 1492496707000,
344 |         "onlineTimeByIsOnlineMonthForApp": "2017年05月"
345 |       }
346 |     ],
347 |     "total": null,
348 |     "remark": null
349 |   }
350 | }


--------------------------------------------------------------------------------
/data/upcoming.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "upcomingJson": {
  3 |     "status": 1,
  4 |     "isRedirect": 0,
  5 |     "errMsg": null,
  6 |     "msg": null,
  7 |     "url": "",
  8 |     "id": -1,
  9 |     "datas": [
 10 |       {
 11 |         "id": 2960,
 12 |         "cnName": "美好的意外",
 13 |         "enName": null,
 14 |         "alias": null,
 15 |         "summary": "单身白领突变家庭妇女",
 16 |         "synopsis": null,
 17 |         "cast": "桂纶镁 / 王景春 / 欧阳娜娜 / 王元也 / 陈坤",
 18 |         "director": "何蔚庭",
 19 |         "producer": null,
 20 |         "writer": null,
 21 |         "shoot": null,
 22 |         "sourceTypeId": null,
 23 |         "sourceType": null,
 24 |         "genreTypeId": null,
 25 |         "genreType": null,
 26 |         "onlineTime": 1496160000000,
 27 |         "runtime": null,
 28 |         "isOnlineMonth": 1,
 29 |         "onlineTypeId": null,
 30 |         "onlineType": null,
 31 |         "nationId": null,
 32 |         "nation": null,
 33 |         "status": null,
 34 |         "editStatus": null,
 35 |         "publisherId": null,
 36 |         "makerId": null,
 37 |         "rank": null,
 38 |         "memo": null,
 39 |         "creatorId": null,
 40 |         "createTime": null,
 41 |         "modifierId": null,
 42 |         "updateTime": null,
 43 |         "oldId": null,
 44 |         "formatOnlineTime": "2017-05待定",
 45 |         "showDate": null,
 46 |         "moviePictures": null,
 47 |         "movieTrailer": null,
 48 |         "trailer": null,
 49 |         "picSavePath": "data/resource/file/dynamic/movie/2017/3/3/20170303181530222_2ar3j.jpg",
 50 |         "bgSavePath": null,
 51 |         "interestCount": 2238,
 52 |         "scoreCount": null,
 53 |         "score": null,
 54 |         "seeCount": null,
 55 |         "wxPicPath": null,
 56 |         "playNums": null,
 57 |         "detailUrl": null,
 58 |         "buyUrl": null,
 59 |         "seoTitle": null,
 60 |         "seoKeywords": null,
 61 |         "seoDes": null,
 62 |         "filmCode": null,
 63 |         "picUpdateTime": 1489715833000,
 64 |         "onlineTimeByIsOnlineMonthForApp": "2017年05月"
 65 |       },
 66 |       {
 67 |         "id": 2732,
 68 |         "cnName": "三体",
 69 |         "enName": null,
 70 |         "alias": null,
 71 |         "summary": "未来世界的人类浩劫",
 72 |         "synopsis": null,
 73 |         "cast": "冯绍峰 / 张静初 / 吴刚 / 唐嫣 / 张翰 / 杜淳 / 杜志国 / 邢佳栋 / 张光北 / 胡明 / 程媛媛 / 胡海峰 / 李炫臻 / 大卫·伍德雷",
 74 |         "director": "张番番",
 75 |         "producer": null,
 76 |         "writer": null,
 77 |         "shoot": null,
 78 |         "sourceTypeId": null,
 79 |         "sourceType": null,
 80 |         "genreTypeId": null,
 81 |         "genreType": null,
 82 |         "onlineTime": 1501603200000,
 83 |         "runtime": null,
 84 |         "isOnlineMonth": 2,
 85 |         "onlineTypeId": null,
 86 |         "onlineType": null,
 87 |         "nationId": null,
 88 |         "nation": null,
 89 |         "status": null,
 90 |         "editStatus": null,
 91 |         "publisherId": null,
 92 |         "makerId": null,
 93 |         "rank": null,
 94 |         "memo": null,
 95 |         "creatorId": null,
 96 |         "createTime": null,
 97 |         "modifierId": null,
 98 |         "updateTime": null,
 99 |         "oldId": null,
100 |         "formatOnlineTime": "2017待定",
101 |         "showDate": null,
102 |         "moviePictures": null,
103 |         "movieTrailer": null,
104 |         "trailer": null,
105 |         "picSavePath": "data/resource/file/dynamic/movie/2016/1/4/20160104194534267_uavxx.jpg",
106 |         "bgSavePath": null,
107 |         "interestCount": 2699,
108 |         "scoreCount": null,
109 |         "score": null,
110 |         "seeCount": null,
111 |         "wxPicPath": null,
112 |         "playNums": null,
113 |         "detailUrl": null,
114 |         "buyUrl": null,
115 |         "seoTitle": null,
116 |         "seoKeywords": null,
117 |         "seoDes": null,
118 |         "filmCode": null,
119 |         "picUpdateTime": 1482903358000,
120 |         "onlineTimeByIsOnlineMonthForApp": "2017年"
121 |       },
122 |       {
123 |         "id": 3259,
124 |         "cnName": "隔离岛",
125 |         "enName": null,
126 |         "alias": null,
127 |         "summary": "张一山去孤岛寻真相",
128 |         "synopsis": null,
129 |         "cast": "张一山/丁丁/朱泳腾/海波",
130 |         "director": "许斌",
131 |         "producer": null,
132 |         "writer": null,
133 |         "shoot": null,
134 |         "sourceTypeId": null,
135 |         "sourceType": null,
136 |         "genreTypeId": null,
137 |         "genreType": null,
138 |         "onlineTime": 1510329600000,
139 |         "runtime": null,
140 |         "isOnlineMonth": 2,
141 |         "onlineTypeId": null,
142 |         "onlineType": null,
143 |         "nationId": null,
144 |         "nation": null,
145 |         "status": null,
146 |         "editStatus": null,
147 |         "publisherId": null,
148 |         "makerId": null,
149 |         "rank": null,
150 |         "memo": null,
151 |         "creatorId": null,
152 |         "createTime": null,
153 |         "modifierId": null,
154 |         "updateTime": null,
155 |         "oldId": null,
156 |         "formatOnlineTime": "2017待定",
157 |         "showDate": null,
158 |         "moviePictures": null,
159 |         "movieTrailer": null,
160 |         "trailer": null,
161 |         "picSavePath": "data/resource/file/dynamic/movie/2016/11/4/20161104133713375_1jrpv.jpg",
162 |         "bgSavePath": null,
163 |         "interestCount": 778,
164 |         "scoreCount": null,
165 |         "score": null,
166 |         "seeCount": null,
167 |         "wxPicPath": null,
168 |         "playNums": null,
169 |         "detailUrl": null,
170 |         "buyUrl": null,
171 |         "seoTitle": null,
172 |         "seoKeywords": null,
173 |         "seoDes": null,
174 |         "filmCode": null,
175 |         "picUpdateTime": 1478660227000,
176 |         "onlineTimeByIsOnlineMonthForApp": "2017年"
177 |       },
178 |       {
179 |         "id": 3400,
180 |         "cnName": "仙球大战",
181 |         "enName": null,
182 |         "alias": null,
183 |         "summary": "史上最乱套的足球大赛",
184 |         "synopsis": null,
185 |         "cast": "何炅/钟欣潼/蔡卓妍/邓丽欣",
186 |         "director": "刘镇伟",
187 |         "producer": null,
188 |         "writer": null,
189 |         "shoot": null,
190 |         "sourceTypeId": null,
191 |         "sourceType": null,
192 |         "genreTypeId": null,
193 |         "genreType": null,
194 |         "onlineTime": 1514649600000,
195 |         "runtime": null,
196 |         "isOnlineMonth": 2,
197 |         "onlineTypeId": null,
198 |         "onlineType": null,
199 |         "nationId": null,
200 |         "nation": null,
201 |         "status": null,
202 |         "editStatus": null,
203 |         "publisherId": null,
204 |         "makerId": null,
205 |         "rank": null,
206 |         "memo": null,
207 |         "creatorId": null,
208 |         "createTime": null,
209 |         "modifierId": null,
210 |         "updateTime": null,
211 |         "oldId": null,
212 |         "formatOnlineTime": "2017待定",
213 |         "showDate": null,
214 |         "moviePictures": null,
215 |         "movieTrailer": null,
216 |         "trailer": null,
217 |         "picSavePath": "data/resource/file/dynamic/movie/2017/2/6/20170206141000598_wbvz2.jpg",
218 |         "bgSavePath": null,
219 |         "interestCount": 2350,
220 |         "scoreCount": null,
221 |         "score": null,
222 |         "seeCount": null,
223 |         "wxPicPath": null,
224 |         "playNums": null,
225 |         "detailUrl": null,
226 |         "buyUrl": null,
227 |         "seoTitle": null,
228 |         "seoKeywords": null,
229 |         "seoDes": null,
230 |         "filmCode": null,
231 |         "picUpdateTime": 1486611136000,
232 |         "onlineTimeByIsOnlineMonthForApp": "2017年"
233 |       },
234 |       {
235 |         "id": 3059,
236 |         "cnName": "活宝",
237 |         "enName": null,
238 |         "alias": null,
239 |         "summary": "活宝兄弟去探案",
240 |         "synopsis": null,
241 |         "cast": "胡夏/黄圣依/王惜今/陈籽熹",
242 |         "director": "陈伟强/王惜今",
243 |         "producer": null,
244 |         "writer": null,
245 |         "shoot": null,
246 |         "sourceTypeId": null,
247 |         "sourceType": null,
248 |         "genreTypeId": null,
249 |         "genreType": null,
250 |         "onlineTime": 1514649600000,
251 |         "runtime": null,
252 |         "isOnlineMonth": 2,
253 |         "onlineTypeId": null,
254 |         "onlineType": null,
255 |         "nationId": null,
256 |         "nation": null,
257 |         "status": null,
258 |         "editStatus": null,
259 |         "publisherId": null,
260 |         "makerId": null,
261 |         "rank": null,
262 |         "memo": null,
263 |         "creatorId": null,
264 |         "createTime": null,
265 |         "modifierId": null,
266 |         "updateTime": null,
267 |         "oldId": null,
268 |         "formatOnlineTime": "2017待定",
269 |         "showDate": null,
270 |         "moviePictures": null,
271 |         "movieTrailer": null,
272 |         "trailer": null,
273 |         "picSavePath": "data/resource/file/dynamic/movie/2016/7/27/20160727162334684_2gt12.jpg",
274 |         "bgSavePath": null,
275 |         "interestCount": 1217,
276 |         "scoreCount": null,
277 |         "score": null,
278 |         "seeCount": null,
279 |         "wxPicPath": null,
280 |         "playNums": null,
281 |         "detailUrl": null,
282 |         "buyUrl": null,
283 |         "seoTitle": null,
284 |         "seoKeywords": null,
285 |         "seoDes": null,
286 |         "filmCode": null,
287 |         "picUpdateTime": 1481195606000,
288 |         "onlineTimeByIsOnlineMonthForApp": "2017年"
289 |       }
290 |     ],
291 |     "total": null,
292 |     "remark": null
293 |   }
294 | }


--------------------------------------------------------------------------------
/font/iconfont.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('iconfont.eot?t=1495094377955'); /* IE9*/
 4 |   src: url('iconfont.eot?t=1495094377955#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('iconfont.woff?t=1495094377955') format('woff'), /* chrome, firefox */
 6 |   url('iconfont.ttf?t=1495094377955') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 7 |   url('iconfont.svg?t=1495094377955#iconfont') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .iconfont {
11 |   font-family:"iconfont" !important;
12 |   font-size:16px;
13 |   font-style:normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .icon-down-arrow:before { content: "\e612"; font-size: 12px;}
19 | 
20 | .icon-person:before { content: "\e618"; }
21 | 
22 | 


--------------------------------------------------------------------------------
/font/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JackCrysler/css-loading/501ac03d6551d9d27831178073c17fe7d9ca6522/font/iconfont.eot


--------------------------------------------------------------------------------
/font/iconfont.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>
 5 | Created by FontForge 20120731 at Thu May 18 16:16:39 2017
 6 |  By admin
 7 | </metadata>
 8 | <defs>
 9 | <font id="iconfont" horiz-adv-x="1024" >
10 |   <font-face 
11 |     font-family="iconfont"
12 |     font-weight="500"
13 |     font-stretch="normal"
14 |     units-per-em="1024"
15 |     panose-1="2 0 6 3 0 0 0 0 0 0"
16 |     ascent="896"
17 |     descent="-128"
18 |     x-height="792"
19 |     bbox="0 -128 1024 896"
20 |     underline-thickness="0"
21 |     underline-position="0"
22 |     unicode-range="U+0078-E618"
23 |   />
24 | <missing-glyph 
25 |  />
26 |     <glyph glyph-name=".notdef" 
27 |  />
28 |     <glyph glyph-name=".notdef" 
29 |  />
30 |     <glyph glyph-name=".null" horiz-adv-x="0" 
31 |  />
32 |     <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
33 |  />
34 |     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
35 | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
36 | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
37 | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
38 |     <glyph glyph-name="down-arrow" unicode="&#xe612;" 
39 | d="M621 441.5q-6 5.5 -11 -0.5l-98 -98l-98 98q-6 6 -11.5 0.5t0.5 -11.5l103 -103q3 -2 6 -2t5 2l104 103q6 6 0 11.5z" />
40 |     <glyph glyph-name="person" unicode="&#xe618;" 
41 | d="M512 354q-112 0 -191.5 79.5t-79.5 191.5t79.5 191.5t191.5 79.5t191.5 -79.5t79.5 -191.5t-79.5 -191.5t-191.5 -79.5zM512 414q87 0 149 62t62 149t-62 149t-149 62t-149 -62t-62 -149t62 -149t149 -62zM512 294q89 0 179.5 -20.5t164.5 -55t121 -86.5t47 -109v-151
42 | h-1024v151q0 57 47 109t121 86.5t164.5 55t179.5 20.5zM964 -68v91q0 53 -70 103t-175 78.5t-207 28.5t-207 -28.5t-175 -78.5t-70 -103v-91h904v0z" />
43 |   </font>
44 | </defs></svg>
45 | 


--------------------------------------------------------------------------------
/font/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JackCrysler/css-loading/501ac03d6551d9d27831178073c17fe7d9ca6522/font/iconfont.ttf


--------------------------------------------------------------------------------
/font/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JackCrysler/css-loading/501ac03d6551d9d27831178073c17fe7d9ca6522/font/iconfont.woff


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport"
  6 |           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <title>Document</title>
  9 |     <link rel="stylesheet" href="font/iconfont.css">
 10 |     <link rel="stylesheet" href="css/reset.css">
 11 |     <link rel="stylesheet" href="css/index.css">
 12 |     <link rel="stylesheet" href="../lib/swiper.css">
 13 | </head>
 14 | <body>
 15 |     <div class="container">
 16 |         <header class="flex justify">
 17 |             <a href="#"><span>北京</span><span class="icon iconfont icon-down-arrow"></span></a>
 18 |             <h2 class="logo">乐影网</h2>
 19 |             <a href="#"><span class="icon iconfont icon-person"></span></a>
 20 |         </header>
 21 |         <main>
 22 |             <nav>
 23 |                 <span class="on">电影</span>
 24 |                 <span>影院</span>
 25 |                 <span>活动</span>
 26 |             </nav>
 27 | 
 28 |             <div class="swiper-container">
 29 |                 <div class="swiper-wrapper">
 30 |                     <div class="swiper-slide">
 31 |                         <div class="movie">
 32 |                         <h3>正在上映</h3>
 33 |                         <div class="list">
 34 |                             <!--<dl>-->
 35 |                                 <!--<dt>-->
 36 |                                     <!--<img src="http://img.leying365.com/data/resource/file/dynamic/movie/2017/5/12/20170512103556022_b8sqd.jpg" alt="">-->
 37 |                                 <!--</dt>-->
 38 |                                 <!--<dd>-->
 39 |                                     <!--<p><span>金刚：骷髅岛</span><span class="range">8.5分</span></p>-->
 40 |                                     <!--<p>经典怪兽片《金刚前传》</p>-->
 41 |                                     <!--<p><small>36家影院上映2000场</small><button>购票</button></p>-->
 42 |                                 <!--</dd>-->
 43 |                             <!--</dl>-->
 44 | 
 45 |                         </div>
 46 |                         </div>
 47 |                     </div>
 48 |                     <div class="swiper-slide">
 49 |                         <div class="load">
 50 |                             <div class="load-wrap">
 51 |                                 <span></span>
 52 |                                 <span></span>
 53 |                                 <span></span>
 54 |                             </div>
 55 |                         </div>
 56 |                     </div>
 57 |                     <div class="swiper-slide">
 58 |                         3
 59 |                     </div>
 60 |                 </div>
 61 |             </div>
 62 |         </main>
 63 |     </div>
 64 |     <script src="../lib/jquery.js"></script>
 65 |     <script src="../lib/swiper.js"></script>
 66 |     <script>
 67 |         var spans = $('nav span');
 68 |         var docHeight;
 69 |         var swiper =null;
 70 |         //请求数据函数
 71 |         function queryData() {
 72 |             $.get({
 73 |                 url:'data/list.json',
 74 |                 data:{
 75 |                     page:3
 76 |                 },
 77 |                 success:function (data) {
 78 |                     if(data.upcomingJson.status==1){
 79 |                         $('.load').remove();
 80 | 
 81 |                         render(data.upcomingJson.datas);
 82 |                         docHeight = $('.movie h3').height()+$('.movie .list').height();
 83 |                         $('.movie').on('scroll',scrollLogic);
 84 |                         if(swiper) return;
 85 |                         swiper = new Swiper('.swiper-container',{
 86 |                             onSlideChangeStart:function (swiper) {
 87 |                                 console.log(swiper.activeIndex);
 88 | 
 89 |                                 spans.removeClass('on').eq(swiper.activeIndex).addClass('on')
 90 |                             }
 91 |                         });
 92 | 
 93 |                         spans.on('click',function () {
 94 |                             swiper.slideTo($(this).index())
 95 |                         })
 96 | 
 97 |                     }else{
 98 |                         alert(data.errMsg)
 99 |                     }
100 |                 }
101 |             });
102 |         }
103 | 
104 |         queryData();
105 | 
106 |         var loadStr = '<div class="load"><div class="load-wrap"><span></span><span></span><span></span></div></div>'
107 | 
108 |         //渲染函数
109 |         function render(list) {
110 |             console.log(list);
111 |             var domin = 'http://img.leying365.com/';
112 |             var wrap = $('.list');
113 |             var str = '';
114 |             $.each(list,function (index,value) {
115 |                 str+='<dl>\
116 |                     <dt>\
117 |                     <img src="'+domin+value.picSavePath+'" alt="">\
118 |                     </dt>\
119 |                     <dd>\
120 |                     <p><span>'+value.cnName+'</span><span class="range">8.5分</span></p>\
121 |                 <p>'+value.summary+'</p>\
122 |                 <p><small>'+value.cast+'</small><button>购票</button></p>\
123 |                 </dd>\
124 |                 </dl>';
125 |             });
126 |             str+=loadStr;
127 |             wrap.append(str);
128 |         }
129 | 
130 |         //滚动事件
131 |         function scrollLogic() {
132 | 
133 |             //拖拽到底部时 scrollTop+viewHeight == doc.height
134 |             //接近底部时  doc.height -（scrollTop+viewHeight）<=30
135 | 
136 |             if(docHeight-($(this).scrollTop()+$('.movie').height())<=30){
137 |                 console.log('已经接近底部');
138 |                 $('.movie').off('scroll');
139 |                 queryData();
140 |             }
141 |         }
142 | 
143 | 
144 |     </script>
145 | </body>
146 | </html>


--------------------------------------------------------------------------------
/loading.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport"
 6 |           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | 
10 | </head>
11 | <body>
12 | 
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/scss/index.scss:
--------------------------------------------------------------------------------
  1 | /*flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。*/
  2 | %flex{
  3 |   display: -webkit-box;
  4 |   display: -moz-box;
  5 |   display: -ms-flexbox;
  6 |   display: -webkit-flex;
  7 |   display: flex;
  8 | }
  9 | @mixin center{
 10 |   justify-content: center;
 11 |   -webkit-box-pack: center;
 12 |   -webkit-box-align: center;
 13 |   align-items: center;
 14 | }
 15 | @mixin justify{
 16 |   justify-content: space-between;
 17 | }
 18 | $white_bg:#ffffff;
 19 | $red:#cd0000;
 20 | .flex{
 21 |   @extend %flex;
 22 | }
 23 | .justify{
 24 |   @include justify;
 25 | }
 26 | img{
 27 |   display: block;
 28 |   width: 100%;
 29 | }
 30 | html,body{
 31 |   width: 100%;
 32 |   height: 100%;
 33 | }
 34 | .container{
 35 |   background: #f4f4f4;
 36 |   width: 100%;
 37 |   height: 100%;
 38 |   overflow: hidden;
 39 |   @extend %flex;
 40 |   flex-direction: column;
 41 | }
 42 | main{
 43 |   flex: 1;
 44 |   overflow: hidden;
 45 |   @extend %flex;
 46 |   flex-direction: column;
 47 | }
 48 | header{
 49 |   background: #cd0000;
 50 |   line-height: 44px;
 51 |   flex: none;
 52 | }
 53 | header a{
 54 |   display: inline-block;
 55 |   width: 60px;
 56 |   flex: none;
 57 |   text-align: center;
 58 |   color: $white_bg;
 59 | }
 60 | header h2{
 61 |   color: $white_bg;
 62 | }
 63 | nav{
 64 |   @extend %flex;
 65 |   flex: none;
 66 |   justify-content: space-around;
 67 |   background: $white_bg;
 68 |   span{
 69 |     line-height: 44px;
 70 |     flex: auto;
 71 |     text-align: center;
 72 |     font-size: 16px;
 73 |     border-bottom: 2px solid $white_bg;
 74 |     &.on{
 75 |       border-bottom-color: $red;
 76 |     }
 77 |   }
 78 | }
 79 | .swiper-container{
 80 |   width: 100%;
 81 |   height: 100%;
 82 | }
 83 | .movie{
 84 |   height: 100%;
 85 |   overflow: auto;
 86 | 
 87 |   dl{
 88 |     @extend %flex;
 89 |     padding: 10px;
 90 |     border-bottom: 1px solid #ccc;
 91 |   }
 92 |   dt{
 93 |     width: 70px;
 94 |     margin-right: 10px;
 95 |   }
 96 |   dd{
 97 |     flex: auto;
 98 |     p:first-child{
 99 |       font-size: 20px;
100 |       @include justify;
101 |       @extend %flex;
102 |     }
103 |     .range{
104 |       font-size: 16px;
105 |       color: $red;
106 |     }
107 |     p:nth-child(2){
108 |       font-size: 14px;
109 |       line-height: 2;
110 |     }
111 |     p:nth-child(3){
112 |       font-size: 12px;
113 |       line-height: 3;
114 |       @include justify;
115 |       @extend %flex;
116 |     }
117 |     button{
118 |       background: $red;
119 |       color: $white_bg;
120 |       border-radius: 2px;
121 |       padding: 5px 10px;
122 |       border: none;
123 |     }
124 |   }
125 | }
126 | .load{
127 |   @extend %flex;
128 |   @include center;
129 |   .load-wrap{
130 |     @extend %flex;
131 |     width: 60%;
132 |     background: lightgreen;
133 |     justify-content: space-around;
134 |   }
135 |   span{
136 |     display: inline-block;
137 |     width: 20px;
138 |     height: 20px;
139 |     background: #999;
140 |     border-radius: 100%;
141 |     animation: loading 1s linear infinite;
142 |     &:first-of-type{
143 |       animation-delay: 0s;
144 |     }
145 |     &:nth-of-type(2){
146 |       animation-delay: 0.333s;
147 |     }
148 |     &:nth-of-type(3){
149 |       animation-delay: 0.666s;
150 |     }
151 |   }
152 | }
153 | 
154 | @keyframes loading {
155 |   0% {
156 |     opacity: 0;
157 |   }
158 | 
159 |   30% {
160 |     opacity: 1;
161 |   }
162 | 
163 |   60%{
164 |     opacity: 0;
165 |   }
166 | 
167 |   100%{
168 |     opacity: 0;
169 |   }
170 | }


--------------------------------------------------------------------------------