ErectionPlatform/pagesHome/pages/taskDetails/nodeInfo.vue

<template>
	<view class="nodeInfo_container">
		<view class="nodeInfo_main">
			<block v-for="(item, index) in info">

				<view class="nodeInfo_item flex">
					<view class="StateRoute create mr20 flex-c-c">
						<view class="tip flex-c-c">
							+
						</view>

						<view class="line flex1">

						</view>
					</view>

					<view class="flex1 info mt20">
						<view class="title flex-c-sb">
							<view class="">
								{{item.node}}
							</view>

							<view class="fwn">
								{{item.play_content}}
							</view>
						</view>

						<view class="time">
							{{item.create_time}}
						</view>

						<view class="time" v-if="item.remark">
							{{item.remark}}
						</view>

						<view v-if="item.images && item.images.length > 0" class="mt10 flex flex-wrap">
							<block v-for="val in item.images">
								<view class="pd10">
									<image :src="val.url" mode=""></image>
								</view>
							</block>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, defineProps, computed } from 'vue';
	import type { PropType } from 'vue';

	const props = defineProps({
		/** 页面路由数据 */
		pageInfo: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 页面数据 */
		info: {
			type: Object as PropType<Object>,
			required: true,
		}
	})

	const pageInfo = computed(() => {
		console.log('props.pageInfo :>> ', props.pageInfo);

		if (props.pageInfo) return props.pageInfo
		else return {}
	})

	const info = computed(() => {
		console.log('props.info :>> ', props.info);

		if (props.info && props.info.node) return props.info.node
		else return []
	})
</script>

<style lang="scss" scoped>
	@import url('@/utils/style/common.scss');

	// 最外层
	.nodeInfo_container {
		background: #f5f5f6;
		padding: 20upx;
	}

	// 主体容器
	.nodeInfo_main {
		padding: 20upx;
		background: #fff;
		border-radius: 10upx;

		.StateRoute {
			flex-direction: column;

			.tip {
				width: 48upx;
				height: 48upx;
				background-color: #f8544b;
				color: #fff;
				border-radius: 50%;
				font-size: 0.9rem;
			}

			.line {
				height: 100%;
				width: 4upx;
				background-color: #f8544b;
			}

			// 创建
			&.create {

				& .tip,
				& .line {
					background-color: #0086f1;
				}
			}
		}

		.info {
			.time {
				font-size: 0.9rem;
				color: #999;
				padding: 20upx 0;
				border-bottom: 2upx solid #eee;
			}
		}
	}

	image {
		width: 160upx;
		height: 160upx;
		border-radius: 10upx;
	}
</style>