<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <template v-for="(list,index) in four">
        <div id="news"
             :key="index"
             @click="$jump('newsDetails')">
          <div class="news-box">
            <img src="../../../static/img/img5.png"
                 alt />
            <section>
              <h3>因势而谋书写能源转型发展大文章</h3>
              <aside>
                <span>来源:央视网</span>
                <span>发布时间:2019-08-08</span>
                <span>浏览量:11123</span>
              </aside>
              <p>近日,国家能源局召开党组中心组学习(扩大)会议,专题学习《习近平新时代中国特色社会主义思想学习纲要》中关于“掌握马克思主义 近日,国家能源局召开党组中心组学习(扩大)会议,专题学习《习近平新时代中国特色社会主义思想学习纲要》中关于“掌握马克思主义 近日,国家能源局召开党组中心组学习(扩大)会议,专题学习《习近平新时代中国特色社会主义思想学习纲要》中关于“掌握马克思主义</p>
            </section>
          </div>
        </div>
      </template>
      <!-- 分页按钮 -->
      <div class="page">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-size="pageSize"
                       background
                       layout="prev, pager, next"
                       :total="10"></el-pagination>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
/* eslint-disable */
import HeaderNav from "../../components/HeaderNav";
/* eslint-disable */
import FooterNav from "../../components/FooterNav";
export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data() {
    return {
      index_num: 0,
      pageSize: 1,
      currentPage: 1,
      totalCount: 1,
      four: [1, 2, 3, 4]
    };
  },
  computed: {},
  watch: {},
  methods: {
    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() {}
};
</script>

<style lang='scss' scoped>
.wrapper {
  min-width: 1280px;
  box-sizing: border-box;
  position: relative;

  #box {
    width: 1200px;
    background-color: #ffffff;
    margin: 40px auto 80px;
    box-sizing: border-box;
    padding: 21px 30px 100px 11px;

    .news-box {
      width: 1159px;
      height: 255px;
      padding: 14px 7px 40px 19px;
      box-sizing: border-box;
      border-bottom: 1px solid #e6e6e6;
      margin-bottom: 26px;

      img {
        width: 290px;
        height: 200px;
        border-radius: 10px;
      }

      display: flex;
      justify-content: space-between;
      align-items: center;

      section {
        width: 813px;
        height: 96%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        h3 {
          font-family: "MicrosoftYaHei";
          font-size: 22px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        aside {
          width: 434px;
          height: 17px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #999999;
        }

        p {
          width: 813px;
          height: 100px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 36px;
          letter-spacing: 0px;
          color: #666666;
          overflow: hidden;
          -o-text-overflow: clip;
          text-overflow: clip;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          word-wrap: break-word;
          white-space: normal;
        }
      }
    }

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

      /deep/ .el-pagination.is-background .el-pager li {
        color: #333 !important;
      }

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

      /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: #666;
      }

      /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: #666;
      }
    }
  }
}
</style>
