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 | ... | ... |