yz-enamel-exhibition/packages/pc/src/components/Card.vue

<template>
  <div class="card" :class="`${chapter}-theme`">
    <div class="card-img">
      <img
        :src="
          getEnvImagePath(
            Array.isArray(detail?.img)
              ? detail?.img[initImgIndex || 0]
              : detail?.img
          )
        "
      />
    </div>
    <div class="card-inner">
      <p class="card__title">{{ detail?.name }}</p>
      <p class="card__size">尺寸：{{ detail?.size }}</p>
    </div>
  </div>
</template>

<script setup>
import { getEnvImagePath } from "@enamel/base/utils";

defineProps(["detail", "initImgIndex", "chapter"]);
</script>

<style lang="scss" scoped>
.card {
  max-width: 350px;
  cursor: pointer;

  &.chapter2-theme {
    .card-img {
      background-image: url("@/assets/images/20-min.png");
    }
  }
  &.chapter3-theme {
    .card-img {
      background-image: url("@/assets/images/21-min.png");
    }
  }
  &.chapter4-theme {
    .card-img {
      background-image: url("@/assets/images/22-min.png");
    }
  }
  &-img {
    padding: 30px;
    width: 331px;
    height: 229px;
    background: url("@/assets/images/19-min.png") no-repeat center / contain;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  &-inner {
    position: relative;
    padding: 15px 0 0 44px;
    text-indent: 0;

    &::before {
      content: "";
      position: absolute;
      top: 17px;
      left: 0;
      width: 25px;
      height: 25px;
      background: url("@/assets/images/14-min.png") no-repeat center / contain;
    }
  }
  &__title {
    color: #1f1f1f;
    line-height: 32px;
  }
  &__size {
    margin-top: 8px;
    color: #767676;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 1px;
  }
}
</style>