cocoroboBlockly/src/components/index.vue

<template>
	<div style="background: #fff">
		<div class="one">
			<div class="class"><img src="../assets/img/class.png" alt="" /></div>
			<div class="right">
				<div class="buttonClass">
					<div class="noOnclick" :class="{Volume :type1 == 0}" @click="type1= 0">上册</div>
					<div class="noOnclick" :class="{Volume :type1 == 1}" @click="type1= 1">下册</div>
				</div>
				<div class="grade"><img src="../assets/img/grade.png" alt="" /></div>
			</div>
		</div>
		<div class="two" v-if="type1 == 0">
			<div class="all" :class="{ active: type == 0 }" @click="type = 0">
				<img src="../assets/img/all.png" alt="" />
			</div>
			<div class="third" :class="{ active: type == 1 }" @click="type = 1">
				<img src="../assets/img/third.png" alt="" />
			</div>
			<div class="fourth" :class="{ active: type == 2 }" @click="type = 2">
				<img src="../assets/img/fourth.png" alt="" />
			</div>
			<div class="fiveth" :class="{ active: type == 3 }" @click="type = 3">
				<img src="../assets/img/fiveth.png" alt="" />
			</div>
			<div class="sixth" :class="{ active: type == 4 }" @click="type = 4">
				<img src="../assets/img/sixth.png" alt="" />
			</div>
			<div class="seven" :class="{ active: type == 5 }" @click="type = 5">
				<img src="../assets/img/seven.png" alt="" />
			</div>
			<div class="eight" :class="{ active: type == 6 }" @click="type = 6">
				<img src="../assets/img/eight.png" alt="" />
			</div>
		</div>
		<div class="five" v-else>
			<div class="all" :class="{ active: type2 == 0 }" @click="type2 = 0">
				<img src="../assets/img/all.png" alt="" />
			</div>
			<div class="third" :class="{ active: type2 == 1 }" @click="type2 = 1">
				<img src="../assets/img/threeLast.png" alt="" />
			</div>
			<div class="fourth" :class="{ active: type2 == 2 }" @click="type2 = 2">
				<img src="../assets/img/fourLast.png" alt="" />
			</div>
			<div class="fiveth" :class="{ active: type2 == 3 }" @click="type2 = 3">
				<img src="../assets/img/fiveLast.png" alt="" />
			</div>
			<div class="sixth" :class="{ active: type2 == 4 }" @click="type2 = 4">
				<img src="../assets/img/sixLast.png" alt="" />
			</div>
			<div class="seven" :class="{ active: type2 == 5 }" @click="type2 = 5">
				<img src="../assets/img/sevenLast.png" alt="" />
			</div>
			<div class="eight" :class="{ active: type2 == 6 }" @click="type2 = 6">
				<img src="../assets/img/eightLast.png" alt="" />
			</div>
		</div>
		<div class="three" v-if="res[type].length > 0 && type1 == 0">
			<div v-for="(r, index) in res[type]" :key="index">
				<img
					:src="r.poster"
					alt=""
					@click="goto(r.path)"
					class="tp"
					:class="{ dan: r.path == '' }"
				/>
			</div>
		</div>
		<div class="six" v-else-if="res1[type2].length > 0 && type1 == 1">
			<div v-for="(r, index) in res1[type2]" :key="index">
				<img
					:src="r.poster"
					alt=""
					@click="goto(r.path)"
					class="tp"
					:class="{ dan: r.path == '' }"
				/>
			</div>
		</div>
		<div class="four" v-else>
			<div class="null"><img src="../assets/img/null.png" alt="" /></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,//判断上册哪个年级
				type1: 0,//判断上册还是下册
				type2: 0,//判断下册哪个年级
				res1: [
					[
						{ poster: require("../assets/img/qcRobot.png"), path: "" },
						{ poster: require("../assets/img/necklace.png"), path: "" },
						{ poster: require("../assets/img/qiRobot.png"), path: "" },
						{ poster: require("../assets/img/policeCard.png"), path: "police" },
					],
					[],
					[],
					[
						{ poster: require("../assets/img/qcRobot.png"), path: "" },
					],
					[
						{ poster: require("../assets/img/necklace.png"), path: "" },
						{ poster: require("../assets/img/qiRobot.png"), path: "" },
					],
					[
						{ poster: require("../assets/img/policeCard.png"), path: "police" },
					],
					[]
				],
				res: [
					[
						{ poster: require("../assets/img/light.png"), path: "light" },
						{ poster: require("../assets/img/door.png"), path: "door" },
						{ poster: require("../assets/img/curtain.png"), path: "" },
						{ poster: require("../assets/img/robot.png"), path: "" },
						{ poster: require("../assets/img/car.png"), path: "" },
						{ poster: require("../assets/img/pay.png"), path: "" },
						{ poster: require("../assets/img/traffic.png"), path: "traffic" },
					],
					[
						{ poster: require("../assets/img/light.png"), path: "light" },
						{ poster: require("../assets/img/door.png"), path: "door" },
					],
					[],
					[
						{ poster: require("../assets/img/curtain.png"), path: "" },
						{ poster: require("../assets/img/robot.png"), path: "" },
					],
					[
						{ poster: require("../assets/img/car.png"), path: "" },
						{ poster: require("../assets/img/traffic.png"), path: "traffic" },
					],
					[],
					[
						{ poster: require("../assets/img/pay.png"), path: "" },
					]
				],
			};
		},
		directives: {
			drag: {},
		},
		methods: {
			goto(value) {
				if (value != "") {
					this.$router.push(value);
				}
			},
		},
	};
</script>

<style scoped>
	html,
	body {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.one {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.four {
		width: 300px;
		margin: auto;
		padding-top: 100px;
		box-sizing: border-box;
	}

	.upnone{
		display: none;
	}

	.class {
		margin: 30px 0 0 35px;
		width: 250px;
	}

	.grade {
		margin: 30px 35px 0 0;
		width: 110px;
	}

	.active {
		opacity: 1 !important;
	}

	.dan {
		width: 380px;
		margin: 0 60px 40px 0;
		opacity: 0.5 !important;
	}

	.tp {
		width: 380px;
		margin: 0 60px 40px 0;
		cursor: pointer;
	}

	.two,
	.five {
		margin: 10px 0 0 55px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.three,
	.six {
		width: 100%;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		padding: 50px 0 0 45px;
		box-sizing: border-box;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.all,
	.first,
	.second,
	.third,
	.fourth,
	.fiveth,
	.sixth,
	.seven,
	.eight {
		width: 115px;
		margin-right: 30px;
		cursor: pointer;
		opacity: 0.5;
	}

	.right {
		display: flex;
		align-items: center;
	}

	.buttonClass {
		margin-right: 10px;
		display: flex;
		width: 150px;
		justify-content: space-around;
	}

	.noOnclick {
		background: #eeeeee;
		color: #ccc;
		width: 60px;
		text-align: center;
		padding: 5px 0;
		border-radius: 5px;
		cursor: pointer;
	}

	.Volume{
		background: #7194f7;
		color: #fff;
	}


	.class > img,
	.grade > img,
	.all > img,
	.first > img,
	.second > img,
	.third > img,
	.fourth > img,
	.fiveth > img,
	.sixth > img,
	.seven > img,
	.eight > img,
	.light > img,
	.door > img,
	.curtain > img,
	.robot > img,
	.car > img,
	.null > img,
	.traffic > img,
	.pay > img,
	.police > img {
		width: 100%;
	}
</style>