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

<template>
	<view class="news-recommend">
		<view class="news-tab">
			<u-tabs :active.sync="tabActive" :tabs="tabs" tab-style="default" @change="tabChange"/>
		</view>
		<view class="news-list">
			<template v-for="item in [1, 2, 3]">
					<view class="news-item">
						<view class="news-title">组装自动化与测试测量深度融合，赋能电子制造业高质量发展2024</view>
						<view class="news-time">2024年6月28日</view>
						<view class="news-summary">
							<view class="text">在人类历史长河中，工业生产一直是社会进步的重要驱动力，而自动化技术的飞速发展，使其正在经历前所未有的变革。特别是在电子生产制造领域，传统的人工操作由于易疲劳、品质不稳定以及</view>
							<view class="to-detail"><view>了解详情</view> <view class="arrow iconfont icon-a-righticon_huaban11"></view></view>
						</view>
					</view>
			</template>
		</view>
	</view>
</template>

<script>
	import UTabs from '@/components/common/u-tabs/index.vue'
	
	export default {
		components: {
			UTabs
		},
		data() {
			return {
				tabActive: '1',
				tabs: [{
					label: '展会新闻',
					value: 1
				}, {
					label: '展商新闻',
					value: 2
				}]
			}
		},
		created() {
		},
		methods: {
			tabChange() {
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.news-list{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 18rpx;
		margin-top: 28rpx;
	}
	.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{
		@extend .text-ellipsis-line;
		font-family: Arial, Arial;
		font-weight: bold;
		font-size: $fontSize2;
		line-height: 35rpx;
	}
	.news-time{
		font-size: $fontSize0;
		color: #555555;
		margin: 12rpx 0;
	}
	.news-summary{
		font-size: 18rpx;
		line-height: 25rpx;
		.text{
			padding-right: 30rpx;
			color: #555555;
			@extend .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;
		}
	}
	
	.news-tab{
		van-button{
			margin-right: 13rpx;
		}
	}
</style>