<template>
  <div id="list">
    <div v-for="(item,index) in listData" :key="index">
      <a class="infor" :title="item.infor"><i :class="item.readState?'noread':'readed'" class="readState">·</i>{{ item.infor }}</a>
      <a class="time">{{ item.time }}</a>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {}
  },
  methods: {
    selectItem (item, index) {
      this.activeIndex = index
    }
  }
}
</script>

<style lang='less' scoped>
#list {
  width: 100%;
  & > div {
    width: 100%;
    line-height: 4rem;
    font-size: 1.6rem;
    color: #171d33;
    padding: 0 1.2rem;
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;

    & > a {
      font-size: 1.6rem;
      color: #171d33;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      vertical-align: middle;
      & > i {
        font-size: 4.4rem;
        color: #fff;
        line-height: 2rem;
        display: inline-block;
        vertical-align: middle;
        margin-top: -1.5rem;
        margin-right: 0.8rem;
        font-style: normal;
      }
    }

    .noread {
      color: #e60012;
    }
    .readed {
      opacity: 0;
    }
    &:hover a{
      color: #009fe2;
      text-decoration: underline;
    }

    & > a.time {
      text-align: right;
      text-decoration: none !important;
    }
  }
}
</style>
