commit

@@ -242,7 +242,6 @@
           this.load()
         }
         this.updateIndex()
-        console.log(this.$el.scrollTop)
         this.$emit('scroll', {scrollTop: this.$el.scrollTop})
       },
       _onResize() {

 <template>
-  <div></div>
+  <div class="product-group">
+    <div
+      class="product-item"
+      :class="{single}"
+      v-for="(product, inx) in data"
+      :key="inx">
+      <div class="product-content">
+        <ImageFormat class="product-image" :src="product.src"></ImageFormat>
+        <div class="product-info">
+          <p class="product-name">{{product.name}}</p>
+          <p class="price">￥{{product.price}}</p>
+        </div>
+      </div>
+      <Button icon="iconfont icon-zan" class="btn-fav btn-is-fav">{{product.isFav ? '已种草' : '种草'}}</Button>
+    </div>
+  </div>
 </template>
 
 <script>
+import {Button} from 'cube-ui';
+
 export default {
-  name: 'ProductGroup'
+  name: 'ProductGroup',
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  computed: {
+    single() {
+      return this.data.length === 1;
+    }
+  },
+  components: {Button}
 };
 </script>
+
+<style lang="scss" scoped>
+.product-group {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: 276px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+
+  .product-item {
+    position: relative;
+    margin-top: 20px;
+    margin-right: 20px;
+    margin-left: 30px;
+    height: 180px;
+    width: 580px;
+    background-color: #fff;
+    box-shadow: 0 5px 10px 0 rgba(107, 95, 95, 0.2);
+    display: inline-block;
+    padding: 10px 20px;
+    white-space: initial;
+
+    &:last-child {
+      margin-right: 30px;
+    }
+
+    &.single {
+      width: 690px;
+    }
+  }
+
+  .product-content {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .product-image {
+    width: 136px;
+    height: 180px;
+    margin-top: -30px;
+  }
+
+  .product-info {
+    padding-left: 20px;
+    flex: 1;
+
+    .product-name {
+      font-size: 24px;
+      color: #9b9b9b;
+      letter-spacing: -0.25px;
+      height: 104px;
+    }
+
+    .price {
+      font-size: 32px;
+      color: #d0021b;
+      letter-spacing: -0.34px;
+    }
+  }
+
+  .btn-fav {
+    position: absolute;
+    bottom: 20px;
+    right: -20px;
+    width: 120px;
+    height: 48px;
+    padding: 0;
+    font-size: 24px;
+
+    & /deep/ .iconfont {
+      margin: 0;
+    }
+  }
+}
+</style>

@@ -38,9 +38,9 @@ export default {
   },
   methods: {
     onFetch() {
-      const items = Array.from({length: 50}).map((v, i) => {
+      const items = Array.from({length: 10}).map((v, i) => {
         return {
-          name: 'chenfeng' + (i + 50 * this.inx)
+          name: 'chenfeng' + (i + 10 * this.inx)
         }
       })
 

 <template>
   <div class="article-item-header">
     <div class="avatar">
-      <ButtonAvatar src="http://head.static.yhbimg.com/yhb-head/2017/8/28/9/01bb048654b3712172cfd0db7ad6465064.jpg?imageView2/2/w/100/h/100/q/90" :width="35" :height="35"></ButtonAvatar>
+      <WidgetAvatar class="widget-avatar" src="http://head.static.yhbimg.com/yhb-head/2017/8/28/9/01bb048654b3712172cfd0db7ad6465064.jpg?imageView2/2/w/100/h/100/q/90" :width="70" :height="70"></WidgetAvatar>
       <span class="name">Oscar</span>
     </div>
     <div class="opts">
@@ -37,6 +37,11 @@ export default {
     font-size: 24px;
     margin-left: 20px;
   }
+
+  .widget-avatar {
+    width: 70px;
+    height: 70px;
+  }
 }
 
 .opts {

 <template>
   <div class="article-item-intro">
-    
+    <div class="intro">
+      Nike 旗下大热鞋款 Air Max 95 一直以来在街头造型当中的能见度都算高，凭藉其舒适脚感与百搭外型 Air Max 95 也轻松成为许多鞋迷的心头好。近日，<span class="expand">…展开</span>
+    </div>
+    <div class="widgets">
+      <div class="topic">
+        <WidgetTopic></WidgetTopic>
+      </div>
+      <div class="opts">
+        <WidgetLike></WidgetLike>
+        <WidgetFav></WidgetFav>
+        <WidgetShare></WidgetShare>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,6 +22,28 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+.article-item-intro {
+  width: 100%;
+  padding: 0 30px;
 
+  .intro {
+    font-size: 28px;
+    color: #4a4a4a;
+    letter-spacing: 0.06px;
+  }
+}
+
+.widgets {
+  width: 100%;
+  display: flex;
+
+  .topic {
+    text-align: left;
+  }
+
+  .opts {
+    text-align: right;
+  }
+}
 </style>

 <template>
   <div class="article-item-slide">
-    
+    <Slide :data="slides" :threshold="0.2" :auto-play="false" :loop="false" :options="scrollOption">
+      <SlideItem v-for="(item, inx) in slides" :key="inx">
+        <ImageFormat class="image-slide-item" :src="item.src"></ImageFormat>
+      </SlideItem>
+      <template slot="dots" slot-scope="props">
+        <span class="slide-dot"
+          :class="dotClass(props.current, inx)"
+          v-for="(item, inx) in props.dots"
+          :key="inx">
+        </span>
+      </template>
+    </Slide>
   </div>
 </template>
 
 <script>
-//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60
-////img11.static.yhbimg.com/goodsimg/2019/01/29/15/015573d69698c4f0f467b2a1b759c013fe.jpg?imageView2/2/w/640/h/640/q/60
-////img12.static.yhbimg.com/goodsimg/2019/01/29/15/02aa4b58437833b0e0c7eb653cfa485050.jpg?imageView2/2/w/640/h/640/q/60
-// //img11.static.yhbimg.com/goodsimg/2019/01/29/15/01699725e29b8f3a47f2490fb111c081ce.jpg?imageView2/2/w/640/h/640/q/60
+import {Slide} from 'cube-ui';
+
 export default {
-  name: 'ArticleItemSlide'
+  name: 'ArticleItemSlide',
+  data() {
+    return {
+      scrollOption: {
+        eventPassthrough: 'vertical'
+      },
+      slides: [{
+        src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60'
+      }, {
+        src: '//img11.static.yhbimg.com/goodsimg/2019/01/29/15/015573d69698c4f0f467b2a1b759c013fe.jpg?imageView2/2/w/640/h/640/q/60'
+      }, {
+        src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/02aa4b58437833b0e0c7eb653cfa485050.jpg?imageView2/2/w/640/h/640/q/60'
+      }, {
+        src: '//img11.static.yhbimg.com/goodsimg/2019/01/29/15/01699725e29b8f3a47f2490fb111c081ce.jpg?imageView2/2/w/640/h/640/q/60'
+      }, {
+        src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60'
+      }, {
+        src: '//img11.static.yhbimg.com/goodsimg/2019/01/29/15/015573d69698c4f0f467b2a1b759c013fe.jpg?imageView2/2/w/640/h/640/q/60'
+      }, {
+        src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/02aa4b58437833b0e0c7eb653cfa485050.jpg?imageView2/2/w/640/h/640/q/60'
+      }, {
+        src: '//img11.static.yhbimg.com/goodsimg/2019/01/29/15/01699725e29b8f3a47f2490fb111c081ce.jpg?imageView2/2/w/640/h/640/q/60'
+      }, {
+        src: '//img11.static.yhbimg.com/goodsimg/2019/01/29/15/01699725e29b8f3a47f2490fb111c081ce.jpg?imageView2/2/w/640/h/640/q/60'
+      }]
+    };
+  },
+  methods: {
+    dotClass(current, inx) {
+      const offset = 1;
+      const len = this.slides.length;
+      let left = current - offset;
+      let right = current + offset;
+
+      if (left < 0) {
+        const offsetRight = 0 - left;
+
+        if (right + offsetRight > len - 1) {
+          right = len - 1;
+        } else {
+          right += offsetRight;
+        }
+        left = 0;
+      } else if (right > len - 1) {
+        const offsetLeft = right - (len - 1);
+
+        if (left - offsetLeft < 0) {
+          left = 0;
+        } else {
+          left -= offsetLeft;
+        }
+        right = len - 1;
+      }
+
+      return {
+        active: current === inx,
+        more: !(inx >= left && inx <= right),
+        hide: left - inx > 1 || inx - right > 1
+      };
+    }
+  },
+  components: {Slide, SlideItem: Slide.Item}
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+.article-item-slide {
+  & /deep/ .cube-slide-dots {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 10PX;
+    height: 5PX;
+  }
+}
+
+.slide-dot {
+  width: 30px;
+  height: 8px;
+  background-color: rgba(255, 255, 255, 0.7);
+  transition: width 0.2s linear;
+
+  &.active {
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  &.more {
+    width: 8px;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.image-slide-item {
+  width: 750px;
+  height: 750px;
+}
 
 </style>

@@ -2,6 +2,7 @@
   <div class="article-item">
     <ArticleItemHeader :data="headerData"></ArticleItemHeader>
     <ArticleItemSlide :data="slideData"></ArticleItemSlide>
+    <ProductGroup :data="productListData"></ProductGroup>
     <ArticleItemIntro :data="introData"></ArticleItemIntro>
     <ArticleItemComment :data="commentData"></ArticleItemComment>
   </div>
@@ -35,6 +36,24 @@ export default {
     },
     commentData() {
       
+    },
+    productListData() {
+      return [{
+        src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60',
+        name: 'Off-White™ x Nike Air Max 90 全新「Desert Ore」配色曝光',
+        price: 3299,
+        isFav: false
+      }, {
+        src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60',
+        name: 'Off-White™ x Nike Air Max 90 全新「Desert Ore」配色曝光',
+        price: 2299,
+        isFav: true
+      }, {
+        src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60',
+        name: 'Off-White™ x Nike Air Max 90 全新「Desert Ore」配色曝光',
+        price: 1299,
+        isFav: false
+      }];
     }
   },
   components: {ArticleItemHeader, ArticleItemSlide, ArticleItemIntro, ArticleItemComment}