SxhGroup / sxhPersonalCenterZLB

Download as
Browse Code »

Commit a3fab231ce88cacf3daff3daaee9f4cbc1df9ebe

Authored by 伽蓝
1 parent f7e2b5dc
Exists in master

feat：答题页面

Showing 8 changed files with 254 additions and 16 deletions   Show diff stats
src/assets/rank/by.png
View file @f7e2b5d

9.72 KB
src/assets/rank/qt.png 0 → 100644
View file @a3fab23

9.72 KB
src/assets/rank/wx_back.png 0 → 100644
View file @a3fab23

469 KB
src/component/Tabbar4.vue
  Diff comments   View file @a3fab23
... ... @@ -10,11 +10,11 @@
10 10 <img v-else src="../assets/tabbar4/tab2_off.png" alt="">
11 11 <p>每日一习</p>
12 12 </div>
13   - <!-- <div class="tab" :class="active=='rank'?'active':''" @click="handleRank">
  13 + <div class="tab" :class="active=='rank'?'active':''" @click="handleRank">
14 14 <img v-if="active=='rank'" src="../assets/rank/rank_on.png" alt="">
15 15 <img v-else src="../assets/rank/rank.png" alt="">
16 16 <p>排行榜</p>
17   - </div> -->
  17 + </div>
18 18 <div class="tab" :class="active=='fruit'?'active':''" @click="handleFruit">
19 19 <img v-if="active=='fruit'" src="../assets/tabbar4/fruit_on.png" alt="">
20 20 <img v-else src="../assets/tabbar4/fruit_off.png" alt="">
... ...
src/router/index.js
  Diff comments   View file @a3fab23
... ... @@ -43,6 +43,7 @@ import rank from &#39;@/views/answerRank/rank.vue&#39; //排行榜
43 43 import ans_rank from '@/views/answerRank/ans_rank.vue' //答题排行榜
44 44 import brush_questions from '@/views/answerRank/brush_questions.vue' //刷题记录
45 45 import stars from '@/views/answerRank/stars.vue' //五星少年
  46 +import ans_question from '@/views/answerRank/ans_question.vue' //答题
46 47  
47 48 Vue.use(VueRouter)
48 49 const [routerPush, routerReplace] = [VueRouter.prototype.push, VueRouter.prototype.replace];
... ... @@ -334,6 +335,14 @@ const routes = [{
334 335 }
335 336 },
336 337 {
  338 + path: '/ans_question',
  339 + name: 'ans_question',
  340 + component: ans_question,
  341 + meta: {
  342 + title: '答题'
  343 + }
  344 + },
  345 + {
337 346 path: '/YanxueDetail',
338 347 name: 'YanxueDetail',
339 348 component: YanxueDetail,
... ...
src/views/Home/Home.vue
  Diff comments   View file @a3fab23
... ... @@ -27,6 +27,13 @@
27 27 </div>
28 28 <van-icon name="arrow" />
29 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 37 <div class="item" @click="handleClearCache">
31 38 <div class="left">
32 39 <van-icon class="icon" name="user-circle-o" />
... ... @@ -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 184 handleClearCache() {
174 185 this.$toast.loading({
... ...
src/views/answerRank/ans_question.vue 0 → 100644
  Diff comments   View file @a3fab23
... ... @@ -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 117 \ No newline at end of file
... ...
src/views/answerRank/stars.vue
  Diff comments   View file @a3fab23
... ... @@ -53,7 +53,22 @@
53 53 </div>
54 54  
55 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 72 </div>
58 73 </div>
59 74 </template>
... ... @@ -61,7 +76,32 @@
61 76 <script>
62 77 export default {
63 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 107 </script>
... ... @@ -70,19 +110,19 @@ export default {
70 110 .bck {
71 111 position: absolute;
72 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 115 -moz-background-size: 100% 100%;
76 116 background-size: 100% 100%;
77 117  
78 118 .box {
79 119 display: flex;
80 120 justify-content: space-between;
81   - margin: 5vw 3vw;
  121 + margin: 5vw 3vw 8vw;
82 122  
83 123 .box_L {
84 124 width: 45vw;
85   - height: 350px;
  125 + height: 360px;
86 126 background-color: #fff;
87 127 border-radius: 30px;
88 128 padding: 3vw 2vw;
... ... @@ -90,6 +130,7 @@ export default {
90 130 display: flex;
91 131 flex-wrap: wrap;
92 132 align-content: space-between;
  133 + border: 1px solid #ff6868;
93 134  
94 135 .L_top {
95 136 width: 100%;
... ... @@ -136,7 +177,7 @@ export default {
136 177 font-size: 25px;
137 178  
138 179 .grey_font {
139   - color:#999;
  180 + color: #999;
140 181 font-size: 25px;
141 182 margin-top: 5px;
142 183 }
... ... @@ -157,19 +198,20 @@ export default {
157 198 }
158 199 .box_R {
159 200 width: 45vw;
160   - height: 350px;
  201 + height: 360px;
161 202 display: flex;
162 203 flex-wrap: wrap;
163 204 align-content: space-between;
164 205  
165 206 .box_R_item {
166 207 width: 100%;
167   - height: 170px;
  208 + height: 165px;
168 209 border-radius: 30px;
169 210 display: flex;
170 211 justify-content: space-between;
171 212 padding: 20px 30px;
172 213 box-sizing: border-box;
  214 + background-color: #fff;
173 215  
174 216 .title {
175 217 font-size: 30px;
... ... @@ -195,12 +237,72 @@ export default {
195 237 }
196 238  
197 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 308 </style>
207 309 \ No newline at end of file
... ...