fe / YOHOOD · Commits

Go to a project

Authored by microTT
Commit ec0e6ca54da1191d9a9c667d4ffbba56bfb9ba79 1 parent 627d5a8e

修改详情页

Inline Side-by-side
Showing 5 changed files with 299 additions and 220 deletions
@@ -165,7 +165,7 @@ @@ -165,7 +165,7 @@
165 <div class="detail-slide"> 165 <div class="detail-slide">
166 <div class="detail-slide-body"> 166 <div class="detail-slide-body">
167 <ul class="detail-slide-piclist clearfix"> 167 <ul class="detail-slide-piclist clearfix">
168 - <li class="box"><img alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg"></li> 168 + <li class="box"><img alt="" data-original="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg"></li>
169 <li class="box"><img alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg"></li> 169 <li class="box"><img alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg"></li>
170 <li class="box"><img alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg"></li> 170 <li class="box"><img alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg"></li>
171 <li class="box"><img alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/02a620fa3b46be018a1626ef52c9d13944.jpg"></li> 171 <li class="box"><img alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/02a620fa3b46be018a1626ef52c9d13944.jpg"></li>
@@ -200,87 +200,96 @@ @@ -200,87 +200,96 @@
200 </div> 200 </div>
201 <div class="text-body"> 201 <div class="text-body">
202 <p>不知大家还是否记得前不久YOHO！BOYS为各位推送的P.A.M春夏系列宣传画册，近日，此番包括长短袖图案 T-Shirt、连帽卫衣、Duplo 长裤与带有 3D 口袋的短裤等多款轻松塑造夏日型格的实穿单品已正式发布啦！延续了一贯擅于将街头元素与不按常理出牌迷幻美学结合的风格，P.A.M今季运用创新的面料结合巧思的细节与醒目夸张的印花诠释了「标签暨艺术」的设计理念，与此同时也多多少少展现了美少男们骨子里的“小骚气”。该系列已可经由someday-store购得。Hey，boys！准备好高调一夏了吗？</p> 202 <p>不知大家还是否记得前不久YOHO！BOYS为各位推送的P.A.M春夏系列宣传画册，近日，此番包括长短袖图案 T-Shirt、连帽卫衣、Duplo 长裤与带有 3D 口袋的短裤等多款轻松塑造夏日型格的实穿单品已正式发布啦！延续了一贯擅于将街头元素与不按常理出牌迷幻美学结合的风格，P.A.M今季运用创新的面料结合巧思的细节与醒目夸张的印花诠释了「标签暨艺术」的设计理念，与此同时也多多少少展现了美少男们骨子里的“小骚气”。该系列已可经由someday-store购得。Hey，boys！准备好高调一夏了吗？</p>
  203 + <p>不知大家还是否记得前不久YOHO！BOYS为各位推送的P.A.M春夏系列宣传画册，近日，此番包括长短袖图案 T-Shirt、连帽卫衣、Duplo 长裤与带有 3D 口袋的短裤等多款轻松塑造夏日型格的实穿单品已正式发布啦！延续了一贯擅于将街头元素与不按常理出牌迷幻美学结合的风格，P.A.M今季运用创新的面料结合巧思的细节与醒目夸张的印花诠释了「标签暨艺术」的设计理念，与此同时也多多少少展现了美少男们骨子里的“小骚气”。该系列已可经由someday-store购得。Hey，boys！准备好高调一夏了吗？</p>
203 </div> 204 </div>
204 <div class="related-post detail-related-post"> 205 <div class="related-post detail-related-post">
205 <h3>相关推荐</h3> 206 <h3>相关推荐</h3>
  207 + <hr>
  208 + <!-- 相关推荐资讯 start -->
206 <div class="post-list main-layout clearfix"> 209 <div class="post-list main-layout clearfix">
  210 + <!-- 单个资讯碎片 start -->
207 <div class="layout-item clearfix"> 211 <div class="layout-item clearfix">
208 <div class="image-box"> 212 <div class="image-box">
209 <a href="javascript:;"> 213 <a href="javascript:;">
210 - <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="" style="height:230px;width:230px;"> 214 + <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
211 <i class="play-icon"></i> 215 <i class="play-icon"></i>
212 </a> 216 </a>
213 </div> 217 </div>
214 <div class="content"> 218 <div class="content">
215 <h2 class="volupia"> 219 <h2 class="volupia">
216 - <a href="/news/detail/id/169">test</a> 220 + <a href="/news/detail/id/169">test test test test</a>
217 </h2> 221 </h2>
  222 + <p class="time">NovemBer 11,2016</p>
218 </div> 223 </div>
219 </div> 224 </div>
  225 + <!-- 单个资讯碎片 end -->
  226 + <!-- 单个资讯碎片 start -->
