<template>
	<div class="pb_content2" style="background: #e8e7e7">
		<div class="pb_head">
			<van-icon
				name="arrow-left"
				color="#fff"
				class="pb_back"
				size="1.2rem"
				@click="goBack"
			/>
			<span>吴佳琪的义工任务</span>
		</div>
		<div class="pb_content_body" style="position: relative;min-height: calc(100% - 3.5rem);">
			<div class="is_who_work">
				<div class="new_left">
					<div class="tx">
						<img src="../../assets/icon/portal.png" alt="" />
					</div>
					<div class="tx_nav">
						<div class="new_title">吴佳琪</div>
						<div class="new_content">三年级五班</div>
					</div>
				</div>
			</div>
			<div class="work_detail">
				<div class="work_top">
					<div class="lag">
						<img src="../../assets/icon/heart.png" alt="" />
					</div>
					<div class="work_title">麓城亲戚义工任务</div>
				</div>
				<div class="work_content">
					开展"家务劳动小能手"让幼儿体会父母的辛苦，激发幼儿为父母分担家务劳动的激情。因此让幼儿在家里做一件力所能及的家务。
				</div>
				<div class="work_time">09-24 18:00 周五发布</div>
			</div>
			<div class="ex_date">
				<div class="ex_left">
					<div class="nolck">
						<img src="../../assets/icon/nolck.png" alt="" />
					</div>
					<div class="ex_time">截止日期</div>
				</div>
				<div class="ex_right">09-26 周日 23:59</div>
			</div>
			<div class="upload_work" @click="checkNow">审核通过</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			goBack() {
				this.$router.isBack = true;
				if (window.history.length <= 1) {
					this.$router.push({ path: "/" });
					return false;
				} else {
					this.$router.go(-1);
				}
			},
			checkNow() {
				this.$toast.success("审核成功");
				setTimeout(() => {
					this.goBack();
				}, 1000);
			},
		},
	};
</script>

<style scoped>
	.is_who_work {
		display: flex;
		background: #fff;
		width: 90%;
		margin: 0.5rem auto;
		border-radius: 0.3rem;
	}
	.new_left {
		display: flex;
		padding: 0.2rem 0 0.5rem 0.8rem;
	}
	.new_title {
		font-size: 0.8rem;
		margin-bottom: 0.2rem;
	}
	.new_content {
		font-size: 0.5rem;
		color: #5c5e5d;
	}
	.tx {
		width: 2rem;
		height: 2rem;
		line-height: 4rem;
	}
	.tx > img {
		width: 100%;
		height: 100%;
	}
	.tx_nav {
		margin: 0.5rem 0 0 0.5rem;
	}
	.lag > img,
	.nolck > img {
		width: 100%;
		height: 100%;
	}
	.lag {
		width: 1.5rem;
		height: 1.5rem;
	}
	.work_detail {
		background: #fff;
		width: 90%;
		margin: 1rem auto;
	}
	.work_top {
		display: flex;
		padding: 0.8rem 0.5rem 0 0.5rem;
	}
	.work_title {
		font-size: 0.9rem;
		font-weight: bold;
		line-height: 1.4rem;
		padding-left: 0.4rem;
		border-radius: 0.3rem;
	}
	.work_content {
		width: 90%;
		margin: 0 auto;
		font-size: 0.8rem;
		color: #999;
		line-height: 1.5rem;
		padding: 0.3rem 0 0.8rem 0;
	}
	.work_time {
		color: #999;
		font-size: 0.4rem;
		padding: 0.5rem 1.2rem;
	}
	.nolck {
		width: 1.1rem;
		height: 1.1rem;
		line-height: 1.9rem;
	}
	.ex_date {
		display: flex;
		width: 90%;
		margin: 0 auto;
		background: #fff;
		padding: 0.5rem 0;
		flex-direction: row;
		justify-content: space-around;
		border-radius: 0.3rem;
	}
	.ex_left {
		display: flex;
	}
	.ex_time {
		font-size: 0.8rem;
		line-height: 1.5rem;
		padding-left: 0.4rem;
	}
	.ex_right {
		font-size: 0.8rem;
		line-height: 1.5rem;
	}
	.upload_work {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 2.8rem;
		background: #f86a6a;
		color: #fff;
		text-align: center;
		line-height: 2.8rem;
	}
</style>
