<template>
	<div class="pb_content2">
		<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">
			<div class="body_top_second">
				<el-input placeholder="搜索成员..."></el-input>
				<div class="search_img">
					<img src="../../assets/icon/search.png" alt="" />
				</div>
			</div>
			<div class="choose_box">
				<div
					:class="choose == 0 ? 'ischoose' : 'isnochoose'"
					@click="choose = 0"
				>
					未审核
				</div>
				<div
					:class="choose == 1 ? 'ischoose' : 'isnochoose'"
					@click="choose = 1"
				>
					已审核
				</div>
			</div>
			<div class="body_content" v-if="this.choose == 0">
				<div class="content_body">
					<div class="content_new" @click="goTo('/examineWork')">
						<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 class="new_right">去审核</div>
					</div>
					<div class="content_new" @click="goTo('/examineWork')">
						<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 class="new_right">去审核</div>
					</div>
					<div class="content_new" @click="goTo('/examineWork')">
						<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 class="new_right">去审核</div>
					</div>
				</div>
			</div>
			<div class="body_content" v-if="this.choose == 1">
				<div class="content_body">
					<div class="content_new">
						<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 class="new_right">已审核</div>
					</div>
					<div class="content_new">
						<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 class="new_right">已审核</div>
					</div>
					<div class="content_new">
						<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 class="new_right">已审核</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				choose: 0,
			};
		},
		methods: {
			goTo(path) {
				this.$router.push(path);
			},
			goBack() {
				this.$router.isBack = true;
				if (window.history.length <= 1) {
					this.$router.push({ path: "/" });
					return false;
				} else {
					this.$router.go(-1);
				}
			},
		},
	};
</script>

<style scoped>
	.body_top_second {
		position: relative;
	}
	.body_top_second >>> .el-input > input {
		border: none;
		height: 2rem;
	}
	.search_img {
		width: 1.2rem;
		height: 1.2rem;
		position: absolute;
		top: 0.5rem;
		right: 0.4rem;
	}
	.search_img > img,
	.tx > img {
		width: 100%;
		height: 100%;
	}
	.choose_box {
		display: flex;
		margin: 0.5rem;
	}
	.ischoose {
		border-bottom: 5px solid #51c970;
		border-radius: 0.1rem;
		padding-bottom: 0.2rem;
	}
	.choose_box > div {
		margin: 0.8rem 0 0 1rem;
		font-size: 0.7rem;
		width: 2.8rem;
		text-align: center;
	}
	.isnochoose {
		color: #9e9e9e;
	}
	.content_body {
		width: 95%;
		margin: 0 auto;
		height: 18rem;
		background: #fff;
		overflow: auto;
		border-radius: 0.6rem;
		box-shadow: 0.2rem 0.5rem 2em #ccc;
	}
	.content_new {
		display: flex;
		width: 90%;
		margin: 0 auto;
		flex-direction: row;
		padding: 0.4rem 0 0.2rem 0.6rem;
		justify-content: space-evenly;
		border-bottom: 1px dashed #999;
	}
	.new_left {
		display: flex;
		width: 70%;
	}
	.new_title {
		font-size: 0.8rem;
		margin-bottom: 0.4rem;
	}
	.new_content {
		font-size: 0.5rem;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 250px;
		white-space: nowrap;
	}
	.new_right {
		font-size: 0.2rem;
		line-height: 3rem;
		color: #f54444;
		width: 20%;
	}
	.tx {
		width: 2rem;
		height: 2rem;
		line-height: 4.2rem;
	}
	.tx_nav {
		margin: 0.5rem 0 0 0.5rem;
		width: 45%;
	}
</style>
