horzi_rai_wxa/pages-search/components/industrialsource.vue

<template>
  <view class="container-report-item global_card_content" @click="goDetail(list)">
    <view class="global_title" v-if="list.IndustryName">
      <mp-html :content="richTextClamp(3) + list.IndustryName + isSourceText(list) + '</div>'" />
    </view>
    <view class="item-lable">
      <view class="lable-list" v-for="item in list.IndustrialSubjectList" :key="item.IndustrialSubjectId">{{ item.SubjectName }}</view>
    </view>
    <view class="item-time">
      <text>{{ list.PublishDate }} &nbsp;&nbsp;更新</text>
    </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.Source == 2) {
        uni.navigateTo({ url: "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId });
        return;
      }
      uni.navigateTo({ url: "/reportPages/IndustryReport/IndustryReport?id=" + item.IndustrialManagementId });
    },
    isSourceText(list) {
      let str = list.Source == 1 ? "（弘则资源包）" : list.Source == 2 ? "（买方研选主题）" : "";
      return str;
    },
    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;
  }
  .item-lable {
    margin-top: 20rpx;
    height: 290rpx;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    overflow: hidden;
    overflow-x: auto;
    .lable-list {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      font-weight: 600;
      width: 185rpx;
      height: 42rpx;
      border-radius: 200rpx;
      margin-bottom: 30rpx;
      margin-right: 30rpx;
      background: #f8f8fa;
      color: $uni-color-new;
    }
  }

  .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;
  }
}
</style>