<template>
  <section class="recentEvents">
    <ai-title title="楼栋近期相关事件"/>
    <div class="recentEvents-list">
      <div class="recentEvents-item" v-for="(item, index) in 4" :key="index">
        <div class="recentEvents-item__top">
          <i>[已解决]</i>
          <span>102室与402室矛盾纠纷</span>
        </div>
        <div class="recentEvents-item__middle">
          <span>102室与402室矛盾纠纷</span>
          <em>[张三]</em>
          <span>接到了</span>
          <em>[矛盾调解]</em>
          <span>任务，事件目前</span>
          <i>[已完成]</i>
        </div>
        <div class="recentEvent-item__bottom">2019-06-18 13:35:45</div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "recentEvents"
}
</script>

<style lang="scss" scoped>
.recentEvents {
  font-size: 14px;
  width: 100%;

  .recentEvents-list {
    .recentEvents-item {
      border-bottom: 1px solid #E6E8EE;
      background: transparent;
      padding: 10px;
      box-sizing: border-box;
      .recentEvent-item__bottom {
        color: #999;
        font-size: 12px;
      }

      &:first-child {
        background: #EFF6FF;
        border-bottom: none;
      }

      &:last-child {
        border-bottom: none;
      }

      .recentEvents-item__top {
        display: flex;
      }

      .recentEvents-item__middle {
        margin: 6px 0 10px;
      }

      span {
        color: #666666;
      }

      em {
        color: #2266FF;
        font-style: normal;
      }

      i {
        font-style: normal;
        color: #2EA222;
      }
    }
  }


}
</style>
