1

Signed-off-by: lcw <1324309909@qq.com>

src/components/index.vue

@@ -1,24 +1,85 @@
 <template>
-	<div style="background: #fff;">
+	<div style="background: #fff">
 		<div class="one">
 			<div class="class"><img src="../assets/img/class.png" alt="" /></div>
-			<div class="grade"><img src="../assets/img/grade.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">
-			<div class="all" :class="{'active' : type == 0}" @click="type = 0"><img src="../assets/img/all.png" alt="" /></div>
-			<div class="first" :class="{'active' : type == 1}" @click="type = 1"><img src="../assets/img/first.png" alt="" /></div>
-			<div class="second" :class="{'active' : type == 2}" @click="type = 2"><img src="../assets/img/second.png" alt="" /></div>
-			<div class="third" :class="{'active' : type == 3}" @click="type = 3"><img src="../assets/img/third.png" alt="" /></div>
-			<div class="fourth" :class="{'active' : type == 4}" @click="type = 4"><img src="../assets/img/fourth.png" alt="" /></div>
-			<div class="fiveth" :class="{'active' : type == 5}" @click="type = 5"><img src="../assets/img/fiveth.png" alt="" /></div>
-			<div class="sixth" :class="{'active' : type == 6}" @click="type = 6"><img src="../assets/img/sixth.png" alt="" /></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="three">
-			<div class="light" @click="light"><img src="../assets/img/light.png" alt="" /></div>
-			<div class="door" @click="door"><img src="../assets/img/door.png" alt="" /></div>
-			<div class="curtain"><img src="../assets/img/curtain.png" alt="" /></div>
-			<div class="robot"><img src="../assets/img/robot.png" alt="" /></div>
-			<div class="car"><img src="../assets/img/car.png" alt="" /></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>
@@ -27,20 +88,70 @@
 	export default {
 		data() {
 			return {
-                type: 0,
-            };
+				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: {
-            light(){
-                window.location.href = '../#/light'
-            },
-            door(){
-                window.location.href = '../#/door'
-            },
-        },
+			goto(value) {
+				if (value != "") {
+					this.$router.push(value);
+				}
+			},
+		},
 	};
 </script>
 
@@ -58,6 +169,17 @@
 		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;
@@ -68,24 +190,39 @@
 		width: 110px;
 	}
 
-    .active{
-        opacity: 1 !important;
-    }
+	.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 {
+	.two,
+	.five {
 		margin: 10px 0 0 55px;
 		display: flex;
 		flex-direction: row;
 		justify-content: flex-start;
 	}
 
-	.three {
-		width: 1465px;
+	.three,
+	.six {
+		width: 100%;
 		display: flex;
 		-webkit-box-orient: horizontal;
 		-webkit-box-direction: normal;
 		flex-direction: row;
-		margin: 50px 0 0 35px;
+		padding: 50px 0 0 45px;
+		box-sizing: border-box;
 		flex-wrap: wrap;
 		justify-content: flex-start;
 	}
@@ -96,23 +233,43 @@
 	.third,
 	.fourth,
 	.fiveth,
-	.sixth {
+	.sixth,
+	.seven,
+	.eight {
 		width: 115px;
 		margin-right: 30px;
-        cursor: pointer;
-        opacity: 0.5;
+		cursor: pointer;
+		opacity: 0.5;
 	}
 
-	.light,
-	.door,
-	.curtain,
-	.robot,
-	.car {
-		    width: 380px;
-		margin: 0 60px 40px 0;
-        cursor: pointer;
+	.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,
@@ -122,11 +279,17 @@
 	.fourth > img,
 	.fiveth > img,
 	.sixth > img,
+	.seven > img,
+	.eight > img,
 	.light > img,
 	.door > img,
 	.curtain > img,
 	.robot > img,
-	.car > img {
+	.car > img,
+	.null > img,
+	.traffic > img,
+	.pay > img,
+	.police > img {
 		width: 100%;
 	}
 </style>

src/router/index.js

@@ -17,6 +17,7 @@ import index from '@/components/index'
 Vue.use(Router).use(ElementUI)
 
 export default new Router({
+  mode: 'history',  //去掉url中的#
   routes: [
     {
       path: '/police',