huijia-website/app/pages/cases/index.vue

<!--
 * @Author: LiZhiWei
 * @Date: 2026-01-26 09:26:13
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-26 11:08:17
 * @Description: 客户案例列表页
-->
<template>
  <div class="cases-page bg-#f6f8fd min-h-screen">
    <!-- Header/Banner -->
    <div class="cases-header py-226px text-center bg-white lt-sm:py-160px">
      <div class="landing-container">
        <h1 class="font-s-48px text-#000000 pf-sc-semibold lt-sm:font-s-64px">解决方案标杆案例</h1>
      </div>
    </div>

    <!-- Cases List -->
    <div class="landing-container py-60px lt-sm:py-120px lt-sm:px-32px">
      <div class="flex flex-col gap-40px lt-sm:gap-64px">
        <solution-case-card
          v-for="(item, index) in pagedCases"
          :key="index"
          :case-item="item"
          class="hover:shadow-lg transition-shadow duration-300"
        />
      </div>

      <!-- Pagination -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next, jumper, ->, slot"
          background
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <section-cta />
  </div>
</template>

<script setup lang="ts">
  import { solutionPoints } from '@/constants/common'
  import { type CaseItem } from '~/components/solution/case-card.vue'

  // Flatten all cases from solutions
  const allCases = computed<CaseItem[]>(() => {
    return solutionPoints.flatMap((solution) => solution.typicalCases?.cases || [])
  })

  // Pagination
  const currentPage = ref(1)
  const pageSize = ref(5)
  const total = computed(() => allCases.value.length)

  const pagedCases = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return allCases.value.slice(start, end)
  })

  const handlePageChange = () => {
    window.scrollTo({ top: 450, behavior: 'smooth' })
  }

  useSeoMeta({
    title: '客户案例 - 绘家科技',
    description: '绘家科技智慧物业解决方案标杆案例，展示数字化转型成果与客户价值。',
  })
</script>

<style scoped lang="scss">
  .cases-header {
    @apply bg-cover bg-center bg-no-repeat;
    background-image: url('@/assets/images/solution-cases-bg.png');
  }

  .pagination-wrapper {
    @apply mt-60px flex justify-center lt-sm:mt-80px;

    :deep(.el-pagination) {
      @apply flex items-center gap-12px flex-nowrap justify-center;
      @apply lt-sm:gap-8px;

      button,
      .el-pager li {
        @apply bg-white border border-#E2E8F0 rounded-4px font-s-14px text-#64748B min-w-40px h-40px flex items-center justify-center transition-all duration-300;
        @apply lt-sm:min-w-64px lt-sm:h-64px lt-sm:font-s-24px;

        &:not(:disabled):not(.disabled):hover {
          @apply border-#0F67F8! text-#0F67F8!;
        }

        &.is-active {
          @apply bg-#0F67F8! border-#0F67F8! text-white!;
        }

        &:disabled,
        &.disabled {
          @apply opacity-50 cursor-not-allowed bg-white! border-#E2E8F0! text-#64748B!;
        }
      }

      &.is-background {
        .btn-prev,
        .btn-next {
          @apply mx-0!;
        }

        .el-pager li {
          @apply mx-4px!;
        }
      }

      .el-icon {
        @apply lt-sm:font-s-24px;
      }

      .el-pagination__jump {
        @apply ml-24px font-s-14px text-#64748B flex items-center gap-8px;
        @apply lt-sm:ml-18px lt-sm:font-s-22px lt-sm:gap-8px;

        .el-input {
          @apply w-56px! mx-0!;
          @apply lt-sm:w-80px!;

          .el-input__wrapper {
            @apply shadow-none! border border-#E2E8F0! px-0! h-40px! rounded-4px!;
            @apply lt-sm:h-64px!;

            &.is-focus {
              @apply border-#0F67F8!;
            }
          }

          input {
            @apply text-center! font-s-14px! text-#091221! h-full!;
            @apply lt-sm:font-s-24px!;
          }
        }

        .el-pagination__goto,
        .el-pagination__classifier {
          @apply lt-sm:m-0;
        }
      }
    }
  }
</style>