<template>
  <div class="wr">
    <template v-for="(item,index) in mData">
      <div class="page" :key="index">
        <time>
          <span class="iconfont icon-shizhong"></span>
          {{item.time}}
        </time>
        <div id="box">
          <template v-for="(list,index) in item.shujv">
            <div class="box" :key="index">
              <span class="iconfont icon-changyongtubiao-mianxing-"></span>
              <aside>
                <span class="span1">活动策划是提高市场占有率的有效行为</span>
                <span class="span2">来源板块：统一战线</span>
              </aside>
              <p>活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可升企...升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划</p>
            </div>
          </template>
        </div>
      </div>
    </template>
    <!-- 分页按钮 -->
    <div class="pages">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        background
        layout="prev, pager, next"
        :total="10"
      ></el-pagination>
    </div>
    <!-- end -->
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      pageSize: 1,
      currentPage: 1,
      totalCount: 1,
      mData: [
        { time: '2019-10-14', shujv: [1, 2, 3, 4] },
        { time: '2019-10-14', shujv: [1, 2, 3, 4, 5] }
      ],
      num: 1019
    }
  },
  computed: {},
  watch: {},
  methods: {
    sendMsgToParent () {
      this.$emit('listenToChildExen', this.num)
    },
    handleSizeChange (val) {
      this.pageNum = val
      this.getPackData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getPackData()
    },
    getPackData () {}
  },
  created () {
    this.currentPage = Number(localStorage.getItem('pagination')) || 1
    this.handleCurrentChange(this.currentPage)
  },
  mounted () {
    this.sendMsgToParent()
  }
}
</script>

<style lang='scss' scoped>
.wr {
  width: 934px;
  height: 1019px;
  background-color: #ffffff;
  box-sizing: border-box;
  padding-top: 35px;

  .pages {
    margin-top: 60px;
    margin-right: 24px;
    height: 36px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #e60012;
    }

    /deep/ .el-icon.el-icon-arrow-left::before {
      content: "上一页";
      font-family: "MicrosoftYaHei";
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #646464;
    }

    /deep/ .el-pagination .btn-prev {
      width: 80px;
    }

    /deep/ .el-pagination .btn-next {
      width: 80px;
    }

    /deep/ .el-icon.el-icon-arrow-right::before {
      content: "下一页";
      font-family: "MicrosoftYaHei";
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #646464;
    }
  }

  .page {
    margin-bottom: 60px;
    height: 364px;
    box-sizing: border-box;

    #box {
      overflow-y: scroll;
      height: 375px;
      padding-bottom: 40px;
      box-sizing: border-box;

      &::-webkit-scrollbar {
        width: 0px;
      }

      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .box {
      width: 875px;
      height: 135px;
      box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
      border-radius: 5px;
      margin-top: 40px;
      padding: 31px 23px 32px 28px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:nth-of-type(1) {
        margin-top: 30px;
      }

      .iconfont {
        font-size: 23px;
        color: #fec300;
        position: absolute;
        right: 23px;
        top: 23px;
      }

      aside {
        width: 689px;
        height: 23px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .span1 {
          display: inline-block;
          width: 60%;
          font-family: "MicrosoftYaHei";
          font-size: 22px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #333333;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .span2 {
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          letter-spacing: 1px;
          color: #999999;
        }
      }

      p {
        height: 20px;
        line-height: 20px;
        width: 100%;
        font-family: "MicrosoftYaHei";
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #666666;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    time {
      font-family: "MicrosoftYaHei";
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #666666;
      display: flex;
      align-items: center;
      margin-left: 30px;

      .iconfont {
        font-size: 24px;
        margin-right: 24px;
      }
    }
  }
}
</style>
