ps fun

+/**
+ * 资讯相关API
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/10
+ */
+
+var $ = require('yoho.zepto'),
+    ellipsis = require('mlellipsis'),
+    lazyLoad = require('yoho.lazyload');
+
+var api = require('../api');
+
+ellipsis.init();
+
+/**
+ * 初始化资讯列表事件绑定
+ * @params $container 逛资讯列表容器
+ */
+function initInfosEvt($container) {
+    $container.delegate('.like-btn', 'touchstart', function(e) {
+        var $likeBtn = $(e.currentTarget),
+            $info = $likeBtn.closest('.guang-info');
+
+        $.ajax({
+            type: 'GET',
+            url: '/guang/info/prise', //TODO:cancelPrise
+            data: {
+                id: $info.data('id')
+            }
+        }).then(function(data) {
+            var code = data.code;
+
+            if (code === 200) {
+                $likeBtn.next('.like-count').text(data.data);
+            } else if (code === 400) {
+                api.alert('未登录');
+            }
+        }, function() {
+            api.alert('网络断开连接了~');
+        });
+    });
+}
+
+/**
+ * 设置指定资讯项的Lazyload和文字截取
+ * @params $infos 资讯项
+ */
+function setLazyLoadAndMellipsis($infos) {
+    lazyLoad($infos.find('img.lazy'));
+
+    $infos.each(function() {
+        var $this = $(this);
+
+        $this.find('.info-title')[0].mlellipsis(2);
+        $this.find('.info-text')[0].mlellipsis(2);
+    });
+}
+
+exports.initInfosEvt = initInfosEvt;
+exports.setLazyLoadAndMellipsis = setLazyLoadAndMellipsis;

+/**
+ * PLUS+STAR
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/10
+ */
+
+var $ = require('yoho.zepto'),
+    ellipsis = require('mlellipsis'),
+    lazyLoad = require('yoho.lazyload');
+
+var $intro = $('#intro'),
+    $imt = $('#intro-more-txt'),
+    $infosContainer = $('#related-infos-container');
+
+var infoApi = require('./info');
+
+var mIntro, aIntro;
+
+ellipsis.init();
+
+//Init LazyLoad
+lazyLoad($('img.lazy'));
+
+//文字介绍文字截取
+$intro[0].mlellipsis(3);
+
+//获取截取文字和完整文字
+setTimeout(function() {
+    mIntro = $intro.text();
+    aIntro = $intro.attr('title');
+});
+
+infoApi.initInfosEvt($infosContainer);
+infoApi.setLazyLoadAndMellipsis($infosContainer.find('.guang-info'));
+
+//文字介绍收起与展开
+$('#more-intro').bind('touchstart', function() {
+    var $this = $(this);
+
+    $this.toggleClass('spread');
+
+    if ($this.hasClass('spread')) {
+
+        //显示
+        $intro.text(aIntro);
+        $imt.text('收起');
+    } else {
+
+        //隐藏
+        $intro.text(mIntro);
+        $imt.text('more');
+    }
+});
+
+//品牌收藏
+$('#brand-like').bind('touchstart', function(e) {
+    e.preventDefault();
+});

