ParkApp/pages/news/news.vue

<template>
	<view>
		<view class="uni-list" >
		    <view @click="goDetail(item.id)"  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-cut-2 text-sm" style="color: #666666;">
							<text>{{item.subTitle}}</text>
						</view>
		                <view class="uni-media-list-text-bottom">
		                    <text>{{item.time}}</text>
		                </view>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newList:[]
			}
		},
		onLoad() {
			this.fetchStaticData()
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
					url:"/pages/news/detail?id=125487446112543"
				})
			},
			fetchStaticData(){
				this.newList=[
					{
						title:'银川综保区举行重大项目签约首发仪式',
						subTitle:'原标题：推进新通道建设扩大对外开放——银川综保区举行重大项目签约暨“一带一路”国际卡车班列首发仪式',
						time:'2020-11-15 18:51:56',
						image:'http://139.9.103.171:1888/miniofile/xlyq/news.jpg'
					},
					{
						title:'为新产业新业态发展提供一片沃土',
						subTitle:'原标题：为新产业新业态发展提供一片沃土,为避免产业发展不好人才少，人才不够制约产业发展的恶性循环发生，我们更应该营造良好的创新环境，为新产业新业态发展提供一片沃土，为新职业创造更多的就业空间。',
						time:'2020-11-15 18:51:56',
						image:'http://139.9.103.171:1888/miniofile/xlyq/news1.jpg'
					},
					{
						title:'银川育新机开新局推动工业高质量发展',
						subTitle:'原标题：银川育新机开新局推动工业高质量发展坚持不懈推动高质量发展，加快转变经济发展方式，加快产业转型升级，加快新旧动能转换，推动经济发展实现量的合理增长和',
						time:'2020-11-15 18:51:56',
						image:'http://139.9.103.171:1888/miniofile/xlyq/news2.jpg'
					},
					{
						title:'宁夏银川入选全国营商环境标杆城市',
						subTitle:'原标题：银川入选全国营商环境标杆城市11月15日，记者从银川市审批服务管理局获悉，近日国家发改委组织召开了《中国营商环境报告2020》发布暨全国优化营商环境工作推',
						time:'2020-11-22 11:38:22',
						image:'http://139.9.103.171:1888/miniofile/xlyq/news3.jpg'
					}
				]
			}
		}
	}
</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>