<template>
	<div class="pb_content">
		<div class="pb_head">
			<span>素材库</span>
		</div>
		<div class="pb_content_body" style="height: 70%">
			<div class="student_head">
				<div class="three">
					<div :class="choose == 0 ? 'choose' : ''" @click="choose = 0">
						图片
					</div>
					<div :class="choose == 1 ? 'choose' : ''" @click="choose = 1">
						视频
					</div>
					<div :class="choose == 2 ? 'choose' : ''" @click="choose = 2">
						音频
					</div>
				</div>
				<div class="student_button">
					<el-button type="primary">上传素材</el-button>
				</div>
			</div>
			<div class="student_table">
				<div v-if="this.choose == 0" style="padding: 15px 5px;display: flex;">
					<div class="out_box">
						<div class="tup"><img src="../../assets/tup1.png" alt="" /></div>
						<div class="bottom_box">
							<div>人工智能封面.png</div>
							<div class="update">
								<img src="../../assets/update.png" alt="" />
							</div>
						</div>
					</div>
				</div>
                <div v-if="this.choose == 1" style="padding: 15px 5px;display: flex;">
					<div class="out_box">
						<div class="tup"><img src="../../assets/sp1.png" alt="" /></div>
						<div class="bottom_box">
							<div>2312193.mp4</div>
							<div class="update">
								<img src="../../assets/update.png" alt="" />
							</div>
						</div>
					</div>
                    <div class="out_box">
						<div class="tup"><img src="../../assets/sp1.png" alt="" /></div>
						<div class="bottom_box">
							<div>2312193.mp4</div>
							<div class="update">
								<img src="../../assets/update.png" alt="" />
							</div>
						</div>
					</div>
				</div>
                <div v-if="this.choose == 2" style="padding: 15px 5px;display: flex;">
					<div class="out_box">
						<div class="tup"><img src="../../assets/yp1.png" alt="" /></div>
						<div class="bottom_box">
							<div>人工智能.mp4</div>
							<div class="update">
								<img src="../../assets/update.png" alt="" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				choose: 0,
			};
		},
		methods: {},
		created() {},
	};
</script>

<style scoped>
	.student_button {
		display: flex;
		overflow: hidden;
		height: 40px;
	}
	.student_head >>> .el-button--primary {
		background-color: #2268bc;
	}
	.student_head {
		display: flex;
		justify-content: space-between;
	}
	.three {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 200px;
		height: 30px;
	}

	.three > div {
		cursor: pointer;
	}

	.choose {
		border-bottom: 5px solid #3994fd;
	}

	.student_table {
		width: 100%;
		height: 100%;
		background: #f2f2f2;
		margin-top: 10px;
	}

	.tup {
		width: 200px;
		margin: 0 auto;
	}

	.update {
		width: 19px;
		height: 20px;
		margin-left: 10px;
	}

	.tup > img,
	.update > img {
		width: 100%;
		height: 100%;
	}

	.out_box {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 250px;
		padding: 10px 0;
		background: #fff;
        margin-left: 25px;
	}

	.bottom_box {
		display: flex;
		text-align: center;
		margin: 0 auto;
		margin-top: 5px;
	}
</style>
