website_www/src/pages/home/Index.vue

<template>
  <DefaultLayout>
    <!-- banner -->
    <section class="banner-section">
      <img src="@assets/banner.png" alt="" srcset="">
      <div class="info-row">
        <div class="info-item">
          <span class="text">覆盖</span>
          <span class="number">10+</span>
          <span class="text">垂直行业</span>
        </div>
        <div class="info-item">
          <span class="number">72</span>
          <span class="text">小时原型交付</span>
        </div>
        <div class="info-item">
          <span class="text">定制成本降低</span>
          <span class="number">30%</span>
        </div>
      </div>
    </section>

    <!-- 产品中心 -->
    <section class="products-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">产品中心</h2>
          <p class="section-subtitle">SMART SOLUTION</p>
          <p class="section-description">智慧管理系统采用先进开发技术，为智慧产业提供一站式解决方案</p>
        </div>

        <div class="products-content">
          <div class="products-nav">
            <div v-for="product in productList" :key="product.id" class="nav-item"
              :class="{ active: activeProductId === product.id }" @click="setActiveProduct(product.id)">
              {{ product.title }}
            </div>
          </div>

          <div class="product-detail">
            <div class="detail-content">
              <h3 class="product-title">{{ activeProduct.title }}</h3>
              <p class="product-description">{{ activeProduct.description }}</p>
            </div>
            <div class="detail-image">
              <img :src="activeProduct.image" :alt="activeProduct.title" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 行业案例 -->
    <section class="cases-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">行业案例</h2>
          <p class="section-subtitle">SMART SOLUTION</p>
          <p class="section-description">智慧管理系统采用先进开发技术，为智慧产业提供一站式解决方案</p>
        </div>

        <div class="cases-carousel">
          <div class="nav-arrow nav-arrow-left" :class="{ disabled: currentCaseIndex === 0 }" @click="prevCase">
            <div class="arrow-icon">
              <img src="@assets/arrow-right.png" alt="Previous" />
            </div>
          </div>

          <div class="cases-container">
            <div class="cases-wrapper"
              :style="{ transform: `translateX(-${currentCaseIndex * (100 / visibleCases)}%)` }">
              <div v-for="caseItem in casesList" :key="caseItem.id" class="case-item">
                <div class="case-image">
                  <img :src="caseItem.image" :alt="caseItem.title" />
                </div>
                <div class="case-content">
                  <h3 class="case-title">{{ caseItem.title }}</h3>
                  <p class="case-description">{{ caseItem.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="nav-arrow nav-arrow-right" :class="{ disabled: currentCaseIndex >= maxCaseIndex }"
            @click="nextCase">
            <div class="arrow-icon">
              <img src="@assets/arrow-right.png" alt="Next" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 企业简介 -->
    <section class="about-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">企业简介</h2>
          <p class="section-subtitle">ENTERPRISE QUALIFICATION</p>
        </div>

        <div class="about-content">
          <div class="about-tabs">
            <div v-for="tab in aboutTabs" :key="tab.id" class="tab-item" :class="{ active: activeAboutTab === tab.id }"
              @click="setActiveAboutTab(tab.id)">
              {{ tab.title }}
            </div>
          </div>

          <div class="about-detail">
            <transition name="fade-slide" mode="out-in">
              <div :key="activeAboutTab" class="detail-content">
                <div class="content-left">
                  <img :src="activeAboutContent.image" :alt="activeAboutContent.title" />
                </div>
                <div class="content-right">
                  <h3 class="content-title">{{ activeAboutContent.title }}</h3>
                  <div class="content-description" v-html="activeAboutContent.description"></div>
                  <div class="content-action">
                    <button class="learn-more-btn">查看更多 →</button>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </section>
    <!-- 合作伙伴 -->
    <section class="cooperation-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">合作伙伴</h2>
          <p class="section-subtitle">BUSINESS PARTNER</p>
        </div>

        <div class="partners-grid">
          <a v-for="partner in partnersList" :key="partner.id" :href="partner.url" target="_blank" class="partner-item">
            <img :src="partner.logo" :alt="partner.name" />
          </a>
        </div>
      </div>
    </section>

  </DefaultLayout>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import { getHomeData } from '@/api/modules/home'

export default {
  name: 'HomePage',
  components: {
    DefaultLayout
  },
  setup() {
    const activeProductId = ref(1)

    const productList = ref([
      {
        id: 1,
        title: '低代码平台',
        description: '图形化界面和拖拽式组件，简化应用开发和部署，快速构建和迭代企业级应用。',
        image: 'src/assets/index-products-01.png'
      },
      {
        id: 2,
        title: '物联网平台',
        description: '连接和管理各种智能设备，实现设备数据采集、监控和远程控制。',
        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=物联网平台'
      },
      {
        id: 3,
        title: '统一权限系统',
        description: '集中管理用户权限和访问控制，确保系统安全和数据保护。',
        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=统一权限系统'
      },
      {
        id: 4,
        title: '地图适配应用',
        description: '提供地理信息服务和位置定位功能，支持多种地图数据源。',
        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=地图适配应用'
      },
      {
        id: 5,
        title: '数字学生',
        description: '学生信息管理和学习行为分析，提供个性化教育服务。',
        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=数字学生'
      },
      {
        id: 6,
        title: '数据中台',
        description: '统一数据管理和分析平台，提供数据治理和业务洞察。',
        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=数据中台'
      },
      {
        id: 7,
        title: 'AI大模型',
        description: '集成人工智能技术，提供智能分析和决策支持服务。',
        image: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=AI大模型'
      }
    ])

    const activeProduct = computed(() => {
      return productList.value.find(product => product.id === activeProductId.value) || productList.value[0]
    })

    const setActiveProduct = (id) => {
      activeProductId.value = id
    }

    // 行业案例数据和逻辑
    const currentCaseIndex = ref(0)
    const visibleCases = ref(3) // 同时显示的案例数量

    // 企业简介数据和逻辑
    const activeAboutTab = ref('about')

    const aboutTabs = ref([
      { id: 'about', title: '关于达泽' },
      { id: 'history', title: '发展历程' },
      { id: 'qualification', title: '荣誉资质' }
    ])

    const aboutContents = ref({
      about: {
        title: '关于达泽',
        description: `
          <p>达泽科技是贵州省今日前沿信息技术有限责任公司旗下品牌，专业为软件开发及数字化商务的综合性企业。为政府、金融、保险、通讯、电力、教育、制造、零售、交通、教育、通信、水利、农业等领域的企业及机构提供了专业的信息化解决方案。</p>
          <p>公司一直致力为客户内部管理，为用户至上的服务理念，为客户提供，合作共赢，服务至上的服务理念，为社会创造更高的价值。</p>
        `,
        image: 'src/assets/index-about-bg.png'
      },
      history: {
        title: '发展历程',
        description: `
          <p><strong>2018年</strong> - 公司成立，专注于智慧校园解决方案</p>
          <p><strong>2019年</strong> - 推出低代码开发平台，服务客户超过50家</p>
          <p><strong>2020年</strong> - 获得高新技术企业认证，团队规模扩展至100人</p>
          <p><strong>2021年</strong> - 业务拓展至智慧农业、智慧停车等多个领域</p>
          <p><strong>2022年</strong> - 服务学校超过500所，用户突破100万</p>
          <p><strong>2023年</strong> - 推出AI大模型解决方案，引领行业创新</p>
        `,
        image: 'src/assets/index-about-bg.png'
      },
      qualification: {
        title: '荣誉资质',
        description: `
          <p><strong>国家高新技术企业</strong> - 2020年获得认证</p>
          <p><strong>软件企业认证</strong> - 贵州省软件行业协会会员单位</p>
          <p><strong>ISO9001质量管理体系认证</strong> - 2021年通过认证</p>
          <p><strong>信息安全等级保护三级</strong> - 系统安全等级认证</p>
          <p><strong>优秀合作伙伴奖</strong> - 多家知名企业颁发</p>
          <p><strong>创新技术奖</strong> - 贵州省科技厅颁发</p>
        `,
        image: 'src/assets/index-about-bg.png'
      }
    })

    const activeAboutContent = computed(() => {
      return aboutContents.value[activeAboutTab.value]
    })

    const setActiveAboutTab = (tabId) => {
      activeAboutTab.value = tabId
    }

    // 合作伙伴数据
    const partnersList = ref([
      {
        id: 1,
        name: '浪潮',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=浪潮',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 2,
        name: '新信息',
        logo: 'https://unsplash.it/214/84',
        url: '#'
      },
      {
        id: 3,
        name: 'DELL',
        logo: 'https://unsplash.it/214/84',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 4,
        name: '锐捷',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=锐捷',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 5,
        name: '河姆渡',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=河姆渡',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 6,
        name: 'SIEMENS',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=SIEMENS',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 7,
        name: 'HP',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=HP',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 8,
        name: 'Sygon',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=Sygon',
        url: '#'
      },
      {
        id: 9,
        name: 'KSTAR',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=KSTAR',
        url: 'https://unsplash.it/214/84'
      },
      {
        id: 10,
        name: 'WEIMO',
        logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=WEIMO',
        url: '#'
      }
    ])

    const casesList = ref([
      {
        id: 1,
        title: '智慧农业（种植+养殖）',
        description: '通过物联网技术实现农业自动化管理，利用传感器监控土壤、水质等环境参数，提高农业生产效率。',
        image: 'https://unsplash.it/300/200'
      },
      {
        id: 2,
        title: '智慧停车',
        description: '通过车牌识别技术及物联网设备实现停车场智能化管理，实现无感支付和车位引导等功能。',
        image: 'https://unsplash.it/300/200'
      },
      {
        id: 3,
        title: '副控票务系统',
        description: '为景区提供智能化票务管理，智能闸机一体化管理系统，提升游客体验，优化景区运营。',
        image: 'https://unsplash.it/300/200'
      },
      {
        id: 4,
        title: '智慧校园',
        description: '集成学生管理、教学管理、安全监控等功能，为教育机构提供全方位数字化解决方案。',
        image: 'https://unsplash.it/300/200'
      },
      {
        id: 5,
        title: '智慧医疗',
        description: '通过数字化技术提升医疗服务效率，实现患者信息管理、远程诊疗等智能化医疗服务。',
        image: 'https://unsplash.it/300/200'
      },
      {
        id: 6,
        title: '智慧物流',
        description: '利用物联网和大数据技术优化物流配送，实现货物追踪、路径优化等智能化物流管理。',
        image: 'https://unsplash.it/300/200'
      }
    ])

    const maxCaseIndex = computed(() => {
      return Math.max(0, casesList.value.length - visibleCases.value)
    })

    const nextCase = () => {
      if (currentCaseIndex.value < maxCaseIndex.value) {
        currentCaseIndex.value++
      }
    }

    const prevCase = () => {
      if (currentCaseIndex.value > 0) {
        currentCaseIndex.value--
      }
    }

    // API调用方法
    const loadHomeData = async () => {
      try {
        const data = await getHomeData()
        // 这里可以更新products和advantages数据
        console.log('首页数据:', data)
      } catch (error) {
        console.error('加载首页数据失败:', error)
      }
    }

    // 响应式处理
    const updateVisibleCases = () => {
      if (window.innerWidth <= 768) {
        visibleCases.value = 1
      } else {
        visibleCases.value = 3
      }
      // 重置索引以防超出范围
      if (currentCaseIndex.value > maxCaseIndex.value) {
        currentCaseIndex.value = maxCaseIndex.value
      }
    }

    onMounted(() => {
      loadHomeData()
      updateVisibleCases()
      window.addEventListener('resize', updateVisibleCases)
    })

    onUnmounted(() => {
      window.removeEventListener('resize', updateVisibleCases)
    })

    return {
      productList,
      activeProductId,
      activeProduct,
      setActiveProduct,
      casesList,
      currentCaseIndex,
      visibleCases,
      maxCaseIndex,
      nextCase,
      prevCase,
      aboutTabs,
      activeAboutTab,
      activeAboutContent,
      setActiveAboutTab,
      partnersList
    }
  }
}
</script>

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

.info-row {
  height: 130px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.3);

  .info-item {
    // flex: 1;
    padding: 0 78px;
    position: relative;
    text-align: center;
  }

  .info-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 20px;
    background-color: #ccc;
    transform: translateY(-50%);
  }

  .number {
    color: #0066cc;
    font-weight: bold;
    font-size: 32px;
    vertical-align: middle;
    margin: 0 5px;
  }

  .text {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    margin: 0;
    display: inline-block;
  }
}

