SxhGroup / sxhPersonalCenterZLB

Download as
Browse Code »

Commit 45fcde48aec7eddc80e7b8cc7f65742405dd781e

Authored by 伽蓝
1 parent 67929349
Exists in master

feat：答题页面搭建

Showing 21 changed files with 547 additions and 2 deletions   Show diff stats
src/assets/rank/1.png 0 → 100644
View file @45fcde4

2.52 KB
src/assets/rank/2.png 0 → 100644
View file @45fcde4

2.9 KB
src/assets/rank/3.png 0 → 100644
View file @45fcde4

3.28 KB
src/assets/rank/bj.png 0 → 100644
View file @45fcde4

9.08 KB
src/assets/rank/blue_rank.png 0 → 100644
View file @45fcde4

276 KB
src/assets/rank/by.png 0 → 100644
View file @45fcde4

9.72 KB
src/assets/rank/hj.png 0 → 100644
View file @45fcde4

10.8 KB
src/assets/rank/jb.png 0 → 100644
View file @45fcde4

13.6 KB
src/assets/rank/qz.png 0 → 100644
View file @45fcde4

11.5 KB
src/assets/rank/rank.png 0 → 100644
View file @45fcde4

369 Bytes
src/assets/rank/rank_on.png 0 → 100644
View file @45fcde4

381 Bytes
src/assets/rank/red_rank.png 0 → 100644
View file @45fcde4

178 KB
src/assets/rank/red_rank1.png 0 → 100644
View file @45fcde4

201 KB
src/assets/rank/tx.png 0 → 100644
View file @45fcde4

7.31 KB
src/assets/rank/wxsn.png 0 → 100644
View file @45fcde4

228 KB
src/component/Tabbar4.vue
  Diff comments   View file @45fcde4
... ... @@ -10,6 +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">
  14 + <img v-if="active=='rank'" src="../assets/rank/rank_on.png" alt="">
  15 + <img v-else src="../assets/rank/rank.png" alt="">
  16 + <p>排行榜</p>
  17 + </div>
13 18 <div class="tab" :class="active=='fruit'?'active':''" @click="handleFruit">
14 19 <img v-if="active=='fruit'" src="../assets/tabbar4/fruit_on.png" alt="">
15 20 <img v-else src="../assets/tabbar4/fruit_off.png" alt="">
... ... @@ -43,6 +48,9 @@ export default {
43 48 handleFruit() {
44 49 // this.$router.replace({ path:'/achievements' })
45 50 this.$router.replace({ path:'/achievementsOne' })
  51 + },
  52 + handleRank() {
  53 + this.$router.replace({ path:'/rank' })
46 54 }
47 55 }
48 56 }
... ...
src/main.js
  Diff comments   View file @45fcde4
1 1 import Vue from 'vue'
2   -import { Popup, Toast, Picker, Tag, Tab, Tabs, Area, Search, Swipe, SwipeItem, Cell, List, Collapse, CollapseItem, Button, Field, Icon, Sticky, DropdownMenu, DropdownItem, Rate, Calendar, Checkbox, Empty, Lazyload, Radio, RadioGroup, CellGroup, Dialog, CheckboxGroup, NavBar, PullRefresh, Cascader , ImagePreview } from 'vant';
  2 +import { Popup, Toast, Picker, Tag, Tab, Tabs, Area, Search, Swipe,Col, Row , SwipeItem, Cell, List, Collapse, CollapseItem, Button, Field, Icon, Sticky, DropdownMenu, DropdownItem, Rate, Calendar, Checkbox, Empty, Lazyload, Radio, RadioGroup, CellGroup, Dialog, CheckboxGroup, NavBar, PullRefresh, Cascader , ImagePreview } from 'vant';
3 3 import App from './App.vue'
4 4 import router from './router'
5 5 import store from './store'
... ... @@ -54,7 +54,9 @@ Vue
54 54 .use(RadioGroup)
55 55 .use(Cascader)
56 56 .use(ImagePreview)
57   - .use(Radio);
  57 + .use(Radio)
  58 + .use(Col)
  59 + .use(Row);
