horzi_rai_wxa/reportPages/morningDetails/morningDetails.vue

<template>
  <view class="container morning-details-content">
    <view class="report-content-title">{{ reportDetails.Title }} </view>
    <view class="content-time">
      <text>{{ reportDetails.Department }} </text>
      <text class="time">{{ reportDetails.PublishTime }} </text>
    </view>
    <!-- 这里是循环的盒子 -->
    <view class="report-ul" v-for="item in reportDetails.List" :key="item.Id">
      <view class="li-title">{{ item.IndustryName }}</view>
      <view class="li-text">
        <mp-html :content="strFontSize(item.Content)" />
      </view>
      <view class="li-look" @click="goDustrialHandler(item.IndustryId)">查看资源包</view>
    </view>
  </view>
</template>

<script>
import { Reports } from "@/config/api.js";
export default {
  data() {
    return {
      reportDetails: {},
      reportId: "",
    };
  },
  methods: {
    // 跳转产业标签
    goDustrialHandler(id) {
      uni.navigateTo({
        url: "/reportPages/IndustryReport/IndustryReport?id=" + id,
      });
    },
    // 获取文章详情
    async getDetalis() {
      const res = await Reports.getMorningMeetingDetail({
        Id: this.reportId,
      });
      if (res.Ret === 200) {
        this.reportDetails = res.Data.Detail || {};
      }
    },
  },
  onLoad(options) {
    this.reportId = Number(options.id) || 8;
    this.getDetalis();
  },
};
</script>

<style scoped lang="scss">
.morning-details-content {
  padding: 30rpx;
  color: #333333;
  font-size: 32rpx;
  .content-time {
    font-size: 28rpx;
    padding: 20rpx 0 30rpx 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx dashed #ececec;
    .time {
      color: #707070;
    }
  }
  .report-ul {
    .li-title {
      margin: 30rpx 0 10rpx;
      font-weight: 500;
    }
    .li-text {
      margin-bottom: 30rpx;
    }
    .li-look {
      display: flex;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #3385ff;
      margin-bottom: 70rpx;
    }
  }
}
</style>