uni-zhks-app/components/i-news-list/i-news-list.vue

<template>
	<view class="news_box">
		<view class="news_box_title">
			<view class="title">
				<view class="icon"></view>
				<view class="name">
					<text>新闻动态</text>
				</view>
			</view>
			<view class="more" @click="go_newsList()">
				<text>更多</text>
			</view>
		</view>
		<view class="news_inner">
			<view class="inner_list">
				<view class="item" v-for="item in newsList" :key="item.id">
					<view class="item_img">
						<image :src="item.main_img"></image>
					</view>
					<view class="item_title">
						<text>{{item.title}}</text>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:[
			"newsList"
		],
		
		
		data() {
			return {
				
			};
		},
		methods:{
			go_newsList(){
				uni.navigateTo({
					url:"../../i-newsList/i-newsList",
					animationType:"fade-in",
					animationDuration:300
				})
			}
		}
	}
</script>

<style lang="scss">
	.news_box{
		margin-top: 19rpx;
		box-sizing: border-box;
		padding-left: 44rpx;
		padding-right: 41rpx;
		.news_box_title{
			display: flex;
			justify-content: space-between;
			.title{
				display: flex;
				.icon{
					width: 52rpx;
					height: 52rpx;
					background-image: url(icon/icon_news.png);
					background-size: cover;
					background-repeat: no-repeat;
				}
				.name{
					margin-left: 16rpx;
					height: 52rpx;
					font-size: 38rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #121212;
					line-height: 52rpx;

				}
			}
			.more{
				margin-top: 12rpx;
				height: 34rpx;
				font-size: 25rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #6C6F74;
				line-height: 34rpx;

			}
		}
		.news_inner{
			margin-top: 23rpx;
			padding-bottom: 10rpx;
			.inner_list{
				.item{
					margin-bottom: 24rpx;
					display: flex;
					justify-content: space-between;
					.item_img{
						width: 188rpx;
						height: 105rpx;
						border-radius: 2rpx;
						image{
							width: 188rpx;
							height: 105rpx;
						}
					}
					.item_title{
						padding-top: 18rpx;
						width: 456rpx;
						height: 62rpx;
						font-size: 23rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #121212;
						line-height: 31rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
				
					}
				}
			}
		}
	}
</style>