resouces-vue-trans

@@ -12,6 +12,20 @@ const channel = {
     lifestyle: '3ad8826fc89fb0d023a4cd06a6991219'
 };
 
+const brand = {
+    men: '9ee58aadd9559d07207fe4a98843eaac',
+    women: 'aa8d34c85934c2ccc16e2babd3eb5e47',
+    lifestyle: '3ad8826fc89fb0d023a4cd06a6991219'
+};
+
+const cate = {
+    men: '9ee58aadd9559d07207fe4a98843eaac',
+    women: 'aa8d34c85934c2ccc16e2babd3eb5e47',
+    lifestyle: '3ad8826fc89fb0d023a4cd06a6991219'
+};
+
 module.exports = {
-    channel
+    channel,
+    brand,
+    cate
 };

@@ -4,14 +4,21 @@
  * Date: 2016/7/19
  * Time: 16:05
  */
-const $ = require('yoho-jquery');
 const Vue = require('yoho-vue');
 const lazyload = require('yoho-vue-lazyload');
+const contentCode = require('content-code');
+const qs = require('yoho-qs');
 
 const brandBox = require('channel/brand-box.vue');
 
 new Vue({
     el: '#brand',
+    data() {
+        return {
+            page: 'brand',
+            contentCode: contentCode.brand[qs.brand || 'men']
+        }
+    },
     components: {
         brandBox
     }
@@ -19,20 +26,3 @@ new Vue({
 
 Vue.use(lazyload);
 
-const $expand = $('.expand'),
-    $collapse = $('.collapse'),
-    $brandIntro = $('.brand-intro'),
-    exCoTm = 4; // 展开隐藏的倍数
-
-$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();
-});
-

 <template>
     <div>
-        <resources v-bind:content="'111'"></resources>
+        <resources v-bind:content-code.sync="contentCode"></resources>
         <letter-list></letter-list>
         <brand-list v-bind:channel="'boys'"></brand-list>
     </div>

@@ -4,9 +4,9 @@
             <img v-if="brandIntro.showBrandLogo" v-lazy="brandIntro.brandLogo" alt="{{ brandIntro.brandName }}">
             <div v-else class="brand-title">{{ brandIntro.brandName }}</div>
             <hr>
-            <div class="brand-intro line-clamp">{{ brandIntro.brandIntro }}</div>
+            <div v-show="showMore" transition="brand-intro" v-bind:class="{ 'brand-short': !showMore }">{{ brandIntro.brandIntro }}</div>
         </div>
-        <div class="expand"></div>
+        <div class="expand" @click="introTrans()"></div>
         <div class="collapse"></div>
     </div>
 </template>
@@ -34,18 +34,29 @@
                 border-top: none;
             }
 
-            .brand-intro {
+            .brand-intro-transition {
+                transition: all 0.3s ease;
                 margin-left: 5%;
-                width: 90%;
-                height: 60px;
                 font-size: 16px;
                 line-height: 32px;
+                width: 90%;
+                height: 220px;
                 overflow-y: auto;
-                text-overflow: ellipsis;
             }
 
-            .line-clamp {
+            .brand-intro-enter,
+            .brand-intro-leave {
+                height: 60px;
+            }
+
+            .brand-short {
+                height: 60px !important;
+                display: -webkit-box !important;
+                margin-left: 5%;
+                font-size: 16px;
+                line-height: 32px;
                 width: 82%;
+                text-overflow: ellipsis;
                 overflow-y: hidden;
                 display: -webkit-box;
                 -webkit-line-clamp: 2;
@@ -82,7 +93,8 @@
         props: ['domain'],
         data() {
             return {
-                brandIntro: {}
+                brandIntro: {},
+                showMore: false
             };
         },
         watch: {
@@ -104,6 +116,9 @@
                 }).fail(() => {
                     tip('网络错误');
                 });
+            },
+            introTrans() {
+                this.showMore = this.showMore !== true;
             }
         },
         created() {