uni-zhihuikuangshan/components/t-i-news/t-i-news.vue

<template>
	<view class="content">
		<view class="title">
			<view class="text">新闻动态</view>
			<view class="more" @click="go_more()">查看全部 <uni-icons type="arrowright" color="#999" size="11"></uni-icons>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in newsList" :key="index" @click="go_detail(item.id)">
				<view class="left">
					<image :src="item.main_img"></image>
				</view>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="time">{{item.created_at}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-i-news",
		props: [
			"newsList",
			"mine_code"
		],
		data() {
			return {
				list: []
			};
		},
		methods: {
			// 打开详情页
			go_detail(id) {
				uni.navigateTo({
					url: "../../index/news/news?id=" + id + "&mine_code=" + this.mine_code
				})
			},
			// 打开列表
			go_more(){
				uni.navigateTo({
					url: "../../index/news/news_list/news_list?mine_code=" + this.mine_code
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		margin-top: 0;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;

		box-sizing: border-box;
		padding: 30rpx 25rpx;
	}

	.title {
		display: flex;
		align-items: baseline;
		justify-content: space-between;

		.text {
			font-size: 36rpx;
		}

		.more {
			font-size: 26rpx;
			color: #999;

		}
	}

	.list {
		margin-top: 20rpx;
		width: 700rpx;

		.item {
			box-sizing: border-box;
			padding-top: 20rpx;
			padding-bottom: 12rpx;

			display: flex;

			.left {
				width: 240rpx;
				height: 136rpx;

				image {
					width: 240rpx;
					height: 136rpx;
					border-radius: 8rpx;
					overflow: hidden;
				}
			}

			.right {
				margin-left: 22rpx;

				display: flex;
				flex-flow: column;
				justify-content: space-around;

				.title {
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;

					font-size: 32rpx;
					font-weight: 400;
					color: #121212;
					line-height: 40rpx;
				}

				.time {
					font-size: 26rpx;
					font-weight: 400;
					color: #999;
					line-height: 40rpx;
				}
			}
		}
	}
</style>