<template>
  <!-- 公司新闻 -->
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="公司动态" name="first">
        <div class="News-box">
          <div class="News-left">
            <img src="../../../../assets/images/新闻.png" alt="" />
            <p>探索发展历程,敢于创新未来</p>
            <div class="News-Time">
              2021-07-08
              <span>124人</span>
            </div>
            <div>
              探索发展历程,敢于创新未来究战每常万我先细报离以海体。米许不工节说联数发团始战原价电会。资根种精声没很干
            </div>
          </div>
          <div class="News-right">
            <ul>
              <li>
                <i></i>
                李克强主持召开国务院常务会议确定务会议相关内容，卓识...
                <span>2021-07-08</span>
              </li>
              <li>
                <i></i>
                推进步行街改造提升，李克强强调要与务会议
                <span>2021-07-08</span>
              </li>
              <li>
                <i></i>
                ·省科协举办《政务处分法》宣讲活动
                <span>2021-07-08</span>
              </li>
              <li>
                <i></i>
                推进步行街改造提升，李克强强调要与务会议
                <span>2021-07-08</span>
              </li>
              <li>
                <i></i>
                省科协举办《政务处分法》宣讲活动
                <span>2021-07-08</span>
              </li>
              <li>
                <i></i>
                省科协举办《政务处分法》宣讲活动
                <span>2021-07-08</span>
              </li>
            </ul>
            <div class="block">
              <el-pagination
                background
                :current-page="page.pagenum"
                :page-size="page.pagesize"
                layout="prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文化聚集" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="业务直通车" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="排行榜" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="咨询中心" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: 'CompanyNews',
    data() {
      return {
        total: 0,
        activeName: 'first',
        page: {
          //当前页数
          pagenum: 1,
          //当前每页多少条数据
          pagesize: 4,
        },
      }
    },
    methods: {
      handleClick(tab, event) {},
    },
  }
</script>

<style lang="scss" scoped>
  .el-tabs {
    padding: 0px !important;
  }
  .News-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .News-left {
      width: 50%;
      background-color: #f9f9f9;
      .News-Time {
        margin: 10px 0px;
        color: #888888;
        span {
          padding-left: 40px;
        }
      }
      p {
        margin-top: 10px;
        font-size: 18px;
        font-weight: 600;
      }
      img {
        width: 100%;
      }
    }
    .News-right {
      width: 50%;

      ul {
        margin-left: 30px;
        li {
          height: 45px;
          line-height: 45px;
          i {
            display: inline-block;
            margin-right: 10px;
            line-height: 45px;
            width: 5px;
            height: 5px;
            background-color: #0080fe;
            border-radius: 50%;
          }
        }
      }
      .block {
        float: right;
        margin-top: 10px;
      }
    }
  }
</style>
