LNYD_Web/src/views/project/list/components/Card.vue

<script setup lang="ts">
import { computed, PropType } from "vue";
// import MoreFilled from "@iconify-icons/ant-design/ellipsis-outlined";
import cover from "@/assets/static/cover.png";
import { MoreFilled } from "@element-plus/icons-vue";

defineOptions({
  name: "ReCard"
});

interface CardProductType {
  type: number;
  isSetup: boolean;
  leader: string;
  name: string;
  phone: number;
  modelNum: number;
}

const props = defineProps({
  product: {
    type: Object as PropType<CardProductType>
  }
});

const emit = defineEmits(["manage-product", "delete-item", "product-detail"]);

const handleClickManage = (product: CardProductType) => {
  emit("manage-product", product);
};

const handleClickDelete = (product: CardProductType) => {
  emit("delete-item", product);
};

const handleClickDetail = (product: CardProductType) => {
  emit("product-detail", product);
};

const cardClass = computed(() => [
  "list-card-item",
  { "list-card-item__disabled": !props.product.isSetup }
]);

const cardLogoClass = computed(() => [
  "list-card-item_detail--logo",
  { "list-card-item_detail--logo__disabled": !props.product.isSetup }
]);
</script>

<template>
  <div :class="cardClass">
    <div
      class="list-card-item_detail bg-bg_color"
      @click="handleClickDetail(product)"
    >
      <div :class="cardLogoClass">
        <img :src="cover" class="bg" />
      </div>
      <div class="list-card-item_content">
        <el-row justify="space-between">
          <p class="list-card-item_detail--name text-text_color_primary">
            {{ product.name }}
          </p>
          <div class="list-card-item_detail--operation" @click.stop>
            <el-dropdown
              trigger="click"
              :disabled="false"
              popper-class="dropDownStyle"
            >
              <!-- <IconifyIconOffline :icon="MoreFilled" class="text-[24px]" /> -->
              <el-icon :size="16"><MoreFilled /></el-icon>
              <template #dropdown>
                <el-dropdown-menu :disabled="!product.isSetup">
                  <el-dropdown-item @click="handleClickManage(product)">
                    编辑项目
                  </el-dropdown-item>
                  <el-dropdown-item @click="handleClickDelete(product)">
                    删除项目
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-row>
        <p class="list-card-item_detail--desc">
          项目负责人：{{ product.leader }}
        </p>
        <p class="list-card-item_detail--desc text-text_color_regular">
          联系方式：{{ product.phone }}
        </p>
        <p class="list-card-item_detail--desc text-text_color_regular">
          模型应用数：{{ product.modelNum }}
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-card-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  border-radius: 3px;

  &_content {
    padding: 16px 16px 8px;
  }

  &_detail {
    flex: 1;
    min-height: 140px;

    &--logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;

      &__disabled {
        color: #a1c4ff;
      }
    }

    &--operation {
      display: flex;
      height: 100%;

      &--tag {
        border: 0;
      }
    }

    &--name {
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 400;
      // font-family: "PingFang SC";
      color: #333;
    }

    &--desc {
      display: -webkit-box;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      // font-family: "Roboto";
      color: #666;
    }
  }

  // &__disabled {
  //   .list-card-item_detail--name,
  //   .list-card-item_detail--desc {
  //     // color: var(--el-text-color-disabled);
  //   }

  //   .list-card-item_detail--operation--tag {
  //     // color: #bababa;
  //   }
  // }
}
</style>