horzi_rai_wxa/pages-search/components/summaryChart.vue

<template>
  <view :class="['result-data-search-summary', 'content-padding']">
    <view class="report-ul">
      <view class="report-item" v-for="(report, index) in resultList" :key="index" v-if="index % 2 === 0" @click="goDetail(report)">
        <view class="item-content-img" v-if="report.BodyHtml">
          <image :src="report.BodyHtml" mode=""></image>
        </view>
        <view class="item-content" v-else><u-parse :html="report.Body[0] + '...'"></u-parse></view>
        <view class="line"></view>
        <view :class="['item-title', report.Source != 1 && 'chart-title text_twoLine']"><u-parse :html="report.Title"></u-parse></view>
        <text class="item-createtime" v-if="report.Source == 1">{{ report.PublishDate }}</text>
        <view class="item-createtime chart-tag" v-else>
          <text class="tag-item" v-if="report.PtagName">{{ report.PtagName }}</text>
          <text class="tag-item" v-if="report.CtagName">{{ report.CtagName }}</text>
        </view>
      </view>
    </view>
    <view class="report-ul">
      <view class="report-item" v-for="(report, index) in resultList" :key="index" v-if="index % 2 !== 0" @click="goDetail(report)">
        <view class="item-content-img" v-if="report.BodyHtml">
          <image :src="report.BodyHtml" mode=""></image>
        </view>
        <view class="item-content" v-else><u-parse :html="report.Body[0] + '...'"></u-parse></view>
        <view class="line"></view>
        <view :class="['item-title', report.Source != 1 && 'chart-title text_twoLine']"><u-parse :html="report.Title"></u-parse></view>
        <text class="item-createtime" v-if="report.Source == 1">{{ report.PublishDate }}</text>
        <view class="item-createtime chart-tag" v-else>
          <text class="tag-item" v-if="report.PtagName">{{ report.PtagName }}</text>
          <text class="tag-item" v-if="report.CtagName">{{ report.CtagName }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    resultList: {
      type: Array,
      default: [],
    },
    tabsActiveChild: {
      type: Number,
    },
  },
  data() {
    return {
    };
  },

  methods: {
    /* 进入详情 校验是否有该品种权限 */
    goDetail(item) {
      if (item.Source == 2) {
        /* 无需授权且已绑定 检验是或否有权限 */
        this.$store.dispatch("checkHandle", "/pageMy/chartPage/chartPage?id=" + item.ChartId);
      } else {
        /* 无需授权且已绑定 检验是或否有权限 */
        this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
      }
    },
  },
};
</script>

<style lang="scss">
.result-data-search-summary {
  padding: 0rpx 34rpx;
  display: flex;
  background-color: #f5f6fa;
  .report-ul {
    width: 50%;
    &:first-child {
      margin-right: 10rpx;
    }
    .report-item {
      padding: 20rpx 20rpx 24rpx 20rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      box-shadow: 0 3rpx 6rpx rgba($color: #000000, $alpha: 0.16);
      background: #fff;
      .item-content {
        font-size: 24rpx;
        line-height: 40rpx;
        color: #7f7f7f;
        display: -webkit-box;
        word-break: break-all;
        text {
          display: inline !important;
        }
      }
      .line {
        margin: 18rpx 0;
        content: "";
        width: 100%;
        height: 1px;
        padding: 0 32rpx;
        box-sizing: border-box;
        background-color: #e5e5e5;
        -webkit-transform: scale(1, 0.5);
        transform: scale(1, 0.5);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
      }
      .item-title {
        font-size: 28rpx;
        color: #4a4a4a;
        margin-bottom: 10rpx;
        position: relative;
        text-indent: 0.5em;
        &::before {
          content: "";
          position: absolute;
          top: 5rpx;
          left: 0;
          width: 6rpx;
          height: 31rpx;
          background-color: #3385ff;
        }
        text {
          display: inline;
        }
      }
      .chart-title {
        height: 72rpx;
        padding-bottom: 10rpx;
        text-indent: 0em;
        &::before {
          display: none;
        }
      }
      .item-abstract {
        font-size: 26rpx;
        color: #6a6a6a;
        margin-bottom: 10rpx;
        .report_ico {
          width: 32rpx;
          height: 26rpx;
          margin-right: 20rpx;
          display: inline-block;
        }
      }
      .item-createtime {
        color: #acacac;
        font-size: 24rpx;
      }
    }
  }
  .chart-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rpx;
    height: 36rpx;
    .tag-item {
      width: 148rpx;
      border-radius: 28rpx;
      border: 2rpx solid rgba(49, 137, 255, 1);
      overflow: hidden;
      color: #3385ff;
      text-align: center;
      line-height: 32rpx;
    }
  }
  .item-content-img {
    display: flex;
    align-items: center;
    width: 330rpx;
    margin-left: -15rpx;
    margin-bottom: -20rpx;
    image {
      width: 100%;
      height: 262rpx;
      vertical-align: middle;
    }
  }
}
.content-padding {
  padding-top: 90rpx !important;
}
</style>