220 <div class="layout-item clearfix"> 227 <div class="layout-item clearfix">
221 <div class="image-box"> 228 <div class="image-box">
222 <a href="javascript:;"> 229 <a href="javascript:;">
223 - <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="" style="height:230px;width:230px;"> 230 + <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
224 <i class="play-icon"></i> 231 <i class="play-icon"></i>
225 </a> 232 </a>
226 </div> 233 </div>
227 <div class="content"> 234 <div class="content">
228 <h2 class="volupia"> 235 <h2 class="volupia">
229 - <a href="/news/detail/id/169">test</a> 236 + <a href="/news/detail/id/169">test test test test</a>
230 </h2> 237 </h2>
  238 + <p class="time">NovemBer 11,2016</p>
231 </div> 239 </div>
232 </div> 240 </div>
  241 + <!-- 单个资讯碎片 end -->
  242 + <!-- 单个资讯碎片 start -->
233 <div class="layout-item clearfix"> 243 <div class="layout-item clearfix">
234 <div class="image-box"> 244 <div class="image-box">
235 <a href="javascript:;"> 245 <a href="javascript:;">
236 - <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="" style="height:230px;width:230px;"> 246 + <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
237 <i class="play-icon"></i> 247 <i class="play-icon"></i>
238 </a> 248 </a>
239 </div> 249 </div>
240 <div class="content"> 250 <div class="content">
241 <h2 class="volupia"> 251 <h2 class="volupia">
242 - <a href="/news/detail/id/169">test</a> 252 + <a href="/news/detail/id/169">test test test test</a>
243 </h2> 253 </h2>
  254 + <p class="time">NovemBer 11,2016</p>
244 </div> 255 </div>
245 </div> 256 </div>
  257 + <!-- 单个资讯碎片 end -->
246 </div> 258 </div>
  259 + <!-- 相关推荐资讯碎片 end -->
247 </div> 260 </div>
248 </div> 261 </div>
249 <!-- 资讯内容 end --> 262 <!-- 资讯内容 end -->
250 <!-- 资讯侧边栏 start --> 263 <!-- 资讯侧边栏 start -->
251 <div class="detail-side"> 264 <div class="detail-side">
  265 + <!-- 右侧固定广告位 start -->
252 <div class="detail-ad"> 266 <div class="detail-ad">
253 <ul> 267 <ul>
254 <li> 268 <li>
255 - <a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" style="width: 290px" alt=""></a> 269 + <a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" alt=""></a>
256 </li> 270 </li>
257 <li> 271 <li>
258 - <a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" alt="" style="width: 290px"></a> 272 + <a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" alt=""></a>
259 </li> 273 </li>
260 </ul> 274 </ul>
261 </div> 275 </div>
262 - <div class="app-download clearfix">  
263 - <div class="qr">  
264 - <img src="../../res/images/yohood/yohobuyqr.png" alt="">  
265 - </div>  
266 - <div class="download-text">  
267 - <img src="../../res/images/yohood/app-icon01.png" alt="">  
268 - <p class="yoho-name">YOHO!有货</p>  
269 - <p>随手随心，潮流购物利器大公开</p>  
270 - </div>  
271 - </div> 276 + <!-- 右侧固定广告位 end -->
  277 + <!-- 右侧最新资讯/视频 start -->
272 <div class="side-related-post"> 278 <div class="side-related-post">
273 <div class="side-related-tab clearfix"> 279 <div class="side-related-tab clearfix">
274 - <a class="current" href="javascript:;">最新视频</a>  
275 - <a href="javascript:;">最新宣传片</a> 280 + <a class="current" href="javascript:;">最新资讯</a>
  281 + <span>/</span>
  282 + <a href="javascript:;">最新视频</a>
276 </div> 283 </div>
  284 + <!-- 最新信息碎片 start -->
277 <div class="side-related-wrap"> 285 <div class="side-related-wrap">
  286 + <!-- 最新资讯 start -->
278 <div class="side-related-list main-layout current"> 287 <div class="side-related-list main-layout current">
  288 + <!-- 单个资讯碎片 start -->
279 <div class="layout-item clearfix"> 289 <div class="layout-item clearfix">
280 <div class="image-box"> 290 <div class="image-box">
281 <a href="javascript:;"> 291 <a href="javascript:;">
282 - <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="" style="height:230px;width:230px;">  
283 - <i class="play-icon"></i> 292 + <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
284 </a> 293 </a>
285 </div> 294 </div>
286 <div class="content"> 295 <div class="content">
@@ -288,12 +297,14 @@ @@ -288,12 +297,14 @@
288 <a href="/news/detail/id/169">test</a> 297 <a href="/news/detail/id/169">test</a>
289 </h2> 298 </h2>
290 </div> 299 </div>
  300 + <hr>
291 </div> 301 </div>
  302 + <!-- 单个资讯碎片 end -->
  303 + <!-- 单个资讯碎片 start -->
