ParkApp/components/infomation/infomation.vue

<template>
	<view class="uni-list" >
	    <view @click="goDetail(item)"  class="uni-list-cell"  hover-class="uni-list-cell-hover" v-for="(item,index) in newList" :key="index">
	        <view class="uni-media-list" >
				<!-- 左图右文 -->
				<image   mode="aspectFill" class="uni-media-list-logo-left" :src="item.image"></image>
	            <view class="uni-media-list-body" style="height: 180rpx;">
	                <view class="uni-media-list-text-top text-cut-2">{{item.title}}</view>
					<view class="text-sm text-cut-2" style="color: #464646;">
						<text>{{item.article | formatHtml}}</text>
						<!-- <rich-text :nodes="item.article"></rich-text> -->
					</view>
	                <view class="uni-media-list-text-bottom">
						<text class="cuIcon-time padding-right-10"></text>
	                    <text>{{item.createTime}}</text>
	                </view>
	            </view>
	        </view>
	    </view>
	</view>
</template>

<script>
	export default {
		props:{
			newList:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		filters: {
			formatHtml (str) {
				return str.replace(/<[^>]+>/g, "");
			}
		},
		data() {
			return {
				
			};
		},
		onLoad() {
			
		},
		methods:{
			goDetail(item){
				getApp().globalData.newsDetail=item
				uni.navigateTo({
					url:"/pages/news/detail?id="+item.id
				})
			},
		}
	};
</script>
<style lang="scss">
	.uni-list {
	    background-color: #FFFFFF;
	    position: relative;
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	}
	
	.uni-list:after {
	    position: absolute;
	    z-index: 10;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    height: 1px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    // background-color: #c8c7cc;
	}
	
	.uni-list::before {
	    position: absolute;
	    z-index: 10;
	    right: 0;
	    top: 0;
	    left: 0;
	    height: 1px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	}
	
	.uni-list-cell {
	    position: relative;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	}
	
	.uni-list-cell-hover {
	    background-color: #eee;
	}
	
	.uni-list-cell::after {
	    position: absolute;
	    z-index: 3;
	    right: 0;
	    bottom: 0;
	    left: 30upx;
	    height: 1px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	
	.uni-list .uni-list-cell:last-child::after {
	    height: 0upx;
	}
	
	/* 图文列表 */
	.uni-media-list {
	    padding: 22upx 20upx;
	    box-sizing: border-box;
	    display: flex;
	    width: 100%;
	    flex-direction: row;
	}
	
	.uni-navigate-right.uni-media-list {
	    padding-right: 74upx;
	}
	.uni-media-list-text-bottom {
	    line-height: 30upx;
	    font-size: 26upx;
	    color: #8f8f94;
	}
	
	.uni-media-list-logo-left {
		border-radius: 10rpx;
	    width: 230upx;
	    height: 180upx;
		margin-right: 20upx
	}
	
	.uni-media-list-logo-right {
	    width: 180upx;
	    height: 140upx;
		margin-left: 20upx
	}
	
	.uni-media-list-body {
	    display: flex;
	    flex: 1;
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: flex-start;
	    overflow: hidden;
	    height: auto;
	}
	
	.uni-media-list-text-top {
	    width: 100%;
	    line-height: 36upx;
	    height: 50upx;
	    font-size: 26upx;
		font-weight: 800;
	    overflow: hidden;
	}
	
	.uni-media-list-text-bottom {
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	}
</style>