zhxy-desk/components/punishmentInfo.vue

<template>
	<view class="punishment-info">
		<view class="punishment-info-item" v-for="(item,index) in list" :key="index">
			<view class="punishment-info-item-icon">
				!
			</view>
			<view class="punishment-info-item-text">
				{{item.title}}
			</view>
			<view class="punishment-info-item-date">
				{{item.date}}
			</view>
		</view>
	</view>
</template>

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

			};
		}
	}
</script>

<style lang="scss">
	.punishment-info {
		width: 100%;

		.punishment-info-item {
			width: 100%;
			display: flex;
			align-items: center;

			.punishment-info-item-icon {
				width: 28rpx;
				text-align: center;
				height: 28rpx;
				line-height: 28rpx;
				color: rgba(253, 173, 70, 1);
				border-radius: 50%;
				border: 1px solid rgba(253, 173, 70, 1);
				margin-right: 20rpx;
			}
			.punishment-info-item-text {
				flex: 1;
			}
			.punishment-info-item-date {
				color: #999;
			}
		}
	}
</style>