88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="waterfall" v-loading="props.loading">
|
||
|
|
<template v-for="item in props.list" :key="item.articleId">
|
||
|
|
<div class="waterfall-item" v-if="item.content && item.content.newsItem">
|
||
|
|
<WxNews :articles="item.content.newsItem" />
|
||
|
|
<!-- 操作按钮 -->
|
||
|
|
<el-row>
|
||
|
|
<el-button
|
||
|
|
type="success"
|
||
|
|
circle
|
||
|
|
@click="emit('publish', item)"
|
||
|
|
v-hasPermi="['mp:free-publish:submit']"
|
||
|
|
>
|
||
|
|
<Icon icon="fa:upload" />
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
type="primary"
|
||
|
|
circle
|
||
|
|
@click="emit('update', item)"
|
||
|
|
v-hasPermi="['mp:draft:update']"
|
||
|
|
>
|
||
|
|
<Icon icon="ep:edit" />
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
type="danger"
|
||
|
|
circle
|
||
|
|
@click="emit('delete', item)"
|
||
|
|
v-hasPermi="['mp:draft:delete']"
|
||
|
|
>
|
||
|
|
<Icon icon="ep:delete" />
|
||
|
|
</el-button>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import WxNews from '@/views/mp/components/wx-news/main.vue'
|
||
|
|
|
||
|
|
import { Article } from './types'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
list: Article[]
|
||
|
|
loading: boolean
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'publish', v: Article)
|
||
|
|
(e: 'update', v: Article)
|
||
|
|
(e: 'delete', v: Article)
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.waterfall {
|
||
|
|
width: 100%;
|
||
|
|
column-gap: 10px;
|
||
|
|
column-count: 5;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
.waterfall-item {
|
||
|
|
padding: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
break-inside: avoid;
|
||
|
|
border: 1px solid #eaeaea;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 992px) and (max-width: 1300px) {
|
||
|
|
.waterfall {
|
||
|
|
column-count: 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
||
|
|
.waterfall {
|
||
|
|
column-count: 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 767px) {
|
||
|
|
.waterfall {
|
||
|
|
column-count: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|