zizhujianzhan_web/components/template/component/article/900x1384/1.vue

<template>
    <div class="articleMainBox">
        <div class="articleTitle">{{templateData.data.title}}</div>
        <div class="articleInfo">
            <div>来源：{{templateData.data.copyfrom}}</div>
            <div>作者：{{templateData.data.author}}</div>
            <div>时间：{{templateData.data.updated_at}}</div>
        </div>
        <div class="articleContent" v-html="templateData.data.content" @click="openPreview"></div>
        <div class="statementBox" v-if="templateData.data.copyfrom != '本网'">
            <div class="statementBoxLeft">
                <div>原文链接：http://nmyj.xlgl.gov.cn/xzxk/zsyz/202112/t20211201_2771045.html</div>
                <div>[免责声明] 本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归原作者所有，如涉及作品内容、版权和其它问题，请在30日内与本网联系，我们将在第一时间处理。</div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    templateData:Object,//新闻正文
});
</script>

<style lang="less" scoped>
.articleMainBox {
    width: 900px;
    margin: 0 auto;
    display: block;
    .articleTitle {
        width: 900px;
        font-size:30px;
        color:#333333;
        font-weight:bold;
    }
    .articleInfo {
        width: 900px;
        color:#999999;
        font-size:14px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 30px;
        div{
            margin-right: 40px;
        }
    }
    .articleContent {
        width: 900px;
        padding-top:60px;
        font-size:20px;
        margin-bottom: 60px;
        img{
            display: block;
            margin: 0 auto;
            margin-bottom: 60px;
        }
        .fontBold {
            font-weight:bold;
        }
        div {
            text-indent: 2em;
            margin-bottom: 28px;
        }
    }
    .statementBox {
        width: 900px;
        height: 143px;
        border-top: 1px solid #D9D9D9;
        .statementBoxLeft {
            width: 900px;
            height: 143px;
            padding-top: 40px;
            text-align: left;
            box-sizing: border-box;
            font-size:20px;
            color:#999999;
        }
    }
}  
</style>