@@ -17,7 +17,9 @@
     "main": "index.js",
     "main": "index.js",
     "dependencies": {
     "dependencies": {
       "yoho.zepto": "1.1.60",
       "yoho.zepto": "1.1.60",
-      "yoho.jquery": "1.8.3"
+      "yoho.jquery": "1.8.3",
+      "yoho.lazyload": "1.1.0",
+      "mlellipsis": "0.0.6"
     },
     },
     "devDependencies": {
     "devDependencies": {
       "expect.js": "0.3.1"
       "expect.js": "0.3.1"

-@import "tvls", "good", "info", "plus-star";
+@import "tvls", "info", "plus-star";

 .ps-detail-page {
 .ps-detail-page {
+    background-color: #f0f0f0;
+
     .ps-block {
     .ps-block {
         margin-bottom: 30rem / $pxConvertRem;
         margin-bottom: 30rem / $pxConvertRem;
         border-bottom: 1px solid #e0e0e0;
         border-bottom: 1px solid #e0e0e0;
@@ -63,38 +65,42 @@
                 color: #f00;
                 color: #f00;
             }
             }
         }
         }
+    }
+
+    .intro {
+        margin-top: 49rem / $pxConvertRem;
+        font-size: 24rem / $pxConvertRem;
+        color: #444;
+        line-height: 150%;
+    }
 
 
-        .intro {
-            margin-top: 49rem / $pxConvertRem;
-            font-size: 24rem / $pxConvertRem;
-            color: #444;
-            line-height: 150%;
+    .more-intro {
+        padding: 30rem / $pxConvertRem 0;
+        font-size: 28rem / $pxConvertRem;
+        line-height: 104%;
+        color: #bbb;
+        float: right;
+
+        .icon {
+            -webkit-transition: -webkit-transform .1s ease-in;
+            -moz-transition: -moz-transform .1s ease-in;
+            -ms-transition: -ms-transform .1s ease-in;
+            -o-transition: -o-transform .1s ease-in;
+            transition: transform .1s ease-in;
         }
         }
 
 
-        .more-intro {
-            padding: 30rem / $pxConvertRem 0;
-            font-size: 28rem / $pxConvertRem;
-            line-height: 104%;
-            color: #bbb;
-            text-align: right;
+        &.spread .icon {
+            -webkit-transform: scale(0.83) rotate(-180deg);
+            -moz-transform: scale(0.83) rotate(-180deg);
+            -ms-transform: scale(0.83) rotate(-180deg);
+            -o-transform: scale(0.83) rotate(-180deg);
+            transform: scale(0.83) rotate(-180deg);
         }
         }
     }
     }
 
 
     .new-arrival {
     .new-arrival {
         padding-left: 0 30rem / $pxConvertRem;
         padding-left: 0 30rem / $pxConvertRem;
 
 
-        .new-arrival-header {
-            padding-left: 222rem / $pxConvertRem;
-            padding-top: 33rem / $pxConvertRem;
-
-            .header-text {
-                font-size: 28rem / $pxConvertRem;
-                color: #000;
-                line-height: 122%;
-                font-weight: bold;
-            }
-        }
-
         .new-arrival-content {
         .new-arrival-content {
             padding: 20rem / $pxConvertRem 14rem / $pxConvertRem;
             padding: 20rem / $pxConvertRem 14rem / $pxConvertRem;
         }
         }
@@ -127,6 +133,18 @@
 
 
     }
     }
 
 
+    .new-arrival-header {
+        padding-left: 222rem / $pxConvertRem;
+        padding-top: 33rem / $pxConvertRem;
+
+        .header-text {
+            font-size: 28rem / $pxConvertRem;
+            color: #000;
+            line-height: 122%;
+            font-weight: bold;
+        }
+    }
+
 
 
     .related-info-title {
     .related-info-title {
         margin: 0 29rem / $pxConvertRem;
         margin: 0 29rem / $pxConvertRem;

@@ -47,4 +47,23 @@ a {
     color: #000;
     color: #000;
 }
 }
 
 
-@import "layout/header", "layout/footer", "passport/index", "guang/index";
+@font-face {
+    font-family: "iconfont";
+    src: font-url('iconfont.eot'); /* IE9*/
+    src: font-url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         font-url('iconfont.woff') format('woff'), /* chrome、firefox */
+         font-url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+         font-url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@import "layout/header", "layout/footer", "good", "passport/index", "guang/index";

@@ -4,7 +4,7 @@
         <div class="header brand-info ps-block" data-id="{{id}}">
         <div class="header brand-info ps-block" data-id="{{id}}">
             <img class="banner lazy" data-original="{{banner}}">
             <img class="banner lazy" data-original="{{banner}}">
             <img class="logo lazy" data-original="{{logo}}">
             <img class="logo lazy" data-original="{{logo}}">
-            <div class="header-content">
+            <div class="header-content clearfix">
                 <p class="name-islike-container">
                 <p class="name-islike-container">
                     <span class="name">{{name}}</span>
                     <span class="name">{{name}}</span>
                     <a id="brand-like" class="brand-islike iconfont {{# isLike}}like{{/ isLike}}" href="{{likeUrl}}">
                     <a id="brand-like" class="brand-islike iconfont {{# isLike}}like{{/ isLike}}" href="{{likeUrl}}">
@@ -14,11 +14,10 @@
                 <p id="intro" class="intro">
                 <p id="intro" class="intro">
                     {{intro}}
                     {{intro}}
                 </p>
                 </p>
-                <div id="more-intro" class="more-intro">
-                    <span class="more-intro-text more">more</span>
-                    <span class="more-intro-icon more iconfont down">&#xe609;</span>
-                    <span class="more-intro-icon more iconfont up hide">&#xe608;</span>
-                </div>
+                <span id="more-intro" class="more-intro">
+                    <span id="intro-more-txt">more</span>
+                    <i class="icon iconfont">&#xe609;</i>
+                </span>
             </div>
             </div>
         </div>
         </div>
         {{# newArrival}}
         {{# newArrival}}