localization-inquiry-machine/src/views/columnListMixDetail.vue

<template>
  <div class="detail-content">
    <div v-if="detailData" class="detail-info">
      <h2 class="detail-title">{{ detailData.overTitle }}</h2>
      <div class="detail-date">发布时间：{{ detailData.create_time }}</div>
      <div class="detail-content" v-html="detailData.introHtml" />
    </div>

    <div v-else-if="loading">
      <p>加载中...</p>
    </div>

    <div v-else>
      <p>加载详情失败</p>
      <button @click="reloadDetail">重新加载</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ColumnListMixDetail',
  data() {
    return {
      detailData: null,
      loading: true
    }
  },
  created() {
    this.loadDetailData()
  },
  methods: {
    loadDetailData() {
      this.loading = true

      const storedData = localStorage.getItem('columnListMixDetail')
      if (storedData) {
        this.detailData = JSON.parse(storedData)
        this.loading = false
        return
      }
      // 方式2: 如果需要从接口重新获取（推荐）
      // const itemId = this.$route.query.itemId
      // if (itemId) {
      //   FetchTopicDetail({ id: itemId }).then(res => {
      //     this.detailData = res.data
      //   }).catch(err => {
      //     console.error('获取详情失败', err)
      //   }).finally(() => {
      //     this.loading = false
      //   })
      // } else {
      //   this.loading = false
      // }
    },
    // 重新加载详情
    reloadDetail() {
      this.loadDetailData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/index.scss";
.detail-content{
  height: calc(100% - 60px);
  overflow-y: scroll;
}
.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-date{
    text-align: center;
    margin-bottom: 20px;
  }
  .detail-content{
    ::v-deep p{
      span{
        display: block !important;
        text-indent:2em !important;
      }
      img{
        display: block;
        margin: 10px auto;
      }
    }
  }

}
</style>