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

<template>
	<view class="content">
		<view class="title">
			<view class="text">宁煤新闻</view>
			<view class="more">查看全部 <uni-icons type="arrowright" color="#999" size="11"></uni-icons>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :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: [
			"base_url"
		],
		data() {
			return {
				list: []
			};
		},
		created() {
			console.log(this.base_url)
			// 获取首页新闻列表
			this.getNews()
		},
		methods: {
			// 请求新闻动态
			getNews() {
				uni.request({
					url: this.base_url + "/article/list",
					method: "GET",
					data: {
						pageSize: 4
					},
					success: (res) => {
						// console.log(res.data.data.data)
						this.list = res.data.data.data
					}
				})
			},

			// 打开详情页
			go_detail(id) {
				uni.navigateTo({
					url: "../../index/news/news?id=" + id
				})
			},

		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #FFFFFF;

		box-sizing: border-box;
		padding: 50rpx 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>