// 产品中心
.products-section {
  background: url('@assets/index-products-bg.png') no-repeat center center;
  background-size: cover;
  padding: 80px 0;
  position: relative;

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

    .section-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin: 0 0 20px 0;
    }

    .section-subtitle {
      font-size: 16px;
      color: #999;
      margin: 0 0 20px 0;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .section-description {
      font-size: 18px;
      color: #666;
      margin: 0;
      line-height: 1.6;
    }
  }

  .products-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
  }

  .products-nav {
    flex: 0 0 22%;

    .nav-item {
      height: 100px;
      line-height: 100px;
      padding: 0 30px;
      margin-bottom: 2px;
      cursor: pointer;
      font-size: 24px;
      font-weight: 500;
      color: #343434;
      transition: all 0.3s ease;
      // border-radius: 8px;
      box-sizing: border-box;

      &:hover {
        background: rgba(0, 102, 204, 0.1);
        border-color: #0066cc;
        color: #0066cc;
      }

      &.active {
        background: linear-gradient(to right, #CAE0FF, #E5F0FF);
        color: #0054FF;
        // border-color: #0066cc;
        // box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
      }
    }
  }

  .product-detail {
    flex: 1;

    .detail-content {
      flex: 1;

      .product-title {
        font-size: 36px;
        font-weight: bold;
        color: #333;
        margin: 0 0 20px 0;
      }

      .product-description {
        font-size: 24px;
        color: #333;
        line-height: 1.5;
        margin-bottom: 35px;
      }
    }

    .detail-image {
      img {
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

// 行业案例
.cases-section {
  background: url('@assets/index-cases-bg.png') no-repeat center center;
  background-size: cover;
  padding: 80px 0;
  position: relative;

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

    .section-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin: 0 0 20px 0;
    }

    .section-subtitle {
      font-size: 16px;
      color: #999;
      margin: 0 0 20px 0;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .section-description {
      font-size: 18px;
      color: #666;
      margin: 0;
      line-height: 1.6;
    }
  }

  .cases-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .nav-arrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;

    &:hover {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

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

    .arrow-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    &.nav-arrow-left .arrow-icon {
      transform: rotate(180deg);
    }
  }

  .cases-container {
    flex: 1;
    overflow: hidden;
    border-radius: 12px;
  }

  .cases-wrapper {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
  }

  .case-item {
    flex: 0 0 calc(100% / 3);
    padding: 0 15px;
    box-sizing: border-box;

    .case-image {
      width: 100%;
      height: 200px;
      border-radius: 12px 12px 0 0;
      overflow: hidden;

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

      &:hover img {
        transform: scale(1.05);
      }
    }

    .case-content {
      background: rgba(255, 255, 255, 0.95);
      padding: 25px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 0 0 12px 12px;

      .case-title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin: 0 0 15px 0;
        line-height: 1.4;
      }

      .case-description {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin: 0;
      }
    }
  }
}

// 企业简介
.about-section {
  background: url('@assets/index-about-bg.png') no-repeat center center;
  background-size: cover;
  padding: 80px 0;
  position: relative;

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

    .section-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin: 0 0 20px 0;
    }

    .section-subtitle {
      font-size: 16px;
      color: #999;
      margin: 0 0 20px 0;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
  }

  .about-content {
    // max-width: 1200px;
    margin: 0 auto;
  }

  .about-tabs {
    display: flex;
    justify-content: space-between;
    // gap: 0;
    margin-bottom: 95px;

    .tab-item {
      flex: 0 0 400px;
      height: 66px;
      line-height: 66px;
      text-align: center;
      font-size: 30px;
      font-weight: 500;
      color: #333;
      // background: rgba(255, 255, 255, 0.8);
      // border: 2px solid #E5E5E5;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;

      // &:first-child {
      //   border-radius: 8px 0 0 8px;
      // }

      // &:last-child {
      //   border-radius: 0 8px 8px 0;
      // }

      // &:not(:last-child) {
      //   border-right: none;
      // }

      &:hover {
        background: rgba(0, 102, 204, 0.1);
        color: #0066cc;
        border-color: #0066cc;
        z-index: 2;
      }

      &.active {
        background: #0066cc;
        color: white;
        border-color: #0066cc;
        z-index: 3;
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
      }
    }
  }

  .about-detail {
    // background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 40px 0;
    // box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    // backdrop-filter: blur(10px);
    min-height: 400px;
  }

  .detail-content {
    display: flex;
    gap: 110px;
    align-items: flex-start;

    .content-left {
      flex: 0 0 800px;

      img {
        width: 100%;
        height: 480px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }
    }

    .content-right {
      flex: 1;

      .content-title {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin: 0 0 25px 0;
      }

      .content-description {
        font-size: 16px;
        color: #666;
        line-height: 1.8;
        margin-bottom: 30px;

        p {
          margin: 0 0 15px 0;

          &:last-child {
            margin-bottom: 0;
          }
        }

        strong {
          color: #0066cc;
          font-weight: 600;
        }
      }

      .content-action {
        .learn-more-btn {
          background: transparent;
          color: #0054FF;
          border: 1px solid #0054FF;
          padding: 12px 30px;
          border-radius: 5px;
          font-size: 16px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
          }

          &:active {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

// 合作伙伴
.cooperation-section {
  // background: url('@assets/index-cooperation-bg.png') no-repeat center center;
  background-size: cover;
  padding: 80px 0;
  position: relative;
  &::before{
    position: absolute;
    content: '';
    width: 1346px;
    height: 335px;
    right: 150px;
    top: 0;
    background: url('@assets/index-cooperation-bg.png') no-repeat center center;;
    background-size: contain;
  }

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

    .section-title {
      font-size: 42px;
      font-weight: bold;
      color: #333;
      margin: 0 0 20px 0;
    }

    .section-subtitle {
      font-size: 16px;
      color: #999;
      margin: 0 0 185px 0;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
  }

  .partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    // max-width: 1000px;
    margin: 0 auto;

    .partner-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 214px;
      height: 84px;
      background: rgba(255, 255, 255, 0.9);
      border: 2px solid #E5E5E5;
      border-radius: 8px;
      transition: all 0.3s ease;
      text-decoration: none;
      backdrop-filter: blur(5px);
      overflow: hidden;

      &:hover {
        background: rgba(255, 255, 255, 1);
        border-color: #0066cc;
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
      }

      img {
        max-width: 100%;
        max-height: 84px;
        object-fit: contain;
        // filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      &:hover img {
        filter: grayscale(0%);
      }
    }
  }
}




// 切换动画
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}


// 响应式设计
@media (max-width: 768px) {
  .cooperation-section{
    &::before{
      width: 0;
    }
    .section-header{
      .section-subtitle{
        margin-bottom: 10px;
      }
    }
  }
  .info-row{
    .info-item{
      padding: 0 10px;
    }
    .text{
      font-size: 14px;
    }
    .number{
      font-size: 14px;
    }
  }
  .products-section {
    padding: 40px 0;

    .section-header {
      margin-bottom: 40px;

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

    .products-content {
      flex-direction: column;
      gap: 0;
    }

    .products-nav {
      flex: none;
      display: flex;
      overflow-x: auto;
      gap: 10px;
      padding-bottom: 10px;
      flex-wrap: wrap;

      .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 15px 20px;
        font-size: 16px;
        height: auto;
        line-height: 1;
      }
    }

    .product-detail {
      flex-direction: column;
      padding: 30px 20px;

      .detail-image {
        flex: none;
        width: 100%;

        img {
          height: 200px;
        }
      }
    }
  }

  .cases-section {
    padding: 40px 0;

    .section-header {
      margin-bottom: 40px;

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

    .cases-carousel {
      gap: 15px;
    }

    .nav-arrow {
      width: 50px;
      height: 50px;

      .arrow-icon {
        width: 20px;
        height: 20px;
      }
    }

    .case-item {
      flex: 0 0 100%;
      padding: 0 10px;

      .case-image {
        height: 180px;
        margin-bottom: 15px;
      }

      .case-content {
        padding: 20px;

        .case-title {
          font-size: 18px;
          margin-bottom: 12px;
        }

        .case-description {
          font-size: 13px;
        }
      }
    }
  }

  .about-section {
    padding: 40px 0;

    .section-header {
      margin-bottom: 40px;

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

    .about-tabs {
      flex-direction: column;
      gap: 2px;
      margin-bottom: 30px;

      .tab-item {
        flex: none;
        border-radius: 8px !important;
        border: 2px solid #E5E5E5 !important;
        margin-bottom: 2px;
        font-size: 16px;
        height: 50px;
        line-height: 50px;
      }
    }

    .about-detail {
      padding: 25px 20px;
      margin: 0 15px;
    }

    .detail-content {
      flex-direction: column;
      gap: 25px;

      .content-left {
        flex: none;
        width: 100%;

        img {
          height: 200px;
        }
      }

      .content-right {
        .content-title {
          font-size: 24px;
          margin-bottom: 20px;
        }

        .content-description {
          font-size: 15px;
          margin-bottom: 25px;
        }

        .content-action {
          text-align: center;

          .learn-more-btn {
            padding: 10px 25px;
            font-size: 15px;
          }
        }
      }
    }
  }

  .cooperation-section {
    padding: 40px 0;

    .section-header {
      margin-bottom: 40px;

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

    .partners-grid {
      gap: 20px;
      margin: 0 20px;

      .partner-item {
        width: calc(50% - 10px);
        height: 80px;
        padding: 15px;

        img {
          max-height: 50px;
        }
      }
    }
  }
}
</style>