jhbigscreen/src/pages/engin/magDetailDialog.vue

<template>
    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" class="mag-detail-dialog">
        <template slot="title">{{info.title }}</template>
        <div style="text-align: center;color:dodgerblue;">
            {{ info.name }} - {{ info.topicName }} - {{ info.deptName }} - {{ info.authorName }} - {{ info.createTime|formatDateTime }}
        </div>
        <div class="scroll" style="max-height: calc(100% - 100px);overflow: auto;">
        <div style="display: flex;justify-content: center;">
            <el-image v-if="info.imageUrl" class="info-image" :src="'/jhapi' + info.imageUrl + '.min.jpg'"
                        :preview-src-list="['/jhapi' + info.imageUrl]"></el-image>
        </div>
        <pre v-html="info.content" style="white-space: break-spaces;"></pre>
    </div>
    </MyDialog>
</template>

<script>
import MyDialog from '../components/MyDialog'
import imageItem from './enginImageItem.vue'
import { tryToJson } from '@/utils/tools'
export default {
    components: {
        MyDialog, imageItem
    },
    name: 'magListDlg',

    data() {
        return {
            show: false,
            info:{},
        };
    },

    mounted() {

    },
    methods: {        
        showDialog(data) {    
            this.show = true
            this.info=data;
        },
    },
};
</script>

<style lang="less" scoped>
.mytable {
    /deep/ th .cell {
        color: aquamarine;
    }
}
</style>
<style lang="less">
.mag-detail-dialog {
    .popup-project-introduction-con{
        height: 100%;
        .popup-project-introduction-details{
            height: 100%;
            .quality-table.special-table{
                height: 100%;
            }
        }
    }
    .popup-project-introduction-min {
        transform: translateY(100px);
    }

    .bg-pagination {
        margin-top: 20px;
    }

    .head-title-tab {
        max-width: unset;

        .head-nav {
            width: 177px;
        }
    }

    
    .el-image.info-image{
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding:6px;
    }
}
</style>