优化

src/views/columnListMix.vue

@@ -2,7 +2,11 @@
   <div style="height:calc(100%);">
     <div v-if="detailData && tabList[selectMenuIndex] && tabList[selectMenuIndex].type ===1" :class="isMenu ? 'new-detial-info new-menu-detial-info' :'new-detial-info'">
       <h2 class="detail-title">{{ detailData.overTitle }}</h2>
-      <div class="detail-date">发布时间：{{ detailData.create_time }}</div>
+      <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 20px;">
+        <p>来源：{{ detailData.source ? detailData.source :'-' }}</p>
+        <p style="margin:0 10px;">作者：{{ detailData.author? detailData.author :'-' }}</p>
+        <p>责编：{{ detailData.editor ? detailData.editor : '-' }}</p>
+      </div>
       <div class="detail-content" v-html="detailData.introHtml" />
     </div>
     <ul v-else-if="infoList.length !== 0 && tabList[selectMenuIndex] && [2].includes(tabList[selectMenuIndex]?.type)" class="activity-list scroll-container" :style="isMenu ? 'height: calc(100vh - 200px)':''">
@@ -258,7 +262,8 @@ export default {
       this.$router.push({
         name: 'ColumnListMixDetail',
         query: {
-          ...this.$route.query
+          ...this.$route.query,
+          isMenu: this.isMenu
         }
       })
       localStorage.setItem('columnListMixDetail', JSON.stringify(item))
@@ -290,10 +295,6 @@ export default {
   line-height: 100px;
   text-align: center;
 }
-.detail-date{
-  text-align: center;
-  margin-bottom: 20px;
-}
 .detail-content{
   ::v-deep p{
     span{

src/views/columnListMixDetail.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="detail-content">
+  <div class="detail-content" :style="{ height: !isMenu ? 'calc(100%)' : 'calc(100% - 60px)' }">
     <div v-if="detailData" class="detail-info">
       <h2 class="detail-title">{{ detailData.overTitle }}</h2>
-      <div class="detail-date">发布时间：{{ detailData.create_time }}</div>
+      <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 20px;">
+        <p>来源：{{ detailData.source ? detailData.source :'-' }}</p>
+        <p style="margin:0 10px;">作者：{{ detailData.author? detailData.author :'-' }}</p>
+        <p>责编：{{ detailData.editor ? detailData.editor : '-' }}</p>
+      </div>
       <div class="detail-content" v-html="detailData.introHtml" />
     </div>
 
@@ -23,7 +27,8 @@ export default {
   data() {
     return {
       detailData: null,
-      loading: true
+      loading: true,
+      isMenu: false
     }
   },
   created() {
@@ -32,7 +37,7 @@ export default {
   methods: {
     loadDetailData() {
       this.loading = true
-
+      this.isMenu = this.$route.query.isMenu
       const storedData = localStorage.getItem('columnListMixDetail')
       if (storedData) {
         this.detailData = JSON.parse(storedData)
@@ -76,10 +81,6 @@ export default {
     line-height: 100px;
     text-align: center;
   }
-  .detail-date{
-    text-align: center;
-    margin-bottom: 20px;
-  }
   .detail-content{
     ::v-deep p{
       span{
@@ -92,6 +93,5 @@ export default {
       }
     }
   }
-
 }
 </style>

src/views/imgTxtDetail.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="content-main introduction-main">
-    <div class="new-detial-info" v-html="rawHtml" />
+    <div v-if="detailData" class="detail-info new-detial-info">
+      <h2 class="detail-title">{{ detailData.overTitle }}</h2>
+      <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 20px;">
+        <p>来源：{{ detailData.source ? detailData.source :'-' }}</p>
+        <p style="margin:0 10px;">作者：{{ detailData.author? detailData.author :'-' }}</p>
+        <p>责编：{{ detailData.editor ? detailData.editor : '-' }}</p>
+      </div>
+      <div class="detail-content" v-html="detailData.introHtml" />
+    </div>
   </div>
 </template>
 
@@ -10,7 +18,8 @@ export default {
   name: 'ImgTxtDetail',
   data() {
     return {
-      rawHtml: ''
+      rawHtml: '',
+      detailData: {}
     }
   },
   created() {
@@ -41,9 +50,9 @@ export default {
       FetchInitQueryTopicContext(params).then(res => {
         console.log(res)
         if (res && res.content.length > 0) {
-          this.rawHtml = res.content[0].introHtml
+          this.detailData = res.content[0]
         } else {
-          this.rawHtml = '暂无数据'
+          this.detailData = {}
         }
       }).catch(() => {
         this.$message.error('接口错误')
@@ -55,5 +64,26 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/index.scss";
-
+.detail-info{
+  .detail-title{
+    font-size: 32px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #333333;
+    line-height: 100px;
+    text-align: center;
+  }
+  .detail-content{
+    ::v-deep p{
+      span{
+        display: block !important;
+        text-indent:2em !important;
+      }
+      img{
+        display: block;
+        margin: 10px auto;
+      }
+    }
+  }
+}
 </style>