feat：答题页面

伽蓝
1 parent f7e2b5dc
Showing 8 changed files with 254 additions and 16 deletions Show diff stats
src/assets/rank/by.png
src/assets/rank/qt.png
src/assets/rank/wx_back.png
src/component/Tabbar4.vue
src/router/index.js
src/views/Home/Home.vue
src/views/answerRank/ans_question.vue
src/views/answerRank/stars.vue
@@ -10,11 +10,11 @@
       <img v-else src="../assets/tabbar4/tab2_off.png" alt="">
       <p>每日一习</p>
     </div>
-    <!-- <div class="tab" :class="active=='rank'?'active':''" @click="handleRank">
+    <div class="tab" :class="active=='rank'?'active':''" @click="handleRank">
       <img v-if="active=='rank'" src="../assets/rank/rank_on.png" alt="">
       <img v-else src="../assets/rank/rank.png" alt="">
       <p>排行榜</p>
-    </div> -->
+    </div>
     <div class="tab" :class="active=='fruit'?'active':''" @click="handleFruit">
       <img v-if="active=='fruit'" src="../assets/tabbar4/fruit_on.png" alt="">
       <img v-else src="../assets/tabbar4/fruit_off.png" alt="">
@@ -43,6 +43,7 @@ import rank from &#39;@/views/answerRank/rank.vue&#39; //排行榜
 import ans_rank from '@/views/answerRank/ans_rank.vue' //答题排行榜
 import brush_questions from '@/views/answerRank/brush_questions.vue' //刷题记录
 import stars from '@/views/answerRank/stars.vue' //五星少年
+import ans_question from '@/views/answerRank/ans_question.vue' //答题
 Vue.use(VueRouter)
 const [routerPush, routerReplace] = [VueRouter.prototype.push, VueRouter.prototype.replace];
@@ -334,6 +335,14 @@ const routes = [{
         }
     },
     {
+        path: '/ans_question',
+        name: 'ans_question',
+        component: ans_question,
+        meta: {
+            title: '答题'
+        }
+    },
+    {
         path: '/YanxueDetail',
         name: 'YanxueDetail',
         component: YanxueDetail,
@@ -27,6 +27,13 @@
         </div>
         <van-icon name="arrow" />
       </div>
+      <div class="item" @click="handleStars">
+        <div class="left">
+          <van-icon class="icon" name="star-o" />
+          <span>五星少年</span>
+        </div>
+        <van-icon name="arrow" />
+      </div>
       <div class="item" @click="handleClearCache">
         <div class="left">
           <van-icon class="icon" name="user-circle-o" />
@@ -169,6 +176,10 @@ export default {
           })
       }
     },
