huijia-website/app/components/solution/case-card.vue

<!--
 * @Description: 解决方案-典型案例卡片组件
-->
<template>
  <div class="case-card">
    <div class="case-img-wrapper">
      <img :src="caseItem.caseCover" class="case-img" :alt="caseItem.caseName" />
    </div>
    <div class="case-content">
      <div class="case-header">
        <h3 class="case-name pf-sc-semibold">{{ caseItem.caseName }}</h3>
        <div v-if="showNav" class="case-nav-btns">
          <!-- PC Prev -->
          <i
            class="i-custom-arrow-circle-left wh-32px transition-colors lt-sm:hidden"
            :class="
              isFirst
                ? 'cursor-not-allowed opacity-50'
                : 'cursor-pointer hover:i-custom-arrow-circle-left-active'
            "
            @click="$emit('prev')"
          ></i>
          <!-- Mobile Prev -->
          <i
            class="i-custom-button-previous-mobile wh-32px transition-all shrink-0 hidden lt-sm:block"
            :class="[
              isFirst
                ? 'cursor-not-allowed i-custom-button-previous-mobile-disabled'
                : 'cursor-pointer active:i-custom-button-previous-mobile-active',
            ]"
            @click="$emit('prev')"
          ></i>

          <!-- PC Next -->
          <i
            class="i-custom-arrow-circle-right wh-32px ml-12px transition-colors lt-sm:hidden"
            :class="
              isLast
                ? 'cursor-not-allowed opacity-50'
                : 'cursor-pointer hover:i-custom-arrow-circle-right-active'
            "
            @click="$emit('next')"
          ></i>
          <!-- Mobile Next -->
          <i
            class="i-custom-button-next-mobile wh-32px ml-12px transition-all shrink-0 hidden lt-sm:block"
            :class="[
              isLast
                ? 'cursor-not-allowed i-custom-button-next-mobile-disabled'
                : 'cursor-pointer active:i-custom-button-next-mobile-active',
            ]"
            @click="$emit('next')"
          ></i>
        </div>
      </div>

      <div class="case-section">
        <h4 class="case-subtitle pf-sc-semibold">客户痛点</h4>
        <div class="case-text pf-sc-regular">{{ caseItem.casePainPoint }}</div>
      </div>
      <div
        class="case-section mt-24px bg-#F6F8FD p-16px rounded-8px lt-sm:mt-24px lt-sm:p-24px lt-sm:rounded-8px"
      >
        <h4 class="case-subtitle pf-sc-semibold">落地效果</h4>
        <div class="case-text pf-sc-regular">
          <div v-for="(effect, eIndex) in caseItem.caseEffect" :key="eIndex">
            {{ effect }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  export interface CaseItem {
    caseName: string
    caseCover: string
    casePainPoint: string
    caseEffect: string[]
  }

  defineProps<{
    caseItem: CaseItem
    showNav?: boolean
    isFirst?: boolean
    isLast?: boolean
  }>()

  defineEmits<{
    (e: 'prev'): void
    (e: 'next'): void
  }>()
</script>

<style scoped lang="scss">
  .case-card {
    @apply bg-white rounded-16px p-24px flex gap-40px items-stretch shadow-sm;
    @apply lt-sm:flex-col lt-sm:p-32px lt-sm:gap-42px lt-sm:rounded-16px;
  }

  .case-img-wrapper {
    @apply w-542px h-342px rounded-8px overflow-hidden flex-shrink-0;
    @apply lt-sm:w-full lt-sm:h-320px lt-sm:rounded-12px;
  }

  .case-img {
    @apply w-full h-full object-fill;
  }

  .case-content {
    @apply flex-1 py-10px flex flex-col justify-center;
  }

  .case-header {
    @apply flex justify-between items-center mb-30px;
    @apply lt-sm:mb-24px;
  }

  .case-name {
    @apply font-s-22px text-#091221 lt-sm:font-s-32px;
  }

  .case-nav-btns {
    @apply flex items-center;
  }

  .case-subtitle {
    @apply font-s-18px text-#091221 mb-12px;
    @apply lt-sm:mb-12px lt-sm:font-s-28px;
  }

  .case-text {
    @apply font-s-14px text-#091221/70 lh-24px;
    @apply lt-sm:font-s-24px lt-sm:lh-normal;
  }
</style>