website_www/src/pages/cases/Index.vue

<template>
  <DefaultLayout>
    <!-- banner -->
    <section class="banner-section">
      <img src="@assets/cases-banner.png" alt="" srcset="">
    </section>

    <!-- 智慧解决方案 -->
    <section class="smart-solutions">
      <div class="container">
        <!-- 标题区域 -->
        <div class="title-section">
          <h2 class="main-title">智慧解决方案</h2>
          <p class="sub-title">SMART SOLUTION</p>
          <p class="description">智慧管理系统采用先进的开发技术，为智慧产业提供一站式解决方案</p>
        </div>

        <!-- 解决方案列表 -->
        <div class="solutions-grid">
          <div v-for="solution in visibleSolutions" :key="solution.id" @click="goToCaseDetail(solution)"
            class="solution-card">
            <div class="card-image">
              <img :src="solution.image" :alt="solution.title" />
            </div>
            <div class="card-content">
              <h3 class="card-title">{{ solution.title }}</h3>
              <p class="card-description">{{ solution.description }}</p>
            </div>
          </div>
        </div>

        <!-- 切换按钮 -->
        <div class="navigation-buttons">
          <button class="nav-btn prev-btn" :class="{ disabled: currentPage === 0 }" @click="prevPage"
            :disabled="currentPage === 0">
            <img src="@assets/slide-arrow-left.png" alt="上一页" />
          </button>
          <button class="nav-btn next-btn" :class="{ disabled: currentPage >= maxPage }" @click="nextPage"
            :disabled="currentPage >= maxPage">
            <img src="@assets/slide-arrow-right.png" alt="下一页" />
          </button>
        </div>
      </div>
    </section>

    <!-- 更多案例 -->
    <section class="more-cases">
      <div class="container">
        <!-- 标题区域 -->
        <div class="title-section">
          <h2 class="main-title">更多案例</h2>
          <p class="sub-title">MORE CASES</p>
        </div>

        <!-- 案例列表 -->
        <div class="cases-list">
          <div v-for="(caseItem, caseIndex) in casesList" :key="caseItem.id" class="case-item"
            :class="{ 'fifth-row': Math.floor(caseIndex / 2) === 4 }" @click="goToCaseDetail(caseItem)">
            <div class="case-content">
              <h3 class="case-title">{{ caseItem.title }}</h3>
            </div>
          </div>
        </div>
      </div>
    </section>
  </DefaultLayout>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { getProjectClassifyList, getProjectList } from '@/api/modules/home'
import { useRouter } from 'vue-router'
import DefaultLayout from '@/layouts/DefaultLayout.vue'

