<template>
    <el-dialog :visible.sync="visible" append-to-body>
        <div class="containerBox">
            <div class="content">
                <div class="newsTop">
                    <h1>{{newsData.articleTitle}}</h1>
                    <p> 
                        发表时间：{{newsData.createTime}}
                        来源：{{newsData.articleSrc}}
                    </p>
                </div>
                <div class="note" v-html="newsData.note"></div>
                <div class="footer">
                   <p>网站编辑：{{newsData.createUserName}}</p>
                </div>
            </div>
        </div>
    </el-dialog>
    
</template>

<script>
    import {  getNewsDetail } from "@/api/manage/news"
    export default{
       
    data(){
        return{
            visible:false,
            newsData:[]
        }
    },
    methods:{
        open(id){
            this.visible=true
            getNewsDetail(id).then(res=>{
                this.newsData = res.data.data
            })
        }
    }
    
    }
    
</script>

<style>

    .containerBox {
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        background-color: #ffffff;
    }

    .content {
        width: 100%;

        padding: 0 30px;
    }

    .content .newsTop h1 {
        font-size: 24px;
        color: #333333;
        text-align: center;
    }

    .content .newsTop p {
        font-size: 12px;
        color: #999999;
        margin-top: 40px;
        margin-bottom: 50px;
        text-align: center;
    }

    .section {
        padding: 40px 0;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
    }
    .content .note img{
        display: block;
        margin: 0 auto;
        max-width: 80% !important;
        height: auto;
    }

    .footer {
        font-family: 'PingFangSC-Regular';
        font-size: 16px;
        text-align: right;
    }

   
</style>