zhxy-desk/components/LeaveInfo.vue

<template>
	<view class="leave">
		<view @click="itemClick(item)" v-for="(item,index) in list" :key="index" class="leave-item">
			<view class="leave-item-title">
				<view class="leave-item-title-left">
					{{item.name}}
				</view>
				<view class="leave-item-title-right">
					<view :style="`background-color:${item.color} ;`" class="leave-item-title-right-color">

					</view>
					<view :style="`color:${item.color} ;`" class="leave-item-title-right-status">
						{{item.text}}
					</view>
				</view>
			</view>

			<view class="leave-item-content">
				{{item.content}}
			</view>

			<view class="leave-item-date">
				申请日期：　{{item.date}}
			</view>

			<view v-if="item.status == 1 || item.status == 2" class="leave-item-result">
                <view class="leave-item-result-title">
                	 <view class="">
                	 	班主任回复
                	 </view>
					 <view class="">
					 	审批日期 ： {{item.approvalTime}}
					 </view>
                </view>
				<view class="leave-item-result-content">
					 {{item.recover}}
				</view>
			</view>
		</view>
	</view>
</template>

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

			};
		},
		methods:{
			itemClick(item){
				this.$emit('itemClick',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.leave {
		width: 100%;
		font-family: 'PingFang';

		.leave-item {
			padding: 32rpx;
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 5.33px;
			box-shadow: 0px 0px 6.67px 0px rgba(147, 147, 147, 0.10);
			margin-bottom: 32rpx;

			.leave-item-result {
				width: 100%;
				padding: 24rpx;
				background: #f2f2f2;
				border-radius: 5.33px;
				box-sizing: border-box;
				margin-top: 24rpx;
				font-size: 24rpx;
				.leave-item-result-title {
					 display: flex;
					 justify-content: space-between;
					 color: #999;
				}
			}

			.leave-item-date {
				color: #999;
				font-size: 24rpx;
			}

			.leave-item-content {
				padding: 24rpx 0;
			}

			.leave-item-title {
				display: flex;
				justify-content: space-between;
				padding-bottom: 24rpx;
				border-bottom: 1px solid #f2f2f2;

				.leave-item-title-left {
					font-size: 32rpx;
					font-weight: 700;
				}

				.leave-item-title-right {
					display: flex;
					align-items: center;

					.leave-item-title-right-color {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						margin-right: 24rpx;
					}
				}
			}
		}
	}
</style>