uni-zhihuikuangshan/pages/workbench/gridding/timeline_details/timeline_details.vue

<template>
	<view>
		<view class="section" v-for="(item,index) in list" :key="index">
			<view class="time">
				<view class="icon">
					<image src="./icon/day.jpg" mode=""></image>
				</view>
				<view class="text">{{item.time}}</view>
			</view>
			<view class="list">
				<view class="box" v-for="(item_2,index_2) in item.itemMessage" :key="index_2" @click="go_detail(item_2.gridregion_id)">
					<view class="title">{{item_2.gridregion}}</view>
					<view class="inner">
						<view class="label">网格范围：</view>
						<view class="text">{{item_2.gridRange}}</view>
					</view>
					<view class="inner">
						<view class="label">网格区域：</view>
						<view class="text">{{item_2.gridregionItem}}</view>
					</view>
					<view class="inner">
						<view class="label">巡检人：</view>
						<view class="text">{{item_2.gridInspector}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: []
			};
		},
		onLoad() {
			this.get_trouble_grid_timeline()
		},
		methods: {
			get_trouble_grid_timeline() {
				uni.showLoading({
					mask:true
				})
				
				this.$api.trouble_grid_timeline({
					page: this.page
				}).then((res)=>{
					uni.hideLoading()
					console.log(res.data.data)
					this.list = this.list.concat(res.data.data)
				})
			},
			
			// 详情
			go_detail(id){
				uni.navigateTo({
					url:"./detail/detail?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		box-sizing: border-box;
		padding: 150rpx 50rpx;
	}

	.section {
		margin-bottom: 150rpx;
		position: relative;

		border-left: 1rpx solid #BDC3C7;

		.time {
			position: absolute;
			left: -45rpx;
			top: -120rpx;

			width: 90rpx;
			text-align: center;

			.icon {
				image {
					width: 61rpx;
					height: 68rpx;
				}
			}
		}

		.list {
			box-sizing: border-box;
			padding: 25rpx;

			.box {
				width: 600rpx;
				min-height: 400rpx;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(189, 195, 199, 0.5);
				border-radius: 8rpx;

				box-sizing: border-box;
				padding: 25rpx;

				.title {
					width: 550rpx;
					border-left: 8rpx solid #009FE8;
					box-sizing: border-box;
					padding: 10rpx 20rpx;
					font-size: 30rpx;
					margin-bottom: 20rpx;
				}

				.inner {
					padding-top: 20rpx;
					width: 550rpx;
					display: flex;
					font-size: 28rpx;

					.label {
						width: 150rpx;
					}

					.text {
						width: 400rpx;
					}
				}
			}
		}
	}
</style>