58 60 Vue.config.productionTip = false;
59 61 Vue.config.ignoredElements = ['wx-open-launch-app'];
60 62 new Vue({
... ...
src/router/index.js
  Diff comments   View file @45fcde4
... ... @@ -39,6 +39,9 @@ import achievements from &#39;@/views/Yanxue/achievements.vue&#39; //研学成果
39 39 import achievementsOne from '@/views/Yanxue/achievementsOne.vue' //研学成果
40 40 import chooseSchoolOne from '@/views/Yanxue/chooseSchoolOne.vue' //研学成果
41 41 import pageDetails from '@/views/Yanxue/pageDetails.vue' //研学成果
  42 +import rank from '@/views/answerRank/rank.vue' //排行榜
  43 +import ans_rank from '@/views/answerRank/ans_rank.vue' //答题排行榜
  44 +import brush_questions from '@/views/answerRank/brush_questions.vue' //刷题记录
42 45  
43 46 Vue.use(VueRouter)
44 47 const [routerPush, routerReplace] = [VueRouter.prototype.push, VueRouter.prototype.replace];
... ... @@ -298,6 +301,30 @@ const routes = [{
298 301 }
299 302 },
300 303 {
  304 + path: '/rank',
  305 + name: 'rank',
  306 + component: rank,
  307 + meta: {
  308 + title: '排行榜'
  309 + }
  310 + },
  311 + {
  312 + path: '/ans_rank',
  313 + name: 'ans_rank',
  314 + component: ans_rank,
  315 + meta: {
  316 + title: '排行榜'
  317 + }
  318 + },
  319 + {
  320 + path: '/brush_questions',
  321 + name: 'brush_questions',
  322 + component: brush_questions,
  323 + meta: {
  324 + title: '刷题记录'
  325 + }
  326 + },
  327 + {
301 328 path: '/YanxueDetail',
302 329 name: 'YanxueDetail',
303 330 component: YanxueDetail,
... ...
src/views/answerRank/ans_rank.vue 0 → 100644
  Diff comments   View file @45fcde4
... ... @@ -0,0 +1,227 @@
  1 +<template>
  2 + <div class="bck">
  3 + <div class="updete">更新时间：2022-8-22</div>
  4 +
  5 + <div class="context">
  6 + <div class="title">
  7 + <div
  8 + :class="active == 'a' ? 'title_check' : 'title_nocheck'"
  9 + @click="chooseTag('a')"
  10 + >
  11 + <div>个人排行榜</div>
  12 + <div class="blue_div"></div>
  13 + </div>
  14 + <div
  15 + :class="active == 'b' ? 'title_check' : 'title_nocheck'"
  16 + @click="chooseTag('b')"
  17 + >
  18 + <div>学校排行榜</div>
  19 + <div class="blue_div"></div>
  20 + </div>
  21 + </div>
  22 +
  23 + <div class="card">
  24 + <div class="card_item">
  25 + <img src="@/assets/rank/tx.png" />
  26 + <div>熊初墨</div>
  27 + </div>
  28 + <div class="card_item_red">
  29 + <div>暂无名次</div>
  30 + <div>20分</div>
  31 + </div>
  32 + </div>
  33 +
  34 + <div class="table_title titleFont">
  35 + <div class="title_1">排名</div>
  36 + <div class="title_2">
  37 + <div class="title_2_2">姓名</div>
  38 + <div class="title_2_3">得分</div>
  39 + </div>
  40 + </div>
  41 +
  42 + <div
  43 + class="table_title conFont"
  44 + v-for="(v, i) in rankList"
  45 + :key="i"
  46 + >
  47 + <div class="title_1" v-if="i == 0">
  48 + <img src="@/assets/rank/1.png" />
  49 + </div>
  50 + <div class="title_1" v-if="i == 1">
  51 + <img src="@/assets/rank/2.png" />
  52 + </div>
  53 + <div class="title_1" v-if="i == 2">
  54 + <img src="@/assets/rank/3.png" />
  55 + </div>
  56 + <div class="title_1" v-if="i > 2">{{ i + 1 }}</div>
  57 + <div class="title_2">
  58 + <div class="title_2_2">柯桥中学</div>
  59 + <div class="title_2_3">120</div>
  60 + </div>
  61 + </div>
  62 + </div>
  63 + </div>
  64 +</template>
  65 +
  66 +<script>
  67 +import Tabbar4 from "@/component/Tabbar4";
  68 +export default {
  69 + components: { Tabbar4 },
  70 + data() {
  71 + return {
  72 + active: "a",
  73 + rankList: [{}, {}, {}, {}],
  74 + };
  75 + },
  76 + methods: {
  77 + chooseTag(val) {
  78 + this.active = val;
  79 + },
  80 + },
  81 +};
  82 +</script>
  83 +
  84 +<style lang="scss" scoped>
  85 +.bck {
  86 + position: absolute;
  87 + width: 100vw;
  88 + min-height: 100vh;
  89 + background-image: url("../../assets/rank/red_rank.png");
  90 + -moz-background-size: 100% 100%;
  91 + background-size: 100% 100%;
  92 +
  93 + .updete {
  94 + position: absolute;
  95 + top: 15vh;
  96 + left: 6vw;
  97 + font-size: 4.2vw;
  98 + color: #fff;
  99 + opacity: 0.8;
  100 + }
  101 +
  102 + .context {
  103 + width: 94vw;
  104 + min-height: 1100px;
  105 + background-color: #fff;
  106 + margin-top: 310px;
  107 + margin-left: 3vw;
  108 + margin-bottom: 50px;
  109 + border-radius: 80px;
  110 + padding: 2vw 5vw;
  111 + box-sizing: border-box;
  112 +
  113 + .title {
  114 + width: 90%;
  115 + height: 100px;
  116 + margin-top: 40px;
  117 + display: flex;
  118 + align-items: center;
  119 +
  120 + .title_check {
  121 + font-size: 5vw;
  122 + color: #333333;
  123 + margin: 0 3vw;
  124 + font-weight: 800;
  125 +
  126 + .blue_div {
  127 + width: 50px;
  128 + height: 15px;
  129 + border-radius: 10px;
  130 + margin-left: 10vw;
  131 + margin-top: 20px;
  132 + background-color: #0b91f3;
  133 + }
  134 + }
  135 + .title_nocheck {
  136 + font-size: 4.2vw;
  137 + color: #999999;
  138 + margin: 0 3vw;
  139 +
  140 + .blue_div {
  141 + width: 50px;
  142 + height: 15px;
  143 + border-radius: 10px;
  144 + margin-left: 10vw;
  145 + margin-top: 20px;
  146 + background-color: #fff;
  147 + }
  148 + }
  149 + }
  150 +
  151 + .card {
  152 + width: 100%;
  153 + height: 170px;
  154 + margin-top: 20px;
  155 + box-shadow: 1px 1px 4px rgb(197, 197, 197);
  156 + padding: 3vw;
  157 + box-sizing: border-box;
  158 + display: flex;
  159 + justify-content: space-between;
  160 +
  161 + .card_item {
  162 + width: 50%;
  163 + font-size: 4.6vw;
  164 + font-weight: 700;
  165 + color: #333333;
  166 + display: flex;
  167 + align-items: center;
  168 + padding-left: 10px;
  169 + box-sizing: border-box;
  170 +
  171 + img {
  172 + width: 90px;
  173 + height: 90px;
  174 + margin-right: 17px;
  175 + }
  176 + }
  177 + .card_item_red {
  178 + width: 50%;
  179 + font-size: 4vw;
  180 + color: #fd4649;
  181 + display: flex;
  182 + align-items: center;
  183 + justify-content: space-around;
  184 + }
  185 + }
  186 +
  187 + .table_title {
  188 + width: 100%;
  189 + height: 100px;
  190 + margin-top: 25px;
  191 + padding: 20px 3vw 3vw 0;
  192 + box-sizing: border-box;
  193 + display: flex;
  194 + justify-content: space-between;
  195 + align-items: center;
  196 +
  197 + .title_1 {
  198 + width: 15%;
  199 + text-align: center;
  200 +
  201 + img {
  202 + width: 55px;
  203 + height: 70px;
  204 + }
  205 + }
  206 + .title_2 {
  207 + width: 70%;
  208 + display: flex;
  209 + justify-content: space-between;
  210 +
  211 + .title_2_3 {
  212 + width: 10vw;
  213 + text-align: left;
  214 + }
  215 + }
  216 + }
  217 + .titleFont {
  218 + font-size: 4.5vw;
  219 + color: #999999;
  220 + }
  221 + .conFont {
  222 + font-size: 4.45vw;
  223 + color: #333333;
  224 + }
  225 + }
  226 +}
  227 +</style>
0 228 \ No newline at end of file
... ...
src/views/answerRank/brush_questions.vue 0 → 100644
  Diff comments   View file @45fcde4
... ... @@ -0,0 +1,111 @@
  1 +<template>
  2 + <div>
  3 + <div class="card">
  4 + <div class="card_title">
  5 + <div>星期一</div>
  6 + <span>2021年3月12</span>
  7 + </div>
  8 +
  9 + <div class="card_con">
  10 + <div class="card_L"></div>
  11 + <div class="card_R">
  12 + <div class="card_R_text">
  13 + <div class="text_title">革命遗址-青铜级</div>
  14 + <div class="text_grey">用时：20:21</div>
  15 + <div class="text_grey">错误：3题</div>
  16 + </div>
  17 + <div class="card_R_btn">
  18 + <div class="btn">查看</div>
  19 + </div>
  20 + </div>
  21 + </div>
  22 + </div>
  23 + </div>
  24 +</template>
  25 +
  26 +<script>
  27 +export default {
  28 + data() {
  29 + return {};
  30 + },
  31 +};
  32 +</script>
  33 +
  34 +<style lang="scss" scoped>
  35 +.card {
  36 + padding: 3vw 5vw;
  37 + box-sizing: border-box;
  38 +
  39 + .card_title {
  40 + display: flex;
  41 + align-items: center;
  42 + color: #333333;
  43 + font-size: 35px;
  44 + font-weight: 700;
  45 + margin: 20px 0;
  46 +
  47 + span {
  48 + color: #999999;
  49 + font-size: 30px;
  50 + margin-left: 30px;
  51 + }
  52 + }
  53 +
  54 + .card_con {
  55 + display: flex;
  56 +
  57 + .card_L {
  58 + width: 5px;
  59 + margin-left: 5vw;
  60 + background-color: #f5f6fa;
  61 + }
  62 + .card_R {
  63 + width: 80%;
  64 + height: 210px;
  65 + margin: 50px 0 50px 10vw;
  66 + background-color: #f6f9fd;
  67 + padding: 30px;
  68 + box-sizing: border-box;
  69 + display: flex;
  70 + justify-content: space-between;
  71 +
  72 + .card_R_text {
  73 + width: 80%;
  74 + display: flex;
  75 + align-content: space-between;
  76 + flex-wrap: wrap;
  77 + margin-left: 10px;
  78 +
  79 + .text_title {
  80 + width: 100%;
  81 + font-size: 30px;
  82 + color: #333333;
  83 + }
  84 + .text_grey {
  85 + width: 100%;
  86 + font-size: 28px;
  87 + color: #999999;
  88 + }
  89 + }
  90 + .card_R_btn {
  91 + width: 20%;
  92 + display: flex;
  93 + align-items: center;
  94 +
  95 + .btn {
  96 + width: 120px;
  97 + height: 60px;
  98 + background-color: #6673ff;
  99 + color: #fff;
  100 + font-size: 28px;
  101 + border-radius: 28px;
  102 + display: flex;
  103 + align-items: center;
  104 + justify-content: center;
  105 + letter-spacing: 2px;
  106 + }
  107 + }
  108 + }
  109 + }
  110 +}
  111 +</style>
0 112 \ No newline at end of file
... ...
src/views/answerRank/rank.vue 0 → 100644
  Diff comments   View file @45fcde4
... ... @@ -0,0 +1,170 @@
  1 +<template>
  2 + <div class="bck">
  3 + <div class="context">
  4 + <div class="title">
  5 + <div
  6 + :class="active == 'a' ? 'title_check' : 'title_nocheck'"
  7 + @click="chooseTag('a')"
  8 + >
  9 + <div>研学成果量</div>
  10 + <div class="blue_div"></div>
  11 + </div>
  12 + <div
  13 + :class="active == 'b' ? 'title_check' : 'title_nocheck'"
  14 + @click="chooseTag('b')"
  15 + >
  16 + <div>成果浏览量</div>
  17 + <div class="blue_div"></div>
  18 + </div>
  19 + </div>
  20 +
  21 + <div class="table_title titleFont">
  22 + <div class="title_1">排名</div>
  23 + <div class="title_2">
  24 + <div class="title_2_2">学校名称</div>
  25 + <div class="title_2_3">数量</div>
  26 + </div>
  27 + </div>
  28 +
  29 + <div class="table_title conFont" v-for="(v,i) in rankList" :key="i">
  30 + <div class="title_1" v-if="i == 0">
  31 + <img src="@/assets/rank/1.png" />
  32 + </div>
  33 + <div class="title_1" v-if="i == 1">
  34 + <img src="@/assets/rank/2.png" />
  35 + </div>
  36 + <div class="title_1" v-if="i == 2">
  37 + <img src="@/assets/rank/3.png" />
  38 + </div>
  39 + <div class="title_1" v-if="i > 2">{{i +1}}</div>
  40 + <div class="title_2">
  41 + <div class="title_2_2">柯桥中学</div>
  42 + <div class="title_2_3">120</div>
  43 + </div>
  44 + </div>
  45 + </div>
  46 +
  47 + <tabbar4 active="rank"></tabbar4>
  48 + </div>
  49 +</template>
  50 +
  51 +<script>
  52 +import Tabbar4 from "@/component/Tabbar4";
  53 +export default {
  54 + components: { Tabbar4 },
  55 + data() {
  56 + return {
  57 + active: "a",
  58 + rankList: [
  59 + {},
  60 + {},
  61 + {},
  62 + {},
  63 + ]
  64 + };
  65 + },
  66 + methods: {
  67 + chooseTag(val) {
  68 + this.active = val;
  69 + },
  70 + },
  71 +};
  72 +</script>
  73 +
  74 +<style lang="scss" scoped>
  75 +.bck {
  76 + position: absolute;
  77 + width: 100vw;
  78 + height: 100vh;
  79 + background-image: url("../../assets/rank/blue_rank.png");
  80 + -moz-background-size: 100% 100%;
  81 + background-size: 100% 100%;
  82 +
  83 + .context {
  84 + width: 100vw;
  85 + min-height: 1100px;
  86 + background-color: #fff;
  87 + margin-top: 310px;
  88 + border-radius: 80px;
  89 + padding: 2vw 5vw;
  90 + box-sizing: border-box;
  91 +
  92 + .title {
  93 + width: 90%;
  94 + height: 100px;
  95 + margin-top: 40px;
  96 + display: flex;
  97 + align-items: center;
  98 +
  99 + .title_check {
  100 + font-size: 5vw;
  101 + color: #333333;
  102 + margin: 0 3vw;
  103 + font-weight: 800;
  104 +
  105 + .blue_div {
  106 + width: 50px;
  107 + height: 15px;
  108 + border-radius: 10px;
  109 + margin-left: 10vw;
  110 + margin-top: 20px;
  111 + background-color: #0b91f3;
  112 + }
  113 + }
  114 + .title_nocheck {
  115 + font-size: 4.2vw;
  116 + color: #999999;
  117 + margin: 0 3vw;
  118 +
  119 + .blue_div {
  120 + width: 50px;
  121 + height: 15px;
  122 + border-radius: 10px;
  123 + margin-left: 10vw;
  124 + margin-top: 20px;
  125 + background-color: #fff;
  126 + }
  127 + }
  128 + }
  129 +
  130 + .table_title {
  131 + width: 100%;
  132 + height: 110px;
  133 + margin-top: 25px;
  134 + padding: 20px 3vw 3vw 0;
  135 + box-sizing: border-box;
  136 + display: flex;
  137 + justify-content: space-between;
  138 + align-items: center;
  139 +
  140 + .title_1 {
  141 + width: 15%;
  142 + text-align: center;
  143 +
  144 + img {
  145 + width: 55px;
  146 + height: 70px;
  147 + }
  148 + }
  149 + .title_2 {
  150 + width: 70%;
  151 + display: flex;
  152 + justify-content: space-between;
  153 +
  154 + .title_2_3{
  155 + width: 10vw;
  156 + text-align: left;
  157 + }
  158 + }
  159 + }
  160 + .titleFont {
  161 + font-size: 4.5vw;
  162 + color: #999999;
  163 + }
  164 + .conFont {
  165 + font-size: 4.45vw;
  166 + color: #333333;
  167 + }
  168 + }
  169 +}
  170 +</style>
0 171 \ No newline at end of file
... ...