Merge remote-tracking branch 'origin/master'

 import ProductGroup from './product-group';
+import ProductList from './product-list';
 
 export default [
   ProductGroup,
+  ProductList
 ];

+<template>
+  <div class="product-list-wrap">
+    <div class="product-list">
+      <div class="product-item" v-for="(item, index) in list" :key="index">
+        <div class="thumb">
+          <ImageFormat :src="item.default_images" :width="235" :height="314"></ImageFormat>
+        </div>
+        <div class="name">{{item.product_name}}</div>
+        <div class="price">
+          <span class="sale-price">¥{{item.sales_price}}</span>
+          <span class="market-price">¥{{item.market_price}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProductList',
+  props: {
+    list: Array
+  }
+};
+</script>
+
+<style type="css">
+  .product-list-wrap {
+    display: flex;
+    justify-content: center;
+  }
+
+  .product-list {
+    max-width: 714px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .product-item {
+    width: 50%;
+    padding: 18px 18px 48px;
+
+    .thumb {
+      height: 428px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+
+    .name {
+      height: 68px;
+      margin-top: 24px;
+      font-size: 24px;
+      line-height: 1.4;
+      overflow: hidden;
+    }
+
+    .sale-price {
+      color: #d0021b;
+      font-size: 26px;
+      font-weight: 500;
+    }
+
+    .market-price {
+      color: #b0b0b0;
+      font-size: 25px;
+      margin-right: 4px;
+      text-decoration: line-through;
+    }
+  }
+</style>