<template>
    <div class="article">
        <div class="container">
            <!-- 面包屑 -->
            <el-row>
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/newsList' }">通知公告</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ article.mainType }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <div class="title">
                {{ article.title }}
            </div>
            <div class="time">发布日期：{{ article.createdAt }}</div>
            <div class="source" v-if="article.source">来源：{{ article.source }}</div>
            <div class="divider"></div>
            <div class="article-content" v-html="article.content"></div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'article',
    data() {
        return {
            article: {},
            breadcrumb: ''
        };
    },
    created() {
        if (this.$route.query.id) {
            this.$http.get(`/article/get/${this.$route.query.id}`).then(res => {
                this.article = res;
            });
        }
    }
};
</script>
<style lang="less" scoped>
.el-breadcrumb {
    height: 60px;
    line-height: 60px;
    /deep/.el-breadcrumb__inner {
        font-size: 12px;
        color: #000 !important;
    }
}
.container {
    width: 1200px;
    margin: auto;
    padding: 30px 100px;
    padding-top: 0px;
    box-sizing: border-box;
}
.article {
    // padding: 30px 100px;
    background: white;
}
.title {
    font-size: 24px;
    font-weight: 500;
    color: black;
    line-height: 33px;
    text-align: center;
}
.time,
.source {
    text-align: center;
    color: black;
    font-size: 14px;
    margin-top: 20px;
}
.divider {
    height: 1px;
    background: @border;
    margin-top: 20px;
}
.article-content {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 20px;
}
</style>
