品牌店铺页面样式

@@ -7,15 +7,23 @@
 'use strict';
 const _ = require('lodash');
 const helpers = global.yoho.helpers;
+const mRoot = '../models';
+const brandModel = require(`${mRoot}/brand`);
 
 /**
- * 频道选择页
+ * 品牌，品类，店铺相关页面
  */
 const component = {
+
+    /* 品牌店铺页面 */
     brand: (req, res, next) => {
-        res.render('brand/index', {
-            module: 'brand',
-            page: 'index'
+        let params = req.query;
+        brandModel.getBrandData(params).then(result => {
+            res.render('brand/index', {
+                module: 'brand',
+                page: 'index',
+                result: result
+            });
         });
     }
 };

+/**
+ * Created by PhpStorm.
+ * User: Targaryen
+ * Date: 2016/7/19
+ * Time: 14:02
+ */
+'use strict';
+const api = global.yoho.API;
+
+exports.getBrandData = () => {
+    return api.get('', {
+        method: ''
+    });
+};
\ No newline at end of file

+/**
+ * Created by PhpStorm.
+ * User: Targaryen
+ * Date: 2016/7/19
+ * Time: 13:51
+ */
+'use strict';
+const api = global.yoho.API;
+const brandApi = require('./brand-api');
+
+const getBrandData = params => {
+    let finalResult = {};
+
+    return api.all([brandApi.getBrandData]).then(result => {
+        Object.assign(finalResult, {
+            brandBg: 'http://7xwj52.com1.z0.glb.clouddn.com/brandbg.jpg',
+            brandLogo: '',
+            brandName: ' A.Dorad',
+            brandIntro: `Dora毕业于中国美术学院的珠宝设计专业。毕业之后，Dora便开始游走于各国，吸收各地首饰设计的精髓，之后又在首尔修学了3年，A.Dorad饰品系列诞生于首尔， 设计师Dora将首尔设为起点并逐步推向国际。2013年，A.Dorad将旗下主力设计师带领进军广州，并以此为基地，以国际化的标准，设计出全新概念饰品。A.Dorad给人们提供高品质的服务，并且拥有独有的工艺。多样的珠宝首饰产品造型更衬托出其前卫、高雅的设计理念。珍贵的矿石搭配流行的创意理念，启迪了人类艺术。A.Dorad饰品符合现代年轻人对珠宝的追求与热爱，充满个性与时尚.它可以满足不同人的需求独家定制专属于自己的水晶饰品。A.Dorad将继续发挥无与伦比的创造力并开启通往浪漫梦幻的大门。`,
+            showMore: false
+        });
+
+        return finalResult;
+    });
+};
+
+module.exports = {
+    getBrandData
+};
\ No newline at end of file

-<div class="brand-top-box">
-    <div class="brand-bottom">
-        {{#if brandLogo}}
+{{# result}}
+    <div class="brand-top-box" style="background: url({{brandBg}})">
+        <div class="brand-bottom">
+            {{#if brandLogo}}
             <img src="{{brandLogo}}" alt="{{brandName}}">
-        {{^}}
-            <div class="brand-title">brandName</div>
-        {{/if}}
-        <hr>
-        <div class="brand-intro">brandIntro brandIntro brandIntro brandIntro brandIntro brandIntro brandIntro brandIntro brandIntro brandIntro </div>
+            {{^}}
+            <div class="brand-title">{{brandName}}</div>
+            {{/if}}
+            <hr>
+            <div class="brand-intro line-clamp">{{brandIntro}}</div>
+        </div>
+        <div class="expand"></div>
+        <div class="collapse"></div>
     </div>
-    <div class="expand"></div>
-</div>
\ No newline at end of file
+{{/ result}}
\ No newline at end of file

@@ -4,5 +4,21 @@
  * Date: 2016/7/19
  * Time: 10:16
  */
+var $ = require('yoho-jquery');
 
-console.log('ddd');
+var $expand = $('.expand'),
+    $collapse = $('.collapse'),
+    $brandIntro = $('.brand-intro'),
+    exCoTm = 6; // 展开隐藏的倍数
+
+$expand.on('click', function () {
+    $brandIntro.removeClass("line-clamp").animate({height: $brandIntro.height() * exCoTm});
+    $expand.hide();
+    $collapse.show();
+});
+
+$collapse.on('click', function () {
+    $brandIntro.addClass("line-clamp").animate({height: $brandIntro.height() / exCoTm});
+    $collapse.hide();
+    $expand.show();
+});
\ No newline at end of file

 .brand-top-box {
     width: 100%;
-    height: 400px;
+    height: 468px;
     color: $white;
     background-color: $black;
     position: relative;
@@ -23,8 +23,19 @@
 
         .brand-intro {
             margin-left: 5%;
-            width: 82%;
+            width: 90%;
+            height: 60px;
             font-size: 16px;
+            line-height: 32px;
+            overflow : hidden;
+            text-overflow: ellipsis;
+        }
+
+        .line-clamp {
+            width: 82%;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
         }
     }
 
@@ -36,4 +47,14 @@
         bottom: 20px;
         right: 5%;
     }
+
+    .collapse {
+        width: 60px;
+        height: 60px;
+        background-color: $black;
+        position: absolute;
+        bottom: 20px;
+        right: 5%;
+        display: none;
+    }
 }