<template>
  <div class="materialist clear">
    <ul>
      <li v-for="(item,index) in imgList" :key="index" @click="handleClick(item)">
        <img :src="item.thumb_url">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['imgList'],
  methods: {
    handleClick (item) {
      this.$emit('sendid', item.thumb_media_id)
    }
  }
}
</script>
<style lang="stylus" scoped>
.materialist
  ul
    width 100%
    height 217px
    white-space nowrap
    overflow-x auto
    margin-bottom 5px
    li
      display inline-block
      margin-left 5px
      img
        width 240px
        height 200px
    li img:hover
      border 1px solid skyblue
      box-shadow 2px 2px 2px skyblue
/* 定义滚动条高宽及背景 */
::-webkit-scrollbar
  height 6px
/* 滑块 */
::-webkit-scrollbar-thumb
  border-radius 7px
  background-color rgba(127, 127, 127, 1)
</style>