export default {
  name: 'ProductsPage',
  components: {
    DefaultLayout
  },
  setup() {
    const router = useRouter()
    // 环境变量
    const imgHost = import.meta.env.VITE_APP_IMG_HOST || ''
    const currentPage = ref(0)
    const itemsPerPage = 6 // 每页显示6个（2行 × 3列）

    // 解决方案数据
    let solutions = ref([
      {
        id: 1,
        title: '智慧农业（种植+养殖）',
        description: '通过物联网设备和数据分析，实现精准农业管理，提高农业生产效率和产品质量。',
        image: '/src/assets/products-youshi-01.png'
      },
      {
        id: 2,
        title: '智慧停车',
        description: '通过智能化停车管理系统，实现停车位的智能分配和管理，提升停车效率。',
        image: '/src/assets/products-youshi-02.png'
      },
      {
        id: 3,
        title: '数据服务系统',
        description: '为政府部门提供数据整合、分析和可视化服务，支持科学决策和管理优化。',
        image: '/src/assets/products-youshi-03.png'
      },
      {
        id: 4,
        title: '景区一码游系统',
        description: '通过移动互联网技术，为游客提供便捷的景区服务，提升旅游体验。',
        image: '/src/assets/products-youshi-04.png'
      },
      {
        id: 5,
        title: '智慧林场',
        description: '通过物联网和大数据技术，实现森林资源的智能监管和保护。',
        image: '/src/assets/products-youshi-05.png'
      },
      {
        id: 6,
        title: '森林防火',
        description: '利用先进的监测技术和预警系统，实现森林火灾的早期发现和快速响应。',
        image: '/src/assets/products-youshi-06.png'
      },
      {
        id: 7,
        title: '智慧城市',
        description: '构建智慧城市管理平台，实现城市运行的智能化监管和服务。',
        image: '/src/assets/products-youshi-01.png'
      },
      {
        id: 8,
        title: '智慧医疗',
        description: '通过数字化技术提升医疗服务质量，实现医疗资源的优化配置。',
        image: '/src/assets/products-youshi-02.png'
      }
    ])

    // 更多案例数据
    let casesList = ref([
      { id: 1, title: '海南教育局大数据中心建设项目' },
      { id: 2, title: '贵阳某龙新区疫情网络安全监测项目' },
      { id: 3, title: '六盘水区民法院网络安全项目' },
      { id: 4, title: '某某人民银行' },
      { id: 5, title: '阿里大数据中心项目' },
      { id: 6, title: '贵阳市花溪区大学城项目' },
      { id: 7, title: '修文县商务局' },
      { id: 8, title: '贵州某通信集团公司综合考核管理系统项目' },
      { id: 9, title: '贵州省金沙开发区政务子信息产业园区15栋' },
      { id: 10, title: '六盘水市人民法院网络安全项目' },
      { id: 11, title: '贵州大学中科院学子化学院项目' },
      { id: 12, title: '修文县商务局' },
      { id: 13, title: '贵州某通信集团公司综合考核管理系统项目' },
      { id: 14, title: '贵州省金沙开发区政务子信息产业园区' },
      { id: 15, title: '六盘水市人民法院网络安全项目' },
      { id: 16, title: '兴义安龙县法院网络安全' },
      { id: 17, title: '贵阳市人力资源大数据智能化' },
      { id: 18, title: '贵州省食药监药品监管智能化项目智能化' },
      { id: 19, title: '兴义安龙县正式网络安全工程' },
      { id: 20, title: '兴义安龙县法院网络安全工程' }
    ])

    // 跳转到案例详情页
    const goToCaseDetail = (caseItem) => {
      console.log('跳转到案例详情页caseItem',caseItem)
      router.push({
        name: 'Casesdetails',
        query: { id: caseItem.id,classifyId:caseItem.classifyId }
      })
    }

    // 计算当前页显示的解决方案
    const visibleSolutions = computed(() => {
      const start = currentPage.value * itemsPerPage
      const end = start + itemsPerPage
      return solutions.value.slice(start, end)
    })

    // 计算最大页数
    const maxPage = computed(() => {
      return Math.ceil(solutions.value.length / itemsPerPage) - 1
    })

    // 上一页
    const prevPage = () => {
      if (currentPage.value > 0) {
        currentPage.value--
      }
    }

    // 下一页
    const nextPage = () => {
      if (currentPage.value < maxPage.value) {
        currentPage.value++
      }
    }

    // API调用方法
    const loadProductsData = async () => {
      try {
        // 获取产品分类列表 (用于solutions)
        // const classifyData = await getProjectClassifyList({ classifyType: 1 })
        // console.log('产品分类数据:', classifyData)

        // if (classifyData && classifyData.rows && classifyData.rows.length > 0) {
        //   // 更新solutions数据
        //   solutions.value = classifyData.rows.map(item => ({
        //     id: item.id,
        //     title: item.classifyName,
        //     description: item.classifyDesc || '为您提供专业的解决方案',
        //     image: item.projectImage ? imgHost + item.projectImage : '/src/assets/products-youshi-01.png'
        //   }))
        // }

        // 获取案例列表 (用于casesList)
        const casesData = await getProjectList({ projectType: 2 })
        console.log('案例数据:', casesData)

        if (casesData && casesData.rows && casesData.rows.length > 0) {
          // 更新casesList数据
          casesList.value = casesData.rows.map(item => ({
            id: item.id,
            title: item.projectName || item.title
          }))

          // 更新solutions数据
          solutions.value = casesData.rows.map(item => ({
            id: item.id,
            classifyId:item.classifyId,
            title: item.classifyName,
            description: item.classifyDesc || '为您提供专业的解决方案',
            image: item.projectImage ? imgHost + item.projectImage : '/src/assets/products-youshi-01.png'
          }))
        }
      } catch (error) {
        console.error('加载产品数据失败:', error)
      }
    }

    onMounted(() => {
      loadProductsData()
    })

    return {
      currentPage,
      solutions,
      visibleSolutions,
      maxPage,
      prevPage,
      nextPage,
      casesList,
      goToCaseDetail
    }
  }
}
</script>

