98 lines
2.7 KiB
Vue
98 lines
2.7 KiB
Vue
<template>
|
|
<!-- -->
|
|
<BasePage :title="currentColumn.name || ''">
|
|
<!-- <div class="column-list" v-if="currentColumn"> -->
|
|
<!-- v-if="currentColumn.ColumnType === 'list'" -->
|
|
<div class="column-list b_l_w" v-if="articleList.length > 0">
|
|
<div>
|
|
<div @click="$navigate(`/ColumnDetail?id=${item.id}`)" class="column" v-for="item in articleList"
|
|
:key="item.id">
|
|
<img v-if="item.img" :src="$file(item.img)" class="icon" />
|
|
<div class="overview">
|
|
<span class="title">{{ item.name }}</span>
|
|
<div class="desc">
|
|
<span>{{ $formatGMT(item.addtime, 'yyyy-MM-dd') }}</span>
|
|
<span>阅读 {{ item.click }} <i class="van-icon van-icon-arrow" style="color:#000"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<van-empty v-else class="b_l_w" description="暂无数据" />
|
|
<!-- </div> -->
|
|
<!-- <van-empty v-else class="b_l_w" description="栏目不存在" /> -->
|
|
</BasePage>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Column',
|
|
emits: ['updateShare'],
|
|
mounted() {
|
|
this.$get(`/v1/client/CNewsClient?pid=${this.pid}`).then(data => {
|
|
// console.log(data);
|
|
this.articleList = data.data.items;
|
|
this.currentColumn.name = data.data.items[0].pidname;
|
|
if (this.articleList.length > 0) {
|
|
this.$emit('updateShare', this.articleList[0].name, this.articleList[0].description, this.articleList[0].img);
|
|
}
|
|
})
|
|
},
|
|
data() {
|
|
return {
|
|
columns: [],
|
|
articles: [],
|
|
articleList: [],
|
|
currentColumn: {},
|
|
pid: this.$route.query.pid || 3,
|
|
}
|
|
},
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.column-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.column {
|
|
display: flex;
|
|
padding: 3.333vw;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.icon {
|
|
height: 18.667vw;
|
|
min-width: 18.667vw
|
|
}
|
|
|
|
.overview {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
|
|
.title {
|
|
font-size: 3.667vw;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
line-clamp: 3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.desc {
|
|
color: #999;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|