jp-railway/pages/search/searchResult.vue

<template>
	<view>
		<!-- 搜索框 -->
		<view class="search">
		<u-icon name="arrow-left"size="36"></u-icon><u-search search-icon="none"></u-search>
		</view>
		<!-- 搜索结果 -->
		<view class="result">
			 <view class="result-item">
				 <view class="content">
				 	<view class="title">
				 		李春华带队到岳阳港考察学习
				 	</view>
					<view class="infos">
						<view class="classify">
							政务动态
						</view>
						<view class="date">
							2020-12-30
						</view>
					</view>
				 </view>
				 <view class="picture">
				 	<img src="../../assets/img/newsPic.png" alt="">
				 </view>
			 	
			 </view>
			 <view class="result-item">
			 				 <view class="content">
			 				 	<view class="title">
			 				 		代容到社区宣讲党的二十大精神
			 				 	</view>
			 					<view class="infos">
			 						<view class="classify">
			 							党建动态
			 						</view>
			 						<view class="date">
			 							2020-12-30
			 						</view>
			 					</view>
			 				 </view>
			 				 <view class="picture">
			 				 	<img src="../../assets/img/newsPic.png" alt="">
			 				 </view>
			 	
			 </view>
			 <view class="result-item">
			 				 <view class="content">
			 				 	<view class="title">
			 				 		公司工会开展摄影培训班
			 				 	</view>
			 					<view class="infos">
			 						<view class="classify">
			 							文明创建
			 						</view>
			 						<view class="date">
			 							2020-12-30
			 						</view>
			 					</view>
			 				 </view>
			 				 <view class="picture">
			 				 	<img src="../../assets/img/newsPic.png" alt="">
			 				 </view>
			 	
			 </view>
			 <view class="result-item">
			 				 <view class="content">
			 				 	<view class="title">
			 				 		国铁宜昌车务段与地方铁路开展座谈交流
			 				 	</view>
			 					<view class="infos">
			 						<view class="classify">
			 							政务动态
			 						</view>
			 						<view class="date">
			 							2020-12-30
			 						</view>
			 					</view>
			 				 </view>
			 				 <view class="picture">
			 				 	<img src="../../assets/img/newsPic.png" alt="">
			 				 </view>
			 	
			 </view>
			
		</view>
		<u-divider  border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
		font-family: 'Regular';
	}
	// 搜索框
	.search{
		padding:12rpx 24rpx;
		display: flex;
		align-items: center;
		.u-icon--right{
			margin-right: 24rpx;
		}
		/deep/.u-content{
			border-radius: 8px !important;
		}
		/deep/.u-action{
			color: rgba(31, 74, 153, 1);
			font-size: 16px;
		}
	}


   // 搜索结果
   .result{
	   padding: 36rpx 32rpx;
	   .result-item{
		   display: flex;
		   justify-content: space-between;
		   margin-bottom: 40rpx;
		   .content{
			   display: flex;
			   justify-content: space-between;
			   flex-direction: column;
			   .title{
				   color: rgba(51, 51, 51, 1);
				   font-size: 32rpx;
				   text-align: justify;
			   }
			   .infos{
				   display: flex;
				   justify-content: space-between;
				   align-items: center;
				   .classify{
					   color: rgba(119, 119, 119, 1);
					   font-size: 24rpx;
				   }
				   .date{
					   color: rgba(119, 119, 119, 1);
					   font-size:24rpx;
				   }
			   }
		   }
	   
	    .picture{
			   margin-left: 24rpx;
			img{
				width: 224rpx;
				height: 172rpx;
				border-radius: 5px;
			}
		}
	   
	   }
   }
</style>