feat(arcitle)：添加闲鱼社区模块部分代码 reviewed by tao.huang

+<template>
+  <div class="horizontalSlide">
+    <ul class="list-warp">
+      <li class="list-item" v-for="(item, index) in value" :key="index">
+        <ImageFormat
+          class="image"
+          src="//img11.static.yhbimg.com/goodsimg/2018/12/28/15/0160a985f0b5999b77436b7af78a85f3df.jpg" alt="加载失败"
+          :width="136" :height="180"
+          @error="imageformatError"/>
+        <div class="info">
+          <p class="title">Off-White™ x Nike Air Max 90 全新款「Desert Ore」配色曝光 Off-White™ x Nike Air Max 90 全新款「Desert Ore」配色曝光</p>
+          <div class="bottom">
+            <span class='icon-ufo'></span>
+            <span class="price">¥1299</span>
+            <span class="icon-goumai"></span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'horizontalSlide',
+  props: ['value'],
+  data() {
+    return {};
+  },
+
+  methods: {
+    imageformatError() {
+      console.log(6666);
+    }
+  },
+  computed: {},
+  components: {}
+}
+</script>
+<style lang="scss" scoped>
+.horizontalSlide {
+  overflow: hidden;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+  -webkit-overscroll-behavior-x: contain;
+  scroll-behavior: smooth;
+}
+.list-warp {
+  overflow-x: scroll;
+  width: max-content;
+  font-size: 0;
+}
+.list-item {
+  display: inline-flex;
+  width: 600px;
+  height: 180px;
+  margin-right: 24px;
+  border-radius: 8px;
+  .image {
+    min-width: 136px;
+    min-height: 180px;
+    max-width: 136px;
+    max-height: 180px;
+    border-radius: 8px 0 0 8px;
+    filter: contrast(0.9);
+  }
+  .title {
+    font-size: 24px;
+    color: #999;
+    line-height: 34px;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .info {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 1px solid #F0F0F0;
+    border-radius: 0 8px 8px 0;
+  }
+  .price {
+    margin-left: 16px;
+    font-size: 28px;
+    font-family: 'BrownStd-Regular';
+    vertical-align: middle;
+    flex: 1 1 auto;
+  }
+  .icon-goumai {
+    float: right;
+  }
+}
+</style>

@@ -9,7 +9,7 @@
 !-->
 <template>
   <div class="article-waterfall-wrap">
-    hello
+    <horizontalSlide v-model="items" :style="{'margin': '20px 0 0 12px'}"></horizontalSlide>
     <!-- <div class="water">
       <div class="piping" ref="piping0"></div>
       <div class="piping" ref="piping1"></div>
@@ -22,6 +22,8 @@
 <script>
 import axios from 'axios';
 
+import horizontalSlide from './components/horizontalSlide'
+
 export default {
   name: 'Article',
   mixins: [],
@@ -32,6 +34,8 @@ export default {
   },
   data() {
     return {
+      items: [...Array(20).keys()].map(item => item),
+
       moments: [],
       available: 1,
       height1: 0,
@@ -159,7 +163,9 @@ export default {
   },
   computed: {},
   watch: {},
-  components: {}
+  components: {
+    horizontalSlide
+  }
 };
 </script>
 

@@ -719,3 +719,13 @@ img[lazy=loaded] {
   background: url(~statics/image/order/logo@3x.png) no-repeat;
   background-size: cover;
 }
+
+.icon-goumai {
+  width: 120px;
+  height: 50px;
+  vertical-align: middle;
+  display: inline-flex;
+  background: url(~statics/image/order/goumai@3x.png) no-repeat;
+  background-size: cover;
+}
+