292 <div class="layout-item clearfix"> 304 <div class="layout-item clearfix">
293 <div class="image-box"> 305 <div class="image-box">
294 <a href="javascript:;"> 306 <a href="javascript:;">
295 - <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="" style="height:230px;width:230px;">  
296 - <i class="play-icon"></i> 307 + <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
297 </a> 308 </a>
298 </div> 309 </div>
299 <div class="content"> 310 <div class="content">
@@ -301,12 +312,14 @@ @@ -301,12 +312,14 @@
301 <a href="/news/detail/id/169">test</a> 312 <a href="/news/detail/id/169">test</a>
302 </h2> 313 </h2>
303 </div> 314 </div>
  315 + <hr>
304 </div> 316 </div>
  317 + <!-- 单个资讯碎片 end -->
  318 + <!-- 单个资讯碎片 start -->
305 <div class="layout-item clearfix"> 319 <div class="layout-item clearfix">
306 <div class="image-box"> 320 <div class="image-box">
307 <a href="javascript:;"> 321 <a href="javascript:;">
308 - <img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="" style="height:230px;width:230px;">  
309 - <i class="play-icon"></i> 322 + <img src="http://img02.res.yoho.cn/blogimg/2014/10/21/15/02c51ce4d3b1f8cc8c0be2f9ccdbfce6ca.jpg" alt="">
310 </a> 323 </a>
311 </div> 324 </div>
312 <div class="content"> 325 <div class="content">
@@ -314,13 +327,18 @@ @@ -314,13 +327,18 @@
314 <a href="/news/detail/id/169">test</a> 327 <a href="/news/detail/id/169">test</a>
315 </h2> 328 </h2>
316 </div> 329 </div>
  330 + <hr>
317 </div> 331 </div>
  332 + <!-- 单个资讯碎片 end -->
318 </div> 333 </div>
  334 + <!-- 最新资讯 end -->
  335 + <!-- 最新视频 start -->
319 <div class="side-related-list main-layout"> 336 <div class="side-related-list main-layout">
  337 + <!-- 单个视频碎片 start -->
320 <div class="layout-item clearfix"> 338 <div class="layout-item clearfix">
321 <div class="image-box"> 339 <div class="image-box">
322 <a href="javascript:;"> 340 <a href="javascript:;">
323 - <img src="http://img02.res.yoho.cn/blogimg/2014/10/21/15/02c51ce4d3b1f8cc8c0be2f9ccdbfce6ca.jpg" alt="" style="height:230px;width:230px;"> 341 + <img src="http://img02.res.yoho.cn/blogimg/2014/10/21/15/02c51ce4d3b1f8cc8c0be2f9ccdbfce6ca.jpg" alt="">
324 <i class="play-icon"></i> 342 <i class="play-icon"></i>
325 </a> 343 </a>
326 </div> 344 </div>
@@ -329,11 +347,14 @@ @@ -329,11 +347,14 @@
329 <a href="/news/detail/id/169">test</a> 347 <a href="/news/detail/id/169">test</a>
330 </h2> 348 </h2>
331 </div> 349 </div>
  350 + <hr>
332 </div> 351 </div>
  352 + <!-- 单个视频碎片 end -->
  353 + <!-- 单个视频碎片 start -->
333 <div class="layout-item clearfix"> 354 <div class="layout-item clearfix">
334 <div class="image-box"> 355 <div class="image-box">
335 <a href="javascript:;"> 356 <a href="javascript:;">
336 - <img src="http://img02.res.yoho.cn/blogimg/2014/10/21/15/02c51ce4d3b1f8cc8c0be2f9ccdbfce6ca.jpg" alt="" style="height:230px;width:230px;"> 357 + <img src="http://img02.res.yoho.cn/blogimg/2014/10/21/15/02c51ce4d3b1f8cc8c0be2f9ccdbfce6ca.jpg" alt="">
337 <i class="play-icon"></i> 358 <i class="play-icon"></i>
338 </a> 359 </a>
339 </div> 360 </div>
@@ -342,35 +363,44 @@ @@ -342,35 +363,44 @@
342 <a href="/news/detail/id/169">test</a> 363 <a href="/news/detail/id/169">test</a>
343 </h2> 364 </h2>
344 </div> 365 </div>
  366 + <hr>
345 </div> 367 </div>
  368 + <!-- 单个视频碎片 end -->
  369 + <!-- 单个视频碎片 start -->
346 <div class="layout-item clearfix"> 370 <div class="layout-item clearfix">
347 <div class="image-box"> 371 <div class="image-box">
348 <a href="javascript:;"> 372 <a href="javascript:;">
349 - <img src="http://img02.res.yoho.cn/blogimg/2014/10/21/15/02c51ce4d3b1f8cc8c0be2f9ccdbfce6ca.jpg" alt="" style="height:230px;width:230px;"> 373 + <img src="http://img02.res.yoho.cn/blogimg/2014/10/21/15/02c51ce4d3b1f8cc8c0be2f9ccdbfce6ca.jpg" alt="">
350 <i class="play-icon"></i> 374 <i class="play-icon"></i>
351 </a> 375 </a>
352 </div> 376 </div>
353 <div class="content"> 377 <div class="content">
354 <h2 class="volupia"> 378 <h2 class="volupia">
355 - <a href="/news/detail/id/169">testtestt esttesttestt esttestte sttesttestte sttest</a> 379 + <a href="/news/detail/id/169">test</a>
356 </h2> 380 </h2>
357 </div> 381 </div>
  382 + <hr>
