horzi_rai_wxa/pages-search/components/morningDlg.vue

<template>
  <view class="morning-dlg">
    <van-popup :show="isMorningShow" @close="onClose" round>
      <view class="close-iocn">
        <van-icon @click="onClose" color="#333" name="cross" />
      </view>
      <view class="content">
        <view class="content-box">
          <view class="report-content-title">{{ morningItem.IndustryName }}</view>
          <view class="content-body">
            <mp-html :content="strFontSize(morningItem.Content)" />
          </view>
        </view>
        <view class="bottom-btn">
          <view class="btn" @click="lookPrevious"> 查看往期汇总</view>
          <view class="btn" @click="lookDetails"> 查看资源包</view>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
export default {
  props: {
    isMorningShow: {
      type: Boolean,
      default: false,
      required: true,
    },
    morningItem: {
      type: Object,
      default: {},
      required: true,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    // 关闭弹框
    onClose() {
      this.$emit("update:isMorningShow", false);
    },
    // 查看往期汇总
    lookPrevious() {
      uni.navigateTo({
        url: "/reportPages/morningAll/morningAll",
      });
      this.onClose();
    },
    // 查看资源包
    lookDetails() {
      uni.navigateTo({
        url: "/reportPages/IndustryReport/IndustryReport?id=" + this.morningItem.IndustryId,
      });
      this.onClose();
    },
  },
};
</script>

<style scope lang="scss">
.morning-dlg {
  .close-iocn {
    padding: 25rpx 35rpx;
    display: flex;
    justify-content: flex-end;
  }
  .content {
    width: 632rpx;
    background-color: #fff;
    padding: 0rpx 30rpx 100rpx 30rpx;
    .content-box {
      width: 100%;
      min-height: 400rpx;
      max-height: 830rpx;
      overflow: hidden;
      overflow-y: auto;
    }
    .bottom-btn {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 82rpx;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-top: 1rpx solid #f0f0f0;
      color: #376cbb;
      .btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
      :first-child {
        border-right: 3rpx solid #f0f0f0;
      }
    }
    .content-body {
      margin-top: 15rpx;
    }
  }
  .report-content-title {
    text-align: center;
  }
}
</style>