hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-09 02:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

首页

Browse Source
This commit is contained in:
nisen
2023-09-05 18:14:59 +08:00
parent 830f89219e
commit 86fdaef216
2 changed files with 83 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/styles/portal.scss
View File

@@ -399,9 +399,6 @@ body {margin: 0px;padding: 0px;}
.list {
grid-template-columns: repeat(4, 255px);
}
.noticeImg{
height: 110px;
}
.toolImg{
width: 80px;
height: 80px;
@@ -484,9 +481,6 @@ body {margin: 0px;padding: 0px;}
.list {
grid-template-columns: repeat(4, 332px);
}
.noticeImg{
height: 120px;
}
.liList{
margin-top: 10px;
}
@@ -536,9 +530,6 @@ body {margin: 0px;padding: 0px;}
.list {
grid-template-columns: repeat(4, 400px);
}
.noticeImg{
height: 150px;
}
.liList{
margin-top: 24px;
}
@@ -587,9 +578,6 @@ body {margin: 0px;padding: 0px;}
.list {
grid-template-columns: repeat(4, 445px);
}
.noticeImg{
height: 169px;
}
.liList{
margin-top: 32px;
}

120
src/views/grateful/GratefulHomePage.vue
View File

@@ -40,7 +40,9 @@
</div>
<div class="navNotice">
<div id="fixd-box" style="height: 100%;">
<div class="portal-ranking ranking-bg" style="height: 100%;display: flex;flex-direction: column;">
<div class="portal-ranking ranking-bg" style="height: 100%;display: flex;flex-direction: column;"
:class="showNoticeImg ? 'allPadding' : ''">
<div :class="showNoticeImg ? 'noticeBgc' : ''">
<div style="display: flex;justify-content: space-between;">
<p class="ranking-title">通知</p>
<router-link v-if="courseList.noticeList.length >= 6" to="/grateful/gratefulNotice"
@@ -62,42 +64,46 @@
</router-link>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navTool">
<div id="fixd-box" style="height: 100%;">
<div class="portal-ranking ranking-bg1" style="height: 100%;display: flex;flex-direction: column;">
<div style="display: flex;justify-content: space-between;">
<p class="ranking-title">工具下载</p>
<router-link v-if="courseList.toolList.length >= 6" to="/grateful/toolDown"
style="font-size: 14px;">查看更多</router-link>
<div class="portal-ranking ranking-bg1" style="height: 100%;display: flex;flex-direction: column;"
:class="showToolImg ? 'allPadding' : ''">
<div :class="showToolImg ? 'toolBgc' : ''">
<div style="display: flex;justify-content: space-between;">
<p class="ranking-title">工具下载</p>
<router-link v-if="courseList.toolList.length >= 6" to="/grateful/toolDown"
style="font-size: 14px;">查看更多</router-link>
</div>
<ul>
<li v-for="(item, index) in courseList.toolList" :key="index"
style="cursor: pointer;line-height: 22px;" class="title-line-ellipsis liList"
@click="downTool(item)">
<span class="portal-right-text orange-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/list-01.png`" alt="">
</span>
<span class="portal-right-text orange-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/list02.png`" alt="">
</span>
<span class="portal-right-text orange-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/list03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 5">
<img :src="`${webBaseUrl}/images/listblue06.png`" alt="">
</span>
<span class="portal-title-desc" style="font-size: 14px;">{{ item.name.split('.')[0] }}</span>
</li>
</ul>
</div>
<ul>
<li v-for="(item, index) in courseList.toolList" :key="index"
style="cursor: pointer;line-height: 22px;" class="title-line-ellipsis liList"
@click="downTool(item)">
<span class="portal-right-text orange-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/list-01.png`" alt="">
</span>
<span class="portal-right-text orange-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/list02.png`" alt="">
</span>
<span class="portal-right-text orange-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/list03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 5">
<img :src="`${webBaseUrl}/images/listblue06.png`" alt="">
</span>
<span class="portal-title-desc" style="font-size: 14px;">{{ item.name.split('.')[0] }}</span>
</li>
</ul>
</div>
</div>
</div>
@@ -328,6 +334,10 @@ export default {
pageSize: 6,
isTop: ''
}).then((res) => {
console.log(res, '通知');
if (res.data.records.length <= 3) {
this.showNoticeImg = true
}
this.courseList.noticeList = res.data.records || []
})
},
@@ -336,6 +346,9 @@ export default {
pageNo: 1,
pageSize: 6
}).then((result) => {
if (result.data.records.length <= 3) {
this.showToolImg = true
}
console.log(result.data.records, '哈哈哈哈');
this.courseList.toolList = result.data.records || []
})
@@ -345,35 +358,68 @@ export default {
</script>
<style scoped lang="scss">
// .noticeBgc {
// height: 100%;
// width: 100%;
// background: url('../../assets/images/grateful/noticeBgc.png') no-repeat;
// background-size: 100% 100px;
// }
.allPadding {
padding: 0px;
}
.noticeBgc {
height: 100%;
width: 100%;
background: url('../../assets/images/grateful/noticeBgc.png') no-repeat;
background-size: 100%;
background-position: left bottom;
padding: 20px;
border-radius: 8px;
}
.toolBgc {
height: 100%;
width: 100%;
background: url('../../assets/images/grateful/toolBgc.png') no-repeat;
background-size: 100%;
background-position: left bottom;
padding: 20px;
border-radius: 8px;
}
@media screen and (max-width: 1366px) {
.swiper-pagination {
top: 310px;
}
// .noticeBgc {
// background-size: 100% 110px;
// }
}
@media screen and (max-width: 1680px) and (min-width:1367px) {
.swiper-pagination {
top: 360px;
}
// .noticeBgc {
// background-size: 100% 120px;
// }
}
@media screen and (max-width: 1920px) and (min-width: 1681px) {
.swiper-pagination {
top: 360px;
}
// .noticeBgc {
// background-size: 100% 150px;
// }
}
@media screen and (min-width: 1921px) {
.swiper-pagination {
top: 360px;
}
.noticeBgc {
// background-size: 100% 169px;
}
}
.bannbox {