Merge branch 'feature/h5detail' of http://git.dev.yoho.cn/web/yohobuy-frontend into feature/h5detail

三角符号js修改
Conflicts:
	mobile/public/js/article-type-three.js
	mobile/public/sass/_article-type-three.scss
	mobile/views/partials/article-type-three.html

@@ -20,6 +20,26 @@ exports.init = function() {
             containerH,
             containerTop;
 
+        /**
+         * 计算小箭头位置函数
+         * @param index(类型为number,调用函数li的index)
+         */
+         arrowPosition = function (element,index) {
+            var clientWidth = document.documentElement.clientWidth,
+                container = element,
+                item = container.find('li'),
+                len = item.size(),
+                midNum = Math.ceil(len / 2),
+                documentFont = parseInt($("html").css("fontSize")),
+                itemMarginRight = parseInt(item.css('marginRight'))/ documentFont * 40,
+                itemWidth = item.width() / documentFont * 40,
+                surPlusValue = parseInt(container.css('padding-left'))/ documentFont * 40 - itemMarginRight,
+                backgroundLeft;
+
+                backgroundLeft = -(320 - (index - midNum) * (itemWidth + itemMarginRight) - surPlusValue)/40 + 'rem';
+                container.css({"backgroundPosition":backgroundLeft + " bottom"})
+        };
+
         //点击分类，显示分类下推荐商品列表
         thumbContainer.delegate('.thumb', 'click', function() {
             var curItem,
@@ -29,6 +49,7 @@ exports.init = function() {
             index = curItem.index();
             thumbContainer.find('.thumb').removeClass('focus')
             curItem.addClass('focus');
+            arrowPosition(thumbContainer,index + 1);
 
             prodList.find('.prod')
                 .addClass('hide')
@@ -66,15 +87,23 @@ exports.init = function() {
                 thumbContainer
                     .addClass('fixed-bottom')
                     .removeClass('static');
+                prodList.css({
+                    'margin-top': tContainerH
+                });
             } else if (sTop <= containerTop) {
                 thumbContainer
                     .addClass('static')
-                    .removeClass('fixed-bottom fixed-top');
+                    .removeClass('fixed-bottom fixed-top')
+                    .css('top' , '');
+                prodList.removeAttr('style')
             } else if (sTop <= containerTop + containerH - tContainerH) {
                 thumbContainer
                     .addClass('fixed-top')
                     .removeClass('static absolute')
-                    .removeAttr('style');
+                    .css('top' , '');
+                prodList.css({
+                    'margin-top': tContainerH
+                });
             } else if (sTop <= containerTop + containerH) {
                 thumbContainer
                     .addClass('absolute')
@@ -82,11 +111,15 @@ exports.init = function() {
                     .css({
                         top: containerTop + containerH - tContainerH
                     });
+                prodList.css({
+                    'margin-top': tContainerH
+                });
             } else if (sTop > containerTop + containerH) {
                 thumbContainer
                     .addClass('static')
                     .removeClass('absolute')
-                    .removeAttr('style');
+                    .css('top' , '');
+                prodList.removeAttr('style');
             }
         });
 
@@ -95,23 +128,5 @@ exports.init = function() {
             $(document).scroll();
         }
 
-        //计算小箭头位置
-        (function (doc, win) {
-                var docEl = doc.documentElement,
-                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
-                    arrowPosition = function () {
-                        var clientWidth = docEl.clientWidth;
-                        if (!clientWidth) {
-                            return;
-                        }
-                        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
-                    };
-
-                if (!doc.addEventListener) {
-                    return;
-                }
-                win.addEventListener(resizeEvt, arrowPosition, false);
-                doc.addEventListener('DOMContentLoaded', arrowPosition, false);
-            })(document, window);
     });
 };
\ No newline at end of file

@@ -2,21 +2,15 @@
 $pxConvertRem : 40;
 
 .article-type-three {
-    padding:0 0 0 15rem / $pxConvertRem;
     background: #fff;
 
-    /*container脱离文本流时占位用，指定高度为内部所有内容高度*/
-    .container-fixed-pos {
-        height: 195rem / $pxConvertRem;
-        margin-left: -15rem / $pxConvertRem;
-        
-    }
-
     .thumb-container {
         font-size: 0;
-        padding: 30rem / $pxConvertRem 0 0 30rem / $pxConvertRem; /*修改padding-bottom时请修正.container-fixed-pos高度*/
+        padding: 30rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
         z-index: 10;
-        background: url('../img/thumb-container-bg.png') no-repeat -72rem / $pxConvertRem bottom;
+        background-color: transparent;
+        background-image: url('../img/thumb-container-bg.png');
+        background-repeat: no-repeat;
         background-size: 200% 100%;
 
         &.fixed-top {
@@ -31,6 +25,7 @@ $pxConvertRem : 40;
             left: 0;
             right: 0;
             bottom: 0;
+            background: #fff;
 
             .thumb.focus .arrow {
                 display: none;
@@ -39,6 +34,8 @@ $pxConvertRem : 40;
 
         &.absolute {
             position: absolute;
+            left: 0;
+            right: 0;
         }
 
         &.static {
@@ -49,7 +46,7 @@ $pxConvertRem : 40;
             display: inline-block;
             position: relative;
             margin-right: 22rem / $pxConvertRem;
-            padding-bottom: 30rem / $pxConvertRem;  /*修改padding-bottom时请修正.container-fixed-pos高度*/
+            padding-bottom: 30rem / $pxConvertRem;  
 
             &:last-child {
                 margin-right: 0;
@@ -75,7 +72,7 @@ $pxConvertRem : 40;
             }
 
             .thumb-img {
-                height: 134rem / $pxConvertRem;  /*修改height时请修正.container-fixed-pos高度*/
+                height: 134rem / $pxConvertRem;
                 width: 96rem / $pxConvertRem;
                 border: 1px solid transparent;
             }
@@ -84,7 +81,7 @@ $pxConvertRem : 40;
     }
 
     .prod-list {
-        padding-top: 28rem / $pxConvertRem;
+        padding: 28rem / $pxConvertRem 0 0 15rem / $pxConvertRem;
     }
 
     .clothe-type {

 {{# collocation}}
     <div class="article-type-three">
-        <div class="container-fixed-pos">
-            <ul class="thumb-container clearfix">
-                {{# list}}
-                    <li class="thumb">
-                        <img class="thumb-img lazy" data-original="{{thumb}}">
-                        <span class="clothe-type {{type}}"></span>
-                    </li>
-                {{/ list}}
-            </ul>
-        </div>
+        <ul class="thumb-container clearfix">
+            {{# list}}
+                <li class="thumb">
+                    <img class="thumb-img lazy" data-original="{{thumb}}">
+                    <span class="clothe-type {{type}}"></span>
+                </li>
+            {{/ list}}
+        </ul>
         <div class="prod-list clearfix">
             {{# list}}
                 <div class="prod hide">