yf-portal-vue/src/components/home/CardItem.vue

<template>
  <el-card shadow="hover" class="h-[850px] w-full min-w-0">
    <div
      class="relative overflow-hidden rounded-md mb-3 h-36 bg-cover bg-center"
      :style="{ backgroundImage: `url(${bg})` }"
    >
      <div class="absolute inset-0 bg-white/0"></div>
      <div
        class="relative h-full flex items-center gap-3 px-4 cursor-pointer"
        @click="goDetail"
      >
        <div class="min-w-0 flex-1">
          <div class="text-[20px] font-bold text-[#0050b3]">{{ title }}</div>
          <div class="text-[#606266] text-sm mt-1 leading-snug">{{ desc }}</div>
        </div>
      </div>
    </div>

    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item
        v-for="(i, idx) in items"
        :key="idx"
        :name="String(idx)"
        :title="i.label"
      >
        <div class="text-[#606266]">{{ i.label }}</div>
        <template #title>
          <div class="flex items-center min-w-0 flex-1">
            <span class="truncate">{{ i.label }}</span>
            <el-tag
              v-if="i.tag"
              size="small"
              type="danger"
              effect="dark"
              class="ml-2 shrink-0"
              >{{ i.tag }}</el-tag
            >
          </div>
        </template>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

type Item = { label: string; tag?: "新" | "热" };

const props = defineProps<{
  title: string;
  desc: string;
  items: Item[];
  bg: string;
  key: string;
  id: string;
}>();

const activeNames = ref<string[]>([]);

const goDetail = () => {
  if (props.id === "management") {
    router.push({ path: "/management" });
  } else if (props.id === "command") {
    router.push({ path: "/command" });
  } else if (props.id === "chatbi") {
    router.push({ path: "/chatbi" });
  }
};
</script>

<style scoped>
:deep(.el-card) {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

:deep(.el-card__body) {
  width: 100%;
  min-width: 0;
  padding: 0;
}

:deep(.el-collapse) {
  width: 100%;
  min-width: 0;
}

:deep(.el-collapse-item) {
  width: 100%;
  min-width: 0;
}

:deep(.el-collapse-item) .el-collapse-item__header {
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

:deep(.el-collapse-item) .el-collapse-item__wrap {
  padding: 0 12px 10px;
  width: 100%;
  min-width: 0;
}

:deep(.el-collapse-item__content) {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  word-wrap: break-word;
}
</style>