website_www/src/pages/home/Index.vue

<template>
  <DefaultLayout>
    <!-- banner -->
    <section class="banner-section">
      <div class="banner-image animate-fade-in">
        <img src="@assets/banner.png" alt="" srcset="">
      </div>
      <div class="info-row">
        <div class="info-item animate-scale-in" :class="{ 'animate-visible': isInfoVisible }"
          style="animation-delay: 0.2s">
          <span class="text">覆盖</span>
          <span class="number" ref="number1">{{ animatedNumbers.number1 }}+</span>
          <span class="text">垂直行业</span>
        </div>
        <div class="info-item animate-scale-in" :class="{ 'animate-visible': isInfoVisible }"
          style="animation-delay: 0.4s">
          <span class="number" ref="number2">{{ animatedNumbers.number2 }}</span>
          <span class="text">小时原型交付</span>
        </div>
        <div class="info-item animate-scale-in" :class="{ 'animate-visible': isInfoVisible }"
          style="animation-delay: 0.6s">
          <span class="text">定制成本降低</span>
          <span class="number" ref="number3">{{ animatedNumbers.number3 }}%</span>
        </div>
      </div>
    </section>

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

        <div class="products-content animate-fade-up" :class="{ 'animate-visible': isProductsVisible }"
          style="animation-delay: 0.3s">
          <div class="products-nav">
            <div v-for="(product, index) in productList" :key="product.id" class="nav-item animate-slide-right"
              :class="{ active: activeProductId === product.id, 'animate-visible': isProductsVisible }"
              :style="{ 'animation-delay': `${0.1 * index}s` }" @click="setActiveProduct(product.id)">
              {{ product.classifyName }}
            </div>
          </div>

          <div class="product-detail animate-fade-left" v-if="activeProduct"
            :class="{ 'animate-visible': isProductsVisible }" style="animation-delay: 0.5s">
            <div class="detail-content">
              <h3 class="product-title">{{ activeProduct.classifyName }}</h3>
              <p class="product-description">{{ activeProduct.description || activeProduct.classifyDesc || '为您提供专业的解决方案'
                }}</p>
            </div>
            <div class="detail-image">
              <img :src="imgHost + activeProduct.projectImage" :alt="activeProduct.classifyName" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 行业案例 -->
    <section class="cases-section" ref="casesSection">
      <div class="container">
        <div class="section-header animate-fade-up" :class="{ 'animate-visible': isCasesVisible }">
          <h2 class="section-title">行业案例</h2>
          <p class="section-subtitle">SMART SOLUTION</p>
          <p class="section-description">智慧管理系统采用先进开发技术，为智慧产业提供一站式解决方案</p>
        </div>

        <div class="cases-carousel animate-fade-up" :class="{ 'animate-visible': isCasesVisible }"
          style="animation-delay: 0.3s">
          <div class="nav-arrow nav-arrow-left animate-bounce-in"
            :class="{ disabled: currentCaseIndex === 0, 'animate-visible': isCasesVisible }" @click="prevCase"
            style="animation-delay: 0.5s">
            <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" @click="goToCaseDetail(caseItem)" class="case-item">
                <div class="case-image">
                  <img :src="imgHost + caseItem.projectImage" :alt="caseItem.title" />
                </div>
                <div class="case-content">
                  <h3 class="case-title">{{ caseItem.projectName }}</h3>
                  <p class="case-description">{{ caseItem.projectProfile }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="nav-arrow nav-arrow-right animate-bounce-in"
            :class="{ disabled: currentCaseIndex >= maxCaseIndex, 'animate-visible': isCasesVisible }" @click="nextCase"
            style="animation-delay: 0.7s">
            <div class="arrow-icon">
              <img src="@assets/arrow-right.png" alt="Next" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 企业简介 -->
    <section class="about-section" ref="aboutSection">
      <div class="container">
        <div class="section-header animate-fade-up" :class="{ 'animate-visible': isAboutVisible }">
          <h2 class="section-title">企业简介</h2>
          <p class="section-subtitle">ENTERPRISE QUALIFICATION</p>
        </div>

        <div class="about-content">
          <div class="about-tabs animate-fade-up" :class="{ 'animate-visible': isAboutVisible }"
            style="animation-delay: 0.2s">
            <div v-for="(tab, index) in aboutTabs" :key="tab.id" class="tab-item animate-slide-up"
              :class="{ active: activeAboutTab === tab.id, 'animate-visible': isAboutVisible }"
              :style="{ 'animation-delay': `${0.1 * index}s` }" @click="setActiveAboutTab(tab.id)">
              {{ tab.title }}
            </div>
          </div>

          <div class="about-detail animate-fade-up" :class="{ 'animate-visible': isAboutVisible }"
            style="animation-delay: 0.4s">
            <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" @click="router.push({ name: 'About' })">查看更多 →</button>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </section>
    <!-- 合作伙伴 -->
    <section class="cooperation-section" ref="cooperationSection">
      <div class="container">
        <div class="section-header animate-fade-up" :class="{ 'animate-visible': isCooperationVisible }">
          <h2 class="section-title">合作伙伴</h2>
          <p class="section-subtitle">BUSINESS PARTNER</p>
        </div>

        <div class="partners-grid animate-fade-up" :class="{ 'animate-visible': isCooperationVisible }"
          style="animation-delay: 0.3s">
          <a v-for="(partner, index) in partnersList" :key="partner.id" :href="partner.partnersUrl" target="_blank"
            class="partner-item animate-scale-in" :class="{ 'animate-visible': isCooperationVisible }"
            :style="{ 'animation-delay': `${0.1 * (index % 6)}s` }">
            <img :src="imgHost + partner.partnersLogo" :alt="partner.partnersName" />
          </a>
        </div>
      </div>
    </section>

  </DefaultLayout>
</template>

<script>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import { getCompanyInfo, getProjectClassifyList, getProjectList, getCompanyCertList, getPartners } from '@/api/modules/home'
import { animateNumber, createNumberAnimationObserver } from '@/utils/numberAnimation'
// 导入图片资源
import indexAboutBg from '@/assets/index-about-img.png'

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

    // 环境变量
    const imgHost = import.meta.env.VITE_APP_IMG_HOST

    // 动画状态管理
    const isInfoVisible = ref(false)
    const isProductsVisible = ref(false)
    const isCasesVisible = ref(false)
    const isAboutVisible = ref(false)
    const isCooperationVisible = ref(false)

    // 元素引用
    const productsSection = ref(null)
    const casesSection = ref(null)
    const aboutSection = ref(null)
    const cooperationSection = ref(null)

    // 数字滚动动画相关
    const animatedNumbers = ref({
      number1: 0,
      number2: 0,
      number3: 0
    })

    const targetNumbers = {
      number1: 10,
      number2: 72,
      number3: 30
    }

    // 启动所有数字动画
    const startNumberAnimations = () => {
      // 延迟启动，让页面加载完成后再开始动画
      setTimeout(() => {
        animateNumber(
          (value) => animatedNumbers.value.number1 = value,
          targetNumbers.number1,
          2000
        )
      }, 200)

      setTimeout(() => {
        animateNumber(
          (value) => animatedNumbers.value.number2 = value,
          targetNumbers.number2,
          2500
        )
      }, 500)

      setTimeout(() => {
        animateNumber(
          (value) => animatedNumbers.value.number3 = value,
          targetNumbers.number3,
          2200
        )
      }, 800)
    }

    // 设置数字动画观察器
    const setupIntersectionObserver = () => {
      createNumberAnimationObserver('.info-row', startNumberAnimations, {
        threshold: 0.5,
        rootMargin: '0px 0px -50px 0px'
      })
    }

    // 设置滚动动画观察器
    const setupScrollAnimations = () => {
      const observerOptions = {
        threshold: 0.2,
        rootMargin: '0px 0px -50px 0px'
      }

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const target = entry.target
            if (target.classList.contains('banner-section')) {
              isInfoVisible.value = true
            } else if (target.classList.contains('products-section')) {
              isProductsVisible.value = true
            } else if (target.classList.contains('cases-section')) {
              isCasesVisible.value = true
            } else if (target.classList.contains('about-section')) {
              isAboutVisible.value = true
            } else if (target.classList.contains('cooperation-section')) {
              isCooperationVisible.value = true
            }
          }
        })
      }, observerOptions)

      // 观察各个区域
      nextTick(() => {
        const bannerSection = document.querySelector('.banner-section')
        if (bannerSection) observer.observe(bannerSection)
        if (productsSection.value) observer.observe(productsSection.value)
        if (casesSection.value) observer.observe(casesSection.value)
        if (aboutSection.value) observer.observe(aboutSection.value)
        if (cooperationSection.value) observer.observe(cooperationSection.value)
      })
    }

    // 产品分类列表
    let productList = ref([])
    // 当前选中分类的产品列表
    let currentProductList = ref([])

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

    const setActiveProduct = async (id) => {
      activeProductId.value = id
      // 获取选中分类的产品列表
      const selectedCategory = productList.value.find(product => product.id === id)
      if (selectedCategory && selectedCategory.id) {
        await getProductsByClassify(selectedCategory.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: '荣誉资质' }
    ])

    let aboutContents = ref({
      about: {
        title: '关于达泽',
        description: '<p>加载中...</p>',
        image: indexAboutBg
      },
      history: {
        title: '发展历程',
        description: '<p>加载中...</p>',
        image: indexAboutBg
      },
      qualification: {
        title: '荣誉资质',
        description: '<p>加载中...</p>',
        image: indexAboutBg
      }
    })

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

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

    // 合作伙伴数据
    let partnersList = ref([])

    let casesList = ref([
      {
        id: 1,
        projectName: '智慧农业（种植+养殖）',
        projectProfile: '通过物联网技术实现农业自动化管理，利用传感器监控土壤、水质等环境参数，提高农业生产效率。',
        projectImage: '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 result = await getCompanyInfo()
        const data = result.data
        // console.log('首页数据:', data)

        if (data) {
          // 更新关于达泽的描述
          if (data.companyDescribe) {
            aboutContents.value.about.description = data.companyDescribe
          }

          // 更新发展历程的描述
          if (data.courseList && Array.isArray(data.courseList)) {
            const historyHtml = data.courseList.map(item => {
              const time = item.createTime ? new Date(item.createTime).getFullYear() : '未知时间'
              const description = item.courseDescribe || '暂无描述'
              return `<p><strong>${time}年</strong> - ${description}</p>`
            }).join('')
            aboutContents.value.history.description = historyHtml || '<p>暂无发展历程数据</p>'
          }
        }
      } catch (error) {
        console.error('加载首页数据失败:', error)
      }
    }

    // 获取产品分类列表
    const handleGetProjectClassifyList1 = async () => {
      try {
        const data = await getProjectClassifyList({ classifyType: 1 })
        // console.log('产品中心分类列表:', data)

        if (data && data.rows && data.rows.length > 0) {
          productList.value = data.rows
          // 默认选中第一个分类
          activeProductId.value = data.rows[0].id
          // 获取第一个分类的产品列表
          await getProductsByClassify(data.rows[0].id)
        }
      } catch (error) {
        console.error('加载产品中心分类列表失败:', error)
      }
    }

    // 根据分类ID获取产品列表
    const getProductsByClassify = async (classifyId) => {
      try {
        const data = await getProjectList({
          classifyId: classifyId,
          projectType: 1 // 1：产品中心 2：行业案例
        })
        // console.log('产品列表:', data)

        if (data && data.rows) {
          currentProductList.value = data.rows
          // 更新当前选中分类的描述信息
          const currentCategory = productList.value.find(item => item.id === activeProductId.value)
          if (currentCategory && data.rows.length > 0) {
            // 可以根据API返回的数据更新分类的描述信息
            currentCategory.description = data.rows[0].projectProfile || currentCategory.classifyDesc || '为您提供专业的解决方案';
            currentCategory.projectImage = data.rows[0].projectImage
            // console.log('currentCategory', currentCategory)
          }
        }
      } catch (error) {
        console.error('加载产品列表失败:', error)
      }
    }


    // 产品/案例信息-案例信息
    const handleGetProjectList = async () => {
      try {
        const data = await getProjectList({ projectType: 2 })
        // 这里可以更新products和advantages数据
        // console.log('案例信息:', data)
        casesList.value = data.rows;
        // console.log('案例信息列表:', casesList.value)
      } 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
      }
    }

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

    // 获取企业资质证书
    const loadCompanyCertList = async () => {
      try {
        const data = await getCompanyCertList()
        // console.log('企业资质数据:', data)

        if (data && data.rows && Array.isArray(data.rows)) {
          const certHtml = data.rows.map(item => {
            const certName = item.certName || '未知证书'
            return `<p><strong>${certName}</strong></p>`
          }).join('')
          aboutContents.value.qualification.description = certHtml || '<p>暂无资质证书数据</p>'
        }
      } catch (error) {
        console.error('加载企业资质失败:', error)
      }
    }

    // 获取合作伙伴列表
    const loadPartnersList = async () => {
      try {
        const data = await getPartners()
        // console.log('合作伙伴数据:', data)

        if (data && data.rows && Array.isArray(data.rows)) {
          partnersList.value = data.rows
        }
      } catch (error) {
        console.error('加载合作伙伴失败:', error)
      }
    }

    // 优化API请求顺序
    const loadCriticalData = async () => {
      // 关键数据：首屏可见内容
      try {
        await Promise.all([
          loadHomeData(), // 首页基础数据和企业简介
          handleGetProjectClassifyList1() // 产品分类列表（首屏可见）
        ])
      } catch (error) {
        console.error('加载关键数据失败:', error)
      }
    }

    const loadSecondaryData = async () => {
      // 次要数据：首屏下方内容，可以延迟加载
      try {
        await Promise.all([
          handleGetProjectList(), // 案例列表
          loadCompanyCertList(), // 企业资质证书
          loadPartnersList() // 合作伙伴列表
        ])
      } catch (error) {
        console.error('加载次要数据失败:', error)
      }
    }

    onMounted(async () => {
      // 先加载关键数据
      await loadCriticalData()

      // 延迟加载次要数据，避免阻塞首屏渲染
      setTimeout(() => {
        loadSecondaryData()
      }, 100)

      updateVisibleCases()
      window.addEventListener('resize', updateVisibleCases)

      // 设置数字滚动动画的观察器
      nextTick(() => {
        setupIntersectionObserver()
        setupScrollAnimations()
      })

      // 延迟显示banner信息区域
      setTimeout(() => {
        isInfoVisible.value = true
      }, 800)
    })

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

    return {
      router,
      productList,
      currentProductList,
      activeProductId,
      activeProduct,
      setActiveProduct,
      casesList,
      currentCaseIndex,
      visibleCases,
      maxCaseIndex,
      nextCase,
      prevCase,
      aboutTabs,
      activeAboutTab,
      activeAboutContent,
      setActiveAboutTab,
      partnersList,
      goToCaseDetail,
      imgHost,
      animatedNumbers,
      // 动画状态
      isInfoVisible,
      isProductsVisible,
      isCasesVisible,
      isAboutVisible,
      isCooperationVisible,
      // 元素引用
      productsSection,
      casesSection,
      aboutSection,
      cooperationSection
    }
  }
}
</script>

