112 lines
2.3 KiB
Vue
112 lines
2.3 KiB
Vue
<template>
|
|
<section class="AiNewsList">
|
|
<AiTopFixed class="header">
|
|
<slot name="header"/>
|
|
</AiTopFixed>
|
|
<slot v-if="$slots.content" name="content"/>
|
|
<div class="listPane" v-else-if="list.length>0">
|
|
<div class="card" v-for="item in list" :key="item.id" @click="$emit('select',item)">
|
|
<slot v-if="$slots.row" name="row" :row="item"/>
|
|
<div class="title" v-text="item[props.title]"/>
|
|
<div flex class="subTitle">
|
|
<div class="tag" v-text="item[props.type]"/>
|
|
<span class="fill" v-text="item[props.createTime]"/>
|
|
<div flex>
|
|
<div class="count" v-text="item[props.count]||0"/>
|
|
人看过
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<u-loadmore :status="loadmore" color="#999" font-size="24"
|
|
margin-top="32" margin-bottom="80"/>
|
|
</div>
|
|
<div class="no-message" v-else>
|
|
<image src="https://cdn.cunwuyun.cn/wxAdmin/img/message.png"/>
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "AiNewsList",
|
|
props: {
|
|
list: {default: () => []},
|
|
props: {
|
|
default: () => ({
|
|
title: 'title',
|
|
type: "type",
|
|
createTime: "createTime",
|
|
count: "count",
|
|
})
|
|
},
|
|
loadmore: {default: "loadmore"}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiNewsList {
|
|
height: 100vh;
|
|
background: #f3f6f9;
|
|
|
|
.listPane {
|
|
padding: 24px 32px 36px;
|
|
|
|
.card {
|
|
background: #FFFFFF;
|
|
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
margin-bottom: 32px;
|
|
|
|
.title {
|
|
height: 50px;
|
|
font-size: 36px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 50px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.subTitle {
|
|
color: #999;
|
|
width: 100%;
|
|
|
|
.tag {
|
|
height: 48px;
|
|
background: #EEEEEE;
|
|
border-radius: 24px;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.count {
|
|
color: #4181FF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-message {
|
|
margin-top: 140px;
|
|
text-align: center;
|
|
color: #888;
|
|
font-size: 30px;
|
|
|
|
b {
|
|
font-size: 32px;
|
|
color: $uni-color-primary;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
image {
|
|
width: 320px;
|
|
height: 240px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|