shalu-bigscreen-desiner/src/views/home/component/BigscreenManagement.vue

<template>
  <Layout>
    <LayoutHeader style="background: #fff; padding: 0 16px">
      <Menu mode="horizontal" :selectedKeys="menuSelectedKeys">
        <MenuItem key="1" :icon="() => h(CodepenCircleOutlined)"
          >我的大屏</MenuItem
        >
      </Menu>
    </LayoutHeader>
    <layoutContent style="padding: 16px">
      <Flex wrap="wrap" gap="large">
        <Card hoverable style="width: 258px" @click="handleOpenAddModal">
          <template #cover>
            <div class="add-btn">
              <PlusOutlined style="font-size: 38px; margin-bottom: 12px;" />
              <div class="add-btn-text">新建大屏</div>
            </div>
          </template>
        </Card>
        <Card hoverable style="width: 258px" v-for="i in 10" :key="i">
          <template #cover>
            <img class="cover-img" alt="大屏封面" src="https://picsum.photos/258/200" />
          </template>
          <template #actions>
            <Tooltip title="删除"><DeleteOutlined /></Tooltip>
            <Tooltip title="编辑"><EditOutlined /></Tooltip>
            <Tooltip title="预览"><EyeOutlined /></Tooltip>
            <Tooltip title="发布"><SendOutlined /></Tooltip>
          </template>
          <CardMeta title="大屏名称XX" />
        </Card>
      </Flex>

      <!-- 新增大屏弹窗 -->
      <AddModal v-model:open="addOpen"></AddModal>
    </layoutContent>
  </Layout>
</template>

<script setup lang="ts">
import { h, ref } from "vue";
import type { Ref } from "vue";
import {
  Layout,
  LayoutHeader,
  LayoutContent,
  Menu,
  MenuItem,
  Card,
  CardMeta,
  Flex,
  Tooltip
} from "ant-design-vue";
import {
  CodepenCircleOutlined,
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
  SendOutlined,
  PlusOutlined
} from "@ant-design/icons-vue";
import AddModal from "./AddModal.vue";

const menuSelectedKeys: Ref<string[]> = ref(["1"]);
const addOpen: Ref<boolean> = ref(false);

const handleOpenAddModal = () => {
  addOpen.value = true;
};
</script>

<style lang="less" scoped>
.cover-img {
  width: 100%;
  height: 148px;
  object-fit: cover;
}
.add-btn {
  width: 258px;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &-text {
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }
}
</style>