|
|
|
|
@ -9,7 +9,11 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="station"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="tabs"> |
|
|
|
|
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: item.id == active}" @click="tabChange(item)">{{ item.name }}</a> |
|
|
|
|
</div> |
|
|
|
|
<div class="curs"> |
|
|
|
|
<template v-if="curriculumList.length"> |
|
|
|
|
<template v-for="(item,index) in curriculumList"> |
|
|
|
|
<div class="item" :title="item.curriculumName" @click="goPreview(item)" :key="index" v-if="!keyword || item.curriculumName.includes(keyword)"> |
|
|
|
|
@ -28,6 +32,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -38,6 +43,17 @@ export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
keyword: "", |
|
|
|
|
active: 0, |
|
|
|
|
tabs: [ |
|
|
|
|
{ |
|
|
|
|
id: 0, |
|
|
|
|
name: '实验课程' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
name: '最近使用' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
curriculumList: [] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -46,15 +62,25 @@ export default { |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getschoolCourse() { // 获取课程列表 |
|
|
|
|
this.active ? |
|
|
|
|
this.$post(this.api.recentUse, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 100 |
|
|
|
|
}).then(({ page }) => { |
|
|
|
|
this.curriculumList = page.records |
|
|
|
|
}).catch(err => {}) : |
|
|
|
|
this.$get(this.api.schoolCourse).then(res => { |
|
|
|
|
this.curriculumList = res.data; |
|
|
|
|
}).catch(err => { |
|
|
|
|
console.log(err); |
|
|
|
|
}); |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
goPreview(item) { |
|
|
|
|
this.$router.push(`/station/preview?courseId=${item.cid}&curriculumName=${item.curriculumName}`); |
|
|
|
|
}, |
|
|
|
|
// tab切换 |
|
|
|
|
tabChange(item) { |
|
|
|
|
this.active = item.id |
|
|
|
|
this.getschoolCourse() |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
@ -93,61 +119,83 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tabs { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
.item { |
|
|
|
|
padding: 0 20px; |
|
|
|
|
margin-right: 16px; |
|
|
|
|
font-size: 17px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #333; |
|
|
|
|
line-height: 50px; |
|
|
|
|
border-bottom: 3px solid transparent; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&.active { |
|
|
|
|
color: #007EFF; |
|
|
|
|
border-color: #007EFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.station { |
|
|
|
|
min-height: calc(100vh - 520px); |
|
|
|
|
background: url(../../../assets/img/station1.png) (top left)/auto no-repeat, |
|
|
|
|
url(../../../assets/img/station2.png) bottom right/auto no-repeat; |
|
|
|
|
.inner { |
|
|
|
|
width: 1072px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
.curs { |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
width: 1072px; |
|
|
|
|
padding-top: 60px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
.item { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 0 10px; |
|
|
|
|
margin: 0 10px 40px; |
|
|
|
|
text-align: center; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:hover { |
|
|
|
|
opacity: .9; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
width: 215px; |
|
|
|
|
height: 118px; |
|
|
|
|
margin-top: -20px; |
|
|
|
|
border-radius: 12px; |
|
|
|
|
} |
|
|
|
|
.bottom { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 10px 5px; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 130px; |
|
|
|
|
height: 40px; |
|
|
|
|
text-align: left; |
|
|
|
|
font-size: 12px; |
|
|
|
|
line-height: 1.6; |
|
|
|
|
overflow: hidden; |
|
|
|
|
span { |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
.item { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 0 10px; |
|
|
|
|
margin: 0 10px 40px; |
|
|
|
|
text-align: center; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:hover { |
|
|
|
|
opacity: .9; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
width: 215px; |
|
|
|
|
height: 118px; |
|
|
|
|
margin-top: -20px; |
|
|
|
|
border-radius: 12px; |
|
|
|
|
} |
|
|
|
|
.bottom { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 10px 5px; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 130px; |
|
|
|
|
height: 40px; |
|
|
|
|
text-align: left; |
|
|
|
|
font-size: 12px; |
|
|
|
|
line-height: 1.6; |
|
|
|
|
overflow: hidden; |
|
|
|
|
span { |
|
|
|
|
@include mul-ellipsis(2); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
a { |
|
|
|
|
padding: 0 8px; |
|
|
|
|
line-height: 28px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #7A7A7A; |
|
|
|
|
border-radius: 20px; |
|
|
|
|
border: 1px solid #DADADA; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
a { |
|
|
|
|
padding: 0 8px; |
|
|
|
|
line-height: 28px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #7A7A7A; |
|
|
|
|
border-radius: 20px; |
|
|
|
|
border: 1px solid #DADADA; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |
