horzi_rai_wxa/components/ItemComponent/reportItem.vue

<template>
  <view class="container-report-item" @click="goDetail(list)">
    <view class="item-title" v-if="list.Title">
      <mp-html :content="richTextClamp(3) + list.Title + '</div>'" />
    </view>
    <view class="item-image" v-if="list.BodyHtml">
      <image :src="list.BodyHtml"></image>
    </view>
    <view class="item-image" v-if="list.Cover">
      <image :src="list.Cover"></image>
    </view>
    <block v-if="(list.Annotation || list.Body[0]) && !list.Cover">
      <text class="item-content" v-if="!list.Body[0]">{{ list.ArticleResponse == 4 ? "核心观点" : "核心结论" }}:</text>
      <view class="item-rich-text">
        <mp-html :content="richTextClamp(7) + (list.Annotation || list.Body[0]) + '</div>'" />
      </view>
    </block>
    <view class="item-abstract text-Line" v-if="list.Abstract && list.ArticleResponse != 1"> 摘要：{{ list.Abstract }} </view>
    <view class="item-time">
      <text>{{ list.PublishDate }}</text>
      <view class="item-examine" v-if="list.IsResearch">
        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
        <text>{{ list.Pv }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue";
export default {
  name: "",
  components: { mpHtml },
  props: {
    list: {
      type: Object,
      default: {},
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goDetail(item) {
      if (item.HomeType !== 1) {
        /* 无需授权且已绑定 检验是或否有权限 */
        uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId });
      }
    },
    richTextClamp(val) {
      return `<div style="${
        val == 7 ? "min-height: 50px;" : ""
      }line-clamp: ${val};-webkit-line-clamp: ${val};text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;">`;
    },
  },
};
</script>
<style scoped lang="scss">
.container-report-item {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  .item-title {
    position: relative;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 38rpx;
    text-indent: 0.5em;
    &::before {
      content: "";
      position: absolute;
      top: 5rpx;
      left: 0;
      width: 6rpx;
      height: 31rpx;
      background-color: #3385ff;
    }
  }

  .item-content,
  .item-rich-text {
    font-size: 26rpx;
    font-weight: 400;
    color: #666666;
  }
  .item-content {
    margin-top: 10rpx;
  }
  .item-rich-text {
    margin-bottom: 20rpx;
  }
  .item-image {
    height: 242rpx;
    margin: 15rpx 0;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .item-abstract {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    line-height: 33rpx;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 20rpx;
  }
  .text-Line {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
  }

  .item-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #acacac;
    font-size: 24rpx;
    line-height: 28rpx;
    .item-examine {
      display: flex;
      align-items: center;
      image {
        width: 30rpx;
        height: 24rpx;
        margin: 0 10rpx 0 15rpx;
      }
    }
  }
}
</style>