Merge remote-tracking branch 'origin/master'

+import Login from 'yoho-activity-sdk/src/public/login';
+import Base from 'yoho-activity-sdk/src/public/base';
+
+
+var env = Base.env();
+var loginUrl = Base.loginUrl();
+var login = new Login({loginUrl: loginUrl, env: env});
+
+export default {
+  goLogin: login.goLogin.bind(login),
+};

-import ButtonFav from './button-fav';
-import ButtonLike from './button-like';
-import ButtonShare from './button-share';
-import ButtonTopic from './button-topic';
-
-export default [
-  ButtonFav,
-  ButtonLike,
-  ButtonShare,
-  ButtonTopic
-];

-import Buttons from './buttons';
+import Widgets from './widgets';
 import Images from './images';
 import Layouts from './layouts';
 import Products from './products';
@@ -7,7 +7,7 @@ import YohoActionSheet from './action-sheet';
 import TextEllipsis from './textellipsis'
 
 export default [
-  ...Buttons,
+  ...Widgets,
   ...Images,
   ...Layouts,
   ...Products,

 import Layout from './layout';
 import LayoutHeader from './layout-header';
 import LayoutScroll from './layout-scroll';
+import RecycleList from './recycle-list';
 
 export default [
   Layout,
   LayoutHeader,
   LayoutScroll,
+  RecycleList,
 ];

 <template>
-  <div class="layout-header">
+  <div class="layout-header" :class="{[`theme-${theme}`]: theme}">
     <div class="back flex">
       <slot name="back">
-        <i class="iconfont icon-back"></i>
+        <i class="iconfont icon-left"></i>
       </slot>
     </div>
     <div class="title flex">
-      {{title}}
+      <slot>
+        {{title}}
+      </slot>
     </div>
     <div class="opts flex">
-      <i class="iconfont icon-back"></i>
+      <slot name="opts">
+      </slot>
     </div>
   </div>
 </template>
@@ -18,7 +21,28 @@
 export default {
   name: 'LayoutHeader',
   props: {
-    title: String
+    title: String,
+    theme: String,
+    fixed: Boolean,
+    transparentSeek: Number
+  },
+  watch: {
+    transparentSeek(value) {
+      console.log(value)
+      this.animeEl && this.animeEl.seek(this.animeEl.duration * value);
+    }
+  },
+  mounted() {
+    if (this.transparentSeek >= 0) {
+      import('animejs').then(({default: anime}) => {
+        this.animeEl = anime({
+          targets: this.$el,
+          backgroundColor: '#222',
+          easing: 'easeInOutQuad',
+          autoplay: false
+        });
+      });
+    }
   }
 };
 </script>
@@ -32,32 +56,51 @@ export default {
   overflow: hidden;
   display: flex;
 
+  &.theme-white {
+    background-color: #fff;
+    color: #222;
+  }
+
+  &.theme-transparent {
+    background-color: initial;
+    color: #fff;
+  }
+
   .flex {
     display: flex;
     align-items: center;
   }
 
   .iconfont {
-    width: 70px;
     height: 100%;
+    font-size: 20PX;
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    padding-left: 10PX;
+    padding-right: 10PX;
   }
 
   .back {
     width: 150px;
+    padding-left: 5PX;
   }
 
   .title {
     flex: 1;
     justify-content: center;
     font-size: 18PX;
+    letter-spacing: 0.09PX;
   }
 
   .opts {
     width: 150px;
     justify-content: flex-end;
+    padding-right: 5PX;
+
+    .iconfont {
+      font-size: 23PX;
+    }
   }
 }
 </style>

 <template>
-  <RecycleList ref="scroll" :on-fetch="onFetch" :options="scrollOption" @pulling-up="onPullingUp" @pulling-down="onPullingDown">
+  <RecycleList ref="scroll" :on-fetch="onFetch" :options="scrollOption" @pulling-up="onPullingUp" @pulling-down="onPullingDown" @scroll="onScroll">
     <template slot="item" slot-scope="{ data }">
       <slot name="item" :data="data">
       </slot>
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import {Scroll, RecycleList} from 'cube-ui';
+import {Scroll} from 'cube-ui';
 
 export default {
   name: 'LayoutScroll',
@@ -33,7 +33,10 @@ export default {
     onPullingDown(evt) {
       this.$emit('pulling-down', evt);
     },
+    onScroll(evt) {
+      this.$emit('scroll', evt);
+    }
   },
-  components: {Scroll, RecycleList}
+  components: {Scroll}
 };
 </script>

 <template>
-  <div class="layout">
+  <div class="layout" :class="{'header-fixed': headerFixed}">
     <slot name="header" v-if="hasHeader"></slot>
     <div class="layout-content">
       <slot></slot>
@@ -8,17 +8,23 @@
 </template>
 
 <script>
+import {has} from 'lodash';
+
 export default {
   name: 'Layout',
   data() {
     return {
       hasHeader: false,
+      headerFixed: false
     };
   },
-  mounted() {
-    if (this.$slots.header) {
+  created() {
+    if (has(this.$slots, 'header')) {
       this.hasHeader = true;
     }
+    if (has(this.$slots, 'header[0].componentOptions.propsData.fixed')) {
+      this.headerFixed = true;
+    }
   },
 };
 </script>
@@ -36,6 +42,26 @@ export default {
   display: flex;
   flex-direction: column;
 
+  &.header-fixed {
+    display: block;
+
+    .layout-content {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+    }
+
+    /deep/ .layout-header {
+      position: relative;
+      z-index: 2;
+    }
+  }
+
   .layout-content {
     flex: 1;
     overflow: hidden;

+<template>
+  <div class="cube-recycle-list">
+    <div class="cube-recycle-list-main">
+      <div class="cube-recycle-list-items" :style="{height: heights + 'px'}">
+        <div
+          v-for="item in visibleItems"
+          class="cube-recycle-list-item"
+          :style="{transform: 'translate(0,' + item.top + 'px)'}"
+        >
+          <div
+            v-if="infinite"
+            :class="{'cube-recycle-list-transition': infinite}"
+            :style="{opacity: +!item.loaded}"
+          >
+            <slot name="tombstone"></slot>
+          </div>
+          <div
+            :class="{'cube-recycle-list-transition': infinite}"
+            :style="{opacity: item.loaded}"
+          >
+            <slot name="item" :data="item.data"></slot>
+          </div>
+        </div>
+
+        <!-- preloads item for get its height, remove it after caculating height-->
+        <div class="cube-recycle-list-pool">
+          <div
+            class="cube-recycle-list-item cube-recycle-list-invisible"
+            v-if="!item.isTombstone && !item.height"
+            :ref="'preloads'+index"
+            v-for="(item, index) in items"
+          >
+            <slot name="item" :data="item.data"></slot>
+          </div>
+          <div ref="tomb" class="cube-recycle-list-item cube-recycle-list-invisible">
+            <slot name="tombstone"></slot>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="!infinite"
+        class="cube-recycle-list-loading"
+        :style="{visibility: loading ? 'visible' : 'hidden'}"
+      >
+        <slot name="spinner">
+          <div class="cube-recycle-list-loading-content">
+            <cube-loading class="spinner"></cube-loading>
+          </div>
+        </slot>
+      </div>
+
+      <div v-show="noMore" class="cube-recycle-list-noMore">
+        <slot name="noMore" />
+      </div>
+    </div>
+    <div class="cube-recycle-list-fake"></div>
+  </div>
+</template>
+
+<script>
+  import CubeLoading from 'cube-ui/src/components/loading/loading.vue'
+  import { warn } from 'cube-ui/src/common/helpers/debug.js'
+  import { isUndef } from 'cube-ui/src/common/helpers/util.js'
+
+  const EVENT_SCROLL = 'scroll'
+  const EVENT_RESIZE = 'resize'
+
+  export default {
+    name: 'RecycleList',
+    data() {
+      return {
+        items: [],
+        list: [],
+        heights: 0,
+        startIndex: 0,
+        loadings: [],
+        startOffset: 0,
+        noMore: false
+      }
+    },
+    props: {
+      infinite: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: Number,
+        default: 20
+      },
+      offset: {
+        type: Number,
+        default: 100
+      },
+      onFetch: {
+        type: Function,
+        required: true
+      }
+    },
+    computed: {
+      visibleItems() {
+        return this.items.slice(Math.max(0, this.startIndex - this.size), Math.min(this.items.length, this.startIndex + this.size))
+      },
+      tombHeight() {
+        return this.infinite ? this.$refs.tomb && this.$refs.tomb.offsetHeight : 0
+      },
+      loading() {
+        return this.loadings.length
+      }
+    },
+    watch: {
+      list (newV) {
+        if (newV.length) {
+          this.loadings.pop()
+          if (!this.loading) {
+            this.loadItems()
+          }
+        }
+      },
+      items (newV) {
+        if (newV.length > this.list.length) {
+          this.getItems()
+        }
+      }
+    },
+    created () {
+    },
+    mounted() {
+      this.$el.addEventListener(EVENT_SCROLL, this._onScroll)
+      window.addEventListener(EVENT_RESIZE, this._onResize)
+      this.init()
+    },
+    beforeDestroy () {
+      this.$el.removeEventListener(EVENT_SCROLL, this._onScroll)
+      window.removeEventListener(EVENT_RESIZE, this._onResize)
+    },
+    methods: {
+      init() {
+        this.load()
+      },
+      load() {
+        if (this.infinite) {
+          // increase capacity of items to display tombstone
+          this.items.length += this.size
+          this.loadItems()
+        } else if (!this.loading) {
+          this.getItems()
+        }
+      },
+      getItems() {
+        this.loadings.push('pending')
+        this.onFetch().then((res) => {
+          /* istanbul ignore if */
+          if (!res) {
+            this.noMore = true
+            this.loadings.pop()
+          } else {
+            this.list = this.list.concat(res)
+          }
+        })
+      },
+      loadItems(isResize) {
+        let promiseTasks = []
+        let start = 0
+        let end = this.infinite ? this.items.length : this.list.length
+        let item
+        for (let i = start; i < end; i++) {
+          item = this.items[i]
+          /* istanbul ignore if */
+          if (item && item.loaded) {
+            continue
+          }
+          this.setItem(i, this.list[i])
+          // get each item's height in nextTick
+          promiseTasks.push(this.$nextTick().then(() => {
+            this.updateItemHeight(i)
+          }))
+        }
+        // update items top and full list height
+        window.Promise.all(promiseTasks).then(() => {
+          this.updateItemTop()
+        })
+      },
+      setItem(index, data) {
+        this.$set(this.items, index, {
+          data: data || {},
+          height: 0,
+          top: -1000,
+          isTombstone: !data,
+          loaded: data ? 1 : 0
+        })
+      },
+      updateItemHeight(index) {
+        // update item height
+        let cur = this.items[index]
+        let dom = this.$refs['preloads' + index]
+        if (dom && dom[0]) {
+          cur.height = dom[0].offsetHeight
+        } else {
+          // tombstone
+          cur.height = this.tombHeight
+        }
+      },
+      updateItemTop() {
+        // loop all items to update item top and list height
+        this.heights = 0
+        for (let i = 0; i < this.items.length; i++) {
+          let pre = this.items[i - 1]
+          this.items[i].top = pre ? pre.top + pre.height : 0
+          this.heights += this.items[i].height
+        }
+        // update scroll top when needed
+        if (this.startOffset) {
+          this.setScrollTop()
+        }
+        this.updateIndex()
+      },
+      updateIndex() {
+        // update visible items start index
+        let top = this.$el.scrollTop
+        for (let i = 0; i < this.items.length; i++) {
+          if (this.items[i].top > top) {
+            this.startIndex = Math.max(0, i - 1)
+            break
+          }
+        }
+      },
+      getStartItemOffset() {
+        if (this.items[this.startIndex]) {
+          this.startOffset = this.items[this.startIndex].top - this.$el.scrollTop
+        }
+      },
+      setScrollTop() {
+        if (this.items[this.startIndex]) {
+          this.$el.scrollTop = this.items[this.startIndex].top - this.startOffset
+          // reset start item offset
+          this.startOffset = 0
+        }
+      },
+      _onScroll() {
+        // trigger load
+        if (this.$el.scrollTop + this.$el.offsetHeight > this.heights - this.offset) {
+          this.load()
+        }
+        this.updateIndex()
+        console.log(this.$el.scrollTop)
+        this.$emit('scroll', {scrollTop: this.$el.scrollTop})
+      },
+      _onResize() {
+        this.getStartItemOffset()
+        this.items.forEach((item) => {
+          item.loaded = false
+        })
+        this.loadItems(true)
+      }
+    },
+    components: {
+      CubeLoading
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  .cube-recycle-list
+    position: relative
+    height: 100%
+    overflow-x: hidden
+    overflow-y: auto
+    -webkit-overflow-scrolling: touch
+
+  .cube-recycle-list-main
+    min-height: 100%
+
+  .cube-recycle-list-fake
+    height: 1px
+
+  .cube-recycle-list-invisible
+    top: -1000px
+    visibility: hidden
+
+  .cube-recycle-list-item
+    width: 100%
+    position: absolute
+    box-sizing: border-box
+
+  .cube-recycle-list-transition
+    position: absolute
+    opacity: 0
+    transition-property: opacity
+    transition-duration: 500ms
+
+  .cube-recycle-list-loading
+    overflow: hidden
+
+  .cube-recycle-list-loading-content
+    text-align: center
+    .spinner
+      margin: 10px auto
+      display: flex
+      justify-content: center
+
+  .cube-recycle-list-noMore
+    overflow: hidden
+    margin: 10px auto
+    height: 20px
+    text-align: center
+</style>
+

+import WidgetAvatarGroup from './widget-avatar-group';
+import WidgetIconBtn from './widget-icon-btn';
+import WidgetFav from './widget-fav';
+import WidgetLike from './widget-like';
+import WidgetShare from './widget-share';
+import WidgetTopic from './widget-topic';
+import WidgetAvatar from './widget-avatar';
+
+export default [
+  WidgetAvatarGroup,
+  WidgetIconBtn,
+  WidgetFav,
+  WidgetLike,
+  WidgetShare,
+  WidgetTopic,
+  WidgetAvatar
+];

+<template>
+  <div v-if="avatars" class="avatar-list-wrap">
+    <ul v-if="avatarList" class="avatar-list">
+        <li v-for="(item, index) in avatarList" :key="index" :style="item.style">
+          <WidgetAvatar :src="item.src" :width="100" :height="100"></WidgetAvatar>
+        </li>
+        <li v-if="hasMore">
+          <img src="//img12.static.yhbimg.com/evidenceImages/2019/01/30/17/02fdbbddfc30f18868f91406eed8a70fb9.png?imageMogr2/thumbnail/130x130/extent/130x130/background/d2hpdGU=/position/center/quality/90">
+        </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'WidgetAvatarGroup',
+    props: {
+      avatars: Array,
+      option: {
+        type: Object,
+        default() {
+          return {
+            srcKey: 'src',
+            maxDisplayNum: 0
+          };
+        }
+      }
+    },
+    data() {
+      return {
+        hasMore: false
+      }
+    },
+    computed: {
+      avatarList() {
+        let list = [];
+        let length = this.avatars && this.avatars.length;
+
+        if (this.option.maxDisplayNum > 0 && this.avatars.length > this.option.maxDisplayNum) {
+          length = this.option.maxDisplayNum;
+          this.hasMore = true;
+        }
+
+        for (let i = 0; i < length; i++) {
+          let avt = this.avatars[i];
+          let src = avt;
+
+          if (this.option.srcKey && typeof avt !== 'string') {
+            src = avt[this.option.srcKey] || '';
+          }
+
+          list.push({
+            src: src,
+            style: `z-index: ${length - i};`
+          });
+        }
+
+        return list;
+      }
+    }
+  };
+</script>
+
+<style type="css">
+  .avatar-list-wrap {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .avatar-list {
+    display: flex;
+
+    li {
+      width: 60px;
+      height: 60px;
+      border: 1px solid #fff;
+      border-radius: 50%;
+      overflow: hidden;
+      margin-left: -18px;
+      position: relative;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+</style>

+<template>
+  <ImageFormat class="img-avatar" :src="src" :width="width" :height="height"></ImageFormat>
+</template>
+
+<script>
+export default {
+  name: 'WidgetAvatar',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: Number,
+      default: 35
+    },
+    height: {
+      type: Number,
+      default: 35
+    }
+  },
+  computed: {
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.img-avatar {
+  border-radius: 50%;
+  overflow: hidden;
+}
+</style>

 <template>
-  <div></div>
+  <WidgetIconBtn type="fav" :text="num" :option="option"></WidgetIconBtn>
 </template>
 
 <script>
 export default {
-  name: 'ButtonTopic'
+  name: 'WidgetFav',
+  props: {
+    num: String,
+    option: Object
+  }
 };
 </script>

+<template>
+  <div class="icon-btn" @click="onClick" :style="btnStyle">
+    <i class="iconfont" :class="iconClass" :style="iconStyle"></i>
+    <span v-if="text" class="icon-btn-text" :style="textStyle">{{text}}</span>
+  </div>
+</template>
+
+<script>
+  import { pxToRem } from '../../../utils/helpers.js';
+
+  const classMap = {
+    fav: {
+      default: 'icon-zan',
+      selected: 'icon-zan-fill'
+    },
+    star: {
+      default: 'icon-star',
+      selected: 'icon-star-fill'
+    },
+    share: {
+      default: 'icon-share'
+    },
+    msg: {
+      default: 'icon-msg'
+    }
+  };
+
+  const defaultOption = {
+    canSelect: true,                  // 是否支持选中
+    selected: false,                  // 初始选中状态（不受是否支持选中控制）
+    color: '#444',                    // btn字体颜色
+    selectedColor: '#444',            // btn选中状态字体颜色（不设置默认与非选中一致）
+    iconFontSize: 48,                 // icon字号（单位px）
+    textFontSize: 20,                 // text字号（单位px）
+    textAlign: 'top',                 // text位置, 默认normal（支持normal, top, bottom）
+    textZoom: 0.9,                    // text缩放
+    textAutoChange: false,            // text自动增减，只支持number类型（受是否支持选中控制）
+    emitName: ''                      // 点击触发事件名称
+  };
+
+  export default {
+    name: 'WidgetIconBtn',
+    props: {
+      type: {
+        type: String,
+        default: 'fav'
+      },
+      text: String,
+      option: {
+        type: Object,
+        default() {
+          return defaultOption;
+        }
+      }
+    },
+    data() {
+      return {
+        btnSelected: false,
+        actionClass: ''
+      }
+    },
+    computed: {
+      btnStyle() {
+        let color = this.option.color || defaultOption.color;
+
+        return `color: ${this.btnSelected ? (this.option.selectedColor || color) : color};`;
+      },
+      iconClass() {
+        if (this.actionClass) {
+          return this.actionClass;
+        }
+
+        if (!this.iconObj) {
+          this._icon = classMap[this.type] || classMap.fav;
+        }
+
+        if (this.option.selected) {
+          this.btnSelected = true;
+
+          return this._icon.selected || this._icon.default;
+        }
+
+        return this._icon.default;
+      },
+      iconStyle() {
+        return `font-size: ${pxToRem(this.option.iconFontSize || defaultOption.iconFontSize)};`;
+      },
+      textStyle() {
+        let style = `font-size: ${pxToRem(this.option.textFontSize || defaultOption.textFontSize)};`;
+
+        if (['top', 'bottom'].indexOf(this.option.textAlign) >= 0) {
+          style += ` vertical-align: ${this.option.textAlign};`;
+        }
+
+        if (Number(this.option.textZoom) !== NaN) {
+          style += `transform: scale(${this.option.textZoom}, ${this.option.textZoom});`
+        }
+
+        return style;
+      }
+    },
+    methods: {
+      onClick(evt) {
+        if (this.option.canSelect) {
+          this.btnSelected = !this.btnSelected;
+
+          if (Number(this.text) !== NaN) {
+            this.text = Number(this.text) + (this.btnSelected ? 1 : -1);
+          }
+
+          if (this._icon.selected) {
+            this.actionClass = this.btnSelected ? this._icon.selected : this._icon.default;
+          }
+        }
+
+        this.option.emitName && this.$emit(this.option.emitName, evt);
+      }
+    },
+  };
+</script>
+
+<style type="scss">
+  .icon-btn {
+    display: inline-block;
+    line-height: 1;
+    vertical-align: middle;
+
+    > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .icon-btn-text {
+      line-height: 1.3;
+    }
+  }
+</style>

+<template>
+  <WidgetIconBtn type="star" :text="num" :option="option"></WidgetIconBtn>
+</template>
+
+<script>
+export default {
+  name: 'WidgetLike',
+  props: {
+    num: String,
+    option: Object
+  }
+};
+</script>

 <template>
-  <div></div>
+    <WidgetIconBtn type="share" :text="num" :option="option"></WidgetIconBtn>
 </template>
 
 <script>
 export default {
-  name: 'ButtonShare'
+  name: 'WidgetShare',
+  props: {
+    num: String,
+    option: Object
+  }
 };
 </script>

+<template>
+  <div v-if="topic" class="topic-wrap">
+    #{{topic}}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WidgetTopic',
+  props: {
+    topic: String
+  }
+};
+</script>
+
+<style type="scss">
+  .topic-wrap {
+    display: inline-block;
+    line-height: 1;
+    vertical-align: middle;
+    font-size: 20px;
+    line-height: 44px;
+    padding: 0 12px;
+    border: 2px solid #222;
+    border-radius: 2px;
+    box-sizing: border-box;
+  }
+</style>

@@ -8,7 +8,7 @@ import {Style, Toast, Dialog} from 'cube-ui'; //eslint-disable-line
 import {get} from 'lodash';
 import Lazy from 'vue-lazyload';
 import yoho from 'common/yoho';
-import sdk from 'yoho-activity-sdk';
+import sdk from 'common/sdk';
 import 'statics/scss/common.scss';
 import 'statics/font/iconfont.css';
 

 <template>
   <Layout>
-    <LayoutHeader slot='header' title="推荐" :share="shareData"></LayoutHeader>
+    <LayoutHeader slot='header' title="推荐" :share="shareData">
+      潮物详情
+      <i class="iconfont icon-share-blod" slot="opts"></i>
+    </LayoutHeader>
     <LayoutScroll :infinite="true" :on-fetch="onFetch">
-      <div class="article-item" slot="item" slot-scope="{ data }">
-        <div :id="data.id" class="item">
-          <div class="avatar" :style="{backgroundImage: 'url(' + (data.avatar || '') + ')'}"></div>
-          <div class="bubble">
-            <p>{{ data.name }}</p>
-            <div class="meta">
-              <time class="posted-date">{{ data.time }}</time>
-            </div>
-          </div>
-        </div>
-      </div>
+      <template class="article-item" slot="item" slot-scope="{ data }">
+        <ArticleItem :data="data"></ArticleItem>
+      </template>
     </LayoutScroll>
   </Layout>
 </template>
 
 <script>
+import ArticleItem from './components/article/article-item';
 import {createNamespacedHelpers} from 'vuex';
-import {Scroll, Loading} from 'cube-ui';
 const {mapState, mapActions, mapMutations} = createNamespacedHelpers('article');
 
 export default {
   name: 'ArticlePage',
-  components: {
-    Loading,
-    Scroll
-  },
   data() {
     return {
       list: [],
@@ -35,12 +26,16 @@ export default {
       scrollOptions: {
         bounce: false
       },
-      inx: 0
+      inx: 0,
+      transparentSeek: 0
     };
   },
   computed: {
     ...mapState(['articleList']),
   },
+  mounted() {
+    this.offsetHeight = 200;
+  },
   methods: {
     onFetch() {
       const items = Array.from({length: 50}).map((v, i) => {
@@ -69,12 +64,12 @@ export default {
       }
     }
 
+  },
+  components: {
+    ArticleItem
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.article-item {
-  height: 100px;
-}
 </style>

 <template>
-  <div></div>
+  <div class="article-item-comment">
+    
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'ButtonFav'
+  name: 'ArticleItemComment'
 };
 </script>
+
+<style>
+
+</style>

+<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>
+      <span class="name">Oscar</span>
+    </div>
+    <div class="opts">
+      <Button class="btn-follow">关注</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {Button} from 'cube-ui';
+
+export default {
+  name: 'ArticleItemHeader',
+  components: {Button}
+};
+</script>
+
+<style lang="scss" scoped>
+.article-item-header {
+  display: flex;
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  padding: 16px 30px;
+  width: 400px;
+  height: 100px;
+  overflow: hidden;
+  background-color: #fff;
+
+  .name {
+    font-size: 24px;
+    margin-left: 20px;
+  }
+}
+
+.opts {
+  flex: 1;
+  padding-right: 30px;
+  text-align: right;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  .btn-follow {
+    width: 120px;
+    height: 40px;
+    padding: 0;
+    font-size: 26px;
+    border-radius: 0;
+  }
+}
+</style>

 <template>
-  <div></div>
+  <div class="article-item-intro">
+    
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'ButtonLike'
+  name: 'ArticleItemIntro'
 };
 </script>
+
+<style>
+
+</style>

+<template>
+  <div class="article-item-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
+export default {
+  name: 'ArticleItemSlide'
+};
+</script>
+
+<style>
+
+</style>

+<template>
+  <div class="article-item">
+    <ArticleItemHeader :data="headerData"></ArticleItemHeader>
+    <ArticleItemSlide :data="slideData"></ArticleItemSlide>
+    <ArticleItemIntro :data="introData"></ArticleItemIntro>
+    <ArticleItemComment :data="commentData"></ArticleItemComment>
+  </div>
+</template>
+
+<script>
+import ArticleItemHeader from './article-item-header';
+import ArticleItemSlide from './article-item-slide';
+import ArticleItemIntro from './article-item-intro';
+import ArticleItemComment from './article-item-comment';
+
+export default {
+  name: 'ArticleItem',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  computed: {
+    headerData() {
+
+    },
+    slideData() {
+      
+    },
+    introData() {
+
+    },
+    commentData() {
+      
+    }
+  },
+  components: {ArticleItemHeader, ArticleItemSlide, ArticleItemIntro, ArticleItemComment}
+};
+</script>
+
+<style lang="scss" scoped>
+.article-item {
+  width: 100%;
+  
+}
+</style>

 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1548748619946'); /* IE9 */
-  src: url('iconfont.eot?t=1548748619946#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('iconfont.woff?t=1548748619946') format('woff'),
-  url('iconfont.ttf?t=1548748619946') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1548748619946#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1548818713468'); /* IE9 */
+  src: url('iconfont.eot?t=1548818713468#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1548818713468') format('woff'),
+  url('iconfont.ttf?t=1548818713468') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1548818713468#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -23,15 +23,15 @@
   content: "\e7af";
 }
 
-.icon-right-copy:before {
+.icon-right:before {
   content: "\e7b0";
 }
 
-.icon-zan-copy:before {
+.icon-zan:before {
   content: "\e7b1";
 }
 
-.icon-zan-fill-copy:before {
+.icon-zan-fill:before {
   content: "\e7b2";
 }
 
@@ -43,11 +43,11 @@
   content: "\e7b3";
 }
 
-.icon-zanr:before {
+.icon-grass:before {
   content: "\e7b7";
 }
 
-.icon-zan:before {
+.icon-grass-fill:before {
   content: "\e7b9";
 }
 

@@ -26,13 +26,13 @@ Created by iconfont
     <glyph glyph-name="left" unicode="&#59311;" d="M772.534857-2.3405709999999544A54.857143 54.857143 0 0 0 694.857143-79.87199999999996L269.750857 345.234286a54.857143 54.857143 0 0 0 0 77.531428l425.179429 425.179429a54.857143 54.857143 0 0 0 77.531428-77.531429L386.194286 384 772.534857-2.3405709999999544z"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="right-copy" unicode="&#59312;" d="M251.465143 770.340571A54.857143 54.857143 0 0 0 329.142857 847.872L754.249143 422.765714a54.857143 54.857143 0 0 0 0-77.531428l-425.179429-425.179429a54.857143 54.857143 0 0 0-77.531428 77.531429L637.805714 384 251.465143 770.340571z"  horiz-adv-x="1024" />
+    <glyph glyph-name="right" unicode="&#59312;" d="M251.465143 770.340571A54.857143 54.857143 0 0 0 329.142857 847.872L754.249143 422.765714a54.857143 54.857143 0 0 0 0-77.531428l-425.179429-425.179429a54.857143 54.857143 0 0 0-77.531428 77.531429L637.805714 384 251.465143 770.340571z"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="zan-copy" unicode="&#59313;" d="M653.824 551.168h211.626667c60.672 0 94.549333-46.122667 94.506666-122.325333l-0.170666-2.048-44.288-370.218667c-0.256-66.389333-52.352-120.576-116.864-120.576H128a21.333333 21.333333 0 0 0-21.333333 21.333333V483.242667a21.333333 21.333333 0 0 0 21.333333 21.333333h189.866667c36.693333 109.952 64.554667 190.122667 77.482666 221.056 27.690667 66.218667 54.954667 93.738667 106.752 104.96a66.133333 66.133333 0 0 0 13.866667 1.408c38.144 0 86.357333-26.496 116.48-66.816 33.92-45.354667 47.274667-106.368 28.885333-182.741333l-4.864-20.352-2.645333-10.922667zM149.333333-21.33333300000004h649.301334c40.576 0 74.026667 34.816 74.368 80.512l44.330666 371.456v-0.512c0 53.674667-18.133333 78.378667-51.882666 78.378666H626.773333a21.333333 21.333333 0 0 0-20.778666 26.282667l8.96 37.333333 4.906666 20.309334c15.36 63.829333 4.821333 111.872-21.589333 147.2-22.4 29.994667-58.282667 49.706667-82.304 49.706666a23.978667 23.978667 0 0 1-4.864-0.426666c-36.394667-7.893333-53.632-25.258667-76.373333-79.744-12.928-30.848-42.666667-116.736-81.322667-232.917334a21.333333 21.333333 0 0 0-22.698667-14.421333 15.232 15.232 0 0 1-1.621333 0.085333H149.333333V-21.33333300000004zM298.666667 490.666667h42.666666V-42.66666699999996H298.666667z"  horiz-adv-x="1024" />
+    <glyph glyph-name="zan" unicode="&#59313;" d="M653.824 551.168h211.626667c60.672 0 94.549333-46.122667 94.506666-122.325333l-0.170666-2.048-44.288-370.218667c-0.256-66.389333-52.352-120.576-116.864-120.576H128a21.333333 21.333333 0 0 0-21.333333 21.333333V483.242667a21.333333 21.333333 0 0 0 21.333333 21.333333h189.866667c36.693333 109.952 64.554667 190.122667 77.482666 221.056 27.690667 66.218667 54.954667 93.738667 106.752 104.96a66.133333 66.133333 0 0 0 13.866667 1.408c38.144 0 86.357333-26.496 116.48-66.816 33.92-45.354667 47.274667-106.368 28.885333-182.741333l-4.864-20.352-2.645333-10.922667zM149.333333-21.33333300000004h649.301334c40.576 0 74.026667 34.816 74.368 80.512l44.330666 371.456v-0.512c0 53.674667-18.133333 78.378667-51.882666 78.378666H626.773333a21.333333 21.333333 0 0 0-20.778666 26.282667l8.96 37.333333 4.906666 20.309334c15.36 63.829333 4.821333 111.872-21.589333 147.2-22.4 29.994667-58.282667 49.706667-82.304 49.706666a23.978667 23.978667 0 0 1-4.864-0.426666c-36.394667-7.893333-53.632-25.258667-76.373333-79.744-12.928-30.848-42.666667-116.736-81.322667-232.917334a21.333333 21.333333 0 0 0-22.698667-14.421333 15.232 15.232 0 0 1-1.621333 0.085333H149.333333V-21.33333300000004zM298.666667 490.666667h42.666666V-42.66666699999996H298.666667z"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="zan-fill-copy" unicode="&#59314;" d="M341.333333-55.63733300000001V496.776533a37.546667 37.546667 0 0 0 2.525867-0.2048c29.4912 88.610133 67.1744 199.611733 82.7392 236.885334 25.463467 60.962133 47.9232 83.626667 92.501333 93.252266A45.4656 45.4656 0 0 0 528.5888 827.733333c28.0576 0 71.543467-20.206933 100.420267-58.845866 22.664533-30.3104 45.4656-83.831467 25.531733-166.7072l-4.983467-20.548267-9.0112-37.6832h241.186134c47.786667 0 74.001067-35.771733 74.001066-100.7616v-0.8192l-44.919466-397.5168c-0.273067-55.364267-43.485867-100.352-96.597334-100.352L341.333333-55.705600000000004z m-68.266666 0l-137.0112-0.136534a34.133333 34.133333 0 0 0-34.133334 34.133334V462.506667a34.133333 34.133333 0 0 0 34.133334 34.133333L273.066667 496.776533v-552.482133z"  horiz-adv-x="1024" />
+    <glyph glyph-name="zan-fill" unicode="&#59314;" d="M341.333333-55.63733300000001V496.776533a37.546667 37.546667 0 0 0 2.525867-0.2048c29.4912 88.610133 67.1744 199.611733 82.7392 236.885334 25.463467 60.962133 47.9232 83.626667 92.501333 93.252266A45.4656 45.4656 0 0 0 528.5888 827.733333c28.0576 0 71.543467-20.206933 100.420267-58.845866 22.664533-30.3104 45.4656-83.831467 25.531733-166.7072l-4.983467-20.548267-9.0112-37.6832h241.186134c47.786667 0 74.001067-35.771733 74.001066-100.7616v-0.8192l-44.919466-397.5168c-0.273067-55.364267-43.485867-100.352-96.597334-100.352L341.333333-55.705600000000004z m-68.266666 0l-137.0112-0.136534a34.133333 34.133333 0 0 0-34.133334 34.133334V462.506667a34.133333 34.133333 0 0 0 34.133334 34.133333L273.066667 496.776533v-552.482133z"  horiz-adv-x="1024" />
 
     
     <glyph glyph-name="share" unicode="&#59302;" d="M490.666667 725.333333a21.333333 21.333333 0 1 0 42.666666 0v-469.333333a21.333333 21.333333 0 1 0-42.666666 0V725.333333zM512 723.2L285.738667 496.896a21.333333 21.333333 0 0 0-30.165334 30.208l241.322667 241.322667a21.333333 21.333333 0 0 0 30.208 0l241.322667-241.322667a21.333333 21.333333 0 1 0-30.165334-30.208L512 723.2zM874.666667-10.922667000000047V341.33333300000004a21.333333 21.333333 0 1 0 42.666666 0v-373.589333a21.333333 21.333333 0 0 0-21.333333-21.333333H128a21.333333 21.333333 0 0 0-21.333333 21.333333V341.33333300000004a21.333333 21.333333 0 1 0 42.666666 0v-352.256h725.333334z"  horiz-adv-x="1024" />
@@ -41,10 +41,10 @@ Created by iconfont
     <glyph glyph-name="share-blod" unicode="&#59315;" d="M554.666667 650.3679999999999V256a42.666667 42.666667 0 0 0-85.333334 0V650.3679999999999l-168.533333-168.533333a42.666667 42.666667 0 0 0-60.330667 60.330666l241.365334 241.365334a42.666667 42.666667 0 0 0 60.330666 0l241.365334-241.365334a42.666667 42.666667 0 0 0-60.330667-60.330666L554.666667 650.3679999999999z m298.666666-639.957333V341.33333300000004a42.666667 42.666667 0 0 0 85.333334 0v-373.589333a42.666667 42.666667 0 0 0-42.666667-42.666667H128a42.666667 42.666667 0 0 0-42.666667 42.666667V341.33333300000004a42.666667 42.666667 0 0 0 85.333334 0v-330.922666h682.666666z"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="zanr" unicode="&#59319;" d="M469.333333 213.333333h42.666667a298.666667 298.666667 0 0 1 298.666667 298.666667V554.666667h-42.666667a298.666667 298.666667 0 0 1-298.666667-298.666667v-42.666667z m298.666667 426.666667h102.4a25.6 25.6 0 0 0 25.6-25.6V512a384 384 0 0 0-384-384H384v128a384 384 0 0 0 384 384zM170.666667 725.333333v-42.666666a170.666667 170.666667 0 0 1 170.666666-170.666667h42.666667V554.666667a170.666667 170.666667 0 0 1-170.666667 170.666666H170.666667z m42.666666 85.333334a256 256 0 0 0 256-256v-128H341.333333a256 256 0 0 0-256 256V785.066667a25.6 25.6 0 0 0 25.6 25.6H213.333333zM469.333333 554.666667v-567.466667c0-56.874667-85.333333-56.874667-85.333333 0V554.666667c0 56.874667 85.333333 56.874667 85.333333 0z"  horiz-adv-x="1024" />
+    <glyph glyph-name="grass" unicode="&#59319;" d="M469.333333 213.33333300000004h42.666667a298.666667 298.666667 0 0 1 298.666667 298.666667V554.666667h-42.666667a298.666667 298.666667 0 0 1-298.666667-298.666667v-42.666667z m298.666667 426.666667h102.4a25.6 25.6 0 0 0 25.6-25.6V512a384 384 0 0 0-384-384H384v128a384 384 0 0 0 384 384zM170.666667 725.333333v-42.666666a170.666667 170.666667 0 0 1 170.666666-170.666667h42.666667V554.666667a170.666667 170.666667 0 0 1-170.666667 170.666666H170.666667z m42.666666 85.333334a256 256 0 0 0 256-256v-128H341.333333a256 256 0 0 0-256 256V785.066667a25.6 25.6 0 0 0 25.6 25.6H213.333333zM469.333333 554.666667v-567.466667c0-56.874667-85.333333-56.874667-85.333333 0V554.666667c0 56.874667 85.333333 56.874667 85.333333 0z"  horiz-adv-x="1024" />
 
     
-    <glyph glyph-name="zan" unicode="&#59321;" d="M469.333333 554.666667v-57.301334A383.274667 383.274667 0 0 0 768 640h102.4a25.6 25.6 0 0 0 25.6-25.6V512a384 384 0 0 0-384-384h-42.666667v-140.8c0-56.874667-85.333333-56.874667-85.333333 0V426.666667H341.333333a256 256 0 0 0-256 256V785.066667a25.6 25.6 0 0 0 25.6 25.6H213.333333a256 256 0 0 0 256-256z"  horiz-adv-x="1024" />
+    <glyph glyph-name="grass-fill" unicode="&#59321;" d="M469.333333 554.666667v-57.301334A383.274667 383.274667 0 0 0 768 640h102.4a25.6 25.6 0 0 0 25.6-25.6V512a384 384 0 0 0-384-384h-42.666667v-140.8c0-56.874667-85.333333-56.874667-85.333333 0V426.666667H341.333333a256 256 0 0 0-256 256V785.066667a25.6 25.6 0 0 0 25.6 25.6H213.333333a256 256 0 0 0 256-256z"  horiz-adv-x="1024" />
 
     
     <glyph glyph-name="star" unicode="&#59325;" d="M686.24 283.54909124999995l12.21818156 9.25090875 219.75272719 166.77818156a20.94545438 20.94545438 0 0 1 6.4581825 8.29090969 22.69090875 22.69090875 0 0 1 1.87636312 9.16363594c0 11.82545437-8.77090875 21.07636406-19.11272718 21.07636406H619.34545438l-4.80000001 15.27272719-84.34909031 270.54545437A19.41818156 19.41818156 0 0 1 512 798.54545438c-8.20363594 0-15.62181844-5.84727281-18.28363594-15.01090876l-89.0181825-285.42545437H116.52363594c-10.34181844 0-19.11272719-9.25090875-19.11272719-21.12 0-7.11272719 3.18545437-13.48363594 8.29090969-17.36727281l232.01454562-176.07272719-4.58181844-14.6181825-84.65454562-271.4618175a22.99636406 22.99636406 0 0 1-1.09090875-6.9381825c0-11.86909125 8.81454562-21.07636406 19.11272719-21.07636313 3.92727281 0 7.54909125 1.30909125 10.77818156 3.70909032L512 151.28727281l13.17818156-10.03636406 221.54181844-168.08727281a17.54181844 17.54181844 0 0 1 10.73454563-3.70909032c10.29818156 0 19.11272719 9.20727281 19.11272718 21.07636313a23.04 23.04 0 0 1-1.09090875 6.98181844l-89.23636406 286.03636406z m50.79272719-16.27636406l80.11636406-256.75636313c2.00727281-6.41454563 3.05454563-13.09090875 3.05454469-19.98545531 0-35.52-27.88363594-64.71272719-62.74909031-64.71272719a61.09090875 61.09090875 0 0 0-37.17818157 12.61090969L512 96.43636405999996 303.76727281-61.52727281c-10.69090875-8.16-23.65090875-12.65454563-37.22181844-12.65454563-34.90909125 0-62.74909125 29.23636406-62.74909031 64.71272719 0 6.85090875 1.04727281 13.52727281 3.05454469 19.94181844l80.11636406 256.8-207.57818156 157.57090875A65.32363594 65.32363594 0 0 0 53.81818156 476.98909125c0 35.52 27.84 64.75636406 62.74909125 64.75636312h256.01454563l79.37454562 254.4A62.96727281 62.96727281 0 0 0 512 842.18181844a62.83636406 62.83636406 0 0 0 59.95636406-45.64363688l79.4618175-254.83636312h256.01454563c34.90909125 0 62.74909125-29.19272719 62.74909125-64.71272719 0-9.29454562-1.92-18.41454562-5.58545438-26.74909125a64.58181844 64.58181844 0 0 0-19.98545531-25.39636406l-207.57818156-157.52727188z"  horiz-adv-x="1024" />

@@ -537,6 +537,7 @@ body {
     bottom: 0;
     width: 100%;
     height: 100%;
+    color: #222;
 }
 
 body {

@@ -15,8 +15,8 @@ $action-sheet-picker-cancel-active-color := $color-light-grey-s
 
 // button
 $btn-color := $color-white
-$btn-bgc := $color-regular-blue
-$btn-bdc := $color-regular-blue
+$btn-bgc := #222
+$btn-bdc := #222
 $btn-active-bgc := $color-blue
 $btn-active-bdc := $color-blue
 $btn-disabled-color := $color-white

 export default (store) => {
   if (process.env.VUE_ENV !== 'server') {
-    window.onresize = () => {
-      const {clientWidth, clientHeight} = document.body;
+    // window.onresize = () => {
+    //   const {clientWidth, clientHeight} = document.body;
 
-      store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
-    };
-    setTimeout(() => {
-      const {clientWidth, clientHeight} = document.body;
+    //   store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
+    // };
+    // setTimeout(() => {
+    //   const {clientWidth, clientHeight} = document.body;
 
-      store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
-    }, 0);
+    //   store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
+    // }, 0);
   }
 };

@@ -48,6 +48,12 @@ const webpackConfig = merge(baseConfig, {
           chunks: 'all',
           name: 'lottie',
           test: /lottie-web/,
+        },
+        animejs: {
+          priority: 1,
+          chunks: 'all',
+          name: 'animejs',
+          test: /animejs/,
         }
       }
     }

@@ -80,6 +80,7 @@
     "@babel/preset-env": "^7.2.0",
     "@babel/register": "^7.0.0",
     "@babel/runtime": "^7.2.0",
+    "animejs": "^3.0.1",
     "autoprefixer": "^9.4.2",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",

@@ -131,5 +131,18 @@ module.exports = {
 
       return dict[$0];
     }).replace(/https?:/, '') + '/interlace/1' : '';
+  },
+  pxToRem: (px) => {
+    const rootValue = 40;
+
+    if (typeof px !== 'number') {
+      px = parseInt(`0${px}`);
+    }
+
+    if (px > 2) {
+      return (px / rootValue).toFixed(2) + 'rem';
+    } else {
+      return px + 'px';
+    }
   }
 };

@@ -810,6 +810,10 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "http://npm.yohops.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+animejs@^3.0.1:
+  version "3.0.1"
+  resolved "http://npm.yohops.com/animejs/-/animejs-3.0.1.tgz#8b808bad575e3b6106489d8b04b92bc4062166fe"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "http://npm.yohops.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"