FE_occupationlab_client/src/pages/info/details/index.vue

<template>
    <div class="wrap">
        <breadcrumb ref="breadcrumb" data="资讯" :query="breadcrumbQuery"></breadcrumb>
        <div class="page">
            <h6 class="title">{{title}}</h6>
            <div class="metas">
                <span>作者： {{author}}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{date.replace(' 00:00:00','')}}</span>
                <el-divider direction="vertical"></el-divider>
                <span>浏览量：{{viewCount}}</span>
            </div>

            <div class="cover">
                <img :src="coverUrl" alt="">
            </div>
            <div class="content ql-editor" v-html="content"></div>
        </div>
    </div>
</template>
<script>
import { Loading } from 'element-ui';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import breadcrumb from '@/components/breadcrumb'
export default {
    data() {
        return {
            firstName: this.$route.query.first,
            secondName: this.$route.query.second,
            breadcrumbQuery: {
              parentId: this.$route.query.parentId,
              name: this.$route.query.first
            },
            id: this.$route.query.id,
            coverUrl: '',
            author: '',
            date: '',
            title: '',
            content: '',
            viewCount: 0,
            loadIns: null
        }
    },
    components: {
        breadcrumb
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            this.loadIns = Loading.service()
            this.$get(`${this.api.getArticle}/${this.id}`)
                .then(res => {
                    let data = res.article
                    this.coverUrl = data.coverUrl
                    this.author = data.author
                    this.date = data.date
                    this.title = data.title
                    this.content = data.content
                    this.viewCount = data.viewCount
                    this.$forceUpdate()
                    this.$refs.breadcrumb.update(this.firstName + '/' + this.title)
                    this.loadIns.close()
                })
                .catch(err => {
                    this.loadIns.close()
                });
        },
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    padding-bottom: 20px;
    .title{
        margin-top: 30px;
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        color: #0B1D30;
    }
    .metas{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 32px;
        margin: 16px 0 32px;
        span{
            display: inline-flex;
            align-items: center;
            color: #999;
            font-size: 12px;
            img{
                width: 18px;
                margin-right: 5px;
            }
        }
        .el-divider {
            margin: 0 16px;
        }
    }
    .cover{
        margin: 20px 0;
        text-align: center;
        img{
            width: 800px;
        }
    }
    .content{
        line-height: 1.8;
        font-size: 16px;
        text-indent: 2em;
        /deep/img{
            display: block;
            width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
    }
}
</style>