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

<script>
export default {
  name: 'Questions',
  data() {
    return {
      list: [
        {name: '张衡', question: '高温天气草鱼生病是不是养殖密度', time: 2, reply: 2},
        {name: '李星辰', question: '与头部和脊背发黑，独游，不吃食物', time: 10, reply: 0},
        {name: '王兴鑫', question: '突然提前至夜间10时，浮头次数增多', time: 12, reply: 10},
        {name: '周彦', question: '水温12-20℃的时候，鱼种成群打架', time: 14, reply: 4},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.questions
  width 100%
  height 100%
  >p
    text-align center
  >div
    display flex
    align-items center
    justify-content space-around
    padding .7rem 0
    &+div
      border-top .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>