358 </div> 383 </div>
  384 + <!-- 单个视频碎片 end -->
359 </div> 385 </div>
  386 + <!-- 最新视频 end -->
360 </div> 387 </div>
  388 + <!-- 最新信息碎片 end -->
361 </div> 389 </div>
  390 + <!-- 右侧最新资讯/视频 end -->
362 </div> 391 </div>
363 <!-- 资讯侧边栏 end --> 392 <!-- 资讯侧边栏 end -->
364 </div> 393 </div>
365 </div> 394 </div>
366 <!-- 页面主体 start --> 395 <!-- 页面主体 start -->
367 <div class="ft"> 396 <div class="ft">
  397 + <hr>
368 <p class="copyright"> 398 <p class="copyright">
369 CopyRight © 2007-2016 南京新与力文化传播有限公司苏ICP备09011225号-11 399 CopyRight © 2007-2016 南京新与力文化传播有限公司苏ICP备09011225号-11
370 </p> 400 </p>
371 </div> 401 </div>
372 <!-- 分享按钮 start --> 402 <!-- 分享按钮 start -->
373 - <div style="display: none" class="share" data-link="http://newgirls.test.yoho.cn/channel/detail/index/id/2315" cover-url="http://cmsimg01.qiniudn.com/contentimg/2015/05/12/13/0147a071d80901d152ce04dc4341905d26.jpg"> 403 + <div class="share" data-link="http://newgirls.test.yoho.cn/channel/detail/index/id/2315" cover-url="http://cmsimg01.qiniudn.com/contentimg/2015/05/12/13/0147a071d80901d152ce04dc4341905d26.jpg">
374 <h4>share</h4> 404 <h4>share</h4>
375 <ul> 405 <ul>
376 <li class="yohoo-share-button-sina"> 406 <li class="yohoo-share-button-sina">
@@ -331,6 +331,16 @@ define('channel', function(require, exports) { @@ -331,6 +331,16 @@ define('channel', function(require, exports) {
331 loopedSlides: 4 331 loopedSlides: 4
332 }), 332 }),
333 333
  334 + clearOtherSlideStyle: function(swiper) {
  335 + var slides = swiper.slides,
  336 + i = 0,
  337 + len = 0;
  338 +
  339 + for (i = 0, len = slides.length; i < len; i++) {
  340 + slides[i].style = null;
  341 + }
  342 + },
  343 +
