商品列表页面样式修改

 <template>
-  <div>
+  <div class="bg">
     <div class="item" v-if="list.length" v-for="(product,index) in list" @click="goDetail(product)"
-         :class="((index === 0 || index === 1) ? 'top-line':'') +' '+((index) % 2 === 0 ? 'right-line' :'')"
-         :key="index">
-      <div class="item-price">{{product.price ? '¥' + product.price : ' '}}</div>
-      <ImgSize class="item-imge" :src="product.default_images" :width="300" :height="300"/>
+         :key="index" :class="(index) % 2 === 0 && 'magrin-right'">
+      <div class="item-top">
+        <div class="item-price">
+          <span class="price-flag">{{product.price && '¥'}}</span><span>{{product.price || ' '}}</span>
+        </div>
+        <div class="item-sales">{{product.sales && product.sales + '人付款'}}</div>
+      </div>
+      <ImgSize class="item-imge" :src="product.default_images" :width="274" :height="274"/>
       <div class="item-name">{{product.product_name}}</div>
     </div>
   </div>
@@ -36,48 +40,65 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .top-line {
-    border-top: 1px #ddd solid;
+  .magrin-right {
+    margin-right: 14px;
   }
 
-  .right-line {
-    border-right: 1px #ddd solid;
+  .item {
+    border-radius: 16px;
+    width: 344px;
+    padding: 24px;
+    height: 498px;
+    background: #fff;
+    margin-bottom: 16px;
   }
 
-  .item {
-    width: 9.37rem;
-    border-bottom: 1px #ddd solid;
-    padding: 28px 38px 0 38px;
-    float: left;
-    overflow: hidden;
-    height: 560px;
+  .item-top {
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 38px;
+    align-items: center;
   }
 
   .item-price {
-    height: 32px;
-    margin-bottom: 38px;
-    font-size: 28px;
-    color: #000;
-    letter-spacing: 0;
+    color: #d0021b;
+    font-size: 32px;
+    vertical-align: center;
   }
 
   .item-imge {
-    width: 300px;
-    height: 300px;
+    width: 274px;
+    height: 274px;
+    margin: 0 10px;
   }
 
   .item-name {
-    font-size: 28px;
+    font-size: 24px;
     color: #000;
     letter-spacing: 0;
-    text-align: center;
     line-height: 40px;
-    margin-top: 38px;
-    margin-bottom: 44px;
+    margin-top: 14px;
+    margin-bottom: 8px;
     word-break: break-all;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+
+  .item-sales {
+    font-size: 22px;
+    color: #999;
+  }
+
+  .price-flag {
+    font-size: 24px;
+  }
+
+  .bg {
+    padding: 24px;
+    display: flex;
+    flex-wrap: wrap;
+  }
 </style>

@@ -143,29 +143,35 @@ export default {
     bottom: 0;
     z-index: 9;
     width: 100%;
+    background: #fff;
+    display: flex;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    justify-content: space-between;
+    align-items: center;
   }
 
   .clear {
-    line-height: 120px;
+    margin-left: 32px;
+    line-height: 80px;
     text-align: center;
-    width: 240px;
-    height: 120px;
+    width: 330px;
+    height: 80px;
     color: #000;
-    font-size: 28px;
-    font-weight: bold;
-    float: left;
-    border-top: 1px solid;
+    font-size: 32px;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 40px;
   }
 
   .submit {
-    line-height: 120px;
-    margin-left: 240px;
+    line-height: 80px;
     background-color: #08304B;
+    width: 330px;
+    height: 80px;
     text-align: center;
     color: #fff;
-    font-size: 28px;
-    font-weight: bold;
-    height: 120px;
+    font-size: 32px;
+    border-radius: 40px;
+    margin-right: 32px;
   }
 
   .item {
@@ -193,7 +199,7 @@ export default {
   }
 
   .item-text {
-    background: #F5F5F5;
+    background: #f5f5f5;
     font-size: 28px;
     color: #222;
     text-align: center;
@@ -201,17 +207,18 @@ export default {
     height: 80px;
     line-height: 80px;
     margin-right: 20px;
+    border-radius: 40px;
   }
 
   .item-text-selected {
-    background: #08304B;
+    background: #08304b;
     color: #fff;
   }
 
   .item-size {
-    width: 100px;
-    height: 100px;
-    line-height: 100px;
+    width: 130px;
+    height: 80px;
+    line-height: 80px;
   }
 
   .item-img {

 <template>
   <div>
-  <LayoutApp :show-back="true">
-    <div class="filter">
-      <div class="filter-tab">
-        <div class="tab-item" :class="selectedType === 2 && 'selected-tab'" @click="pressType(2)">人气</div>
-        <div class="tab-item middle" :class="selectedType === 1 && 'selected-tab'" @click="pressType(1)">
-          <span>价格</span>
-          <div :class="arrowImage"></div>
+    <LayoutApp :show-back="true">
+      <div class="filter">
+        <div class="filter-tab">
+          <div class="tab-item" :class="selectedType === 2 && 'selected-tab'" @click="pressType(2)">人气</div>
+          <div class="tab-item middle" :class="selectedType === 1 && 'selected-tab'" @click="pressType(1)">
+            <span>价格</span>
+            <div :class="arrowImage"></div>
+          </div>
+          <div class="tab-item" :class="selectedType === 3 && 'selected-tab'" @click="pressType(3)">新品</div>
+        </div>
+        <div class="middle">
+          <div class="screen middle" @click="goFilter()">
+            <div class="screen-img"></div>
+            筛选
+          </div>
+          <div class="search-img" @click="goSearch()"></div>
         </div>
-        <div class="tab-item" :class="selectedType === 3 && 'selected-tab'" @click="pressType(3)">新品</div>
-      </div>
-      <div class="screen middle" @click="goFilter()">
-        <div class="screen-img"></div>
-        筛选
       </div>
-    </div>
-    <Scroll :options="scrollOptions"
-            :data="productList.list"
-            @pulling-up="onPullingUp">
-      <ProductList :list="productList.list"></ProductList>
-    </Scroll>
-  </LayoutApp>
-  <Filtrate ref="filtrate"></Filtrate>
+      <Scroll class="product-list"
+              :options="scrollOptions"
+              :data="productList.list"
+              @pulling-up="onPullingUp">
+        <ProductList :list="productList.list"></ProductList>
+      </Scroll>
+    </LayoutApp>
+    <Filtrate ref="filtrate"></Filtrate>
   </div>
 </template>
 <script>
@@ -56,15 +60,16 @@ export default {
       listType: 1
     };
   },
-  mounted() {
+
+  activated() {
     this.changeArrow();
-    let params = this.$route.params;
+    let params = this.$route.query;
 
     if (Object.keys(params).length && params.listType) {
       this.listType = params.listType;
     }
-    this.fetchProductList({listType: this.listType, isReset: true});
-    this.fetchFilterData();
+    this.fetchProductList({...params, isReset: true});
+    this.fetchFilterData(params);
 
   },
   methods: {
@@ -109,6 +114,11 @@ export default {
       this.fetchProductList(params);
       this.changeArrow();
     },
+    goSearch() {
+      this.$router.push({
+        name: 'Search',
+      });
+    },
     changeArrow() {
       this.arrowImage = (this.selectedType === 3 || this.selectedType === 2) ? 'price-arrow' :
         this.priceDesc ? 'desc-arrow' : 'asc-arrow';
@@ -144,7 +154,6 @@ export default {
   }
 
   .selected-tab {
-    font-size: 40px;
     color: #000;
     font-weight: bold;
   }
@@ -157,6 +166,7 @@ export default {
     font-size: 32px;
     color: #000;
     letter-spacing: 0;
+    margin-right: 24px;
   }
 
   .middle {
@@ -191,4 +201,16 @@ export default {
     background: url(~statics/image/list/filter@3x.png) no-repeat;
     background-size: cover;
   }
+
+  .product-list {
+    background: #f5f5f5;
+  }
+
+  .search-img {
+    width: 40px;
+    height: 40px;
+    margin-left: 20px;
+    background: url(~statics/image/list/search_icon@3x.png) no-repeat;
+    background-size: cover;
+  }
 </style>