商品列表页面样式修改

@@ -36,10 +36,11 @@ import {createNamespacedHelpers} from 'vuex';
 const {mapState, mapActions} = createNamespacedHelpers('list');
 
 import ImgSize from '../../components/img-size';
+import {Scroll} from 'cube-ui';
 
 export default {
   name: 'Filtrate',
-  components: {ImgSize},
+  components: {ImgSize, Scroll},
   data() {
     return {
       showType: false
@@ -48,7 +49,7 @@ export default {
   mounted() {
   },
   methods: {
-    ...mapActions(['setFilterParam','fetchProductList']),
+    ...mapActions(['setFilterParam', 'fetchProductList']),
     clear() {
       this.setFilterParam({
         sort: [], // 品类id

@@ -56,7 +56,6 @@ export default {
       selectedType: 2,
       priceDesc: true,
       arrowImage: '',
-      searchKey: '',
       listType: 1,
       type: 6
     };
@@ -91,7 +90,6 @@ export default {
       }
       let params = {
         type: this.type,
-        query: this.searchKey,
         sort: this.filterParams.sort.join(','),
         brand: this.filterParams.brand.join(','), // 品牌id
         gender: this.filterParams.gender.join(','), // 性别

@@ -8,20 +8,24 @@
           <div class="search-clear" :class="query && 'search-clear-img'" @click="clear()"></div>
         </div>
       </form>
-      <Scroll v-if="!query.length" :options="scrollOptions">
+      <Scroll v-show="!query.length" :options="scrollOptions">
+        <div class="recent title middle" v-if="searchWord.length">热门推荐</div>
+        <div class="content middle">
+          <div class="item" v-if="searchWord.length" v-for="item of searchWord" @click="goSearch(item.search_word)">
+            {{item.search_word}}
+          </div>
+        </div>
         <div class="recent middle" v-if="localHistory.length">
           <div class="title">最近搜索</div>
-          <div class="clearSearch" @click="clearLocalHistory()">清除</div>
-        </div>
-        <div class="item middle" v-if="localHistory.length" v-for="item of localHistory" @click="goSearch(item)">{{item}}
+          <div class="search-clear search-clear-img" @click="clearLocalHistory()"></div>
         </div>
-        <div class="recent title middle" v-if="searchWord.length">热门推荐</div>
-        <div class="item middle" v-if="searchWord.length" v-for="item of searchWord" @click="goSearch(item.search_word)">
-          {{item.search_word}}
+        <div class="content middle">
+          <div class="item" v-if="localHistory.length" v-for="item of localHistory" @click="goSearch(item)">{{item}}
+          </div>
         </div>
       </Scroll>
-      <Scroll v-if="query.length" :options="scrollOptions" :data="searchSuggestList">
-        <div class="item middle" v-if="searchSuggestList.length" v-for="item of searchSuggestList" @click="goSearch(item.item)">
+      <Scroll v-show="query.length" :options="scrollOptions" :data="searchSuggestList">
+        <div class="item-line middle" v-if="searchSuggestList.length" v-for="item of searchSuggestList" @click="goSearch(item.item)">
           {{item.item}}
         </div>
       </Scroll>
@@ -49,7 +53,7 @@ export default {
       localHistory: []
     };
   },
-  mounted() {
+  activated() {
     this.fetchSearchWords();
     this.fetchDefaultSearchWords();
     this.setLocalList();
@@ -162,11 +166,15 @@ export default {
   }
 
   .item {
-    line-height: 88px;
-    height: 88px;
-    font-size: 28px;
-    color: #333;
-    border-bottom: 1px #eee solid;
+    line-height: 60px;
+    height: 60px;
+    font-size: 24px;
+    color: #000;
+    padding: 0 20px;
+    border-radius: 30px;
+    background: #f5f5f5;
+    margin-right: 20px;
+    margin-bottom: 30px;
   }
 
   .recent {
@@ -177,8 +185,23 @@ export default {
     margin-top: 60px;
   }
 
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 30px;
+  }
+
   .clearSearch {
     font-size: 32px;
     color: #999;
   }
+
+  .item-line {
+    line-height: 88px;
+    height: 88px;
+    font-size: 28px;
+    color: #333;
+    border-bottom: 1px #eee solid;
+  }
+
 </style>