official-website-portals/src/views/components/Case.vue

<template>
    <section id="cases" class="section-padding bg-dark relative bg-grid">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
              成功案例
            </div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">客户成功案例展示</h2>
            <p class="text-gray-400 text-lg">{{caseData.successInfo?.remark || ''}}</p>
          </div>

          <!-- 案例筛选 -->
          <div class="flex flex-wrap justify-center gap-4 mb-10">
            <button class="case-filter px-5 py-2 rounded-full"
                v-for="item in typeList" :key="'type'+ item.type"
                :class="currentType == item.id? 'active bg-primary text-white font-medium': 'bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors'"
                @click="changeType(item)"
                >{{item.name}}</button>
            <!-- <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧园区</button>
            <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">应急管理</button>
            <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">乡村治理</button>
            <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧教育</button> -->
          </div>

          <!-- 案例展示 -->
          <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 案例1 -->
            <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group" v-for="(item,index) in caseList" :key="'caseitem' + index">
              <div class="h-56 overflow-hidden relative">
                <img :src="item.pic" :alt="item.typeName" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full" v-if="typeList[1]?item.typeId == typeList[1].id:false">{{item.typeName}}</div>
                <div class="absolute top-4 left-4 bg-secondary text-white text-sm px-3 py-1 rounded-full" v-if="typeList[2]?item.typeId == typeList[2].id:false">{{item.typeName}}</div>
                <div class="absolute top-4 left-4 bg-green-500 text-white text-sm px-3 py-1 rounded-full" v-if="typeList[3]?item.typeId == typeList[3].id:false">{{item.typeName}}</div>
                <div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full" v-if="typeList[4]?item.typeId == typeList[4].id:false">{{item.typeName}}</div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">{{item.name}}</h3>
                <p class="text-gray-400 mb-4 line-clamp-2">
                  {{item.remark}}
                </p>
                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div>

            <!-- 案例2 -->
            <!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
              <div class="h-56 overflow-hidden relative">
                <img src="https://picsum.photos/id/26/600/400" alt="应急管理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute top-4 left-4 bg-secondary text-dark text-sm px-3 py-1 rounded-full">应急管理</div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某市应急指挥系统</h3>
                <p class="text-gray-400 mb-4 line-clamp-2">
                  为某市应急管理局开发了应急指挥系统，实现了突发事件的快速响应和高效指挥调度。
                </p>
                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div> -->

            <!-- 案例3 -->
            <!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
              <div class="h-56 overflow-hidden relative">
                <img src="https://picsum.photos/id/164/600/400" alt="乡村治理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute top-4 left-4 bg-green-500 text-dark text-sm px-3 py-1 rounded-full">乡村治理</div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某县乡村治理平台</h3>
                <p class="text-gray-400 mb-4 line-clamp-2">
                  为某县200多个行政村建设了乡村治理平台，实现了村务公开、平安乡村、便民服务等功能。
                </p>
                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div> -->

            <!-- 案例4 -->
            <!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
              <div class="h-56 overflow-hidden relative">
                <img src="https://picsum.photos/id/20/600/400" alt="智慧教育案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full">智慧教育</div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某大学智慧校园建设</h3>
                <p class="text-gray-400 mb-4 line-clamp-2">
                  为某大学建设了智慧校园平台，整合了教学管理、校园安防、后勤服务等系统，提升了管理效率。
                </p>
                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div> -->

            <!-- 案例5 -->
            <!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
              <div class="h-56 overflow-hidden relative">
                <img src="https://picsum.photos/id/48/600/400" alt="智慧园区案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full">智慧园区</div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某工业园区智能安防系统</h3>
                <p class="text-gray-400 mb-4 line-clamp-2">
                  为大型工业园区部署了智能安防系统，包括高清监控、周界防范、智能巡检等功能模块。
                </p>
                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div> -->

            <!-- 案例6 -->
            <!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
              <div class="h-56 overflow-hidden relative">
                <img src="https://picsum.photos/id/91/600/400" alt="应急管理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute top-4 left-4 bg-secondary text-dark text-sm px-3 py-1 rounded-full">应急管理</div>
              </div>
              <div class="p-6">
                <h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某景区应急广播系统</h3>
                <p class="text-gray-400 mb-4 line-clamp-2">
                  为5A级景区部署了智能应急广播系统，覆盖面积达10平方公里，支持分区控制和应急播报。
                </p>
                <a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
                  查看详情 <i class="fa fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div> -->
          </div>

          <div class="text-center mt-12">
            <a href="#contact" class="btn-secondary inline-flex items-center">
              查看更多案例 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
    </section>
</template>
<script setup>
import Website from "@/api/api";
import { computed, onMounted, ref, watch } from 'vue';
const props = defineProps({
  caseData: {
    type: Object,
    default: () => ({})
  }
})
onMounted(() => {
  getCaseData()
})
const typeList = ref([
    {type: '0',name: '全部案例',id: ''},
])
const caseList = ref([])
watch(() => props.caseData, (val) => {
  console.log(props.caseData,'5')
  props.caseData.caseTypes?.forEach((itm,idx) => {
    itm.type = idx + 1
    typeList.value.push(itm)
  });
}, {
  deep: false
})
const currentType = ref('')

const getCaseData = async () => {
  console.log('88')
  const website = new Website()
  const res = await website.getCasePage({typeId: currentType.value,pageNum: 1,pageSize: 6})
  console.log('66',res)
  if(res.code == 200){
    let resLs = res.data?.records || []
    if(resLs.length > 0){
      caseList.value = resLs
    } else {
      caseList.value = [
        {
          name: '某科技园区智能管理系统',pic: 'https://picsum.photos/id/42/600/400',
          remark: '为占地500亩的科技园区提供了全套智能管理解决方案，包括智能安防、停车管理、能源监控等系统。',
          typeName: '智慧园区',typeId: 1
        } // 测试数据
      ]
    }
  }
}

const changeType = (item) => {
    currentType.value = item.id
    getCaseData()
}
</script>
<style lang="scss">

</style>