update code

src/pages/engin/magDetailDialog.vue

@@ -0,0 +1,89 @@
+<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"></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>

src/pages/engin/magListDialog.vue

@@ -5,9 +5,8 @@
             <div v-for="it in navList" :class="nav == it.id ? 'head-nav active' : 'head-nav'" :key="it.id"
                 @click="doNav(it.id)">{{ it.topic }}</div>
         </div>
-        <el-table :data="tableData">
-            <el-table-column label="期刊" align="center" prop="name" />
-            <el-table-column label="栏目" align="center" prop="topicName" />
+        <el-table :data="tableData" @row-click="doRowClick">
+            <el-table-column label="期刊" align="center" prop="name" />            
             <el-table-column label="单位" align="center" prop="deptName" />
             <el-table-column label="作者" align="center" prop="authorName" />
             <el-table-column label="期刊主图" align="center" prop="imageUrl">
@@ -28,6 +27,7 @@
         <el-pagination layout="total,prev, pager, next" :hide-on-single-page="true"
             @current-change="handleCurrentChange" :total="total" :page-size="size" :current-page.sync="index"
             class="bg-pagination"></el-pagination>
+        <magDetailDialog ref="dlg"></magDetailDialog>
     </MyDialog>
 </template>
 
@@ -35,9 +35,11 @@
 import MyDialog from '../components/MyDialog'
 import imageItem from './enginImageItem.vue'
 import { tryToJson } from '@/utils/tools'
+import magDetailDialog from './magDetailDialog.vue'
 export default {
     components: {
-        MyDialog, imageItem
+        MyDialog, imageItem,
+        magDetailDialog
     },
     name: 'magListDlg',
 
@@ -62,6 +64,9 @@ export default {
     },
 
     methods: {
+        doRowClick(row,col,e){
+            this.$refs.dlg.showDialog(row);
+        },
         handleCurrentChange(n) {
             this.index = n;
             this.loadData();
@@ -129,22 +134,13 @@ export default {
         }
     }
 
-    .image-list {
-        display: grid;
-        grid-template-columns: 25% 25% 25% 25%;
-
-        .engin-image-item {
-            height: 300px;
-
-            .div-img {
-                width: 100%;
-
-                .el-image {
-                    width: 100%;
-                }
-            }
-
-        }
+    
+    .el-image.row-image{
+        height: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding:6px;
     }
 }
 </style>