+    //五星少年
+    handleStars() {
+      this.$router.push({name: 'stars'})
+    },
     // 清除缓存
     handleClearCache() {
       this.$toast.loading({
@@ -0,0 +1,116 @@
+<template>
+    <div class="bck">
+        <div class="title">
+            <div>单向选择</div>
+            <div>1<span>/5</span></div>
+        </div>
+        <div class="ans">
+            这是一套题的题目，这是一题非常有难度的题，其考点在于对地理知识的储备量
+        </div>
+
+        <div class="ans_card">
+            <div class="ans_item yellow">A.火星</div>
+            <div class="ans_item grey">B.水性</div>
+            <div class="ans_item grey">C.绍兴</div>
+        </div>
+
+        <div class="whiteLine"></div>
+
+        <div class="reply">
+            <div class="reply_title">正确答案:a</div>
+            <div class="reply_text">
+                解析:本题的难点在于基础知识的掌握,同学们要注意这个陷阱问题,区别火星和水星在初级阶段是比较容易混淆,所以本题答案选a
+            </div>
+        </div>
+
+        <div class="btn">下一题</div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {};
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.bck {
+    width: 100vw;
+    height: 100vh;
+    background-color: #f0f2f5;
+    padding: 5vw;
+    box-sizing: border-box;
+
+    .title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 4.5vw;
+        color: #ff7f24;
+        letter-spacing: 2px;
+        font-weight: 500;
+
+        span {
+            color: #999999;
+        }
+    }
+    .ans {
+        color: #333;
+        font-size: 4.4vw;
+        line-height: 50px;
+        font-weight: 600;
+        margin: 60px 0 50px;
+    }
+    .ans_card {
+        .ans_item {
+            margin: 60px 0;
+            font-size: 4.2vw;
+            letter-spacing: 3px;
+        }
+        .grey {
+            color: #999999;
+        }
+        .yellow {
+            color: #ff7f24;
+        }
+    }
+
+    .whiteLine {
+        margin: 150px 0 10px;
+        height: 2px;
+        width: 100%;
+        background-color: #fff;
+    }
+    .reply {
+        .reply_title {
+            color: #333333;
+            font-size: 4.3vw;
+            margin: 30px 0;
+        }
+        .reply_text {
+            font-size: 4.3vw;
+            color: #999999;
+            letter-spacing: 2px;
+            line-height: 50px;
+        }
+    }
+    .btn {
+        position: fixed;
+        left: 15vw;
+        bottom: 5vw;
+        width: 70vw;
+        height: 100px;
+        background-color: #FF3636;
+        font-size: 4.4vw;
+        margin: 30vw 0 10vw;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 10vw;
+        letter-spacing: 10px;
+    }
+}
+</style>
 \ No newline at end of file
@@ -53,7 +53,22 @@
         </div>
         <div class="card">
+            <div class="picBox">
+                <img src="@/assets/rank/wxsn.png" />
+            </div>
+            <div class="flexBox" v-for="(v, i) in libraryList" :key="i">
+                <div class="tipPic">
+                    <img :src="v.imgUrl" />
+                </div>
+                <div class="context">
+                    <div class="context_title">{{ v.name }}</div>
+                    <div class="context_grey">{{ v.text }}</div>
+                </div>
+                <div class="btnBox">
+                    <div class="btn" @click="toAns(i + 1)">开始答题</div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -61,7 +76,32 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+            libraryList: [
+                {
+                    name: "青铜级",
+                    text: "夯实基础，稳步前进",
+                    imgUrl: require("@/assets/rank/qt.png"),
+                },
+                {
+                    name: "黄金级",
+                    text: "夯实基础，稳步前进",
+                    imgUrl: require("@/assets/rank/hj.png"),
+                },
+                {
+                    name: "白金级",
+                    text: "夯实基础，稳步前进",
+                    imgUrl: require("@/assets/rank/bj.png"),
+                },
+            ],
+        };
+    },
+    methods: {
+        toAns(val) {
+            this.$router.push({
+                name: "ans_question",
+            });
+        },
     },
 };
 </script>
