diff --git a/demo/yohood3.0/detail.html b/demo/yohood3.0/detail.html
index 0bc7621..6bf24b2 100644
--- a/demo/yohood3.0/detail.html
+++ b/demo/yohood3.0/detail.html
@@ -148,8 +148,10 @@
<!-- yohood 导航 end -->
</div>
<!-- 页眉 end -->
+ <!-- 页面主体 start -->
<div class="bd">
<div class="detail-wrap clearfix">
+ <!-- 资讯详情标题 start -->
<div class="detail-title">
<h2>MACxYO'HOOD 独家揭秘大秀后台</h2>
<div class="item-info">
@@ -157,6 +159,8 @@
<span class="item-time">November 11, 2016</span>
</div>
</div>
+ <!-- 资讯详情标题 end -->
+ <!-- 资讯内容 start -->
<div class="detail-body">
<div class="detail-slide">
<div class="detail-slide-body">
@@ -181,14 +185,14 @@
</div>
<div class="detail-slide-ctrl">
<ul class="detail-slide-ctrl-tabs clearfix">
- <li class="box"><a href="javascript:;"><span class="border"></span><span class="arrow"></span><img class="lazy" data-original="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg" alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg" style="display: block;"></a></li>
- <li class="box"><a href="javascript:;"><span class="border"></span><span class="arrow"></span><img class="lazy" data-original="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg" alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg" style="display: block;"></a></li>
- <li class="box"><a href="javascript:;"><span class="border"></span><span class="arrow"></span><img class="lazy" data-original="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg" alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg" style="display: block;"></a></li>
- <li class="box"><a href="javascript:;"><span class="border"></span><span class="arrow"></span><img class="lazy" data-original="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/02a620fa3b46be018a1626ef52c9d13944.jpg" alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/02a620fa3b46be018a1626ef52c9d13944.jpg" style="display: block;"></a></li>
- <li class="box"><a href="javascript:;"><span class="border"></span><span class="arrow"></span><img class="lazy" data-original="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg" alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg" style="display: block;"></a></li>
- <li class="box"><a href="javascript:;"><span class="border"></span><span class="arrow"></span><img class="lazy" data-original="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg" alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg" style="display: block;"></a></li>
- <li class="box"><a href="javascript:;"><span class="border"></span><span class="arrow"></span><img class="lazy" data-original="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg" alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg" style="display: block;"></a></li>
- <li class="box"><a href="javascript:;"><span class="border"></span><span class="arrow"></span><img class="lazy" data-original="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg" alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg" style="display: block;"></a></li>
+ <li class="box"><a href="javascript:;"><span class="cover"></span><img class="lazy" data-original="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg" alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg"></a></li>
+ <li class="box"><a href="javascript:;"><span class="cover"></span><img class="lazy" data-original="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg" alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg"></a></li>
+ <li class="box"><a href="javascript:;"><span class="cover"></span><img class="lazy" data-original="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg" alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg"></a></li>
+ <li class="box"><a href="javascript:;"><span class="cover"></span><img class="lazy" data-original="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/02a620fa3b46be018a1626ef52c9d13944.jpg" alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/02a620fa3b46be018a1626ef52c9d13944.jpg"></a></li>
+ <li class="box"><a href="javascript:;"><span class="cover"></span><img class="lazy" data-original="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg" alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/014aba20f78c3417e86b1b83b894a13f53.jpg"></a></li>
+ <li class="box"><a href="javascript:;"><span class="cover"></span><img class="lazy" data-original="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg" alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg"></a></li>
+ <li class="box"><a href="javascript:;"><span class="cover"></span><img class="lazy" data-original="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg" alt="" src="http://cmsimg02.qiniudn.com/contentimg/2015/05/04/10/020bac31a0b3486691e0db157f4575f165.jpg"></a></li>
+ <li class="box"><a href="javascript:;"><span class="cover"></span><img class="lazy" data-original="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg" alt="" src="http://cmsimg01.qiniudn.com/contentimg/2015/05/04/10/01defac08591925a8c53ca384da9bfc2c6.jpg"></a></li>
</ul>
<a href="javascript:;" class="detail-slide-ctrl-prev iconfont"></a>
<a href="javascript:;" class="detail-slide-ctrl-next iconfont"></a>
@@ -196,11 +200,6 @@
</div>
<div class="text-body">
<p>不知大家还是否记得前不久YOHO！BOYS为各位推送的P.A.M春夏系列宣传画册，近日，此番包括长短袖图案 T-Shirt、连帽卫衣、Duplo 长裤与带有 3D 口袋的短裤等多款轻松塑造夏日型格的实穿单品已正式发布啦！延续了一贯擅于将街头元素与不按常理出牌迷幻美学结合的风格，P.A.M今季运用创新的面料结合巧思的细节与醒目夸张的印花诠释了「标签暨艺术」的设计理念，与此同时也多多少少展现了美少男们骨子里的“小骚气”。该系列已可经由someday-store购得。Hey，boys！准备好高调一夏了吗？</p>
- <!--<p>不知大家还是否记得前不久YOHO！BOYS为各位推送的P.A.M春夏系列宣传画册，近日，此番包括长短袖图案 T-Shirt、连帽卫衣、Duplo 长裤与带有 3D 口袋的短裤等多款轻松塑造夏日型格的实穿单品已正式发布啦！延续了一贯擅于将街头元素与不按常理出牌迷幻美学结合的风格，P.A.M今季运用创新的面料结合巧思的细节与醒目夸张的印花诠释了「标签暨艺术」的设计理念，与此同时也多多少少展现了美少男们骨子里的“小骚气”。该系列已可经由someday-store购得。Hey，boys！准备好高调一夏了吗？</p>
- <p>不知大家还是否记得前不久YOHO！BOYS为各位推送的P.A.M春夏系列宣传画册，近日，此番包括长短袖图案 T-Shirt、连帽卫衣、Duplo 长裤与带有 3D 口袋的短裤等多款轻松塑造夏日型格的实穿单品已正式发布啦！延续了一贯擅于将街头元素与不按常理出牌迷幻美学结合的风格，P.A.M今季运用创新的面料结合巧思的细节与醒目夸张的印花诠释了「标签暨艺术」的设计理念，与此同时也多多少少展现了美少男们骨子里的“小骚气”。该系列已可经由someday-store购得。Hey，boys！准备好高调一夏了吗？</p>
- <p>不知大家还是否记得前不久YOHO！BOYS为各位推送的P.A.M春夏系列宣传画册，近日，此番包括长短袖图案 T-Shirt、连帽卫衣、Duplo 长裤与带有 3D 口袋的短裤等多款轻松塑造夏日型格的实穿单品已正式发布啦！延续了一贯擅于将街头元素与不按常理出牌迷幻美学结合的风格，P.A.M今季运用创新的面料结合巧思的细节与醒目夸张的印花诠释了「标签暨艺术」的设计理念，与此同时也多多少少展现了美少男们骨子里的“小骚气”。该系列已可经由someday-store购得。Hey，boys！准备好高调一夏了吗？</p>
- <p>不知大家还是否记得前不久YOHO！BOYS为各位推送的P.A.M春夏系列宣传画册，近日，此番包括长短袖图案 T-Shirt、连帽卫衣、Duplo 长裤与带有 3D 口袋的短裤等多款轻松塑造夏日型格的实穿单品已正式发布啦！延续了一贯擅于将街头元素与不按常理出牌迷幻美学结合的风格，P.A.M今季运用创新的面料结合巧思的细节与醒目夸张的印花诠释了「标签暨艺术」的设计理念，与此同时也多多少少展现了美少男们骨子里的“小骚气”。该系列已可经由someday-store购得。Hey，boys！准备好高调一夏了吗？</p>
- <p>不知大家还是否记得前不久YOHO！BOYS为各位推送的P.A.M春夏系列宣传画册，近日，此番包括长短袖图案 T-Shirt、连帽卫衣、Duplo 长裤与带有 3D 口袋的短裤等多款轻松塑造夏日型格的实穿单品已正式发布啦！延续了一贯擅于将街头元素与不按常理出牌迷幻美学结合的风格，P.A.M今季运用创新的面料结合巧思的细节与醒目夸张的印花诠释了「标签暨艺术」的设计理念，与此同时也多多少少展现了美少男们骨子里的“小骚气”。该系列已可经由someday-store购得。Hey，boys！准备好高调一夏了吗？</p>-->
</div>
<div class="related-post detail-related-post">
<h3>相关推荐</h3>
@@ -247,14 +246,16 @@
</div>
</div>
</div>
+ <!-- 资讯内容 end -->
+ <!-- 资讯侧边栏 start -->
<div class="detail-side">
<div class="detail-ad">
<ul>
<li>
- <a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" alt=""></a>
+ <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>
</li>
<li>
- <a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" alt=""></a>
+ <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>
</li>
</ul>
</div>
@@ -359,11 +360,16 @@
</div>
</div>
</div>
+ <!-- 资讯侧边栏 end -->
</div>
</div>
+ <!-- 页面主体 start -->
<div class="ft">
-
+ <p class="copyright">
+ CopyRight © 2007-2016 南京新与力文化传播有限公司苏ICP备09011225号-11
+ </p>
</div>
+ <!-- 分享按钮 start -->
<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">
<h4>share</h4>
<ul>
@@ -397,11 +403,14 @@
</li>
</ul>
</div>
+ <!-- 分享按钮 end -->
+ <!-- 返回顶部按钮 start -->
<div class="return-top">
<a href="javascript:void(0);" id="toTop" class="ifont" style="display: inline;">
- <span class="iconfont"></span> TOP
+ <span class="iconfont"></span>
</a>
</div>
+ <!-- 返回顶部按钮 end -->
</body>
<script type="text/javascript" src="../../res/js/lib/seajs.js"></script>
<script type="text/javascript">
diff --git a/demo/yohood3.0/index.html b/demo/yohood3.0/index.html
index 430d2d1..6f7bd36 100644
--- a/demo/yohood3.0/index.html
+++ b/demo/yohood3.0/index.html
@@ -152,7 +152,6 @@
<div class="bd">
<!-- 页面主体头部轮播广告栏 start -->
<div class="slide-main clearfix">
- <div class="slide-bar-left"></div>
<div class="slide-box-warp">
<div class="slide-box">
<div class="slide-wrap clearfix">
@@ -185,7 +184,6 @@
<a class="slide-next iconfont" href="javascript:void(0);"></a>
</div>
</div>
- <div class="slide-bar-right"></div>
</div>
<!-- 页面主体头部轮播广告栏 end -->
<!-- 页面资讯内容 start -->
@@ -519,16 +517,20 @@
</div>
</div>
<!-- 资讯内容右侧固定banner end -->
+ <!-- 页脚 start -->
<div class="ft">
<p class="copyright">
CopyRight © 2007-2016 南京新与力文化传播有限公司苏ICP备09011225号-11
</p>
</div>
+ <!-- 页脚 end -->
+ <!-- 返回顶部按钮 start -->
<div class="return-top">
<a href="javascript:void(0);" id="toTop" class="ifont" style="display: inline;">
<span class="iconfont"></span>
</a>
</div>
+ <!-- 返回顶部按钮 end -->
</body>
<script type="text/javascript" src="../../res/js/lib/seajs.js"></script>
<script type="text/javascript">
diff --git a/res/js/channel.js b/res/js/channel.js
index 17ff3c1..d1bcd29 100644
--- a/res/js/channel.js
+++ b/res/js/channel.js
@@ -83,20 +83,39 @@ define('channel', function(require, exports) {
});
}
- //大banner滑动
- swipe.init({
- slideBox: '.slide-box',
- prev: '.slide-prev',
- next: '.slide-next',
- auto: 3000,
- continuous: true,
- callback: function(index) {
- if (index >= $('.dib a').size()) {
- index = index - $('.dib a').size();
+
+ /**
+ * 首页顶部 banner 滑动条
+ */
+ ({
+ bannerSwiper: new swiper('.slide-box', {
+ autoplay: 4000,
+ loop: true,
+ wrapperClass: 'slide-wrap',
+ slideClass: 'box',
+ slidesPerView: 'auto',
+ callback: function(index) {
+ if (index >= $('.dib a').size()) {
+ index = index - $('.dib a').size();
+ }
+ $('.dib a').removeClass('on').eq(index).addClass('on');
}
- $('.dib a').removeClass('on').eq(index).addClass('on');
+ }),
+
+ init: function() {
+ var swiper = this.bannerSwiper;
+
+ $('.slide-box-warp .slide-prev').on('click', function(e) {
+ e.preventDefault();
+ swiper.swipePrev();
+ });
+ $('.slide-box-warp .slide-next').on('click', function(e) {
+ e.preventDefault();
+ swiper.swipeNext();
+ });
}
- });
+ }).init();
+
//限量商品滑动
limitedPrev = $('.limited-slide-prev');
@@ -229,7 +248,7 @@ define('channel', function(require, exports) {
changeCooperationClass;
/**
- * 将固定banner位插入资讯右侧
+ * 将 资讯页面的 固定 banner 位插入资讯右侧
*/
({
init: function() {
@@ -263,6 +282,11 @@ define('channel', function(require, exports) {
* 页面所有标题为两行的资讯、调整内容margin 使得所有资讯内容对齐
*/
({
+ /**
+ * 获取元素计算后CSS样式
+ * @param {HTMLElement} element 要获取计算后CSS样式的元素
+ * @return {CSSStyleDeclaration} 计算后的CSS样式
+ */
getComputedStyle: function(element) {
if (typeof window.getComputedStyle === "function") {
return window.getComputedStyle(element, null);
@@ -270,6 +294,7 @@ define('channel', function(require, exports) {
return element.currentStyle;
}
},
+
init: function() {
var content = $("#content"),
volupia = content.find(".volupia"),
@@ -294,56 +319,60 @@ define('channel', function(require, exports) {
}
- cooperateSwiper = new swiper('.cooperation-slide-box', {
- wrapperClass: 'slide-wrap',
- loop: true,
- slideClass: 'box',
- slidesPerView: 'auto',
- loopedSlides: 4
- });
-
-
- function nextChagneSileSize(swiper) {
- var activeIndex = swiper.activeIndex,
- slides = swiper.slides,
- activeSlide = slides[activeIndex],
- nextSlide = slides[activeIndex + 1],
- nextNextSlide = slides[activeIndex + 2];
+ /**
+ * 首页底部合作商滑动条
+ */
+ ({
+ cooperateSwiper: new swiper('.cooperation-slide-box', {
+ wrapperClass: 'slide-wrap',
+ loop: true,
+ slideClass: 'box',
+ slidesPerView: 'auto',
+ loopedSlides: 4
+ }),
+
+ nextChagneSileSize: function(swiper) {
+ var activeIndex = swiper.activeIndex,
+ slides = swiper.slides,
+ activeSlide = slides[activeIndex],
+ nextSlide = slides[activeIndex + 1],
+ nextNextSlide = slides[activeIndex + 2];
+
+ if (/big\-size/.test(nextNextSlide.className)) {
+ nextSlide.style.width = "1180px";
+ }
- if (/big\-size/.test(nextNextSlide.className)) {
- nextSlide.style.width = "1180px";
- }
+ activeSlide.style = null;
+ },
- activeSlide.style = null;
- }
+ prevChangeSlideSize: function(swiper) {
+ var activeIndex = swiper.activeIndex,
+ slides = swiper.slides,
+ activeSlide = slides[activeIndex],
+ prevSlide = slides[activeIndex - 1];
- function prevChangeSlideSize(swiper) {
- var activeIndex = swiper.activeIndex,
- slides = swiper.slides,
- activeSlide = slides[activeIndex],
- prevSlide = slides[activeIndex - 1];
+ if (/big\-size/.test(activeSlide.className)) {
+ prevSlide.style.width = "1180px";
+ }
+ },
- if (/big\-size/.test(activeSlide.className)) {
- prevSlide.style.width = "1180px";
+ init: function() {
+ var swiper = this.cooperateSwiper,
+ prevChangeSlideSize = this.prevChangeSlideSize,
+ nextChagneSileSize = this.nextChagneSileSize;
+
+ $('.cooperation-slide-prev').on('click', function(e) {
+ e.preventDefault();
+ prevChangeSlideSize(swiper);
+ swiper.swipePrev();
+ });
+ $('.cooperation-slide-next').on('click', function(e) {
+ e.preventDefault();
+ nextChagneSileSize(swiper);
+ swiper.swipeNext();
+ });
}
-
-
- }
-
- $('.cooperation-slide-prev').on('click', function(e) {
- e.preventDefault();
-
- prevChangeSlideSize(cooperateSwiper);
-
- cooperateSwiper.swipePrev();
- });
- $('.cooperation-slide-next').on('click', function(e) {
- e.preventDefault();
-
- nextChagneSileSize(cooperateSwiper);
-
- cooperateSwiper.swipeNext();
- });
+ }).init();
$(".goods_prev, .goods_next").bind("click", function() {
currentGenderPos = parseInt($(".show-goods").attr("current_gender_pos"));
@@ -416,6 +445,15 @@ define('channel', function(require, exports) {
slideElement: 'li'
});
+ // $('.detail-slide-ctrl-prev').bind('click', function(e) {
+ // e.preventDefault();
+ // detailSwiper.swipePrev();
+ // });
+ // $('.detail-slide-ctrl-next').bind('click', function(e) {
+ // e.preventDefault();
+ // detailSwiper.swipeNext();
+ // });
+
$('.slide-big-ctrl-prev').bind('click', function(e) {
e.preventDefault();
detailSwiper.swipePrev();
@@ -465,59 +503,59 @@ define('channel', function(require, exports) {
});
//右侧相关文章定位
- relatedPost = $('.side-related-post');
- relatedTop = relatedPost.offset().top;
- relatedH = relatedPost.outerHeight();
- maxH = $('.limited-goods').offset().top;
- $(window).on('scroll', function() {
- if ($('.detail-body').outerHeight() > $('.detail-side').outerHeight() && navigator.userAgent.indexOf('iPad') === -1) {
- relatedH = relatedPost.outerHeight();
- maxH = $('.limited-goods').offset().top;
- if ($(this).scrollTop() >= relatedTop) {
- relatedPost.addClass('fix');
- if (relatedPost.offset().top + relatedH >= maxH && relatedPost.hasClass('fix')) {
- relatedPost.css({
- 'position': 'absolute',
- 'top': maxH - relatedH - 10
- })
- }
- if ($(this).scrollTop() <= maxH - relatedH) {
- relatedPost.css({
- 'position': 'fixed',
- 'top': 0
- });
- }
- } else {
- relatedPost.removeClass('fix').removeAttr('style');
- }
- }
- });
+ // relatedPost = $('.side-related-post');
+ // relatedTop = relatedPost.offset().top;
+ // relatedH = relatedPost.outerHeight();
+ // maxH = $('.limited-goods').offset().top;
+ // $(window).on('scroll', function() {
+ // if ($('.detail-body').outerHeight() > $('.detail-side').outerHeight() && navigator.userAgent.indexOf('iPad') === -1) {
+ // relatedH = relatedPost.outerHeight();
+ // maxH = $('.limited-goods').offset().top;
+ // if ($(this).scrollTop() >= relatedTop) {
+ // relatedPost.addClass('fix');
+ // if (relatedPost.offset().top + relatedH >= maxH && relatedPost.hasClass('fix')) {
+ // relatedPost.css({
+ // 'position': 'absolute',
+ // 'top': maxH - relatedH - 10
+ // })
+ // }
+ // if ($(this).scrollTop() <= maxH - relatedH) {
+ // relatedPost.css({
+ // 'position': 'fixed',
+ // 'top': 0
+ // });
+ // }
+ // } else {
+ // relatedPost.removeClass('fix').removeAttr('style');
+ // }
+ // }
+ // });
//分享按钮位置
- var shareOffsetTop = $(".share").offset().top;
- $(window).scroll(function() {
- scrollTop = $(window).scrollTop();
- maxH = $('.limited-goods').offset().top;
- if (shareOffsetTop - scrollTop <= 0) {
- $(".share").css({
- "position": "fixed",
- "top": 10
- });
- } else {
- $(".share").css({
- "position": "absolute",
- "top": shareOffsetTop
- });
- }
- console.log($(".share").offset().top + $('.share').outerHeight());
- console.log($('.limited-goods').offset().top);
- if ($(".share").offset().top + $('.share').outerHeight() > maxH) {;
- $(".share").css({
- 'position': 'absolute',
- 'top': maxH - $('.share').outerHeight() - 10
- });
- }
- });
+ // var shareOffsetTop = $(".share").offset().top;
+ // $(window).scroll(function() {
+ // scrollTop = $(window).scrollTop();
+ // maxH = $('.limited-goods').offset().top;
+ // if (shareOffsetTop - scrollTop <= 0) {
+ // $(".share").css({
+ // "position": "fixed",
+ // "top": 10
+ // });
+ // } else {
+ // $(".share").css({
+ // "position": "absolute",
+ // "top": shareOffsetTop
+ // });
+ // }
+ // console.log($(".share").offset().top + $('.share').outerHeight());
+ // console.log($('.limited-goods').offset().top);
+ // if ($(".share").offset().top + $('.share').outerHeight() > maxH) {;
+ // $(".share").css({
+ // 'position': 'absolute',
+ // 'top': maxH - $('.share').outerHeight() - 10
+ // });
+ // }
+ // });
};
exports.siteActivity = function() {
diff --git a/res/sass/style/_common.scss b/res/sass/style/_common.scss
index 4a413be..536a495 100644
--- a/res/sass/style/_common.scss
+++ b/res/sass/style/_common.scss
@@ -209,46 +209,30 @@ $pageMainWidth: 1180px;
height: 500px;
overflow: hidden;
min-width: $pageMainWidth;
- .slide-box-warp,
- .slide-bar-left,
- .slide-bar-right {
- display: inline-block;
- float: left;
- }
.slide-box-warp {
width: $pageMainWidth;
- height: 100%;
+ height: 500px;
margin: 0 auto;
position: relative;
}
- .slide-bar-left {
- width: calc((100% - #{$pageMainWidth}) / 2);
- height: 100%;
- background: url("../images/yohood/slide-bar-left.png") no-repeat center center;
- background-size: cover;
- }
- .slide-bar-right {
- width: calc((100% - #{$pageMainWidth}) / 2);
- height: 100%;
- background: url("../images/yohood/slide-bar-right.png") no-repeat center center;
- background-size: cover;
- }
}
.slide-box {
position: relative;
margin: 0;
- overflow: hidden;
+ // overflow: hidden;
.slide-wrap {
- overflow: hidden;
+ // overflow: hidden;
position: relative;
.box {
float: left;
- width: 100%;
+ height: 500px;
position: relative;
img {
display: block;
width: 100%;
+ max-width: 100%;
+ vertical-align: middle;
}
}
}
diff --git a/res/sass/style/_detail.scss b/res/sass/style/_detail.scss
index 50b2ba0..01a7f9f 100644
--- a/res/sass/style/_detail.scss
+++ b/res/sass/style/_detail.scss
@@ -1,5 +1,6 @@
+$pageContentWidth: 1080px;
.detail-wrap {
- width: 1180px;
+ width: $pageContentWidth;
margin: 0 auto;
}
@@ -48,8 +49,9 @@
}
.detail-body {
+ $detailBodyWidth: 740px;
float: left;
- width: 644px;
+ width: $detailBodyWidth;
img {
max-width: 100%;
}
@@ -60,19 +62,21 @@
}
.detail-slide-body {
+ $slideBodyHeight: 425px;
+ $detailBodyWidth: 740px;
position: relative;
width: 100%;
- height: 415px;
+ height: $slideBodyHeight;
overflow: hidden;
.detail-slide-piclist {
- height: 415px;
+ height: $slideBodyHeight;
overflow: hidden;
position: relative;
.box {
float: left;
- width: 644px;
- height: 415px;
- line-height: 415px;
+ width: $detailBodyWidth;
+ height: $slideBodyHeight;
+ line-height: $slideBodyHeight;
position: relative;
background: #000;
text-align: center;
@@ -124,9 +128,10 @@
}
.detail-slide-ctrl {
+ $slideCtrlHeight: 86px;
padding: 15px 0 0 0;
width: 100%;
- height: 65px;
+ height: $slideCtrlHeight;
overflow: hidden;
position: relative;
.detail-slide-ctrl-prev,
@@ -135,14 +140,11 @@
position: absolute;
top: 15px;
width: 30px;
- height: 65px;
- line-height: 65px;
- background: rgba(230, 230, 230, 0.9);
+ height: $slideCtrlHeight;
+ line-height: $slideCtrlHeight;
font-size: 18px;
text-align: center;
- color: #000;
- background: #fff\9;
- filter: alpha(opacity=90);
+ color: #fff;
}
.detail-slide-ctrl-prev {
left: 0;
@@ -153,48 +155,31 @@
}
.detail-slide-ctrl-tabs {
+ $slideCtrlHeight: 86px;
position: relative;
left: 0;
top: 0;
li {
position: relative;
float: left;
- padding: 0 0 0 9px;
img {
display: block;
- width: 100px;
- height: 65px;
+ width: 147px;
+ height: $slideCtrlHeight;
}
- }
- li:first-child {
- padding: 0;
- }
- li:first-child.current,
- li:first-child.swiper-slide-active {
- .border {
- left: 0px;
- }
- }
- li.current,
- li.swiper-slide-active {
- .border {
+ .cover {
position: absolute;
- left: 7px;
+ left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
- border: 2px solid #000;
+ background: rgba(0, 0, 0, 0.5);
}
- .arrow {
- position: absolute;
- top: -9px;
- left: 50%;
- margin: 0 0 0 -9px;
- width: 0;
- height: 0;
- border-left: 9px solid transparent;
- border-right: 9px solid transparent;
- border-bottom: 9px solid black;
+ }
+ li.current,
+ li.swiper-slide-active {
+ .cover {
+ background: rgba(0, 0, 0, 0);
}
}
}
@@ -215,13 +200,15 @@
.detail-related-post {
h3 {
- font-weight: bold;
+ // font-weight: bold;
+
}
}
.detail-side {
- width: 280px;
- float: right;
+ width: 290px;
+ float: left;
+ margin: 0 0 0 50px;
padding-bottom: 62px;
}