<template>
  <div class="message">
    <ul>
      <li v-for="item in messageList" >
        <nuxt-link to="/notice/details"  class="flex-between">
          <div class="t2">{{item.title}}</div>
          <div class="t1">发布时间：{{item.time}}</div>
        </nuxt-link>
      </li>
    </ul>
    <div class="pagination flex-center">
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            layout="total, prev, pager, next, jumper"
            :total="400">
          </el-pagination style="postion:relative;transform: translateX(-50%);">
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage4:4,
        messageList: [{
            title: "工程招投标活动的突出问题与对策思路",
            time: "2020-09-09 18:12"
          },
          {
            title: "工程招投标活动的突出问题与对策思路",
            time: "2020-09-09 18:12"
          },
          {
            title: "工程招投标活动的突出问题与对策思路",
            time: "2020-09-09 18:12"
          }
        ]
      }
    },
    created() {

    },
    methods:{
      handleSizeChange(val) {
           console.log(`每页 ${val} 条`);
         },
         handleCurrentChange(val) {
           console.log(`当前页: ${val}`);
         },
    }
  }
</script>

<style scoped>
  .message {
    border: 1px solid rgba(219, 219, 219, 1);
    height:6.98rem;
    position: relative;

  }

  .message>ul>li {
    width: 9.23rem;
    height: .61rem;
    line-height: .61rem;
    box-sizing: border-box;
    padding-left: 0.3rem;
    padding-right: 0.55rem;
    border-bottom: 1px solid rgba(219, 219, 219, 1);
  }
  .message>ul>li div:last-child{
    color:rgba(151,152,153,1);
  }

  .message>.pagination{
    margin-top: 4rem;
  }
</style>
