Commit 1399205cf6dfde309cce67823467298556dfa50f
1 parent
f0066638
Exists in
master
feat:研学成果改版
Showing
10 changed files
with
189 additions
and
134 deletions
Show diff stats
172 KB
1015 Bytes
1.13 KB
4.54 KB
src/assets/changeSchool.png
32.2 KB
src/router/index.js
| ... | ... | @@ -43,6 +43,7 @@ import dayStudy from '@/views/dayStudy/dayStudy.vue' //每日一习主页面 |
| 43 | 43 | import studyList from '@/views/dayStudy/studyList.vue' //每日一习主页面 |
| 44 | 44 | import ans_question from '@/views/answerRank/ans_question.vue' //答题 |
| 45 | 45 | import switchUser from '@/views/answerRank/switchUser.vue' //切换 |
| 46 | +import store from '../store' | |
| 46 | 47 | |
| 47 | 48 | Vue.use(VueRouter) |
| 48 | 49 | const [routerPush, routerReplace] = [VueRouter.prototype.push, VueRouter.prototype.replace]; | ... | ... |
src/store/index.js
src/views/Yanxue/achievementsOne.vue
| 1 | 1 | <template> |
| 2 | 2 | <div class="cardBox"> |
| 3 | - <!-- <van-tabs v-model="tabsName"> | |
| 4 | - <van-tab title="红色教育"></van-tab> | |
| 5 | - <van-tab title="劳动教育"></van-tab> | |
| 6 | - <van-tab title="课外实践"></van-tab> | |
| 7 | - <van-tab title="研学旅行"></van-tab> | |
| 8 | - </van-tabs> --> | |
| 9 | 3 | <van-tabs v-model="sort" @click="tabsClick"> |
| 10 | 4 | <van-tab title="发布时间">发布时间</van-tab> |
| 11 | 5 | <van-tab title="点赞量">点赞量</van-tab> |
| ... | ... | @@ -15,30 +9,9 @@ |
| 15 | 9 | <van-list |
| 16 | 10 | v-model="loading" |
| 17 | 11 | :finished="finished" |
| 18 | - finished-text="没有更多了" | |
| 12 | + :finished-text="finishedText" | |
| 19 | 13 | @load="getData" |
| 20 | 14 | > |
| 21 | - <!-- <div | |
| 22 | - class="art_card_pic" | |
| 23 | - v-for="(v, i) in newsList" | |
| 24 | - :key="i" | |
| 25 | - @click="toDetails(v)" | |
| 26 | - > | |
| 27 | - <div class="art_context"> | |
| 28 | - <div class="art_title">{{ v.titleDesc }}</div> | |
| 29 | - <div class="art_bot"> | |
| 30 | - <div class="greyTime"> | |
| 31 | - 点赞量 {{ v.likeNumber }} | |
| 32 | - </div> | |
| 33 | - <div class="greyFont"> | |
| 34 | - 浏览量 {{ v.readNumber }} | |
| 35 | - </div> | |
| 36 | - </div> | |
| 37 | - </div> | |
| 38 | - <div class="art_pic"> | |
| 39 | - <img :src="v.imgUrl" /> | |
| 40 | - </div> | |
| 41 | - </div> --> | |
| 42 | 15 | <div |
| 43 | 16 | class="new_card" |
| 44 | 17 | v-for="(v, i) in newsList" |
| ... | ... | @@ -50,24 +23,26 @@ |
| 50 | 23 | </div> |
| 51 | 24 | <div class="new_card_title">{{ v.titleDesc }}</div> |
| 52 | 25 | <div class="new_card_bot"> |
| 53 | - <div class="card_bot_L"></div> | |
| 26 | + <div class="card_bot_L">{{ v.schoolName }}</div> | |
| 54 | 27 | <div class="card_bot_R"> |
| 55 | 28 | <div class="greyTime"> |
| 56 | - 点赞量 {{ v.likeNumber }} | |
| 29 | + <img src="@/assets/Travel/dz.png" /> {{ v.likeNumber }} | |
| 57 | 30 | </div> |
| 58 | 31 | <div class="greyFont"> |
| 59 | - 浏览量 {{ v.readNumber }} | |
| 32 | + <img src="@/assets/Travel/ll.png" /> {{ v.readNumber }} | |
| 60 | 33 | </div> |
| 61 | 34 | </div> |
| 62 | 35 | </div> |
| 63 | 36 | </div> |
| 64 | 37 | </van-list> |
| 65 | - <div class="orgBtn" @click="toChoose" v-if="!schoolId">点击查看更多研学成果</div> | |
| 38 | + <div class="orgBtn" @click="toChoose" v-if="!schoolId"> | |
| 39 | + 点击查看更多研学成果 | |
| 40 | + </div> | |
| 66 | 41 | </div> |
| 67 | 42 | |
| 68 | 43 | <van-empty description="暂无数据" v-else /> |
| 69 | 44 | |
| 70 | - <div class="imgPic" @click="toChoose" v-if="schoolId"> | |
| 45 | + <div class="imgPic" @click="toQueryNull" v-if="schoolId"> | |
| 71 | 46 | <img src="@/assets/changeSchool.png" /> |
| 72 | 47 | </div> |
| 73 | 48 | |
| ... | ... | @@ -81,7 +56,6 @@ export default { |
| 81 | 56 | components: { Tabbar4 }, |
| 82 | 57 | data() { |
| 83 | 58 | return { |
| 84 | - tabsName: 1, | |
| 85 | 59 | newsList: [], |
| 86 | 60 | pageNum: 1, |
| 87 | 61 | pageSize: 10, |
| ... | ... | @@ -91,9 +65,12 @@ export default { |
| 91 | 65 | }; |
| 92 | 66 | }, |
| 93 | 67 | computed: { |
| 94 | - schoolId() { | |
| 95 | - return this.$route.query.schoolId ? this.$route.query.schoolId : '' | |
| 96 | - } | |
| 68 | + schoolId() { | |
| 69 | + return this.$route.query.schoolId ? this.$route.query.schoolId : ""; | |
| 70 | + }, | |
| 71 | + finishedText() { | |
| 72 | + return this.$route.query.schoolId ? '没有更多数据了': ""; | |
| 73 | + } | |
| 97 | 74 | }, |
| 98 | 75 | methods: { |
| 99 | 76 | //详情新闻 |
| ... | ... | @@ -107,6 +84,11 @@ export default { |
| 107 | 84 | toChoose() { |
| 108 | 85 | this.$router.push({ name: "chooseSchoolOne" }); |
| 109 | 86 | }, |
| 87 | + //选择 | |
| 88 | + toQueryNull() { | |
| 89 | + this.$router.push({ name: "achievementsOne" }); | |
| 90 | + location.reload() | |
| 91 | + }, | |
| 110 | 92 | tabsClick() { |
| 111 | 93 | this.newsList = []; |
| 112 | 94 | this.pageNum = 1; |
| ... | ... | @@ -118,11 +100,11 @@ export default { |
| 118 | 100 | // let schoolId = this.$route.query.schoolId |
| 119 | 101 | // ? this.$route.query.schoolId |
| 120 | 102 | // : ""; |
| 121 | - let pageSize = this.pageSize | |
| 122 | - let pageNum = this.pageNum | |
| 123 | - if(!this.schoolId){ | |
| 124 | - pageSize = 10 | |
| 125 | - pageNum = 1 | |
| 103 | + let pageSize = this.pageSize; | |
| 104 | + let pageNum = this.pageNum; | |
| 105 | + if (!this.schoolId) { | |
| 106 | + pageSize = 10; | |
| 107 | + pageNum = 1; | |
| 126 | 108 | } |
| 127 | 109 | this.yxAxios |
| 128 | 110 | .get( |
| ... | ... | @@ -133,18 +115,17 @@ export default { |
| 133 | 115 | ) |
| 134 | 116 | .then((res) => { |
| 135 | 117 | if (res.data.code == 200) { |
| 136 | - if(!this.schoolId) { | |
| 137 | - this.loading = false; | |
| 138 | - this.newsList = res.data.data.list | |
| 139 | - this.finished = true; | |
| 140 | - return | |
| 118 | + if (!this.schoolId) { | |
| 119 | + this.loading = false; | |
| 120 | + this.newsList = res.data.data.list; | |
| 121 | + this.finished = true; | |
| 122 | + return; | |
| 141 | 123 | } |
| 142 | 124 | |
| 143 | 125 | this.newsList = this.newsList.concat( |
| 144 | 126 | res.data.data.list |
| 145 | 127 | ); |
| 146 | 128 | this.loading = false; |
| 147 | - | |
| 148 | 129 | |
| 149 | 130 | if ( |
| 150 | 131 | this.pageSize * this.pageNum >= |
| ... | ... | @@ -174,7 +155,7 @@ export default { |
| 174 | 155 | .cardBox { |
| 175 | 156 | padding: 2vw 0; |
| 176 | 157 | box-sizing: border-box; |
| 177 | - background-color: #FEFEFE; | |
| 158 | + background-color: #fefefe; | |
| 178 | 159 | |
| 179 | 160 | .contextBox { |
| 180 | 161 | margin-top: 20px; |
| ... | ... | @@ -332,29 +313,53 @@ export default { |
| 332 | 313 | color: #999; |
| 333 | 314 | font-size: 24px; |
| 334 | 315 | margin: 0; |
| 316 | + max-width: 20vw; | |
| 317 | + white-space: nowrap; //文本强制不换行; | |
| 318 | + text-overflow: ellipsis; //文本溢出显示省略号; | |
| 319 | + overflow: hidden; //溢出的部分隐藏; | |
| 320 | + -webkit-line-clamp: 2; | |
| 321 | + display: flex; | |
| 322 | + align-items: center; | |
| 323 | + | |
| 324 | + img { | |
| 325 | + width: 24px; | |
| 326 | + margin-right: 7px; | |
| 327 | + } | |
| 335 | 328 | } |
| 336 | 329 | |
| 337 | 330 | .greyFont { |
| 338 | 331 | color: #999; |
| 339 | 332 | font-size: 24px; |
| 340 | 333 | margin-left: 20px; |
| 334 | + max-width: 20vw; | |
| 335 | + white-space: nowrap; //文本强制不换行; | |
| 336 | + text-overflow: ellipsis; //文本溢出显示省略号; | |
| 337 | + overflow: hidden; //溢出的部分隐藏; | |
| 338 | + -webkit-line-clamp: 2; | |
| 339 | + display: flex; | |
| 340 | + align-items: center; | |
| 341 | + | |
| 342 | + img { | |
| 343 | + width: 25px; | |
| 344 | + margin-right: 7px; | |
| 345 | + } | |
| 341 | 346 | } |
| 342 | 347 | } |
| 343 | 348 | } |
| 344 | 349 | } |
| 345 | 350 | .orgBtn { |
| 346 | - width: 80vw; | |
| 347 | - height: 80px; | |
| 348 | - margin-left: 10vw; | |
| 349 | - font-size: 33px; | |
| 350 | - background-color: #ff4444; | |
| 351 | - background: linear-gradient(to right,#FF3737,#FF6825); | |
| 352 | - color: #Fff; | |
| 353 | - display: flex; | |
| 354 | - justify-content: center; | |
| 355 | - align-items: center; | |
| 356 | - border-radius: 40px; | |
| 357 | - margin-bottom: 20px; | |
| 351 | + width: 80vw; | |
| 352 | + height: 80px; | |
| 353 | + margin-left: 10vw; | |
| 354 | + font-size: 33px; | |
| 355 | + background-color: #ff4444; | |
| 356 | + background: linear-gradient(to right, #ff3737, #ff6825); | |
| 357 | + color: #fff; | |
| 358 | + display: flex; | |
| 359 | + justify-content: center; | |
| 360 | + align-items: center; | |
| 361 | + border-radius: 40px; | |
| 362 | + margin-bottom: 20px; | |
| 358 | 363 | } |
| 359 | 364 | } |
| 360 | 365 | .imgPic { | ... | ... |
src/views/Yanxue/chooseSchoolOne.vue
| 1 | 1 | <template> |
| 2 | - <div class="cardBox"> | |
| 3 | - <van-tabs v-model="tabsName" @change="tabsChange"> | |
| 2 | + <div class="cardBox"> | |
| 3 | + <!-- <van-tabs v-model="tabsName" @change="tabsChange"> | |
| 4 | 4 | <van-tab title="小学"></van-tab> |
| 5 | 5 | <van-tab title="初中"></van-tab> |
| 6 | 6 | <van-tab title="高中"></van-tab> |
| 7 | - </van-tabs> | |
| 7 | + </van-tabs> --> | |
| 8 | + <div class="card"> | |
| 9 | + <div | |
| 10 | + :class=" | |
| 11 | + [ | |
| 12 | + 'card_item', | |
| 13 | + tabsName == v.value ? 'item_check' : 'item_nocheck', | |
| 14 | + ].join(' ') | |
| 15 | + " | |
| 16 | + v-for="(v, i) in typelist" | |
| 17 | + :key="i" | |
| 18 | + @click="tabsChange(v)" | |
| 19 | + > | |
| 20 | + {{ v.label }} | |
| 21 | + </div> | |
| 22 | + </div> | |
| 23 | + <div class="line"></div> | |
| 8 | 24 | |
| 9 | - <div class="schoolCss"> | |
| 10 | - <div | |
| 11 | - class="school-one" | |
| 12 | - v-for="(v, i) in schoolList" | |
| 13 | - :key="i" | |
| 14 | - @click="toActive(v)" | |
| 15 | - > | |
| 16 | - {{ v.name }} | |
| 17 | - </div> | |
| 25 | + <div :class="[schoolList.length != 0 ? 'schoolCss' : '']"> | |
| 26 | + <div | |
| 27 | + class="school-one" | |
| 28 | + v-for="(v, i) in schoolList" | |
| 29 | + :key="i" | |
| 30 | + @click="toActive(v)" | |
| 31 | + > | |
| 32 | + {{ v.name }} | |
| 33 | + </div> | |
| 34 | + </div> | |
| 18 | 35 | </div> |
| 19 | - </div> | |
| 20 | 36 | </template> |
| 21 | 37 | |
| 22 | 38 | <script> |
| 23 | 39 | export default { |
| 24 | - data() { | |
| 25 | - return { | |
| 26 | - tabsName: 0, | |
| 27 | - schoolList: [], | |
| 28 | - }; | |
| 29 | - }, | |
| 30 | - watch: { | |
| 31 | - tabsName(val) { | |
| 32 | - this.schoolList = []; | |
| 33 | - this.getList(); | |
| 40 | + data() { | |
| 41 | + return { | |
| 42 | + tabsName: 1, | |
| 43 | + schoolList: [], | |
| 44 | + typelist: [ | |
| 45 | + { label: "幼儿园", value: 0 }, | |
| 46 | + { label: "小学", value: 1 }, | |
| 47 | + { label: "初中", value: 2 }, | |
| 48 | + { label: "高中", value: 3 }, | |
| 49 | + ], | |
| 50 | + }; | |
| 34 | 51 | }, |
| 35 | - }, | |
| 36 | - methods: { | |
| 37 | - toActive(v) { | |
| 38 | - this.$router.push({ | |
| 39 | - name: "achievementsOne", | |
| 40 | - query: { schoolId: v.num }, | |
| 41 | - }); | |
| 52 | + watch: { | |
| 53 | + tabsName(val) { | |
| 54 | + this.schoolList = []; | |
| 55 | + this.getList(); | |
| 56 | + }, | |
| 42 | 57 | }, |
| 43 | - //切换 | |
| 44 | - tabsChange() {}, | |
| 45 | - getList() { | |
| 46 | - this.yxAxios | |
| 47 | - .get(`${this.kqUrl}/schoolConsult/schoolList?schoolType=`+ (this.tabsName +1)) | |
| 48 | - .then((res) => { | |
| 49 | - if (res.data.code == 200) { | |
| 50 | - this.schoolList = res.data.data; | |
| 51 | - console.log(this.schoolList) | |
| 52 | - } else { | |
| 53 | - this.$toast.fail(res.data.message); | |
| 54 | - } | |
| 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.$toast.fail(res.data.message); | |
| 67 | - // } | |
| 68 | - // }); | |
| 58 | + methods: { | |
| 59 | + toActive(v) { | |
| 60 | + this.$router.push({ | |
| 61 | + name: "achievementsOne", | |
| 62 | + query: { schoolId: v.num }, | |
| 63 | + }); | |
| 64 | + }, | |
| 65 | + //切换 | |
| 66 | + tabsChange(v) { | |
| 67 | + this.tabsName = v.value; | |
| 68 | + }, | |
| 69 | + getList() { | |
| 70 | + this.yxAxios | |
| 71 | + .get( | |
| 72 | + `${this.kqUrl}/schoolConsult/schoolList?schoolType=` + | |
| 73 | + this.tabsName | |
| 74 | + ) | |
| 75 | + .then((res) => { | |
| 76 | + if (res.data.code == 200) { | |
| 77 | + this.schoolList = res.data.data; | |
| 78 | + console.log(this.schoolList); | |
| 79 | + } else { | |
| 80 | + this.$toast.fail(res.data.message); | |
| 81 | + } | |
| 82 | + }); | |
| 83 | + }, | |
| 84 | + }, | |
| 85 | + mounted() { | |
| 86 | + this.getList(); | |
| 69 | 87 | }, |
| 70 | - }, | |
| 71 | - mounted() { | |
| 72 | - this.getList(); | |
| 73 | - }, | |
| 74 | 88 | }; |
| 75 | 89 | </script> |
| 76 | 90 | |
| 77 | 91 | <style lang="scss" scoped> |
| 78 | 92 | .cardBox { |
| 79 | - padding: 2vw 0; | |
| 80 | - box-sizing: border-box; | |
| 93 | + padding: 2vw 0; | |
| 94 | + box-sizing: border-box; | |
| 95 | + background: url("~@/assets/Travel/cardBox.png"); | |
| 96 | + min-height: 100vh; | |
| 97 | + | |
| 98 | + .card { | |
| 99 | + display: flex; | |
| 100 | + justify-content: space-between; | |
| 101 | + padding: 10px 5vw 20px; | |
| 102 | + box-sizing: border-box; | |
| 103 | + | |
| 104 | + .card_item { | |
| 105 | + font-size: 4.3vw; | |
| 106 | + } | |
| 107 | + .item_check { | |
| 108 | + font-size: 4.4vw; | |
| 109 | + color: #fff; | |
| 110 | + } | |
| 111 | + .item_nocheck { | |
| 112 | + opacity: 0.5; | |
| 113 | + color: #fff; | |
| 114 | + } | |
| 115 | + } | |
| 116 | + .line { | |
| 117 | + width: 90vw; | |
| 118 | + border-bottom: 1px dashed #fff; | |
| 119 | + margin: 20px 5vw; | |
| 120 | + } | |
| 81 | 121 | |
| 82 | - .schoolCss { | |
| 83 | - font-size: 4.5vw; | |
| 84 | - margin: 5vw; | |
| 122 | + .schoolCss { | |
| 123 | + font-size: 4.5vw; | |
| 124 | + margin: 5vw; | |
| 125 | + padding: 0.5vw 4vw; | |
| 126 | + box-sizing: border-box; | |
| 127 | + border-radius: 20px; | |
| 128 | + background-color: #fff; | |
| 85 | 129 | |
| 86 | - .school-one { | |
| 87 | - margin: 4vw 0; | |
| 88 | - letter-spacing: 0.3vw; | |
| 89 | - color: #666; | |
| 90 | - font-size: 4.3vw; | |
| 130 | + .school-one { | |
| 131 | + width: 100%; | |
| 132 | + margin: 6vw 0; | |
| 133 | + padding: 22px 0 22px 60px; | |
| 134 | + box-sizing: border-box; | |
| 135 | + letter-spacing: 0.3vw; | |
| 136 | + color: #666; | |
| 137 | + font-size: 4.3vw; | |
| 138 | + background: url("~@/assets/Travel/schoolBox.png"); | |
| 139 | + -moz-background-size: 100% 100%; | |
| 140 | + background-size: 100% 100%; | |
| 141 | + } | |
| 91 | 142 | } |
| 92 | - } | |
| 93 | 143 | } |
| 94 | 144 | </style> |
| 95 | 145 | \ No newline at end of file | ... | ... |