<style lang="scss" scoped>
// banner区域
.banner-section {
  position: relative;

  img {
    width: 100%;
  }
}

// 智慧解决方案区域
.smart-solutions {
  padding: 80px 0;
  background: url('@assets/cases-bg-01.png') center/cover no-repeat;
  position: relative;

  .container {
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
  }

  .title-section {
    text-align: center;
    margin-bottom: 60px;

    .main-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
      position: relative;
      display: inline-block;
    }

    .sub-title {
      font-size: 16px;
      color: #999;
      margin-bottom: 20px;
      letter-spacing: 2px;
      font-weight: 500;
    }

    .description {
      font-size: 16px;
      color: #333;
      line-height: 1.6;
      max-width: 600px;
      margin: 0 auto;
    }
  }

  .solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 50px;
  }

  .solution-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }

    .card-image {
      height: 282px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
      }
    }

    &:hover .card-image img {
      transform: scale(1.05);
    }

    .card-content {
      padding: 20px;

      .card-title {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
        text-align: center;
      }

      .card-description {
        font-size: 16px;
        color: #666;
        line-height: 1.6;
        text-align: center;
      }
    }
  }

  .navigation-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;

    .nav-btn {
      width: 50px;
      height: 50px;
      border: none;
      background: #fff;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover:not(.disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }

      &.disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }

      img {
        width: 20px;
        height: 20px;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 60px 0;

    .title-section {
      .main-title {
        font-size: 32px;
      }
    }

    .solutions-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(6, 1fr);
      gap: 20px;
    }

    .solution-card {
      .card-image {
        height: 150px;
      }
    }
  }

  @media (max-width: 1024px) and (min-width: 769px) {
    .solutions-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
  }
}

// 更多案例区域
.more-cases {
  padding: 80px 0;
  background: #fff;
  position: relative;

  &::before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: -138px;
    background: url('@assets/cases-bg-02.png') no-repeat center center;
    background-size: cover;
  }

  .container {
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
  }

  .title-section {
    text-align: center;
    margin-bottom: 60px;

    .main-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
      position: relative;
      display: inline-block;
    }

    .sub-title {
      font-size: 16px;
      color: #999;
      margin-bottom: 20px;
      letter-spacing: 2px;
      font-weight: 500;
    }
  }

  .cases-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 40px;
    padding: 68px 164px;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    border-radius: 16px;

    .case-item {
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(74, 144, 226, 0.05);
        border-radius: 4px;
      }

      &:hover .case-title {
        color: #4a90e2;
      }

      // 第五行特殊样式
      &.fifth-row {
        margin-bottom: 20px;
      }

      .case-content {
        text-align: left;

        .case-title {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 0;
          line-height: 1.4;
          display: flex;
          align-items: center;

          &:before {
            content: '•';
            color: #4a90e2;
            font-size: 20px;
            margin-right: 10px;
            line-height: 1;
          }
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 60px 0;

    .title-section {
      .main-title {
        font-size: 32px;
      }
    }

    .cases-list {
      grid-template-columns: 1fr;
      gap: 20px;

      .case-item {
        padding: 12px 0;
        margin-bottom: 10px;

        &:hover {
          padding: 12px 8px;
        }

        &.fifth-row {
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>