mp_exhibitor_miniprog/pages/news/components/news-item.vue

<template>
  <view class="news-item" @click="onClickDetail(item)">
    <view class="news-title">{{ item.title }}</view>
    <view class="news-time">
      <template
          v-if="(item.publish_time && item.publish_time !== '0000-00-00 00:00:00') || (item.pub_date && item.pub_date !== '0000-00-00 00:00:00')">
        {{ formatDate(item.publish_time || item.pub_date) }}
      </template>
    </view>
    <view class="news-summary">
      <view class="text">{{ item.content || item.description }}</view>
      <view class="to-detail">
        <view>了解详情</view>
        <view class="arrow iconfont icon-right-s"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {link} from '@/utils/request'

export default {
  components: {},

  props: {
    type: String,
    item: Object
  },
  data() {
    return {
      websiteUrl: process.env.WEBSITE
    }
  },
  created() {
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从 0 开始
      const day = date.getDate();
      return `${year}年${month}月${day}日`;
    },
    onClickDetail(item) {
      if (this.type === 'exhibitor') {
        // this.navigateTo(this.$store.getters.website_url + '/mini-pro-news?news_id='+ item.id +'&v=' + this.$store.getters.version)
        this.navigateTo('/pages/exhibitor/exhibitor-news?id=' + item.id)
      } else {
        this.navigateTo(this.websiteUrl + '/' + item.urla)
      }
    }
  }
}
</script>
<style lang="scss">
.news-item {
  display: flex;
  flex-direction: column;
  min-height: 210rpx;
  background-color: #F6F6F6;
  border-radius: 10rpx;
  padding: 24rpx 30rpx;
}

.news-summary {
  display: flex;
  align-items: center;
}

.news-title {
  @include text-ellipsis-line;
  font-weight: bold;
  font-size: $fontSize3;
  line-height: 1.4;
}

.news-time {
  font-size: $fontSize0;
  color: #555555;
  margin: 12rpx 0;
}

.news-summary {
  font-size: $fontSize1;
  line-height: 25rpx;

  .text {
    padding-right: 30rpx;
    color: #555555;
    @include text-ellipsis-line;
    -webkit-line-clamp: 2;
    line-height: 1.4;
  }

  .to-detail {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: $buttonPrimaryColor;
    font-size: 16rpx;
    font-weight: bold;
    padding: 0 24rpx;
  }

  .arrow {
    margin-left: 12rpx;
    font-size: $fontSize0;
  }
}
</style>