<template>
  <div class="materialist clear">
    <ul :style="{width: ulWidth}">
      <li v-for="(item,index) in imgList" :key="index" @click="handleClick(item)" class="fl">
        <img  v-for="(mater,index) in item.content.news_item" :key="index" :src="mater.thumb_url">
      </li>
    </ul>
  </div>
</template>

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