ykz-wx/pages/index/CfStatus.vue

<template>
	<view class="cf-status">
		<pub-loading-view :loaded="loaded" height="100%">
			<view class="status-item" :class="item.isCur?'is-current':''" v-for="(item,index) in dataList" :key="index">
				<view class="status-item-left">
					<view class="icon">
						<text class="iconfont">{{ item.icon }}</text>
					</view>
					<view class="line"></view>
				</view>
				<view class="status-item-right">
					<view class="status-item-title">{{item.title}}</view>
					<view>{{item.time}}</view>
				</view>
			</view>
		</pub-loading-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, PropType, onMounted } from 'vue'

	import { cfStatusVO } from '../../lib/type';


	const props = defineProps({
		ptwybh: {
			type: String,
			default: ""
		},
		dataList: {
			type: Array as PropType<cfStatusVO[]>,
			default: () => []
		},
	})

	const loaded = ref(false)

	onMounted(() => {
	})
</script>

<style lang="scss" scoped>
	.cf-status {
		background: #fff;
		padding: $uni-spacing-col-s3 $page-row-spacing;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;

		.status-item {
			color: $uni-text-color-grey;
			display: flex;
			height: 140rpx;

			.status-item-left {
				@include flex;
				flex-direction: column;
				margin-right: 24rpx;

				.icon {
					width: 64rpx;
					height: 64rpx;
					background: $uni-bg-icon;
					border-radius: 50%;
					@include flex-center;


					.iconfont {
						background: linear-gradient(180deg, #46ACFF 0%, $uni-color-primary 100%);
						background-clip: text;
						text-fill-color: transparent;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-size: 40rpx;
					}
				}

				.line {
					flex: 1;
					// width: 1px;
					border-left: 1px solid $uni-border-color;
					margin: 12rpx 0;
				}
			}

			.status-item-right {
				.status-item-title {
					font-size: $uni-font-size-lg;
					line-height: $uni-line-height-lg;
					margin-bottom: 8rpx;
				}
			}

			&.is-current {
				.status-item-left {
					.line {
						border-left: 1px dashed $uni-color-primary;
					}
				}

				.status-item-right {
					color: $uni-text-color;

					.status-item-title {
						font-size: 32rpx;
						font-weight: 800;
					}
				}
			}

			&:last-child {
				.status-item-left {
					.line {
						display: none;
					}
				}
			}
		}
	}
</style>