manage_mobile/pages/home/newsDetail.vue

<style lang="less" scoped>
	.container{
		padding:0 30rpx;
		&>view{
			display:flex;
			align-items: center;
			justify-content: space-between;
			padding:20rpx 0;
			&+view{
				border-top:2rpx solid rgba(216, 216, 216, 0.2);
			}
			text{
				&:first-child{
					color:var(--b,#777);
					margin-right:20rpx;
				}
				&:nth-child(2){
					color:var(--f,#333);
					font-size:var(--size,28rpx);
					&.agr{
						color:#10C176;
						margin-top:13rpx;
					}
					&.account{
						margin-top:13rpx;
						padding:30rpx;
						border-radius: 24rpx;
						color:#999;
						background: #F7F7F7;
						width:calc(100% - 60rpx);
					}
				}
			}
			&.info{
				--b:#333;
				--f:#777;
				--size:24rpx;
			}
			&.vertical{
				flex-direction: column;
				align-items: flex-start;
			}
		}
	}
</style>
<template>
	<view class="container">
		<view class="info">
			<text>基本信息</text> <text>推送时间：{{detail.sendTime}}</text>
		</view>
		<view>
			<text>品种名称</text> <text class="over">{{detail.cropName}}</text>
		</view>
		<view>
			<text>作物类型</text> <text class="over">{{detail.cropType}}</text>
		</view>
		<view>
			<text>生长过程</text> <text class="over">{{detail.growthProcess}}</text>
		</view>
		<view>
			<text>病虫害部位</text> <text class="over">{{detail.pestSite}}</text>
		</view>
		<view>
			<text>显著症状</text> <text class="over">{{detail.symptom}}</text>
		</view>
		<view class="vertical">
			<text>推荐农资</text> <text class="agr">{{detail.agrMaterialsName}}</text>
		</view>
		<view class="vertical">
			<text>推荐理由</text> <text class="account">{{detail.content}}</text>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return{
			detail:{},
			eventChannel:null,
		}
	},
	onLoad(options){
		this.eventChannel=this.getOpenerEventChannel()
		this.eventChannel.on("detail",e=>this.detail=e)
		uni.setNavigationBarTitle({
			title:({farming:"农事记录",news:"消息详情"})[options.intoPage]
		})
	},
}
</script>