vue新闻列表

置顶汐釉

已于 2022-09-03 16:56:12 修改

阅读量1.3k

点赞数 2

文章标签：前端 vue

于 2021-12-01 14:33:49 首次发布

本文链接：https://blog.csdn.net/qq_43351282/article/details/121654748

版权

<template>
  <view class="news-wrap">	 
	<view class="newcont">
		<view class="news-item"  v-for="(item,index) in new_list" :key="index">
			<view class="news-intr">
				<view  class="news-title" >
					<text >{{item.name}}</text>
				</view>
				<view class="news-info">
					<view class="news-time"><text>{{item.create_time}}</text></view>
					<view class="news-type"><text>{{item.real_num}}浏览</text></view>					
				</view>				
			</view>
			<view v-if="item.image" :class="{'image-section-right': true}" >
				<image :src="item.image" ></image>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
     new_list:[{
		  create_time: "2021-12-01",
		  image: "../../static/logo.png",
		  real_num:'2004',
		  name: "学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会",
	  },{
		  create_time: "2021-12-01",
		  image: "",
		  real_num:'2004',
		  name: "学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会",
	  },{
		  create_time: "2021-12-01",
		  image: "../../static/logo.png",
		  real_num:'2004',
		  name: "学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会",
	  }],
	}
},
  methods: {

  },
}
</script>

<style lang="scss"> 
.news-wrap{
.newcont{
	background: #FFFFFF;
}
.news-item{
	height: 176rpx;
	margin-left:30rpx;
	margin-right:30rpx;
	display: flex;
	font-size: 30rpx;
	color: #333333;
	padding-top:30rpx;
	padding-bottom: 30rpx;
	border-bottom:2rpx #efefef solid;
	.news-intr{
		flex: 2;
		padding-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.news-info {
			display: flex;
			font-size: 28rpx;
			color: #999999;
			margin-left: 16rpx;
			.news-time{
				text-align: left;
			}
			.news-type{
				text-align: right;
				flex: 2;
			}
		}
		.news-title{
			text{
				 width: 100%;
				 display: -webkit-box;
				 -webkit-box-orient: vertical;
				 -webkit-line-clamp: 3;
				 overflow: hidden;
			}
		}
	}
	.image-section-right{
		flex: 1;
		max-width:220rpx;
		max-height: 200rpx;
		image{
			max-width: 100%;
			max-height: 100%;
			border-radius: 6rpx;
		}
	}		
}	
}
</style>

效果图：