zhxy-desk/components/fixedAssetsList.vue

<template>
	<view>
		<view v-for="(item,index) in list" :key="index" class="fixed-item">
			<view class="fixed-item-left">
				<view class="fixed-item-left-color">

				</view>
				<view :style="`${index == list.length-1 ? 'width:0':''}`" class="fixed-item-left-line">
                  
				</view>
			</view>
			<view class="fixed-item-right">
				<view class="fixed-item-right-date">
					{{item.value[0][3]}}
				</view>
				<view class="fixed-item-right-content">
					<view class="fixed-item-right-content-title">
						例行检修
					</view>
					<view class="">
						审核人： {{item.value[0][0]}}
					</view>
					<view class="">
						维修人： {{item.value[0][1]}}
					</view>
					<view class="">
						验收人：{{item.value[0][2]}}
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "fixedAssetsList",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.fixed-item {
		width: 100%;
		display: flex;
	}

	.fixed-item-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 32rpx;

		.fixed-item-left-color {
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background: #d7d7d7;
		}

		.fixed-item-left-line {
			width: 1px;
			background: #d7d7d7;
			flex: 1;
		}
	}

	.fixed-item-right {
		flex: 1;
	}

	.fixed-item-right-date {
		height: 30rpx;
		line-height: 30rpx;
		color: #999;
	}

	.fixed-item-right-content {
		width: 100%;
		background: #ffffff;
		border-radius: 5.33px;
		box-shadow: 0px 0px 4px 0px rgba(147, 147, 147, 0.26);
		height: 230rpx;
		margin: 32rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 32rpx;
		color: #999;
	}

	.fixed-item-right-content-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
</style>