<style lang="scss" scoped>
// 动画定义
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 动画类
.animate-fade-in {
  animation: fadeIn 1s ease-out;
}

.animate-slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  &.animate-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-right {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  &.animate-visible {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-left {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  &.animate-visible {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-scale-in {
  opacity: 1;
  transform: scale(0.95);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  &.animate-visible {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-bounce-in {
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  &.animate-visible {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  &.animate-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-left {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  &.animate-visible {
    opacity: 1;
    transform: translateX(0);
  }
}

// banner区域
.banner-section {
  position: relative;

  .banner-image {
    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;
    font-family: 'Arial', monospace;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);

    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #0066cc, #00aaff);
      transform: translateX(-50%);
      transition: width 0.6s ease;
    }
  }

  .info-item:hover .number::after {
    width: 100%;
  }

  .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 21.6%;

    .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.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-sizing: border-box;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.6s ease;
      }

      &:hover {
        background: rgba(0, 102, 204, 0.1);
        color: #0066cc;
        transform: translateX(5px);

        &::before {
          left: 100%;
        }
      }

      &.active {
        background: linear-gradient(to right, #CAE0FF, #E5F0FF);
        color: #0054FF;
        transform: translateX(8px);
        box-shadow: 0 4px 15px rgba(0, 102, 204, 0.2);
      }
    }
  }

  .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.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, rgba(0, 102, 204, 0.1), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &:hover {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 8px 20px rgba(0, 102, 204, 0.15);
      transform: scale(1.05);

      &::before {
        opacity: 1;
      }
    }

    &:active {
      transform: scale(0.95);
    }

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

    .arrow-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
      }
    }

    &:hover .arrow-icon {
      transform: translateX(2px);
    }

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

      &:hover .arrow-icon {
        transform: rotate(180deg) translateX(2px);
      }
    }
  }

  .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;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      transform: translateY(-8px);
    }

    .case-image {
      width: 100%;
      height: 200px;
      border-radius: 12px 12px 0 0;
      overflow: hidden;
      background: #fff;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(0, 102, 204, 0.1), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }

    &:hover .case-image {
      &::after {
        opacity: 1;
      }

      img {
        transform: scale(1.08);
      }
    }

    .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;
      transition: box-shadow 0.3s ease;

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

      .case-description {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin: 0;
        min-height: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    &:hover .case-content {
      box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);

      .case-title {
        color: #0066cc;
      }
    }
  }
}

// 企业简介
.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 800px;
      max-width: 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;
        }

        :deep(img) {
          max-width: 100%;
          height: auto;
          border-radius: 8px;
          margin: 10px 0;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }

      .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.4s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
          position: relative;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 84, 255, 0.1), transparent);
            transition: left 0.6s ease;
          }

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
            background: rgba(0, 84, 255, 0.05);

            &::before {
              left: 100%;
            }
          }

          &:active {
            transform: translateY(-1px);
          }
        }
      }
    }
  }
}

// 合作伙伴
.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.4s cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none;
      backdrop-filter: blur(5px);
      overflow: hidden;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.1), transparent);
        transition: left 0.6s ease;
      }

      &:hover {
        background: rgba(255, 255, 255, 1);
        border-color: #0066cc;
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 30px rgba(0, 102, 204, 0.2);

        &::before {
          left: 100%;
        }
      }

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

      &:hover img {
        filter: grayscale(0%) brightness(1.1);
        transform: scale(1.05);
      }
    }
  }
}




// 切换动画
.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>