Authored by lore-w

频道页面模板整合以及基础js交互

1 -<!--banner-->  
2 -<div class="banner">  
3 - <div class="swiper-container public-banner">  
4 - <ul class="swiper-wrapper">  
5 - {{#indexBanner}}  
6 - <li class="swiper-slide">  
7 - <a href="{{href}}">  
8 - <img src="{{img}}" alt="banner"/>  
9 - </a>  
10 - </li>  
11 - {{/indexBanner}}  
12 - </ul>  
13 - </div>  
14 - <div class="pagination-wrap">  
15 - <div class="pagination"></div>  
16 - </div>  
17 -</div> 1 +{{> layout/header320}}
  2 +{{> channel/banner320}}
18 <!--content--> 3 <!--content-->
19 <div class="home-content"> 4 <div class="home-content">
20 <ul> 5 <ul>
21 - {{#indexContent}}  
22 - <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">  
23 - <a class="img-link" href="{{href}}">  
24 - <img src="{{img}}" alt=""/>  
25 - </a>  
26 - <h2>{{title}}</h2>  
27 - <h3>{{subTitle}}</h3>  
28 - <time>{{channel}} | {{time}}</time>  
29 - <p>{{content}}</p>  
30 - </li>  
31 - {{/indexContent}} 6 + {{#content}}
  7 + <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">
  8 + <a class="img-link" href="{{link}}" target="_blank">
  9 + <img src="{{img}}" alt=""/>
  10 + </a>
  11 + <h2>
  12 + <a href="{{link}}" target="_blank">{{title}}</a>
  13 + </h2>
  14 + <h3>
  15 + <a href="{{link}}" target="_blank">{{subTitle}}</a>
  16 + </h3>
  17 + <time>
  18 + <a href="{{channelLink}}" target="_blank">{{channel}}</a>&nbsp;|&nbsp;{{time}}
  19 + </time>
  20 + <p>
  21 + <a href="{{link}}" target="_blank">{{content}}</a>
  22 + </p>
  23 + </li>
  24 + {{/content}}
32 </ul> 25 </ul>
33 - {{> default/follow_us320}}  
34 - <!--switch-page-->  
35 - <div class="switch-page">  
36 - <a href="#" class="switch-prev">上一页</a>  
37 - <a href="#" class="switch-next">下一页</a>  
38 - </div> 26 + {{> channel/follow_us320}}
  27 + {{> channel/page320}}
39 </div> 28 </div>
40 -{{> default/download320}}  
  29 +{{> default/download320}}
  30 +{{> layout/footer320}}
@@ -3,17 +3,25 @@ @@ -3,17 +3,25 @@
3 <!--content--> 3 <!--content-->
4 <div class="home-content"> 4 <div class="home-content">
5 <ul> 5 <ul>
6 - {{#indexContent}}  
7 - <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">  
8 - <a class="img-link" href="{{href}}">  
9 - <img src="{{img}}" alt=""/>  
10 - </a>  
11 - <h2>{{title}}</h2>  
12 - <h3>{{subTitle}}</h3>  
13 - <time>{{channel}} | {{time}}</time>  
14 - <p>{{content}}</p>  
15 - </li>  
16 - {{/indexContent}} 6 + {{#content}}
  7 + <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">
  8 + <a class="img-link" href="{{link}}" target="_blank">
  9 + <img src="{{img}}" alt=""/>
  10 + </a>
  11 + <h2>
  12 + <a href="{{link}}" target="_blank">{{title}}</a>
  13 + </h2>
  14 + <h3>
  15 + <a href="{{link}}" target="_blank">{{subTitle}}</a>
  16 + </h3>
  17 + <time>
  18 + <a href="{{channelLink}}" target="_blank">{{channel}}</a>&nbsp;|&nbsp;{{time}}
  19 + </time>
  20 + <p>
  21 + <a href="{{link}}" target="_blank">{{content}}</a>
  22 + </p>
  23 + </li>
  24 + {{/content}}
17 </ul> 25 </ul>
18 {{> channel/follow_us320}} 26 {{> channel/follow_us320}}
19 {{> channel/page320}} 27 {{> channel/page320}}
1 -<!--banner-->  
2 -<div class="banner">  
3 - <div class="swiper-container public-banner">  
4 - <ul class="swiper-wrapper">  
5 - {{#indexBanner}}  
6 - <li class="swiper-slide">  
7 - <a href="{{href}}">  
8 - <img src="{{img}}" alt="banner"/>  
9 - </a>  
10 - </li>  
11 - {{/indexBanner}}  
12 - </ul>  
13 - </div>  
14 - <div class="pagination-wrap">  
15 - <div class="pagination"></div>  
16 - </div>  
17 -</div> 1 +{{> layout/header320}}
  2 +{{> channel/banner320}}
18 <!--content--> 3 <!--content-->
19 <div class="home-content"> 4 <div class="home-content">
20 <ul> 5 <ul>
21 - {{#indexContent}}  
22 - <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">  
23 - <a class="img-link" href="{{href}}">  
24 - <img src="{{img}}" alt=""/>  
25 - </a>  
26 - <h2>{{title}}</h2>  
27 - <h3>{{subTitle}}</h3>  
28 - <time>{{channel}} | {{time}}</time>  
29 - <p>{{content}}</p>  
30 - </li>  
31 - {{/indexContent}} 6 + {{#content}}
  7 + <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">
  8 + <a class="img-link" href="{{link}}" target="_blank">
  9 + <img src="{{img}}" alt=""/>
  10 + </a>
  11 + <h2>
  12 + <a href="{{link}}" target="_blank">{{title}}</a>
  13 + </h2>
  14 + <h3>
  15 + <a href="{{link}}" target="_blank">{{subTitle}}</a>
  16 + </h3>
  17 + <time>
  18 + <a href="{{channelLink}}" target="_blank">{{channel}}</a>&nbsp;|&nbsp;{{time}}
  19 + </time>
  20 + <p>
  21 + <a href="{{link}}" target="_blank">{{content}}</a>
  22 + </p>
  23 + </li>
  24 + {{/content}}
32 </ul> 25 </ul>
33 - {{> default/follow_us320}}  
34 - <!--switch-page-->  
35 - <div class="switch-page">  
36 - <a href="#" class="switch-prev">上一页</a>  
37 - <a href="#" class="switch-next">下一页</a>  
38 - </div> 26 + {{> channel/follow_us320}}
  27 + {{> channel/page320}}
39 </div> 28 </div>
40 -{{> default/download320}}  
  29 +{{> default/download320}}
  30 +{{> layout/footer320}}
  1 +{{> layout/header320}}
1 <!--magazine-banner--> 2 <!--magazine-banner-->
  3 +{{#magazineBanner}}
2 <div class="magazine-banner"> 4 <div class="magazine-banner">
3 - <div class="swiper-container public-banner"> 5 + <div class="{{^only}}swiper-container{{/only}} public-banner">
4 <ul class="swiper-wrapper"> 6 <ul class="swiper-wrapper">
5 - {{#magazineBanner}} 7 + {{#bannerItem}}
6 <li class="swiper-slide"> 8 <li class="swiper-slide">
7 <a href="{{href}}"> 9 <a href="{{href}}">
8 <img src="{{img}}" alt="banner"/> 10 <img src="{{img}}" alt="banner"/>
9 </a> 11 </a>
10 </li> 12 </li>
11 - {{/magazineBanner}} 13 + {{/bannerItem}}
12 </ul> 14 </ul>
13 </div> 15 </div>
  16 + {{^only}}
14 <div class="pagination-wrap"> 17 <div class="pagination-wrap">
15 <div class="pagination"></div> 18 <div class="pagination"></div>
16 </div> 19 </div>
  20 + {{/only}}
17 <div class="magazine-more"> 21 <div class="magazine-more">
18 <time>2014.10.15 /全智贤</time> 22 <time>2014.10.15 /全智贤</time>
19 <span>RBM 15</span> 23 <span>RBM 15</span>
20 - <a href="#" class="buy">立即购买</a> 24 + <a href="{{buyLink}}" class="buy">立即购买</a>
21 </div> 25 </div>
22 </div> 26 </div>
  27 +{{/magazineBanner}}
23 <!--magazine-slide--> 28 <!--magazine-slide-->
24 <div class="swiper-container magazine-slide-style" id="buy-slide"> 29 <div class="swiper-container magazine-slide-style" id="buy-slide">
25 - <ul class="swiper-wrapper"> 30 + <ul class="swiper-wrapper buy-wrapper">
26 {{#magazineSlide}} 31 {{#magazineSlide}}
27 <li class="swiper-slide"> 32 <li class="swiper-slide">
28 <a href="javascript:;"> 33 <a href="javascript:;">
@@ -36,15 +41,16 @@ @@ -36,15 +41,16 @@
36 <!--e-zine--> 41 <!--e-zine-->
37 <div class="e-zine"> 42 <div class="e-zine">
38 <h2>E-ZINE</h2> 43 <h2>E-ZINE</h2>
39 - <div class="swiper-container zine-slide magazine-slide-style"> 44 +
  45 + <div class="swiper-container magazine-slide-style" id="zine-slide">
40 <ul class="swiper-wrapper zine-wrapper"> 46 <ul class="swiper-wrapper zine-wrapper">
41 {{#zineSlide}} 47 {{#zineSlide}}
42 - <li class="swiper-slide">  
43 - <a href="javascript:;" title="{{time}}">  
44 - <img src="{{img}}" alt="">  
45 - </a>  
46 - <time>{{time}}</time>  
47 - </li> 48 + <li class="swiper-slide">
  49 + <a href="javascript:;" title="{{time}}">
  50 + <img src="{{img}}" alt="">
  51 + </a>
  52 + <time>{{time}}</time>
  53 + </li>
48 {{/zineSlide}} 54 {{/zineSlide}}
49 </ul> 55 </ul>
50 </div> 56 </div>
@@ -52,10 +58,13 @@ @@ -52,10 +58,13 @@
52 <!--girl-app--> 58 <!--girl-app-->
53 <div class="girl-app"> 59 <div class="girl-app">
54 <span class="app-background"></span> 60 <span class="app-background"></span>
  61 +
55 <div class="app-info"> 62 <div class="app-info">
56 <h2>YOHO!GIRLS</h2> 63 <h2>YOHO!GIRLS</h2>
  64 +
57 <p>线上周刊,一周一会,免费喂饱你的潮流胃!</p> 65 <p>线上周刊,一周一会,免费喂饱你的潮流胃!</p>
58 <a href="http://app.yohoshow.com" class="app-download">去下载</a> 66 <a href="http://app.yohoshow.com" class="app-download">去下载</a>
59 </div> 67 </div>
60 </div> 68 </div>
61 -{{> default/download320}}  
  69 +{{> default/download320}}
  70 +{{> layout/footer320}}
1 -<!--banner-->  
2 -<div class="banner">  
3 - <div class="swiper-container public-banner">  
4 - <ul class="swiper-wrapper">  
5 - {{#indexBanner}}  
6 - <li class="swiper-slide">  
7 - <a href="{{href}}">  
8 - <img src="{{img}}" alt="banner"/>  
9 - </a>  
10 - </li>  
11 - {{/indexBanner}}  
12 - </ul>  
13 - </div>  
14 - <div class="pagination-wrap">  
15 - <div class="pagination"></div>  
16 - </div>  
17 -</div> 1 +{{> layout/header320}}
  2 +{{> channel/banner320}}
18 <!--content--> 3 <!--content-->
19 <div class="home-content"> 4 <div class="home-content">
20 <ul> 5 <ul>
21 - {{#indexContent}}  
22 - <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">  
23 - <a class="img-link" href="{{href}}">  
24 - <img src="{{img}}" alt=""/>  
25 - </a>  
26 - <h2>{{title}}</h2>  
27 - <h3>{{subTitle}}</h3>  
28 - <time>{{channel}} | {{time}}</time>  
29 - <p>{{content}}</p>  
30 - </li>  
31 - {{/indexContent}} 6 + {{#content}}
  7 + <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">
  8 + <a class="img-link" href="{{link}}" target="_blank">
  9 + <img src="{{img}}" alt=""/>
  10 + </a>
  11 + <h2>
  12 + <a href="{{link}}" target="_blank">{{title}}</a>
  13 + </h2>
  14 + <h3>
  15 + <a href="{{link}}" target="_blank">{{subTitle}}</a>
  16 + </h3>
  17 + <time>
  18 + <a href="{{channelLink}}" target="_blank">{{channel}}</a>&nbsp;|&nbsp;{{time}}
  19 + </time>
  20 + <p>
  21 + <a href="{{link}}" target="_blank">{{content}}</a>
  22 + </p>
  23 + </li>
  24 + {{/content}}
32 </ul> 25 </ul>
33 - {{> default/follow_us320}}  
34 - <!--switch-page-->  
35 - <div class="switch-page">  
36 - <a href="#" class="switch-prev">上一页</a>  
37 - <a href="#" class="switch-next">下一页</a>  
38 - </div> 26 + {{> channel/follow_us320}}
  27 + {{> channel/page320}}
39 </div> 28 </div>
40 -{{> default/download320}}  
  29 +{{> default/download320}}
  30 +{{> layout/footer320}}
1 -<!--banner-->  
2 -<div class="banner">  
3 - <div class="swiper-container public-banner">  
4 - <ul class="swiper-wrapper">  
5 - {{#indexBanner}}  
6 - <li class="swiper-slide">  
7 - <a href="{{href}}">  
8 - <img src="{{img}}" alt="banner"/>  
9 - </a>  
10 - </li>  
11 - {{/indexBanner}}  
12 - </ul>  
13 - </div>  
14 - <div class="pagination-wrap">  
15 - <div class="pagination"></div>  
16 - </div>  
17 -</div> 1 +{{> layout/header320}}
  2 +{{> channel/banner320}}
18 <!--content--> 3 <!--content-->
19 <div class="home-content"> 4 <div class="home-content">
20 <ul> 5 <ul>
21 - {{#indexContent}}  
22 - <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">  
23 - <a class="img-link" href="{{href}}">  
24 - <img src="{{img}}" alt=""/>  
25 - <span class="sub-tag">{{subTags}}</span>  
26 - </a>  
27 - <h2>{{title}}</h2>  
28 - <h3>{{subTitle}}</h3>  
29 - <time>{{channel}} | {{time}}</time>  
30 - <p>{{content}}</p>  
31 - </li>  
32 - {{/indexContent}} 6 + {{#content}}
  7 + <li id="{{#pop}}pop{{/pop}}" class="content-item channel-{{channel}}">
  8 + <a class="img-link" href="{{link}}" target="_blank">
  9 + <img src="{{img}}" alt=""/>
  10 + <span class="sub-tag">{{subTags}}</span>
  11 + </a>
  12 +
  13 + <h2>
  14 + <a href="{{link}}" target="_blank">{{title}}</a>
  15 + </h2>
  16 +
  17 + <h3>
  18 + <a href="{{link}}" target="_blank">{{subTitle}}</a>
  19 + </h3>
  20 + <time>
  21 + <a href="{{channelLink}}" target="_blank">{{channel}}</a>&nbsp;|&nbsp;{{time}}
  22 + </time>
  23 + <p>
  24 + <a href="{{link}}" target="_blank">{{content}}</a>
  25 + </p>
  26 + </li>
  27 + {{/content}}
33 </ul> 28 </ul>
34 - {{> default/follow_us320}}  
35 - <!--switch-page-->  
36 - <div class="switch-page">  
37 - <a href="#" class="switch-prev">上一页</a>  
38 - <a href="#" class="switch-next">下一页</a>  
39 - </div> 29 + {{> channel/follow_us320}}
  30 + {{> channel/page320}}
40 </div> 31 </div>
41 -{{> default/download320}}  
  32 +{{> default/download320}}
  33 +{{> layout/footer320}}
1 <!--banner--> 1 <!--banner-->
2 -{{#homeBanner}} 2 +{{#channelBanner}}
3 <div class="banner"> 3 <div class="banner">
4 <div class="{{^only}}swiper-container{{/only}} public-banner"> 4 <div class="{{^only}}swiper-container{{/only}} public-banner">
5 <ul class="swiper-wrapper"> 5 <ul class="swiper-wrapper">
@@ -18,4 +18,4 @@ @@ -18,4 +18,4 @@
18 </div> 18 </div>
19 {{/only}} 19 {{/only}}
20 </div> 20 </div>
21 -{{/homeBanner}}  
  21 +{{/channelBanner}}
@@ -2,7 +2,59 @@ @@ -2,7 +2,59 @@
2 <script type="text/javascript"> 2 <script type="text/javascript">
3 seajs.use(['js/common','js/channel/home'], function (common,home) { 3 seajs.use(['js/common','js/channel/home'], function (common,home) {
4 common.init(); 4 common.init();
  5 + });
  6 +</script>
  7 +{{/ home320_js}}
  8 +
  9 +{{# fashion320_js}}
  10 +<script type="text/javascript">
  11 + seajs.use(['js/common'], function (common) {
  12 + common.init();
  13 + //home.init();
  14 + });
  15 +</script>
  16 +{{/ fashion320_js}}
  17 +
  18 +{{# beauty320_js}}
  19 +<script type="text/javascript">
  20 + seajs.use(['js/common'], function (common) {
  21 + common.init();
  22 + //home.init();
  23 + });
  24 +</script>
  25 +{{/ beauty320_js}}
  26 +
  27 +{{# sport320_js}}
  28 +<script type="text/javascript">
  29 + seajs.use(['js/common'], function (common) {
  30 + common.init();
5 //home.init(); 31 //home.init();
6 }); 32 });
7 </script> 33 </script>
8 -{{/ home320_js}}  
  34 +{{/ sport320_js}}
  35 +
  36 +{{# lifestyle320_js}}
  37 +<script type="text/javascript">
  38 + seajs.use(['js/common'], function (common) {
  39 + common.init();
  40 + //home.init();
  41 + });
  42 +</script>
  43 +{{/ lifestyle320_js}}
  44 +
  45 +{{# magazine320_js}}
  46 +<script type="text/javascript">
  47 + seajs.use(['js/common','js/channel/magazine'], function (common, magazine) {
  48 + common.init();
  49 + magazine.init();
  50 + });
  51 +</script>
  52 +{{/ magazine320_js}}
  53 +
  54 +{{# video320_js}}
  55 +<script type="text/javascript">
  56 + seajs.use(['js/common'], function (common) {
  57 + common.init();
  58 + });
  59 +</script>
  60 +{{/ video320_js}}
@@ -17,12 +17,12 @@ @@ -17,12 +17,12 @@
17 <!--nav--> 17 <!--nav-->
18 <nav class="girl-nav swiper-container"> 18 <nav class="girl-nav swiper-container">
19 <ul class="swiper-wrapper"> 19 <ul class="swiper-wrapper">
20 - <li class="swiper-slide nav-home"><a href="{{homeLink}}">home</a></li>  
21 - <li class="swiper-slide nav-fashion"><a href="{{fashionLink}}">fashion</a></li>  
22 - <li class="swiper-slide nav-beauty"><a href="{{beautyLink}}">beauty</a></li>  
23 - <li class="swiper-slide nav-sport"><a href="{{sportLink}}">sport</a></li>  
24 - <li class="swiper-slide nav-lifestyle"><a href="{{lifestyleLink}}">lifestyle</a></li>  
25 - <li class="swiper-slide nav-magazine"><a href="{{magazineLink}}">magazine</a></li>  
26 - <li class="swiper-slide nav-video"><a href="{{videoLink}}">video</a></li> 20 + <li class="swiper-slide nav-home"><a href="http://localhost:3000/default/index320">home</a></li>
  21 + <li class="swiper-slide nav-fashion"><a href="http://localhost:3000/fashion/index320">fashion</a></li>
  22 + <li class="swiper-slide nav-beauty"><a href="http://localhost:3000/beauty/index320">beauty</a></li>
  23 + <li class="swiper-slide nav-sport"><a href="http://localhost:3000/sports/index320">sport</a></li>
  24 + <li class="swiper-slide nav-lifestyle"><a href="http://localhost:3000/lifestyle/index320">lifestyle</a></li>
  25 + <li class="swiper-slide nav-magazine"><a href="http://localhost:3000/magazine/index320">magazine</a></li>
  26 + <li class="swiper-slide nav-video"><a href="http://localhost:3000/video/index320">video</a></li>
27 </ul> 27 </ul>
28 </nav> 28 </nav>