Commit f7e2b5dc81bd3e1798c8f226c2fd7cadd4387f66
Exists in
master
Merge branch 'master' of http://git.shunzhi.net/sxhgroup/sxhpersonalcenterzlb
Showing
27 changed files
with
855 additions
and
23 deletions
Show diff stats
2.52 KB
2.9 KB
3.28 KB
9.08 KB
276 KB
9.72 KB
10.8 KB
13.6 KB
11.5 KB
369 Bytes
381 Bytes
178 KB
201 KB
7.31 KB
228 KB
src/component/Tabbar4.vue
... | ... | @@ -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
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' |
... | ... | @@ -10,6 +10,8 @@ Vue.prototype.Moment = Moment; |
10 | 10 | // Vue.prototype.yanxueUrl = 'https://yanxue.myjxt.com'; |
11 | 11 | // Vue.prototype.dataUrl = 'http://47.110.50.251:9010' |
12 | 12 | Vue.prototype.dataUrl = 'https://proxy.shunzhi.net/consulte' |
13 | +// Vue.prototype.kqUrl = 'http://47.110.50.251:9092/' | |
14 | +Vue.prototype.kqUrl = 'https://proxy.shunzhi.net/achieve' | |
13 | 15 | |
14 | 16 | import yxAxios from '@/https/yxAxios' |
15 | 17 | Vue.prototype.yxAxios = yxAxios; |
... | ... | @@ -54,7 +56,9 @@ Vue |
54 | 56 | .use(RadioGroup) |
55 | 57 | .use(Cascader) |
56 | 58 | .use(ImagePreview) |
57 | - .use(Radio); | |
59 | + .use(Radio) | |
60 | + .use(Col) | |
61 | + .use(Row); | |
58 | 62 | Vue.config.productionTip = false; |
59 | 63 | Vue.config.ignoredElements = ['wx-open-launch-app']; |
60 | 64 | new Vue({ | ... | ... |
src/router/index.js
... | ... | @@ -39,6 +39,10 @@ import achievements from '@/views/Yanxue/achievements.vue' //研学成果 |
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' //刷题记录 | |
45 | +import stars from '@/views/answerRank/stars.vue' //五星少年 | |
42 | 46 | |
43 | 47 | Vue.use(VueRouter) |
44 | 48 | const [routerPush, routerReplace] = [VueRouter.prototype.push, VueRouter.prototype.replace]; |
... | ... | @@ -298,6 +302,38 @@ const routes = [{ |
298 | 302 | } |
299 | 303 | }, |
300 | 304 | { |
305 | + path: '/rank', | |
306 | + name: 'rank', | |
307 | + component: rank, | |
308 | + meta: { | |
309 | + title: '排行榜' | |
310 | + } | |
311 | + }, | |
312 | + { | |
313 | + path: '/ans_rank', | |
314 | + name: 'ans_rank', | |
315 | + component: ans_rank, | |
316 | + meta: { | |
317 | + title: '排行榜' | |
318 | + } | |
319 | + }, | |
320 | + { | |
321 | + path: '/brush_questions', | |
322 | + name: 'brush_questions', | |
323 | + component: brush_questions, | |
324 | + meta: { | |
325 | + title: '刷题记录' | |
326 | + } | |
327 | + }, | |
328 | + { | |
329 | + path: '/stars', | |
330 | + name: 'stars', | |
331 | + component: stars, | |
332 | + meta: { | |
333 | + title: '五星少年' | |
334 | + } | |
335 | + }, | |
336 | + { | |
301 | 337 | path: '/YanxueDetail', |
302 | 338 | name: 'YanxueDetail', |
303 | 339 | component: YanxueDetail, | ... | ... |
src/views/Service/AbroadDetail.vue
... | ... | @@ -159,6 +159,9 @@ export default { |
159 | 159 | duration: 0, |
160 | 160 | forbidClick: true, |
161 | 161 | }); |
162 | + | |
163 | + this.addReadNum(this.courseId) | |
164 | + | |
162 | 165 | this.mgop({ |
163 | 166 | api: 'mgop.sz.hswsy.GetCourseDetail', // 必须 |
164 | 167 | host: 'https://mapi.zjzwfw.gov.cn/', |
... | ... | @@ -304,6 +307,21 @@ export default { |
304 | 307 | backHome () { |
305 | 308 | this.$router.push({ name: "ServiceKQ" }); |
306 | 309 | }, |
310 | + //添加浏览量 | |
311 | + addReadNum(courseId) { | |
312 | + this.yxAxios | |
313 | + .post(`${this.kqUrl}/visitRecord/setCourseVisit`, { | |
314 | + courseId: courseId, | |
315 | + userId: JSON.parse(localStorage.getItem('userInfo')).userId | |
316 | + }) | |
317 | + .then((res) => { | |
318 | + if (res.data.success) { | |
319 | + console.log("阅读量成功"); | |
320 | + } else { | |
321 | + console.log("阅读量失败"); | |
322 | + } | |
323 | + }); | |
324 | + } | |
307 | 325 | }, |
308 | 326 | components: { |
309 | 327 | AbroadDes, | ... | ... |
src/views/Service/ServiceKQ.vue
... | ... | @@ -52,6 +52,8 @@ export default { |
52 | 52 | console.log('非浙里办渠道访问,显示测试用户数据') |
53 | 53 | this.centerNo = '2021111017103639979048000010279' |
54 | 54 | localStorage.setItem('centerNo', '2021111017103639979048000010279') |
55 | + let userInfo = JSON.stringify({'userId': 10}) | |
56 | + localStorage.setItem('userInfo', userInfo) | |
55 | 57 | this.getUserInfo() |
56 | 58 | } |
57 | 59 | } | ... | ... |
src/views/Yanxue/achievementsOne.vue
... | ... | @@ -58,19 +58,30 @@ export default { |
58 | 58 | this.$router.push({ name: "chooseSchoolOne" }); |
59 | 59 | }, |
60 | 60 | getData() { |
61 | + let schoolId = this.$route.query.schoolId?this.$route.query.schoolId: '' | |
62 | + | |
61 | 63 | this.yxAxios |
62 | - .post(`${this.dataUrl}/sys/yx/consultList`, { | |
63 | - page: 1, | |
64 | - pageSize: 999, | |
65 | - schoolId: this.$route.query.schoolId*1 | |
66 | - }) | |
64 | + .get(`${this.kqUrl}/schoolConsult/consultList?pageNum=1&pageSize=999&schoolId=`+schoolId) | |
67 | 65 | .then((res) => { |
68 | - if (res.data.success) { | |
66 | + if (res.data.code == 200) { | |
69 | 67 | this.newsList = res.data.data.list; |
70 | 68 | } else { |
71 | 69 | this.$message.warning(res.data.message); |
72 | 70 | } |
73 | 71 | }); |
72 | + // this.yxAxios | |
73 | + // .post(`${this.dataUrl}/sys/yx/consultList`, { | |
74 | + // page: 1, | |
75 | + // pageSize: 999, | |
76 | + // schoolId: this.$route.query.schoolId*1 | |
77 | + // }) | |
78 | + // .then((res) => { | |
79 | + // if (res.data.success) { | |
80 | + // this.newsList = res.data.data.list; | |
81 | + // } else { | |
82 | + // this.$message.warning(res.data.message); | |
83 | + // } | |
84 | + // }); | |
74 | 85 | }, |
75 | 86 | }, |
76 | 87 | mounted() { | ... | ... |
src/views/Yanxue/chooseSchoolOne.vue
... | ... | @@ -13,7 +13,7 @@ |
13 | 13 | :key="i" |
14 | 14 | @click="toActive(v)" |
15 | 15 | > |
16 | - {{ v.schoolName }} | |
16 | + {{ v.name }} | |
17 | 17 | </div> |
18 | 18 | </div> |
19 | 19 | </div> |
... | ... | @@ -37,25 +37,35 @@ export default { |
37 | 37 | toActive(v) { |
38 | 38 | this.$router.push({ |
39 | 39 | name: "achievementsOne", |
40 | - query: { schoolId: v.id }, | |
40 | + query: { schoolId: v.num }, | |
41 | 41 | }); |
42 | 42 | }, |
43 | 43 | //切换 |
44 | 44 | tabsChange() {}, |
45 | 45 | getList() { |
46 | 46 | this.yxAxios |
47 | - .post(`${this.dataUrl}/sys/yx/schoolList`, { | |
48 | - page: 1, | |
49 | - pageSize: 999, | |
50 | - schoolType: this.tabsName +1 | |
51 | - }) | |
47 | + .get(`${this.kqUrl}/schoolConsult/schoolList?schoolType=`+ (this.tabsName +1)) | |
52 | 48 | .then((res) => { |
53 | - if (res.data.success) { | |
54 | - this.schoolList = res.data.data.list; | |
49 | + if (res.data.code == 200) { | |
50 | + this.schoolList = res.data.data; | |
51 | + console.log(this.schoolList) | |
55 | 52 | } else { |
56 | 53 | this.$message.warning(res.data.message); |
57 | 54 | } |
58 | 55 | }); |
56 | + // this.yxAxios | |
57 | + // .post(`${this.dataUrl}/sys/yx/schoolList`, { | |
58 | + // page: 1, | |
59 | + // pageSize: 999, | |
60 | + // schoolType: this.tabsName +1 | |
61 | + // }) | |
62 | + // .then((res) => { | |
63 | + // if (res.data.success) { | |
64 | + // this.schoolList = res.data.data.list; | |
65 | + // } else { | |
66 | + // this.$message.warning(res.data.message); | |
67 | + // } | |
68 | + // }); | |
59 | 69 | }, |
60 | 70 | }, |
61 | 71 | mounted() { | ... | ... |
src/views/Yanxue/pageDetails.vue
... | ... | @@ -45,11 +45,9 @@ export default { |
45 | 45 | //获取数据 |
46 | 46 | getTable() { |
47 | 47 | this.yxAxios |
48 | - .post(`${this.dataUrl}/sys/yx/getConsultDetail`, { | |
49 | - id: this.$route.query.dataId, | |
50 | - }) | |
48 | + .get(`${this.kqUrl}/schoolConsult/consultDetails?consultId=`+this.$route.query.dataId) | |
51 | 49 | .then((res) => { |
52 | - if (res.data.success) { | |
50 | + if (res.data.code == 200) { | |
53 | 51 | this.imgUrl = res.data.data.imgUrl; |
54 | 52 | if (!res.data.data.background) { |
55 | 53 | this.background = res.data.data.imgUrl; |
... | ... | @@ -63,6 +61,25 @@ export default { |
63 | 61 | this.$message.warning(res.data.message); |
64 | 62 | } |
65 | 63 | }); |
64 | + // this.yxAxios | |
65 | + // .post(`${this.dataUrl}/sys/yx/getConsultDetail`, { | |
66 | + // id: this.$route.query.dataId, | |
67 | + // }) | |
68 | + // .then((res) => { | |
69 | + // if (res.data.success) { | |
70 | + // this.imgUrl = res.data.data.imgUrl; | |
71 | + // if (!res.data.data.background) { | |
72 | + // this.background = res.data.data.imgUrl; | |
73 | + // } else { | |
74 | + // this.background = res.data.data.background; | |
75 | + // } | |
76 | + // let arr = JSON.parse(res.data.data.modelList); | |
77 | + // this.modelList = arr; | |
78 | + // // this.showFrame(); | |
79 | + // } else { | |
80 | + // this.$message.warning(res.data.message); | |
81 | + // } | |
82 | + // }); | |
66 | 83 | }, |
67 | 84 | //打开图片 |
68 | 85 | openImg(x, y, v) { |
... | ... | @@ -76,8 +93,9 @@ export default { |
76 | 93 | //添加浏览量 |
77 | 94 | addReadNum() { |
78 | 95 | this.yxAxios |
79 | - .post(`${this.dataUrl}/sys/yx/updateRead`, { | |
80 | - id: this.$route.query.dataId, | |
96 | + .post(`${this.kqUrl}/visitRecord/setConsultVisit`, { | |
97 | + consultId: this.$route.query.dataId, | |
98 | + userId: JSON.parse(localStorage.getItem('userInfo')).userId | |
81 | 99 | }) |
82 | 100 | .then((res) => { |
83 | 101 | if (res.data.success) { |
... | ... | @@ -86,6 +104,17 @@ export default { |
86 | 104 | console.log("阅读量失败"); |
87 | 105 | } |
88 | 106 | }); |
107 | + // this.yxAxios | |
108 | + // .post(`${this.dataUrl}/sys/yx/updateRead`, { | |
109 | + // id: this.$route.query.dataId, | |
110 | + // }) | |
111 | + // .then((res) => { | |
112 | + // if (res.data.success) { | |
113 | + // console.log("阅读量成功"); | |
114 | + // } else { | |
115 | + // console.log("阅读量失败"); | |
116 | + // } | |
117 | + // }); | |
89 | 118 | }, |
90 | 119 | //视频 |
91 | 120 | showFrame() { | ... | ... |
... | ... | @@ -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 | ... | ... |
... | ... | @@ -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 | ... | ... |
... | ... | @@ -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 | ... | ... |
... | ... | @@ -0,0 +1,206 @@ |
1 | +<template> | |
2 | + <div class="bck"> | |
3 | + <div class="box"> | |
4 | + <div class="box_L"> | |
5 | + <div class="L_top"> | |
6 | + <div class="pic"> | |
7 | + <img src="@/assets/rank/tx.png" /> | |
8 | + </div> | |
9 | + <div class="font_box"> | |
10 | + <div class="font_name">熊初墨</div> | |
11 | + <div class="font_sch">柯桥实验小学元培学院</div> | |
12 | + </div> | |
13 | + </div> | |
14 | + <div class="L_mid"> | |
15 | + <div class="mid_item"> | |
16 | + <div> | |
17 | + <span class="strong_font">23</span> | |
18 | + <span>分</span> | |
19 | + </div> | |
20 | + <div class="grey_font">已完成题数</div> | |
21 | + </div> | |
22 | + <div class="mid_item"> | |
23 | + <div> | |
24 | + <span class="strong_font">50</span> | |
25 | + <span>%</span> | |
26 | + </div> | |
27 | + <div class="grey_font">正确率</div> | |
28 | + </div> | |
29 | + </div> | |
30 | + <div class="yellowFont">*积分可用于兑换各种福利</div> | |
31 | + </div> | |
32 | + | |
33 | + <div class="box_R"> | |
34 | + <div class="box_R_item"> | |
35 | + <div class="title"> | |
36 | + <div>排行榜</div> | |
37 | + <span>RANKS</span> | |
38 | + </div> | |
39 | + <div class="imgBox"> | |
40 | + <img src="@/assets/rank/jb.png" /> | |
41 | + </div> | |
42 | + </div> | |
43 | + <div class="box_R_item"> | |
44 | + <div class="title"> | |
45 | + <div>刷题记录</div> | |
46 | + <span>RECORD</span> | |
47 | + </div> | |
48 | + <div class="imgBox"> | |
49 | + <img src="@/assets/rank/qz.png" /> | |
50 | + </div> | |
51 | + </div> | |
52 | + </div> | |
53 | + </div> | |
54 | + | |
55 | + <div class="card"> | |
56 | + | |
57 | + </div> | |
58 | + </div> | |
59 | +</template> | |
60 | + | |
61 | +<script> | |
62 | +export default { | |
63 | + data() { | |
64 | + return {}; | |
65 | + }, | |
66 | +}; | |
67 | +</script> | |
68 | + | |
69 | +<style lang="scss" scoped> | |
70 | +.bck { | |
71 | + position: absolute; | |
72 | + width: 100vw; | |
73 | + min-height: 100vh; | |
74 | + background-image: url("../../assets/rank/red_rank.png"); | |
75 | + -moz-background-size: 100% 100%; | |
76 | + background-size: 100% 100%; | |
77 | + | |
78 | + .box { | |
79 | + display: flex; | |
80 | + justify-content: space-between; | |
81 | + margin: 5vw 3vw; | |
82 | + | |
83 | + .box_L { | |
84 | + width: 45vw; | |
85 | + height: 350px; | |
86 | + background-color: #fff; | |
87 | + border-radius: 30px; | |
88 | + padding: 3vw 2vw; | |
89 | + box-sizing: border-box; | |
90 | + display: flex; | |
91 | + flex-wrap: wrap; | |
92 | + align-content: space-between; | |
93 | + | |
94 | + .L_top { | |
95 | + width: 100%; | |
96 | + display: flex; | |
97 | + justify-content: space-between; | |
98 | + | |
99 | + .pic { | |
100 | + display: flex; | |
101 | + align-items: center; | |
102 | + | |
103 | + img { | |
104 | + width: 13vw; | |
105 | + height: 13vw; | |
106 | + } | |
107 | + } | |
108 | + .font_box { | |
109 | + width: 25vw; | |
110 | + display: flex; | |
111 | + align-content: space-between; | |
112 | + flex-wrap: wrap; | |
113 | + | |
114 | + .font_name { | |
115 | + font-size: 30px; | |
116 | + color: #333333; | |
117 | + } | |
118 | + .font_sch { | |
119 | + font-size: 27px; | |
120 | + color: #999; | |
121 | + white-space: nowrap; //文本强制不换行; | |
122 | + text-overflow: ellipsis; //文本溢出显示省略号; | |
123 | + overflow: hidden; //溢出的部分隐藏; | |
124 | + } | |
125 | + } | |
126 | + } | |
127 | + | |
128 | + .L_mid { | |
129 | + width: 100%; | |
130 | + display: flex; | |
131 | + justify-content: space-between; | |
132 | + | |
133 | + .mid_item { | |
134 | + width: 100%; | |
135 | + text-align: center; | |
136 | + font-size: 25px; | |
137 | + | |
138 | + .grey_font { | |
139 | + color:#999; | |
140 | + font-size: 25px; | |
141 | + margin-top: 5px; | |
142 | + } | |
143 | + | |
144 | + .strong_font { | |
145 | + font-size: 50px; | |
146 | + font-weight: bold; | |
147 | + } | |
148 | + } | |
149 | + } | |
150 | + | |
151 | + .yellowFont { | |
152 | + width: 100%; | |
153 | + font-size: 24px; | |
154 | + color: #ff7a1c; | |
155 | + text-align: center; | |
156 | + } | |
157 | + } | |
158 | + .box_R { | |
159 | + width: 45vw; | |
160 | + height: 350px; | |
161 | + display: flex; | |
162 | + flex-wrap: wrap; | |
163 | + align-content: space-between; | |
164 | + | |
165 | + .box_R_item { | |
166 | + width: 100%; | |
167 | + height: 170px; | |
168 | + border-radius: 30px; | |
169 | + display: flex; | |
170 | + justify-content: space-between; | |
171 | + padding: 20px 30px; | |
172 | + box-sizing: border-box; | |
173 | + | |
174 | + .title { | |
175 | + font-size: 30px; | |
176 | + color: #000000; | |
177 | + | |
178 | + span { | |
179 | + color: #999999; | |
180 | + font-size: 22px; | |
181 | + } | |
182 | + } | |
183 | + | |
184 | + .imgBox { | |
185 | + display: flex; | |
186 | + align-items: center; | |
187 | + | |
188 | + img { | |
189 | + width: 110px; | |
190 | + height: 110px; | |
191 | + } | |
192 | + } | |
193 | + } | |
194 | + } | |
195 | + } | |
196 | + | |
197 | + .card { | |
198 | + width: 100%; | |
199 | + min-height: 800px; | |
200 | + background-color: #fff; | |
201 | + border-radius: 30px; | |
202 | + padding: 2vw; | |
203 | + box-sizing: border-box; | |
204 | + } | |
205 | +} | |
206 | +</style> | |
0 | 207 | \ No newline at end of file | ... | ... |