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">{{ formatDate(item.publish_time || item.pub_date) }}</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) {
        this.navigateTo(this.$store.getters.website_url + '/mini-pro-news?v=' + this.$store.getters.version)
				/*if (this.type === 'exhibitor')  {
					this.navigateTo('https://mp-test-onlinecatelogue.matchexpo.cn/Selis-responds-to-Guangzhou-s-inquiry-on-M7-accident-identification-the-owner-does-not-recognize-the-analysis-conclusion-that-the-case-has-entered-the-judicial-procedure')
				} else {
					this.navigateTo('https://www.productronicachina.com.cn/2025%E6%85%95%E5%B0%BC%E9%BB%91%E4%B8%8A%E6%B5%B7%E7%94%B5%E5%AD%90%E7%94%9F%E4%BA%A7%E8%AE%BE%E5%A4%87%E5%B1%953%E6%9C%88%E5%A5%8F%E5%93%8D%E6%96%B0%E7%AF%87%E7%AB%A0-%E6%8E%A2%E7%B4%A2%E7%94%B5%E5%AD%90%E5%88%B6%E9%80%A0%E7%9A%84%E6%97%A0%E9%99%90%E5%8F%AF%E8%83%BD')
				}*/
			}
		}
	}
</script>
<style lang="scss">
	.news-item{
		display: flex;
		flex-direction: column;
		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-family: Arial, Arial;
		font-weight: bold;
		font-size: $fontSize3;
		line-height: 35rpx;
	}
	.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;
		}
		.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>