@@ -70,19 +110,19 @@ export default {
 .bck {
     position: absolute;
     width: 100vw;
-    min-height: 100vh;
-    background-image: url("../../assets/rank/red_rank.png");
+    height: 30vh;
+    background-image: url("../../assets/rank/wx_back.png");
     -moz-background-size: 100% 100%;
     background-size: 100% 100%;
     .box {
         display: flex;
         justify-content: space-between;
-        margin: 5vw 3vw;
+        margin: 5vw 3vw 8vw;
         .box_L {
             width: 45vw;
-            height: 350px;
+            height: 360px;
             background-color: #fff;
             border-radius: 30px;
             padding: 3vw 2vw;
@@ -90,6 +130,7 @@ export default {
             display: flex;
             flex-wrap: wrap;
             align-content: space-between;
+            border: 1px solid #ff6868;
             .L_top {
                 width: 100%;
@@ -136,7 +177,7 @@ export default {
                     font-size: 25px;
                     .grey_font {
-                        color:#999;
+                        color: #999;
                         font-size: 25px;
                         margin-top: 5px;
                     }
@@ -157,19 +198,20 @@ export default {
         }
         .box_R {
             width: 45vw;
-            height: 350px;
+            height: 360px;
             display: flex;
             flex-wrap: wrap;
             align-content: space-between;
             .box_R_item {
                 width: 100%;
-                height: 170px;
+                height: 165px;
                 border-radius: 30px;
                 display: flex;
                 justify-content: space-between;
                 padding: 20px 30px;
                 box-sizing: border-box;
+                background-color: #fff;
                 .title {
                     font-size: 30px;
@@ -195,12 +237,72 @@ export default {
     }
     .card {
-       width: 100%;
-       min-height: 800px;
-       background-color: #fff;
-       border-radius: 30px; 
-       padding: 2vw;
-       box-sizing: border-box;
+        width: 100%;
+        min-height: 800px;
+        background-color: #fff;
+        border-radius: 30px;
+        padding: 5vw 3vw;
+        box-sizing: border-box;
+
+        .picBox {
+            width: 100%;
+            margin-bottom: 30px;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .flexBox {
+            display: flex;
+            justify-content: space-between;
+            padding: 5vw 3vw;
+            box-sizing: border-box;
+            border-bottom: 1px solid #f1f1f1;
+
+            .tipPic {
+                img {
+                    width: 16vw;
+                    height: 16vw;
+                }
+            }
+            .context {
+                display: flex;
+                align-content: space-between;
+                flex-wrap: wrap;
+                padding: 5px 0;
+                box-sizing: border-box;
+                margin-left: 3vw;
+
+                .context_title {
+                    width: 100%;
+                    font-size: 36px;
+                    color: #333333;
+                }
+                .context_grey {
+                    font-size: 30px;
+                    color: #999999;
+                }
+            }
+            .btnBox {
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+
+                .btn {
+                    width: 180px;
+                    height: 70px;
+                    background-color: #fff2f2;
+                    color: #ff6868;
+                    padding: 10px 30px;
+                    box-sizing: border-box;
+                    font-size: 28px;
+                    border-radius: 30px;
+                    text-align: center;
+                }
+            }
+        }
     }
 }
 </style>
 \ No newline at end of file
	@@ -10,11 +10,11 @@		@@ -10,11 +10,11 @@
10	<img v-else src="../assets/tabbar4/tab2_off.png" alt="">	10	<img v-else src="../assets/tabbar4/tab2_off.png" alt="">
11	<p>每日一习</p>	11	<p>每日一习</p>
12	</div>	12	</div>
13	- <!-- <div class="tab" :class="active=='rank'?'active':''" @click="handleRank">	13	+ <div class="tab" :class="active=='rank'?'active':''" @click="handleRank">
14	<img v-if="active=='rank'" src="../assets/rank/rank_on.png" alt="">	14	<img v-if="active=='rank'" src="../assets/rank/rank_on.png" alt="">
15	<img v-else src="../assets/rank/rank.png" alt="">	15	<img v-else src="../assets/rank/rank.png" alt="">
16	<p>排行榜</p>	16	<p>排行榜</p>
17	- </div> -->	17	+ </div>
18	<div class="tab" :class="active=='fruit'?'active':''" @click="handleFruit">	18	<div class="tab" :class="active=='fruit'?'active':''" @click="handleFruit">
19	<img v-if="active=='fruit'" src="../assets/tabbar4/fruit_on.png" alt="">	19	<img v-if="active=='fruit'" src="../assets/tabbar4/fruit_on.png" alt="">
20	<img v-else src="../assets/tabbar4/fruit_off.png" alt="">	20	<img v-else src="../assets/tabbar4/fruit_off.png" alt="">
	@@ -27,6 +27,13 @@		@@ -27,6 +27,13 @@
27	</div>	27	</div>
28	<van-icon name="arrow" />	28	<van-icon name="arrow" />
29	</div>	29	</div>
		30	+ <div class="item" @click="handleStars">
		31	+ <div class="left">
		32	+ <van-icon class="icon" name="star-o" />
		33	+ <span>五星少年</span>
		34	+ </div>
		35	+ <van-icon name="arrow" />
		36	+ </div>
30	<div class="item" @click="handleClearCache">	37	<div class="item" @click="handleClearCache">
31	<div class="left">	38	<div class="left">
32	<van-icon class="icon" name="user-circle-o" />	39	<van-icon class="icon" name="user-circle-o" />
	@@ -169,6 +176,10 @@ export default {		@@ -169,6 +176,10 @@ export default {
169	})	176	})
170	}	177	}
171	},	178	},
		179	+ //五星少年
		180	+ handleStars() {
		181	+ this.$router.push({name: 'stars'})
		182	+ },
172	// 清除缓存	183	// 清除缓存
173	handleClearCache() {	184	handleClearCache() {
174	this.$toast.loading({	185	this.$toast.loading({
	@@ -0,0 +1,116 @@		@@ -0,0 +1,116 @@
		1	+<template>
		2	+ <div class="bck">
		3	+ <div class="title">
		4	+ <div>单向选择</div>
		5	+ <div>1<span>/5</span></div>
		6	+ </div>
		7	+ <div class="ans">
		8	+ 这是一套题的题目，这是一题非常有难度的题，其考点在于对地理知识的储备量
		9	+ </div>
		10	+
		11	+ <div class="ans_card">
		12	+ <div class="ans_item yellow">A.火星</div>
		13	+ <div class="ans_item grey">B.水性</div>
		14	+ <div class="ans_item grey">C.绍兴</div>
		15	+ </div>
		16	+
		17	+ <div class="whiteLine"></div>
		18	+
		19	+ <div class="reply">
		20	+ <div class="reply_title">正确答案:a</div>
		21	+ <div class="reply_text">
		22	+ 解析:本题的难点在于基础知识的掌握,同学们要注意这个陷阱问题,区别火星和水星在初级阶段是比较容易混淆,所以本题答案选a
		23	+ </div>
		24	+ </div>
		25	+
		26	+ <div class="btn">下一题</div>
		27	+ </div>
		28	+</template>
		29	+
		30	+<script>
		31	+export default {
		32	+ data() {
		33	+ return {};
		34	+ },
		35	+};
		36	+</script>
		37	+
		38	+<style lang="scss" scoped>
		39	+.bck {
		40	+ width: 100vw;
		41	+ height: 100vh;
		42	+ background-color: #f0f2f5;
		43	+ padding: 5vw;
		44	+ box-sizing: border-box;
		45	+
		46	+ .title {
		47	+ display: flex;
		48	+ align-items: center;
		49	+ justify-content: space-between;
		50	+ font-size: 4.5vw;
		51	+ color: #ff7f24;
		52	+ letter-spacing: 2px;
		53	+ font-weight: 500;
		54	+
		55	+ span {
		56	+ color: #999999;
		57	+ }
		58	+ }
		59	+ .ans {
		60	+ color: #333;
		61	+ font-size: 4.4vw;
		62	+ line-height: 50px;
		63	+ font-weight: 600;
		64	+ margin: 60px 0 50px;
		65	+ }
		66	+ .ans_card {
		67	+ .ans_item {
		68	+ margin: 60px 0;
		69	+ font-size: 4.2vw;
		70	+ letter-spacing: 3px;
		71	+ }
		72	+ .grey {
		73	+ color: #999999;
		74	+ }
		75	+ .yellow {
		76	+ color: #ff7f24;
		77	+ }
		78	+ }
		79	+
		80	+ .whiteLine {
		81	+ margin: 150px 0 10px;
		82	+ height: 2px;
		83	+ width: 100%;
		84	+ background-color: #fff;
		85	+ }
		86	+ .reply {
		87	+ .reply_title {
		88	+ color: #333333;
		89	+ font-size: 4.3vw;
		90	+ margin: 30px 0;
		91	+ }
		92	+ .reply_text {
		93	+ font-size: 4.3vw;
		94	+ color: #999999;
		95	+ letter-spacing: 2px;
		96	+ line-height: 50px;
		97	+ }
		98	+ }
		99	+ .btn {
		100	+ position: fixed;
		101	+ left: 15vw;
		102	+ bottom: 5vw;
		103	+ width: 70vw;
		104	+ height: 100px;
		105	+ background-color: #FF3636;
		106	+ font-size: 4.4vw;
		107	+ margin: 30vw 0 10vw;
		108	+ color: #fff;
		109	+ display: flex;
		110	+ justify-content: center;
		111	+ align-items: center;
		112	+ border-radius: 10vw;
		113	+ letter-spacing: 10px;
		114	+ }
		115	+}
		116	+</style>
0	\ No newline at end of file	117	\ No newline at end of file
	@@ -53,7 +53,22 @@		@@ -53,7 +53,22 @@
53	</div>	53	</div>
54		54
55	<div class="card">	55	<div class="card">
		56	+ <div class="picBox">
		57	+ <img src="@/assets/rank/wxsn.png" />
		58	+ </div>
56		59
		60	+ <div class="flexBox" v-for="(v, i) in libraryList" :key="i">
		61	+ <div class="tipPic">
		62	+ <img :src="v.imgUrl" />
		63	+ </div>
		64	+ <div class="context">
		65	+ <div class="context_title">{{ v.name }}</div>
		66	+ <div class="context_grey">{{ v.text }}</div>
		67	+ </div>
		68	+ <div class="btnBox">
		69	+ <div class="btn" @click="toAns(i + 1)">开始答题</div>
		70	+ </div>
		71	+ </div>
57	</div>	72	</div>
58	</div>	73	</div>
59	</template>	74	</template>
	@@ -61,7 +76,32 @@		@@ -61,7 +76,32 @@
61	<script>	76	<script>
62	export default {	77	export default {
63	data() {	78	data() {
64	- return {};	79	+ return {
		80	+ libraryList: [
		81	+ {
		82	+ name: "青铜级",
		83	+ text: "夯实基础，稳步前进",
		84	+ imgUrl: require("@/assets/rank/qt.png"),
		85	+ },
		86	+ {
		87	+ name: "黄金级",
		88	+ text: "夯实基础，稳步前进",
		89	+ imgUrl: require("@/assets/rank/hj.png"),
		90	+ },
		91	+ {
		92	+ name: "白金级",
		93	+ text: "夯实基础，稳步前进",
		94	+ imgUrl: require("@/assets/rank/bj.png"),
		95	+ },
		96	+ ],
		97	+ };
		98	+ },
		99	+ methods: {
		100	+ toAns(val) {
		101	+ this.$router.push({
		102	+ name: "ans_question",
		103	+ });
		104	+ },
65	},	105	},
66	};	106	};
67	</script>	107	</script>
	@@ -70,19 +110,19 @@ export default {		@@ -70,19 +110,19 @@ export default {
70	.bck {	110	.bck {
71	position: absolute;	111	position: absolute;
72	width: 100vw;	112	width: 100vw;
73	- min-height: 100vh;
74	- background-image: url("../../assets/rank/red_rank.png");	113	+ height: 30vh;
		114	+ background-image: url("../../assets/rank/wx_back.png");
75	-moz-background-size: 100% 100%;	115	-moz-background-size: 100% 100%;
76	background-size: 100% 100%;	116	background-size: 100% 100%;
77		117
78	.box {	118	.box {
79	display: flex;	119	display: flex;
80	justify-content: space-between;	120	justify-content: space-between;
81	- margin: 5vw 3vw;	121	+ margin: 5vw 3vw 8vw;
82		122
83	.box_L {	123	.box_L {
84	width: 45vw;	124	width: 45vw;
85	- height: 350px;	125	+ height: 360px;
86	background-color: #fff;	126	background-color: #fff;
87	border-radius: 30px;	127	border-radius: 30px;
88	padding: 3vw 2vw;	128	padding: 3vw 2vw;
	@@ -90,6 +130,7 @@ export default {		@@ -90,6 +130,7 @@ export default {
90	display: flex;	130	display: flex;
91	flex-wrap: wrap;	131	flex-wrap: wrap;
92	align-content: space-between;	132	align-content: space-between;
		133	+ border: 1px solid #ff6868;
93		134
94	.L_top {	135	.L_top {
95	width: 100%;	136	width: 100%;
	@@ -136,7 +177,7 @@ export default {		@@ -136,7 +177,7 @@ export default {
136	font-size: 25px;	177	font-size: 25px;
137		178
138	.grey_font {	179	.grey_font {
139	- color:#999;	180	+ color: #999;
140	font-size: 25px;	181	font-size: 25px;
141	margin-top: 5px;	182	margin-top: 5px;
142	}	183	}
	@@ -157,19 +198,20 @@ export default {		@@ -157,19 +198,20 @@ export default {
157	}	198	}
158	.box_R {	199	.box_R {
159	width: 45vw;	200	width: 45vw;
160	- height: 350px;	201	+ height: 360px;
161	display: flex;	202	display: flex;
162	flex-wrap: wrap;	203	flex-wrap: wrap;
163	align-content: space-between;	204	align-content: space-between;
164		205
165	.box_R_item {	206	.box_R_item {
166	width: 100%;	207	width: 100%;
167	- height: 170px;	208	+ height: 165px;
168	border-radius: 30px;	209	border-radius: 30px;
169	display: flex;	210	display: flex;
170	justify-content: space-between;	211	justify-content: space-between;
171	padding: 20px 30px;	212	padding: 20px 30px;
172	box-sizing: border-box;	213	box-sizing: border-box;
		214	+ background-color: #fff;
173		215
174	.title {	216	.title {
175	font-size: 30px;	217	font-size: 30px;
	@@ -195,12 +237,72 @@ export default {		@@ -195,12 +237,72 @@ export default {
195	}	237	}
196		238
197	.card {	239	.card {
198	- width: 100%;
199	- min-height: 800px;
200	- background-color: #fff;
201	- border-radius: 30px;
202	- padding: 2vw;
203	- box-sizing: border-box;	240	+ width: 100%;
		241	+ min-height: 800px;
		242	+ background-color: #fff;
		243	+ border-radius: 30px;
		244	+ padding: 5vw 3vw;
		245	+ box-sizing: border-box;
		246	+
		247	+ .picBox {
		248	+ width: 100%;
		249	+ margin-bottom: 30px;
		250	+
		251	+ img {
		252	+ width: 100%;
		253	+ height: 100%;
		254	+ }
		255	+ }
		256	+
		257	+ .flexBox {
		258	+ display: flex;
		259	+ justify-content: space-between;
		260	+ padding: 5vw 3vw;
		261	+ box-sizing: border-box;
		262	+ border-bottom: 1px solid #f1f1f1;
		263	+
		264	+ .tipPic {
		265	+ img {
		266	+ width: 16vw;
		267	+ height: 16vw;
		268	+ }
		269	+ }
		270	+ .context {
		271	+ display: flex;
		272	+ align-content: space-between;
		273	+ flex-wrap: wrap;
		274	+ padding: 5px 0;
		275	+ box-sizing: border-box;
		276	+ margin-left: 3vw;
		277	+
		278	+ .context_title {
		279	+ width: 100%;
		280	+ font-size: 36px;
		281	+ color: #333333;
		282	+ }
		283	+ .context_grey {
		284	+ font-size: 30px;
		285	+ color: #999999;
		286	+ }
		287	+ }
		288	+ .btnBox {
		289	+ display: flex;
		290	+ justify-content: flex-end;
		291	+ align-items: center;
		292	+
		293	+ .btn {
		294	+ width: 180px;
		295	+ height: 70px;
		296	+ background-color: #fff2f2;
		297	+ color: #ff6868;
		298	+ padding: 10px 30px;
		299	+ box-sizing: border-box;
		300	+ font-size: 28px;
		301	+ border-radius: 30px;
		302	+ text-align: center;
		303	+ }
		304	+ }
		305	+ }
204	}	306	}
205	}	307	}
206	</style>	308	</style>
207	\ No newline at end of file	309	\ No newline at end of file