334 nextChagneSileSize: function(swiper) { 344 nextChagneSileSize: function(swiper) {
335 var activeIndex = swiper.activeIndex, 345 var activeIndex = swiper.activeIndex,
336 slides = swiper.slides, 346 slides = swiper.slides,
@@ -341,8 +351,6 @@ define('channel', function(require, exports) { @@ -341,8 +351,6 @@ define('channel', function(require, exports) {
341 if (/big\-size/.test(nextNextSlide.className)) { 351 if (/big\-size/.test(nextNextSlide.className)) {
342 nextSlide.style.width = "1180px"; 352 nextSlide.style.width = "1180px";
343 } 353 }
344 -  
345 - activeSlide.style = null;  
346 }, 354 },
347 355
348 prevChangeSlideSize: function(swiper) { 356 prevChangeSlideSize: function(swiper) {
@@ -351,7 +359,7 @@ define('channel', function(require, exports) { @@ -351,7 +359,7 @@ define('channel', function(require, exports) {
351 activeSlide = slides[activeIndex], 359 activeSlide = slides[activeIndex],
352 prevSlide = slides[activeIndex - 1]; 360 prevSlide = slides[activeIndex - 1];
353 361
354 - if (/big\-size/.test(activeSlide.className)) { 362 + if (/big-size/.test(activeSlide.className)) {
355 prevSlide.style.width = "1180px"; 363 prevSlide.style.width = "1180px";
356 } 364 }
357 }, 365 },
@@ -359,18 +367,32 @@ define('channel', function(require, exports) { @@ -359,18 +367,32 @@ define('channel', function(require, exports) {
359 init: function() { 367 init: function() {
360 var swiper = this.cooperateSwiper, 368 var swiper = this.cooperateSwiper,
361 prevChangeSlideSize = this.prevChangeSlideSize, 369 prevChangeSlideSize = this.prevChangeSlideSize,
362 - nextChagneSileSize = this.nextChagneSileSize; 370 + nextChagneSileSize = this.nextChagneSileSize,
  371 + clearOtherSlideStyle = this.clearOtherSlideStyle,
  372 + firstSlide = swiper.slides[swiper.activeIndex],
  373 + secondSlide = swiper.slides[swiper.activeIndex + 1];
363 374
364 $('.cooperation-slide-prev').on('click', function(e) { 375 $('.cooperation-slide-prev').on('click', function(e) {
365 e.preventDefault(); 376 e.preventDefault();
  377 + clearOtherSlideStyle(swiper);
366 prevChangeSlideSize(swiper); 378 prevChangeSlideSize(swiper);
367 swiper.swipePrev(); 379 swiper.swipePrev();
368 }); 380 });
369 $('.cooperation-slide-next').on('click', function(e) { 381 $('.cooperation-slide-next').on('click', function(e) {
370 e.preventDefault(); 382 e.preventDefault();
  383 + clearOtherSlideStyle(swiper);
371 nextChagneSileSize(swiper); 384 nextChagneSileSize(swiper);
372 swiper.swipeNext(); 385 swiper.swipeNext();
373 }); 386 });
  387 +
  388 + if (firstSlide == null || secondSlide == null) {
  389 + return;
  390 + }
  391 +
  392 + if (/big-size/.test(secondSlide.className)) {
  393 + firstSlide.style.width = "1180px";
  394 + }
  395 +
374 } 396 }
375 }).init(); 397 }).init();
376 398
@@ -445,15 +467,6 @@ define('channel', function(require, exports) { @@ -445,15 +467,6 @@ define('channel', function(require, exports) {
445 slideElement: 'li' 467 slideElement: 'li'
446 }); 468 });
447 469
448 - // $('.detail-slide-ctrl-prev').bind('click', function(e) {  
449 - // e.preventDefault();  
450 - // detailSwiper.swipePrev();  
451 - // });  
452 - // $('.detail-slide-ctrl-next').bind('click', function(e) {  
453 - // e.preventDefault();  
454 - // detailSwiper.swipeNext();  
455 - // });  
456 -  
457 $('.slide-big-ctrl-prev').bind('click', function(e) { 470 $('.slide-big-ctrl-prev').bind('click', function(e) {
458 e.preventDefault(); 471 e.preventDefault();
459 detailSwiper.swipePrev(); 472 detailSwiper.swipePrev();
@@ -472,90 +485,79 @@ define('channel', function(require, exports) { @@ -472,90 +485,79 @@ define('channel', function(require, exports) {
472 }); 485 });
473 }; 486 };
474 487
475 - //侧栏推荐切换  
476 - clearInterval(timer);  
477 488
478 - function postSwitch() {  
479 - $('.side-related-tab').find('a').each(function(i) {  
480 - if ($(this).hasClass('current')) {  
481 - $(this).removeClass('current');  
482 - } else {  
483 - $(this).addClass('current');  
484 - $('.side-related-list').hide().eq(i).show();  
485 - }  
486 - });  
487 - }  
488 - timer = setInterval(function() {  
489 - postSwitch();  
490 - }, 5000);  
491 - $('.side-related-post').on('mouseenter', function() {  
492 - clearInterval(timer);  
493 - }).on('mouseleave', function() {  
494 - timer = setInterval(function() {  
495 - postSwitch();  
496 - }, 5000);  
497 - })  
498 - $('.side-related-tab').on('click', 'a', function() {  
499 - nowIndex = $(this).index();  
500 - if ($(this).hasClass('current')) return;  
501 - $(this).addClass('current').siblings().removeClass('current');  
502 - $('.side-related-list').hide().eq(nowIndex).show();  
503 - }); 489 + ({
  490 + detialImgZoom: $('.detail-slide-body').find('.box').each(function() {
  491 + console.log($(this));
  492 + $(this).imgZoom({
  493 + imgTag: 'pic-tip',
  494 + });
  495 + }),
  496 +
  497 + init: function() {
  498 +
  499 + }
  500 + }).init();
  501 +
  502 +
  503 + /**
  504 + * 详情页面侧边栏 最新信息 切换
  505 + */
  506 + ({
  507 + /**
  508 + * setIimeout编号 以便清除
  509 + * @type {Number}
  510 + */
  511 + setTimeoutNum: 0,
  512 +
  513 + /**
  514 + * 自动切换时间
  515 + * @type {Number}
  516 + */
  517 + autoSwitchTime: 5000,
  518 +
  519 + /**
  520 + * 自动切换标签
  521 + * @return {Undefined}
  522 + */
  523 + autoSwitch: function() {
  524 + $('.side-related-tab').find('a').each(function(i) {
  525 + if ($(this).hasClass('current')) {
  526 + $(this).removeClass('current');
  527 + } else {
  528 + $(this).addClass('current');
  529 + $('.side-related-list').hide().eq(i).show();
  530 + }
  531 + });
  532 +
  533 + this.setTimeoutNum = setTimeout(this.autoSwitch, this.autoSwitchTime);
  534 + },
  535 +
  536 + init: function() {
  537 + var that = this;
  538 +
  539 + // 鼠标移入 停止自动切换 移出 开始自动切换
  540 + $('.side-related-post').on('mouseenter', function() {
  541 + clearTimeout(that.setTimeoutNum);
  542 + }).on('mouseleave', function() {
  543 + that.autoSwitch();
  544 + });
  545 +
  546 + // 点击标签 切换信息
  547 + $('.side-related-tab').on('click', 'a', function() {
  548 + nowIndex = $(this).index(".side-related-tab a");
  549 + if ($(this).hasClass('current')) {
  550 + return;
  551 + }
  552 + $(this).addClass('current').siblings().removeClass('current');
  553 + $('.side-related-list').hide().eq(nowIndex).show();
  554 + });
  555 +
  556 + // 开始自动切换
  557 + this.autoSwitch();
  558 + }
  559 + }).init();
504 560
505 - //右侧相关文章定位  
506 - // relatedPost = $('.side-related-post');  
507 - // relatedTop = relatedPost.offset().top;  
508 - // relatedH = relatedPost.outerHeight();  
509 - // maxH = $('.limited-goods').offset().top;  
510 - // $(window).on('scroll', function() {  
511 - // if ($('.detail-body').outerHeight() > $('.detail-side').outerHeight() && navigator.userAgent.indexOf('iPad') === -1) {  
512 - // relatedH = relatedPost.outerHeight();  
513 - // maxH = $('.limited-goods').offset().top;  
514 - // if ($(this).scrollTop() >= relatedTop) {  
515 - // relatedPost.addClass('fix');  
516 - // if (relatedPost.offset().top + relatedH >= maxH && relatedPost.hasClass('fix')) {  
517 - // relatedPost.css({  
518 - // 'position': 'absolute',  
519 - // 'top': maxH - relatedH - 10  
520 - // })  
521 - // }  
522 - // if ($(this).scrollTop() <= maxH - relatedH) {  
523 - // relatedPost.css({  
524 - // 'position': 'fixed',  
525 - // 'top': 0  
526 - // });  
527 - // }  
528 - // } else {  
529 - // relatedPost.removeClass('fix').removeAttr('style');  
530 - // }  
531 - // }  
532 - // });  
533 -  
534 - //分享按钮位置  
535 - // var shareOffsetTop = $(".share").offset().top;  
536 - // $(window).scroll(function() {  
537 - // scrollTop = $(window).scrollTop();  
538 - // maxH = $('.limited-goods').offset().top;  
539 - // if (shareOffsetTop - scrollTop <= 0) {  
540 - // $(".share").css({  
541 - // "position": "fixed",  
542 - // "top": 10  
543 - // });  
544 - // } else {  
545 - // $(".share").css({  
546 - // "position": "absolute",  
547 - // "top": shareOffsetTop  
548 - // });  
549 - // }  
550 - // console.log($(".share").offset().top + $('.share').outerHeight());  
551 - // console.log($('.limited-goods').offset().top);  
552 - // if ($(".share").offset().top + $('.share').outerHeight() > maxH) {;  
553 - // $(".share").css({  
554 - // 'position': 'absolute',  
555 - // 'top': maxH - $('.share').outerHeight() - 10  
556 - // });  
557 - // }  
558 - // });  
559 }; 561 };
560 562
561 exports.siteActivity = function() { 563 exports.siteActivity = function() {
@@ -120,42 +120,42 @@ @@ -120,42 +120,42 @@
120 } 120 }
121 } 121 }
122 122
123 -.related-post {  
124 - h3 {  
125 - margin-top: 20px;  
126 - line-height: 22px;  
127 - font-size: 18px;  
128 - }  
129 - .post-list {  
130 - margin-top: 17px;  
131 - width: 666px;  
132 - .layout-item {  
133 - float: left;  
134 - width: 200px;  
135 - margin-right: 22px;  
136 - .image-box {  
137 - height: 128px;  
138 - overflow: hidden;  
139 - a{  
140 - display: table-cell;  
141 - width: 200px;  
142 - height: 128px;  
143 - vertical-align: middle;  
144 - img{  
145 - margin: 0 auto;  
146 - }  
147 - }  
148 - }  
149 - .content {  
150 - h2 {  
151 - margin: 8px 0 0 0;  
152 - line-height: 20px;  
153 - a {  
154 - font-size: 14px;  
155 - font-weight: normal;  
156 - }  
157 - }  
158 - }  
159 - }  
160 - }  
161 -}  
  123 +// .related-post {
  124 +// h3 {
  125 +// margin-top: 20px;
  126 +// line-height: 22px;
  127 +// font-size: 18px;
  128 +// }
  129 +// .post-list {
  130 +// margin-top: 17px;
  131 +// width: 666px;
  132 +// .layout-item {
  133 +// float: left;
  134 +// width: 200px;
  135 +// margin-right: 22px;
  136 +// .image-box {
  137 +// height: 128px;
  138 +// overflow: hidden;
  139 +// a{
  140 +// display: table-cell;
  141 +// width: 200px;
  142 +// height: 128px;
  143 +// vertical-align: middle;
  144 +// img{
  145 +// margin: 0 auto;
  146 +// }
  147 +// }
  148 +// }
  149 +// .content {
  150 +// h2 {
  151 +// margin: 8px 0 0 0;
  152 +// line-height: 20px;
  153 +// a {
  154 +// font-size: 14px;
  155 +// font-weight: normal;
  156 +// }
  157 +// }
  158 +// }
  159 +// }
  160 +// }
  161 +// }
@@ -695,13 +695,17 @@ $pageMainWidth: 1180px; @@ -695,13 +695,17 @@ $pageMainWidth: 1180px;
695 } 695 }
696 696
697 .ft { 697 .ft {
698 - margin: 30px 0;  
699 width: 100%; 698 width: 100%;
700 min-width: $pageMainWidth; 699 min-width: $pageMainWidth;
  700 + hr {
  701 + width: $pageMainWidth;
  702 + border: 0;
  703 + border-top: 1px solid #e0e0e0;
  704 + }
701 .copyright { 705 .copyright {
  706 + margin: 30px auto;
702 color: #444; 707 color: #444;
703 width: $pageMainWidth; 708 width: $pageMainWidth;
704 text-align: center; 709 text-align: center;
705 - margin: 0 auto;  
706 } 710 }
707 } 711 }
1 $pageContentWidth: 1080px; 1 $pageContentWidth: 1080px;
  2 +$detialContentWidth: 740px;
  3 +$sideWidth: 290px;
2 .detail-wrap { 4 .detail-wrap {
3 width: $pageContentWidth; 5 width: $pageContentWidth;
4 margin: 0 auto; 6 margin: 0 auto;
@@ -49,9 +51,8 @@ $pageContentWidth: 1080px; @@ -49,9 +51,8 @@ $pageContentWidth: 1080px;
49 } 51 }
50 52
51 .detail-body { 53 .detail-body {
52 - $detailBodyWidth: 740px;  
53 float: left; 54 float: left;
54 - width: $detailBodyWidth; 55 + width: $detialContentWidth;
55 img { 56 img {
56 max-width: 100%; 57 max-width: 100%;
57 } 58 }
@@ -63,7 +64,6 @@ $pageContentWidth: 1080px; @@ -63,7 +64,6 @@ $pageContentWidth: 1080px;
63 64
64 .detail-slide-body { 65 .detail-slide-body {
65 $slideBodyHeight: 425px; 66 $slideBodyHeight: 425px;
66 - $detailBodyWidth: 740px;  
67 position: relative; 67 position: relative;
68 width: 100%; 68 width: 100%;
69 height: $slideBodyHeight; 69 height: $slideBodyHeight;
@@ -74,7 +74,7 @@ $pageContentWidth: 1080px; @@ -74,7 +74,7 @@ $pageContentWidth: 1080px;
74 position: relative; 74 position: relative;
75 .box { 75 .box {
76 float: left; 76 float: left;
77 - width: $detailBodyWidth; 77 + width: $detialContentWidth;
78 height: $slideBodyHeight; 78 height: $slideBodyHeight;
79 line-height: $slideBodyHeight; 79 line-height: $slideBodyHeight;
80 position: relative; 80 position: relative;
@@ -91,7 +91,7 @@ $pageContentWidth: 1080px; @@ -91,7 +91,7 @@ $pageContentWidth: 1080px;
91 .slide-shadow { 91 .slide-shadow {
92 a { 92 a {
93 position: absolute; 93 position: absolute;
94 - width: 322px; 94 + width: 50px;
95 top: 0; 95 top: 0;
96 bottom: 0; 96 bottom: 0;
97 &:focus { 97 &:focus {
@@ -198,60 +198,87 @@ $pageContentWidth: 1080px; @@ -198,60 +198,87 @@ $pageContentWidth: 1080px;
198 } 198 }
199 } 199 }
200 200
  201 +.related-post {
  202 + h3 {
  203 + font-weight: bold;
  204 + }
  205 + .post-list {
  206 + $itemWidth: 235px;
  207 + margin-top: 17px;
  208 + width: $detialContentWidth;
  209 + .layout-item {
  210 + float: left;
  211 + width: 235px;
  212 + height: 230px;
  213 + margin: 0 ($detialContentWidth - $itemWidth * 3) / 2 0 0;
  214 + .image-box {
  215 + width: $itemWidth;
  216 + height: 135px;
  217 + overflow: hidden;
  218 + a {
  219 + display: table-cell;
  220 + width: $itemWidth;
  221 + height: 135px;
  222 + vertical-align: middle;
  223 + img {
  224 + margin: 0 auto;
  225 + }
  226 + }
  227 + }
  228 + .content {
  229 + .volupia {
  230 + margin: 22px 0 0 0;
  231 + line-height: 20px;
  232 + a {
  233 + font-size: 16px;
  234 + font-weight: bold;
  235 + }
  236 + }
  237 + .time {
  238 + margin: 22px 0 0;
  239 + color: #b2b2b2;
  240 + font-size: 12px;
  241 + }
  242 + }
  243 + }
  244 + .layout-item:last-child {
  245 + margin: 0;
  246 + }
  247 + }
  248 +}
  249 +
201 .detail-related-post { 250 .detail-related-post {
  251 + margin: 100px 0 80px 0;
202 h3 { 252 h3 {
203 - // font-weight: bold;  
204 - 253 + font-size: 16px;
  254 + font-weight: bold;
  255 + width: 4em;
  256 + border: 1px solid #000;
  257 + padding: .8em 7.3em;
  258 + margin: 0 auto;
  259 + }
  260 + hr {
  261 + margin: 32px 0 40px 0;
  262 + border: 0;
  263 + border-top: 1px solid #e3e3e3;
205 } 264 }
206 } 265 }
207 266
208 .detail-side { 267 .detail-side {
209 - width: 290px; 268 + width: $sideWidth;
210 float: left; 269 float: left;
211 margin: 0 0 0 50px; 270 margin: 0 0 0 50px;
212 padding-bottom: 62px; 271 padding-bottom: 62px;
213 } 272 }
214 273
215 .detail-ad { 274 .detail-ad {
216 - margin-bottom: 28px; 275 + width: $sideWidth;
217 li { 276 li {
218 - margin-bottom: 15px;  
219 - img {  
220 - display: block;  
221 - }  
222 - }  
223 -}  
224 -  
225 -.app-download {  
226 - width: 278px;  
227 - height: 158px;  
228 - border: 1px solid #000;  
229 - .qr {  
230 - float: left;  
231 - margin: 22px 0 0 18px;  
232 - width: 114px;  
233 - height: 114px; 277 + margin-bottom: 30px;
234 img { 278 img {
235 - display: block;  
236 width: 100%; 279 width: 100%;
237 - }  
238 - }  
239 - .download-text {  
240 - float: left;  
241 - margin: 20px 0 38px 12px;  
242 - width: 108px;  
243 - img {  
244 display: block; 280 display: block;
245 - width: 50px;  
246 - }  
247 - p {  
248 - font-size: 12px;  
249 - color: #666;  
250 - }  
251 - .yoho-name {  
252 - font-size: 18px;  
253 - color: #000;  
254 - font-weight: bold; 281 + max-width: 100%;
255 } 282 }
256 } 283 }
257 } 284 }
@@ -265,33 +292,42 @@ $pageContentWidth: 1080px; @@ -265,33 +292,42 @@ $pageContentWidth: 1080px;
265 } 292 }
266 293
267 .side-related-tab { 294 .side-related-tab {
268 - border-bottom: 1px solid #000; 295 + margin: 50px 0 20px 0;
  296 + border: 1px solid #000;
269 a { 297 a {
270 float: left; 298 float: left;
271 width: 140px; 299 width: 140px;
272 text-align: center; 300 text-align: center;
273 - font-size: 18px;  
274 - line-height: 38px; 301 + font-size: 14px;
  302 + opacity: 0.72;
  303 + height: 48px;
  304 + line-height: 48px;
275 color: #000; 305 color: #000;
276 font-weight: bold; 306 font-weight: bold;
277 } 307 }
  308 + span {
  309 + float: left;
  310 + }
278 a.current { 311 a.current {
279 - border-bottom: 2px solid #000; 312 + opacity: 1;
280 } 313 }
281 } 314 }
282 315
283 .side-related-list { 316 .side-related-list {
  317 + width: $sideWidth;
284 display: none; 318 display: none;
285 &.current { 319 &.current {
286 display: block; 320 display: block;
287 } 321 }
288 .layout-item { 322 .layout-item {
  323 + width: $sideWidth;
  324 + height: 95px;
289 float: none; 325 float: none;
290 - margin: 20px 0 0 0; 326 + margin: 0;
291 .image-box { 327 .image-box {
292 float: left; 328 float: left;
293 - width: 82px;  
294 - height: 53px; 329 + width: 92px;
  330 + height: 54px;
295 overflow: hidden; 331 overflow: hidden;
296 img { 332 img {
297 display: block; 333 display: block;
@@ -306,8 +342,8 @@ $pageContentWidth: 1080px; @@ -306,8 +342,8 @@ $pageContentWidth: 1080px;
306 } 342 }
307 .content { 343 .content {
308 float: left; 344 float: left;
309 - margin-left: 16px;  
310 - width: 182px; 345 + margin: 0 0 0 16px;
  346 + width: $sideWidth - 92px - 16px;
311 h2 { 347 h2 {
312 margin: 0; 348 margin: 0;
313 a { 349 a {
@@ -317,5 +353,12 @@ $pageContentWidth: 1080px; @@ -317,5 +353,12 @@ $pageContentWidth: 1080px;
317 } 353 }
318 } 354 }
319 } 355 }
  356 + hr {
  357 + margin: 20px 0 0;
  358 + float: left;
  359 + width: $sideWidth;
  360 + border: 0;
  361 + border-top: 1px solid #e3e3e3;
  362 + }
320 } 363 }
321 } 364 }