87 lines
1.9 KiB
Vue
Executable File
87 lines
1.9 KiB
Vue
Executable File
<template>
|
|
<div class="recommend">
|
|
<!-- 热门版块 -->
|
|
<div class="hot-box">
|
|
<div class="hot-label" :class="{ 'active': hotActive == index }" v-for="(item, index) in hotList" :key="index"
|
|
@click="hotLabelClick(index, item.fid)">{{ item.name }}</div>
|
|
</div>
|
|
<!-- 路径 -->
|
|
<plate-navigation v-if="fid != 0" :stairname="plate.subsectionsname"
|
|
:subsectionsname="plate.subsectionsname"></plate-navigation>
|
|
<section>
|
|
<template v-if="list.length == 0">
|
|
<index-list></index-list>
|
|
</template>
|
|
<div class="result-empty-box flexcenter shadow" v-else>
|
|
<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import plateNavigation from '@/components/PlateNavigation.vue'
|
|
import indexList from '@/components/IndexList'
|
|
export default {
|
|
name: "Recommend",//推荐阅读444
|
|
data() {
|
|
return {
|
|
hotActive: -1,//热门版块活跃点击
|
|
hotList: [],
|
|
list: [],
|
|
fid: 0, // 板块id
|
|
plate: {
|
|
stairname: "",// 一级版块名称
|
|
subsectionsname: "",// 子版块名称
|
|
},
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
"$parent.recommend": {
|
|
handler(newV, oldV) {
|
|
console.log(newV);
|
|
this.hotList = newV
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log(this.$parent.recommend);
|
|
},
|
|
|
|
methods: {
|
|
hotLabelClick(index, fid) {
|
|
console.log(fid);
|
|
this.fid = fid
|
|
this.hotActive = index
|
|
}
|
|
},
|
|
components: {
|
|
plateNavigation,
|
|
indexList,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.paging {
|
|
margin-top: .48rem;
|
|
|
|
::v-deep {
|
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
background: rgba(98, 177, 255, 1);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.el-pagination .btn-next .el-icon,
|
|
.el-pagination .btn-prev .el-icon {
|
|
font-size: .4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
section {
|
|
height: 10.3333rem;
|
|
}
|
|
</style> |