<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: '/policy' }">政策法规</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ article.subType }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <div class="title">
                {{ article.title }}
            </div>
            <div class="time">发布日期：{{ article.createdAt }}</div>
            <div class="divider"></div>
            <div class="article-content" v-html="article.content"></div>
            <template v-if="article.attachment && article.attachment.length">
                <div class="divider" style="margin-bottom:20px;"></div>
                <el-link v-for="(item, i) in article.attachment" :key="i" :href="item.url" :download="item.name">{{
                    item.name
                }}</el-link>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    name: 'article',
    data() {
        return {
            article: {}
        };
    },
    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 {
    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>
