<template>
  <div class="list1">
    <div class="container">
      <div class="list">
        <div class="list__item" v-for="i in 8">
          <div class="list__item--name">教育部关于公布《高等学校信息公开事项清单》的通知</div>
          <div class="list__item--date">{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
          <div class="list__item--btn">预览</div>
          <div class="list__item--download">
            <i class="el-icon-download"></i>
          </div>
        </div>
      </div>

      <el-pagination
        class="page"
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  computed: {},
}
</script>

<style scoped lang="scss">
.list1 {
  background: #f8f8f8;

  padding: 31px 18.75%;
}
.container {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);

  padding: 24px 23px 44px 22px;

}
.list {

  &__item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F8F8F8;

    padding: 11px 9px 11px 27px;
    position: relative;

    &::before {
      content: '';
      height: 6px;
      width: 6px;
      border-radius: 6px;
      background: #cad8e4;

      transform: translateY(-50%);
      position: absolute;
      left: 0;
      top: 50%;
    }
    &--name {
      font-size: 13px;
      color: #333;
      flex: 1;

    }
    &--date {
      font-size: 13px;
      color: #999999;

      margin-right: 42px;
    }
    &--btn {
      cursor: pointer;
      font-size: 13px;
      color: #247EC3;
      border-radius: 30px;
      border: 1px solid #247EC3;
      transition: all .2s;

      padding: 7px 17px;
      margin-right: 23px;

      &:hover {
        color: #fff;
        background: #247EC3;
      }
    }
    &--download {
      cursor: pointer;
      & > i{
        font-size: 16px;
        color: #247EC3;
      }

      padding-right: 9px;
    }
  }
}

.page {
  display: flex;
  justify-content: center;

  margin-top: 30px;

  & ::v-deep .btn-prev, ::v-deep .btn-next ,::v-deep .el-pager > li {
    width: 39px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    border-radius: 100px;
    background: #fff;
    transition: all .2s;
  }

  & ::v-deep .btn-prev, ::v-deep .btn-next {
    background: #fff;
    border: 1px solid #e7e7e7;
  }
}
</style>
