uni-zhks-app/pages/i-newsList/i-newsList.vue

<template>
	<view>
		<view class="title">
			<scroll-view scroll-x>
				<view class="list">
					<view class="item" :class="active == 1?'active':''" @click="click_item(1)">新闻</view>
					<view class="item" :class="active == 2?'active':''" @click="click_item(2)">矿内新闻</view>
					<view class="item" :class="active == 3?'active':''" @click="click_item(3)">信息监测中心动态</view>
					
				</view>
			</scroll-view>
		</view>
		<view class="inner">
			<view v-if="active == 1">
				<view class="item">
					<view class="left">
						<view class="title">【羊场湾煤矿】祝福祖国、真情告白</view>
						<view class="time">2020-10-09 13:39:18</view>
					</view>
					<view class="right">
						<image src="https://images.pexels.com/photos/5554235/pexels-photo-5554235.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode=""></image>
					</view>
					
				</view>
				<view class="item">
					<view class="left">
						<view class="title">【羊场湾煤矿】祝福祖国、真情告白</view>
						<view class="time">2020-10-09 13:39:18</view>
					</view>
					<view class="right">
						<image src="https://images.pexels.com/photos/5534634/pexels-photo-5534634.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode=""></image>
					</view>
					
				</view>
			</view>
			<view v-if="active == 2">
				<view class="item">
					<view class="left">
						<view class="title">羊场湾矿职工“小改小革”劲头足</view>
						<view class="time">2020-10-09 13:39:18</view>
					</view>
					<view class="right">
						<image src="https://images.pexels.com/photos/5415837/pexels-photo-5415837.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode=""></image>
					</view>
					
				</view>
			</view>
			<view v-if="active == 3">
				<view class="item">
					<view class="left">
						<view class="title">羊场湾矿职工“小改小革”劲头足</view>
						<view class="time">2020-10-09 13:39:18</view>
					</view>
					<view class="right">
						<image src="https://images.pexels.com/photos/5185255/pexels-photo-5185255.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode=""></image>
					</view>
					
				</view>
				<view class="item">
					<view class="left">
						<view class="title">羊场湾矿职工“小改小革”劲头足</view>
						<view class="time">2020-10-09 13:39:18</view>
					</view>
					<view class="right">
						<image src="https://images.pexels.com/photos/2519216/pexels-photo-2519216.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode=""></image>
					</view>
					
				</view>
				<view class="item">
					<view class="left">
						<view class="title">羊场湾矿职工“小改小革”劲头足</view>
						<view class="time">2020-10-09 13:39:18</view>
					</view>
					<view class="right">
						<image src="https://images.pexels.com/photos/5415837/pexels-photo-5415837.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" mode=""></image>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:1,
				
			};
		},
		methods:{
			click_item(item){
				this.active = item
			}
		}
	}
</script>

<style lang="scss">
	.list{
		background-color: #f3f3f3;
		display: flex;
		.item{
			line-height: 60rpx;
			
			font-size: 27rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #232627;
			box-sizing: border-box;
			padding: 0 20rpx;
		}
		.active{
			color: #009FE8;
			border-bottom: 2rpx solid #009FE8;
		}
	}

	.inner{
		box-sizing: border-box;
		padding-left: 10rpx;
		padding-right: 10rpx;
		.item{
			margin-bottom: 10rpx;
			box-sizing: border-box;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			
			border-bottom: 1rpx solid #f3f3f3;
			
			display: flex;
			justify-content: space-between;
			height: 155rpx;
			.left{
				.title{
					width: 446rpx;
					font-size: 33rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #121212;
					line-height: 40rpx;
					
					
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					
				}
				.time{
					margin-top: 25rpx;
					width: 446rpx;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999;
				}
			}
			.right{
				margin-left: 14rpx;
				image{
					width: 270rpx;
					height: 135rpx;
				}
			}
		}
	}
</style>