<template>
  <div class="questions">
    <p>
      年问答量：<span class="blue"><m-count color="#5bd5ff" :value="14586" :decimal="0"/> 次</span>&nbsp;&nbsp;&nbsp;
      月问答量：<span class="blue"><m-count color="#5bd5ff" :value="1865" :decimal="0"/> 次</span>
    </p>
    <m-scroll :length="list.length" :limit="4">
      <div v-for="(item, index) in list" :key="index" class="item">
        <span>{{item.name}}</span>
        <p>问：{{item.question}}</p>
        <span>{{item.time}}分钟前</span>
        <span class="blue"><Icon type="md-text" /> {{item.reply}}</span>
      </div>
    </m-scroll>
  </div>
</template>

<script>
export default {
  name: 'Questions',
  data() {
    return {
      list: [
        {name: '张恒', question: '高温天气草鱼生病是不是和养殖密度有很大的关系？', time: 2, reply: 3},
        {name: '李星辰', question: '鱼头部和脊背发黑，独游，不吃食物到底是什么原因？', time: 8, reply: 6},
        {name: '王兴鑫', question: '昨天夜间10时，鱼浮头的次数明显变得频繁了很多，什么原因？', time: 15, reply: 2},
        {name: '周岩', question: '水温12-20℃的时候，鱼种成群打架，什么原因？', time: 26, reply: 3},
        {name: '汪天', question: '为什么鱼病常在夏秋两季流行?', time: 60, reply: 8},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.questions
  width 100%
  height 100%
  overflow hidden
  >p
    text-align center
  .item
    display flex
    align-items center
    justify-content space-around
    padding .7rem 0
    border-bottom .1rem solid $cardFontColor
    span
      color $edgeColor
      display inline-block
      &:first-child
        width 4rem
      &:nth-of-type(2)
        width 4.5rem
      &:last-child
        width 2.5rem
      &.blue
        color $cardFontColor
    p
      width 56%
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
</style>
