fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 812cdeb89bfc9a384b50be9741f71f22fceadb16 1 parent 1286b5bd

星潮教室首页

Inline Side-by-side
Showing 5 changed files with 199 additions and 17 deletions
@@ -130,6 +130,101 @@ exports.index = (req, res) => { @@ -130,6 +130,101 @@ exports.index = (req, res) => {
130 ], 130 ],
131 publishTime: '6月1日 11:30', 131 publishTime: '6月1日 11:30',
132 viewsNum: '7694' 132 viewsNum: '7694'
  133 + },
  134 + {
  135 + articleId: '48187',
  136 + src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
  137 + name: 'DREAMER',
  138 + title: 'dangerous people 跟着薛之谦维护世界和平T恤',
  139 + url: 'http://guang.m.yohobuy.com/info/index?id=48187',
  140 + articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
  141 + '从反面讽刺了社会的种种丑陋与黑暗现象， 从而反映出那些“边缘人物” 想让大家看到' +
  142 + '真实自我的渴望与期待世界和平的美好憧憬。 作为新一代潮流的引领人，薛之谦也有着自' +
  143 + '身对潮流文化的理解， Dangerous People的产品系列主要以黑白为主，在产品质量上也力求做到最好。',
  144 + articeImg: [
  145 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b9522beb59efd9863d67e246a7793de8.jpg?imageView/2/w/{width}/h/{height}',
  146 + 'http://img11.static.yhbimg.com/goodsimg/2016/06/01/03/015720dbe0dfd866a0cdf8701b19f4eebf.jpg?imageView/2/w/{width}/h/{height}',
  147 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/024f7d9704e5a545e90125432db69cae5c.jpg?imageView/2/w/{width}/h/{height}',
  148 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b246a819d5de16a0a22316fe8f668926.jpg?imageView/2/w/{width}/h/{height}'
  149 + ],
  150 + publishTime: '6月1日 11:30',
  151 + viewsNum: '7694'
  152 + },
  153 + {
  154 + articleId: '48187',
  155 + src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
  156 + name: 'DREAMER',
  157 + title: 'dangerous people 跟着薛之谦维护世界和平T恤',
  158 + url: 'http://guang.m.yohobuy.com/info/index?id=48187',
  159 + articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
  160 + '从反面讽刺了社会的种种丑陋与黑暗现象， 从而反映出那些“边缘人物” 想让大家看到' +
  161 + '真实自我的渴望与期待世界和平的美好憧憬。 作为新一代潮流的引领人，薛之谦也有着自' +
  162 + '身对潮流文化的理解， Dangerous People的产品系列主要以黑白为主，在产品质量上也力求做到最好。',
  163 + articeImg: [
  164 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b9522beb59efd9863d67e246a7793de8.jpg?imageView/2/w/{width}/h/{height}',
  165 + 'http://img11.static.yhbimg.com/goodsimg/2016/06/01/03/015720dbe0dfd866a0cdf8701b19f4eebf.jpg?imageView/2/w/{width}/h/{height}',
  166 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/024f7d9704e5a545e90125432db69cae5c.jpg?imageView/2/w/{width}/h/{height}',
  167 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b246a819d5de16a0a22316fe8f668926.jpg?imageView/2/w/{width}/h/{height}'
  168 + ],
  169 + publishTime: '6月1日 11:30',
  170 + viewsNum: '7694'
  171 + },
  172 + {
  173 + articleId: '48187',
  174 + src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
  175 + name: 'DREAMER',
  176 + title: 'dangerous people 跟着薛之谦维护世界和平T恤',
  177 + url: 'http://guang.m.yohobuy.com/info/index?id=48187',
  178 + articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
  179 + '从反面讽刺了社会的种种丑陋与黑暗现象， 从而反映出那些“边缘人物” 想让大家看到' +
  180 + '真实自我的渴望与期待世界和平的美好憧憬。 作为新一代潮流的引领人，薛之谦也有着自' +
  181 + '身对潮流文化的理解， Dangerous People的产品系列主要以黑白为主，在产品质量上也力求做到最好。',
  182 + articeImg: [
  183 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b9522beb59efd9863d67e246a7793de8.jpg?imageView/2/w/{width}/h/{height}',
  184 + 'http://img11.static.yhbimg.com/goodsimg/2016/06/01/03/015720dbe0dfd866a0cdf8701b19f4eebf.jpg?imageView/2/w/{width}/h/{height}',
  185 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/024f7d9704e5a545e90125432db69cae5c.jpg?imageView/2/w/{width}/h/{height}',
  186 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b246a819d5de16a0a22316fe8f668926.jpg?imageView/2/w/{width}/h/{height}'
  187 + ],
  188 + publishTime: '6月1日 11:30',
  189 + viewsNum: '7694'
  190 + },
  191 + {
  192 + articleId: '48187',
  193 + src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
  194 + name: 'DREAMER',
  195 + title: 'dangerous people 跟着薛之谦维护世界和平T恤',
  196 + url: 'http://guang.m.yohobuy.com/info/index?id=48187',
  197 + articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
  198 + '从反面讽刺了社会的种种丑陋与黑暗现象， 从而反映出那些“边缘人物” 想让大家看到' +
  199 + '真实自我的渴望与期待世界和平的美好憧憬。 作为新一代潮流的引领人，薛之谦也有着自' +
  200 + '身对潮流文化的理解， Dangerous People的产品系列主要以黑白为主，在产品质量上也力求做到最好。',
  201 + articeImg: [
  202 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b9522beb59efd9863d67e246a7793de8.jpg?imageView/2/w/{width}/h/{height}',
  203 + 'http://img11.static.yhbimg.com/goodsimg/2016/06/01/03/015720dbe0dfd866a0cdf8701b19f4eebf.jpg?imageView/2/w/{width}/h/{height}',
  204 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/024f7d9704e5a545e90125432db69cae5c.jpg?imageView/2/w/{width}/h/{height}',
  205 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b246a819d5de16a0a22316fe8f668926.jpg?imageView/2/w/{width}/h/{height}'
  206 + ],
  207 + publishTime: '6月1日 11:30',
  208 + viewsNum: '7694'
  209 + },
  210 + {
  211 + articleId: '48187',
  212 + src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
  213 + name: 'DREAMER',
  214 + title: 'dangerous people 跟着薛之谦维护世界和平T恤',
  215 + url: 'http://guang.m.yohobuy.com/info/index?id=48187',
  216 + articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
  217 + '从反面讽刺了社会的种种丑陋与黑暗现象， 从而反映出那些“边缘人物” 想让大家看到' +
  218 + '真实自我的渴望与期待世界和平的美好憧憬。 作为新一代潮流的引领人，薛之谦也有着自' +
  219 + '身对潮流文化的理解， Dangerous People的产品系列主要以黑白为主，在产品质量上也力求做到最好。',
  220 + articeImg: [
  221 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b9522beb59efd9863d67e246a7793de8.jpg?imageView/2/w/{width}/h/{height}',
  222 + 'http://img11.static.yhbimg.com/goodsimg/2016/06/01/03/015720dbe0dfd866a0cdf8701b19f4eebf.jpg?imageView/2/w/{width}/h/{height}',
  223 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/024f7d9704e5a545e90125432db69cae5c.jpg?imageView/2/w/{width}/h/{height}',
  224 + 'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b246a819d5de16a0a22316fe8f668926.jpg?imageView/2/w/{width}/h/{height}'
  225 + ],
  226 + publishTime: '6月1日 11:30',
  227 + viewsNum: '7694'
133 } 228 }
134 ] 229 ]
135 })); 230 }));
@@ -12,7 +12,7 @@ const star = require(cRoot + '/star'); @@ -12,7 +12,7 @@ const star = require(cRoot + '/star');
12 12
13 const router = express.Router(); // eslint-disable-line 13 const router = express.Router(); // eslint-disable-line
14 14
15 -router.get('/star/index', star.index); // 星潮教室首页 15 +router.get('/star', star.index); // 星潮教室首页
16 router.get('/star/special', star.special); // 星潮教室星专题 16 router.get('/star/special', star.special); // 星潮教室星专题
17 router.get('/star/collocation', star.collocation); // 星潮教室星搭配 17 router.get('/star/collocation', star.collocation); // 星潮教室星搭配
18 router.get('/star/collocation/list', star.collocationList); // 星潮教室星搭配文章请求 18 router.get('/star/collocation/list', star.collocationList); // 星潮教室星搭配文章请求
@@ -12,9 +12,7 @@ @@ -12,9 +12,7 @@
12 <ul class="clearfix swiper-wrapper"> 12 <ul class="clearfix swiper-wrapper">
13 {{# starAvatar}} 13 {{# starAvatar}}
14 <li class="swiper-slide"> 14 <li class="swiper-slide">
15 - <a href="{{url}}">  
16 - <img class="swiper-lazy" data-src="{{image src 180 180}}">  
17 - </a> 15 + <img class="swiper-lazy" data-url="{{url}}" data-src="{{image src 180 180}}">
18 <div class="swiper-lazy-preloader"></div> 16 <div class="swiper-lazy-preloader"></div>
19 </li> 17 </li>
20 {{/ starAvatar}} 18 {{/ starAvatar}}
@@ -26,7 +24,7 @@ @@ -26,7 +24,7 @@
26 <li data-id="{{articleId}}"> 24 <li data-id="{{articleId}}">
27 <div class="star-avatar"> 25 <div class="star-avatar">
28 <img class="lazy" data-original="{{image src 100 100}}" /> 26 <img class="lazy" data-original="{{image src 100 100}}" />
29 - <p>{{name}}</p> 27 + <p class="name">{{name}}</p>
30 </div> 28 </div>
31 <div class="star-article"> 29 <div class="star-article">
32 <i class="article-arrow"></i> 30 <i class="article-arrow"></i>
@@ -6,9 +6,13 @@ @@ -6,9 +6,13 @@
6 6
7 var $ = require('yoho-jquery'), 7 var $ = require('yoho-jquery'),
8 Swiper = require('yoho-swiper'), 8 Swiper = require('yoho-swiper'),
9 - lazyLoad = require('yoho-jquery-lazyload'); 9 + lazyLoad = require('yoho-jquery-lazyload'),
  10 + ellipsis = require('yoho-mlellipsis');
  11 +
  12 +var avatarSwiper, avatarKey, $this, $title, $cont;
10 13
11 lazyLoad($('img.lazy')); 14 lazyLoad($('img.lazy'));
  15 +ellipsis.init();
12 16
13 if ($('.banner-swiper .swiper-slide').length > 1) { 17 if ($('.banner-swiper .swiper-slide').length > 1) {
14 new Swiper('.banner-swiper', { 18 new Swiper('.banner-swiper', {
@@ -24,7 +28,7 @@ if ($('.banner-swiper .swiper-slide').length > 1) { @@ -24,7 +28,7 @@ if ($('.banner-swiper .swiper-slide').length > 1) {
24 } 28 }
25 29
26 if ($('.avatar-swiper .swiper-slide').length > 1) { 30 if ($('.avatar-swiper .swiper-slide').length > 1) {
27 - new Swiper('.avatar-swiper', { 31 + avatarSwiper = new Swiper('.avatar-swiper', {
28 loop: true, 32 loop: true,
29 initialSlide: 3, 33 initialSlide: 3,
30 centeredSlides: true, 34 centeredSlides: true,
@@ -36,3 +40,27 @@ if ($('.avatar-swiper .swiper-slide').length > 1) { @@ -36,3 +40,27 @@ if ($('.avatar-swiper .swiper-slide').length > 1) {
36 watchSlidesVisibility: true 40 watchSlidesVisibility: true
37 }); 41 });
38 } 42 }
  43 +
  44 +
  45 +if ($('.star-info').find('li').length > 0) {
  46 + // 限制标题字数
  47 + $('.star-article').each(function() {
  48 + $this = $(this);
  49 + $title = $this.find('.article-title');
  50 + $cont = $this.find('p');
  51 +
  52 + $title[0].mlellipsis(2);
  53 + $cont[0].mlellipsis(3);
  54 + });
  55 +}
  56 +
  57 +$('body').addClass('star-index-bg');
  58 +
  59 +$('.avatar-swiper li').not('.swiper-slide-active').on('click', function() {
  60 + avatarKey = $(this).index();
  61 + avatarSwiper.slideTo(avatarKey, 1000, false);
  62 +});
  63 +
  64 +$('.swiper-slide-active').on('click', function() {
  65 + location.href = $(this).find('img').data('url');
  66 +});
@@ -136,11 +136,15 @@ @@ -136,11 +136,15 @@
136 136
137 .star-info { 137 .star-info {
138 margin-top: 30px; 138 margin-top: 30px;
  139 +
  140 + li {
  141 + float: left;
  142 + margin-bottom: 30px;
  143 + }
139 } 144 }
140 145
141 .star-avatar { 146 .star-avatar {
142 - width: 150px;  
143 - text-align: center; 147 + width: 134px;
144 padding-left: 30px; 148 padding-left: 30px;
145 box-sizing: border-box; 149 box-sizing: border-box;
146 float: left; 150 float: left;
@@ -149,26 +153,38 @@ @@ -149,26 +153,38 @@
149 width: 104px; 153 width: 104px;
150 height: 104px; 154 height: 104px;
151 border-radius: 50%; 155 border-radius: 50%;
  156 + float: left;
  157 + }
  158 +
  159 + .name {
  160 + font-size: 24px;
  161 + width: 100%;
  162 + text-overflow: ellipsis;
  163 + overflow: hidden;
  164 + white-space: nowrap;
  165 + color: #fff;
  166 + margin-top: 8px;
  167 + float: left;
152 } 168 }
153 } 169 }
154 170
155 .star-article { 171 .star-article {
156 width: 472px; 172 width: 472px;
157 - height: 439px;  
158 position: relative; 173 position: relative;
159 border-radius: 8px; 174 border-radius: 8px;
160 background: #282828; 175 background: #282828;
161 float: left; 176 float: left;
162 - padding: 30px; 177 + padding: 20px 30px;
163 box-sizing: border-box; 178 box-sizing: border-box;
  179 + margin-left: 18px;
164 180
165 .article-arrow { 181 .article-arrow {
166 position: absolute; 182 position: absolute;
167 left: -13px; 183 left: -13px;
168 width: 0; 184 width: 0;
169 height: 0; 185 height: 0;
170 - border-top: 13px solid transparent;  
171 - border-bottom: 13px solid transparent; 186 + border-top: 10px solid transparent;
  187 + border-bottom: 10px solid transparent;
172 border-right: 13px solid #282828; 188 border-right: 13px solid #282828;
173 } 189 }
174 190
@@ -179,17 +195,21 @@ @@ -179,17 +195,21 @@
179 } 195 }
180 196
181 .artice-cont { 197 .artice-cont {
182 - margin-top: 20px; 198 + margin-top: 10px;
183 199
184 p { 200 p {
185 font-size: 18px; 201 font-size: 18px;
186 - color: #3e3a39; 202 + line-height: 29px;
  203 + color: #969696;
187 } 204 }
188 } 205 }
189 206
190 .artice-imgs { 207 .artice-imgs {
191 - margin: 30px 0; 208 + margin: 25px 0 30px;
192 width: 100%; 209 width: 100%;
  210 + height: 130px;
  211 + float: left;
  212 + overflow: hidden;
193 213
194 li { 214 li {
195 float: left; 215 float: left;
@@ -209,9 +229,50 @@ @@ -209,9 +229,50 @@
209 229
210 .artice-o { 230 .artice-o {
211 width: 100%; 231 width: 100%;
212 - 232 + float: left;
213 border-top: 1px solid #b0b0b0; 233 border-top: 1px solid #b0b0b0;
  234 + padding-top: 20px;
  235 +
  236 + span {
  237 + font-size: 18px;
  238 + color: #b0b0b0;
  239 + height: 22px;
  240 + line-height: 22px;
  241 +
  242 + i {
  243 + display: inline-block;
  244 + margin-right: 5px;
  245 + font-size: 22px;
  246 + vertical-align: text-top;
  247 + }
  248 + }
  249 +
  250 + .time {
  251 + float: left;
  252 + }
  253 +
  254 + .see {
  255 + float: left;
  256 + margin-left: 30px;
  257 + }
  258 +
  259 + .time-ico {
  260 + width: 24px;
  261 + height: 24px;
  262 + }
  263 +
  264 + .see-ico {
  265 + width: 31px;
  266 + height: 24px;
  267 + }
214 } 268 }
215 } 269 }
216 } 270 }
217 271
  272 +.star-index-bg {
  273 + background: #000;
  274 +
  275 + .star-page {
  276 + background: #000;
  277 + }
  278 +}