手机品牌中心更多

assets/scss/common.scss

@@ -726,3 +726,7 @@ img.new-animate{
   color: #ef1d1d;
   line-height: 28px;
 }
+
+.clear-float {
+  clear: both;
+}

components/mobile/brand/BrandCenter.vue

@@ -3,14 +3,15 @@
     <div class="mobile-brand-wrap">
       <div class="mobile-brand-header">
         <img src="/images/mobile/@2x/brand/brandWall.png" alt="">
-        <div class="mobile-brand-index" :class="{'scrolled': isScrolled}">
+        <div class="mobile-brand-index" :class="{'scrolled': isScrolled, 'is-more': isScrolled && !isMore}">
           <p style="float: left">索引：</p>
           <div style="float: left;width: 5.5rem">
             <nuxt-link :to="'/mobile/brand/brandCenter/' + item"
                        :class="{'active': item == activeIndex}"
                        :key="key" v-for="(item, key) in initArr">{{item}}</nuxt-link>
           </div>
-          <div style="clear: both"></div>
+          <div v-if="isScrolled" class="more-index" @click="isMore = !isMore" v-text="!isMore ? '更多' : '收起'"></div>
+          <div class="clear-float"></div>
         </div>
       </div>
       <div class="mobile-brand-list">
@@ -80,7 +81,8 @@
           '0~9'
         ],
         activeIndex: this.$route.params.initial,
-        isScrolled: false
+        isScrolled: false,
+        isMore: false
       }
     },
     mounted: function () {
@@ -177,6 +179,15 @@
             left: 0;
             padding-left: .58rem;
             margin-top: 0;
+            .more-index {
+              position: absolute;
+              right: .1rem;
+              color: #5078cb;
+            }
+          }
+          &.is-more {
+            height: 1.32rem;
+            overflow: hidden;
           }
         }
       }