<template>
    <div>
        <el-row>
            <div class="content_title">
                <span>行业动态</span>
            </div>
        </el-row>
        <el-row>
            <div class="content_list">
                <div
                    class="notice"
                    v-for="item in tableData"
                    :key="item.id"
                    @click="$router.push({ name: 'article', query: { id: item.id, typeId: 1004 } })"
                >
                    <div class="notice_con">
                        <i></i>
                        <div>
                            {{ item.title }}
                        </div>
                    </div>
                    <span class="notice_time">{{ item.createdAt }}</span>
                </div>
            </div>
        </el-row>
        <el-row class="pagination">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalElements"
            >
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
import pageableTable from '@/mixins/pageableTable';
import QueryString from 'qs';
export default {
    mixins: [pageableTable],
    name: '',
    data() {
        return {
            url: '/article/all',
            query: { mainType: '行业动态', status: 'PASS' }
        };
    },
    methods: {
        beforeGetData() {
            return { query: this.query, sort: 'createdAt,desc' };
        }
    }
};
</script>
<style lang="less" scoped>
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
}

.notice {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    &:hover .notice_con div {
        color: #bf1616;
    }
    .notice_con {
        i {
            float: left;
            width: 4px;
            height: 4px;
            background: #e3e4e6;
            margin: 10px 6px 10px 0px;
        }
        div {
            float: left;
            width: 755px;
            height: 24px;
            font-size: 14px;
            color: #000000;
            line-height: 24px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .notice_time {
        // width: 75px;
        height: 24px;
        font-size: 14px;
        color: #939599;
        line-height: 24px;
    }
}
.pagination {
    margin-top: 40px;
    text-align: center;
}
.index02 {
    // .list_con {
    //     width: 500px !important;
    // }
    .author {
        color: #939599;
        font-size: 14px;
    }
    .num {
        font-size: 14px;
        color: #c8c9cc;
    }
}
</style>
