menduner/src/views/mp/draft/components/DraftTable.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>