<template> <d2-container class="companyNews"> <headerLayout active="0"></headerLayout> <div class="news-wrapper"> <div class="news-title d-flex jc-between"> <label>公司新闻</label> <span @click="goBack">< 返回</span> </div> <div class="news-content"> <el-table stripe :data="tableData" style="width: 100%"> <el-table-column prop="title"> <template slot-scope="scope"> <div @click.stop="goDetail(scope.row)">{{scope.row.title}}</div> </template> </el-table-column> <el-table-column align="right" prop="releaseDate"> <template slot-scope="scope"> <div @click.stop="goDetail(scope.row)">{{scope.row.releaseDate}}</div> </template> </el-table-column> </el-table> <Pagination v-show="pageObj.total > 0" :total="pageObj.total" layout="->,total, prev, pager, next" :page.sync="pageObj.pageNo" :limit.sync="pageObj.pageSize" @pagination="pageChange" /> </div> </div> </d2-container> </template> <script> import headerLayout from '@/components/headerLayout/index' // 公共头部 import Pagination from '@/components/Pagination' import * as API_BASIC from '@/api/sys.basic.js' export default { components: { headerLayout, Pagination }, data () { return { pageObj: { pageNo: 1, total: 1, pageSize: 10 }, tableData: [] } }, mounted () { this.getNewsList() }, methods: { // 查询概况页面数据 getNewsList () { API_BASIC.getNewsPageList({ _index: this.pageObj.pageNo, _size: this.pageObj.pageSize }).then(res => { this.tableData = res.data.records this.pageObj.total = Number(res.data.total) }) }, goDetail (row) { this.$router.push({ path: '/newsDetail', query: { row: JSON.stringify(row) } }) }, goBack () { this.$router.back(-1) }, // 翻页 pageChange (page) { this.pageObj.pageSize = page.limit this.pageObj.pageNo = page.page this.getNewsList() } } } </script> <style lang="scss" scoped> .companyNews { .news-wrapper { padding: .5rem 1rem; } .news-title { width: 100%; height: .54rem; font-size: .24rem; line-height: 1.5; color: $color-primary; border-bottom: .02rem solid $color-primary; margin-bottom: .5rem; span { cursor: pointer; } } .news-content { ::v-deep .el-table { font-size: .16rem; color: #fff; margin-bottom: .24rem; background-color: rgba(47, 219, 243, 0.05); &::before { height: 0; } .el-table__header-wrapper { display: none; } td { border-bottom: none; } .el-table__row--striped td { background-color: $color-bg; } tr { background-color: $color-bg; cursor: pointer; &.is-leaf { border-bottom: none; } } .el-table__body tr:hover>td { background-color: rgba(47, 219, 243, 0.15); } } ::v-deep .el-pagination.is-background { .el-pager li:not(.disabled):hover { color: $color-primary; } .el-pager li:not(.disabled).active { background-color:$color-primary; color: #fff; } } } } </style>