horzi_rai_wxa/components/ItemComponent/reportItem.vue

<template>
  <view class="container-report-item" @click="goDetail(list)">
    <view class="item-title text-Line">{{ list.Title }}</view>
    <view class="item-content">
      <text>核心观点:</text>
      <rich-text class="text-Line rich-text-item" v-if="list.Annotation" :nodes="list.Annotation"></rich-text>
    </view>
    <view class="item-abstract text-Line" v-if="list.Abstract"> 摘要：{{ 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) {
        /* 无需授权且已绑定 检验是或否有权限 */
        this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
      }
    },
  },
};
</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;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    text-indent: 0.5em;
    &::before {
      content: "";
      position: absolute;
      top: 5rpx;
      left: 0;
      width: 6rpx;
      height: 31rpx;
      background-color: #3385ff;
    }
  }

  .item-content {
    min-height: 140rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #666666;
    line-height: 30rpx;
    margin: 10rpx 0;
    .rich-text-item {
      line-height: 30rpx;
      overflow: hidden;
      -webkit-line-clamp: 7;
      line-clamp: 7;
    }
  }
  .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>