<template>
  <div class="association">
    <toptip :currTitle="currTitle"></toptip>
    <template>
      <el-table :data="newList" style="width: 100%">
        <el-table-column class="news-wrapper">
          <template slot-scope="scope">
            <div @click="goto(scope.row.id)" class="newspan">
              <i class="el-icon-caret-right"></i>{{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="page-box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="count"
        prev-text="上一页"
        next-text="下一页"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { article_list, article_info } from "../../request/api";
import Toptip from "../../components/toptip";
export default {
  metaInfo: {
    title: "科协新闻",
  },
  name: "Association",
  components: {
    Toptip,
  },
  data() {
    return {
      currTitle: "科协新闻",
      newList: [],
      count: 0,
      page: 1,
      limita: 10,
    };
  },
  created() {
    this.getNewList();
  },
  methods: {
    getNewList() {
      article_list({
        category_id: 35,
        page: this.page,
        limita: this.limita,
      }).then(({ data: res }) => {
        this.newList = res.data.list;
        this.count = res.data.count;
        this.page += 1;
        console.log(this.newList);
      });
    },
    goto(id) {
      console.log(id);
      this.$router.push({ path: "detail", query: { id: id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-box {
  margin-top: 40px;
  width: 858px;
  display: flex;
  justify-content: center;
}
.newspan {
  display: inline-block;
  width: 858px;
  line-height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 18px;
  cursor:pointer;
}
.newspan:hover {
  color: red;
}
</style>