smartai2dian0/src/views/manage/CardItem.vue

<template>
  <div class="card-container" :style="{ height: `${height}px` }">
    <div class="card-name">
      <img :src="img_src" class="logo" />
      <div class="name">{{ name }}</div>
    </div>
    <div class="card-label">
      <slot name="labels"></slot>
    </div>
    <div class="card-des">
      <slot name="description"></slot>
    </div>
    <div class="card-label">
      <slot name="labelBtn"></slot>
    </div>
    <div class="card-bottom">
      <slot name="bottom"></slot>
    </div>
    <div class="card-settings">
      <slot name="settings"></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String
  },
  img_src: {
    type: String
  },
  height: {
    type: Number,
    default: 175
  }
});
</script>
<style scoped lang="css">
.card-container {
  position: relative;
  padding: 10px 20px;
  background-color: var(--color-bg-2);
}
.card-name .name {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: var(--color-neutral-8);
}
.card-label {
  width: 100%;
  margin-top: 15px;
  color: var(--color-neutral-4);
}
.card-des {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 5px;
  color: var(--color-neutral-4);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.card-bottom {
  position: absolute;
  bottom: 10px;
  left: 20px;
  width: calc(100% - 40px);
}
.card-settings {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>