ct/app/components/index/index.vue

<script lang="ts" setup>
import {ref, onMounted, onUnmounted} from 'vue'
import {
  carouselData,
  iotSolutionsData,
  multiScenarioData,
  softwareDevelopmentData,
  smartHardwareData,

  pageConfig
} from '~/data/indexData'

// 响应式状态
const uiState = ref({
  currentSlide: 0,
  autoPlayInterval: null as NodeJS.Timeout | null
})

// 轮播图控制
const goToSlide = (index: number) => {
  uiState.value.currentSlide = index
}

const nextSlide = () => {
  const nextIndex = (uiState.value.currentSlide + 1) % carouselData.length
  goToSlide(nextIndex)
}

const startAutoPlay = () => {
  uiState.value.autoPlayInterval = setInterval(nextSlide, pageConfig.carousel.autoPlayInterval)
}

const stopAutoPlay = () => {
  if (uiState.value.autoPlayInterval) {
    clearInterval(uiState.value.autoPlayInterval)
    uiState.value.autoPlayInterval = null
  }
}

// 动态加载资源
const loadResources = () => {
  // 加载CSS
  pageConfig.cssFiles.forEach(href => {
    if (!document.querySelector(`link[href="${href}"]`)) {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = href
      link.type = 'text/css'
      document.head.appendChild(link)
    }
  })

  // 加载JS
  pageConfig.jsFiles.forEach(src => {
    if (!document.querySelector(`script[src="${src}"]`)) {
      const script = document.createElement('script')
      script.src = src
      script.type = 'text/javascript'
      document.head.appendChild(script)
    }
  })

  // 添加favicon
  if (!document.querySelector('link[rel="shortcut icon"]')) {
    const link = document.createElement('link')
    link.rel = 'shortcut icon'
    link.href = pageConfig.favicon
    document.head.appendChild(link)
  }

  // 加载百度统计
  const protocol = window.location.protocol === 'https:' ? 'https://' : 'http://'
  const script = document.createElement('script')
  script.src = `${protocol}hm.baidu.com/h.js?${pageConfig.baiduAnalytics}`
  script.type = 'text/javascript'
  document.head.appendChild(script)
}

// 处理锚点链接
const handleAnchorLinks = () => {
  if (window.location.hash) {
    history.replaceState('', document.title, window.location.pathname + window.location.search)
  }
}

// 解决方案标签页切换
const handleSolutionTabHover = (index: number) => {
  const tabs = document.querySelectorAll('.solution .items-body li')
  const contents = document.querySelectorAll('.items-body-right .solution-rightTabs')

  tabs.forEach(tab => tab.classList.remove('active'))
  if (tabs[index]) {
    tabs[index].classList.add('active')
  }

  contents.forEach((content, i) => {
    (content as HTMLElement).style.display = i === index ? 'block' : 'none'
  })

  const content3 = document.querySelector('.content3')
  if (content3) {
    content3.className = `content3 content3${index}`
  }
}

// 下拉菜单图片切换
const handleDropdownImageHover = (index: number) => {
  const dropdownMenu = document.querySelector('.dropdown-menu')
  if (dropdownMenu) {
    const images = dropdownMenu.querySelectorAll('.pull-left img')
    images.forEach((img, i) => {
      (img as HTMLElement).style.display = i === index ? 'block' : 'none'
    })
  }
}

onMounted(() => {
  loadResources()
  handleAnchorLinks()
  startAutoPlay()

  // 绑定事件
  const solutionTabs = document.querySelectorAll('.solution .items-body li')
  solutionTabs.forEach((tab, index) => {
    tab.addEventListener('mouseenter', () => handleSolutionTabHover(index))
  })

  const dropdownItems = document.querySelectorAll('.dropdown-menu ul li')
  dropdownItems.forEach((item, index) => {
    item.addEventListener('mouseenter', () => handleDropdownImageHover(index))
  })
})

onUnmounted(() => {
  stopAutoPlay()
})
</script>

<template>
  <view>
    <!-- 轮播图 -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators" style="background-color: rgba(0,0,0,0.08);">
        <li
            v-for="(item, index) in carouselData"
            :key="index"
            :class="{ active: index === uiState.currentSlide }"
            :data-slide-to="index"
            data-target="#carousel-example-generic"
        />
      </ol>

      <div class="carousel-inner" role="listbox">
        <div
            v-for="(item, index) in carouselData"
            :key="index"
            :class="['item', { active: index === uiState.currentSlide }]"
        >
          <img :alt="item.alt" :src="item.image" style="width: 100%;">
        </div>
      </div>
    </div>

    <!-- 物联网解决方案 -->
    <div class="container-fluid text-center mainitems">
      <div class="headtit">物联网解决方案</div>
      <div class="minstit">针对不同类型使用场景需求，量身定制解决方案</div>
      <div class="row inteBody">
        <div
            v-for="solution in iotSolutionsData"
            :key="solution.id"
            :class="{ 'col-lg-offset-1': solution.id === 1 }"
            class="col-xs-12 col-lg-2"
        >
          <div class="intebody-info">
            <a href="#">
              <img :alt="solution.title" :src="solution.image">
            </a>
            <h2>{{ solution.title }}</h2>
            <p>{{ solution.description }}</p>
          </div>

          <div class="intebody-hover">
            <h2>{{ solution.title }}</h2>
            <p>{{ solution.fullDescription }}</p>
            <a :href="solution.link">查看详情</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 多场景应用 -->
    <div class="container-fluid text-center mainitems" style="background: #FAFAFA;">
      <div class="headtit">多场景应用</div>
      <div class="minstit">通过专业的智能硬件与软件系统开发，解决物联网平台在各类复杂场景下的应用问题</div>
      <div class="row bodycnt">
        <div
            v-for="scenario in multiScenarioData"
            :key="scenario.id"
            :class="{ 'col-lg-offset-2': scenario.id === 1 }"
            class="col-xs-12 col-lg-2"
        >
          <div :class="['bodycnt-info', scenario.class]">
            <img :alt="scenario.title" :src="scenario.image">
            <span>{{ scenario.title }}</span>
          </div>

          <div class="bodycnt-datails">
            <h2>{{ scenario.title }}</h2>
            <span/>
            <p v-html="scenario.description"/>
          </div>
        </div>
      </div>
      <div class="m-btns">
        <a href="/IoTSolutions/Internet_Things_hardware">了解更多</a>
      </div>
    </div>

    <!-- 软件应用开发 -->
    <div class="container text-center mainitems">
      <div class="headtit">软件应用开发</div>
      <div class="row applicatBody">
        <div
            v-for="software in softwareDevelopmentData"
            :key="software.id"
            class="col-xs-12 col-lg-3"
        >
          <div class="appbody-info">
            <img :alt="software.title" :src="software.image">
            <h2>{{ software.title }}</h2>
            <p>{{ software.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 联网智能硬件 -->
    <div class="container-fluid text-center mainitems hardware">
      <div class="headtit" style="color: #fff;">联网智能硬件</div>
      <div class="row">
        <div class="col-xs-12 col-lg-8 col-lg-offset-2">
          <div
              v-for="hardware in smartHardwareData"
              :key="hardware.id"
              :style="{ 'margin-top': hardware.id === 2 ? '30px' : '0' }"
              class="hardware-conter"
          >
            <img
                v-if="hardware.position === 'left'"
                :alt="hardware.title"
                :src="hardware.image"
                class="img-responsive"
            >
            <div class="col-xs-12 col-lg-8">
              <span>{{ hardware.title }}</span>
              <i/>
              <p>{{ hardware.description }}</p>
            </div>
            <img
                v-if="hardware.position === 'right'"
                :alt="hardware.title"
                :src="hardware.image"
                class="img-responsive"
                style="float: right;"
            >
          </div>
        </div>
      </div>
      <div class="m-btns" style="background: none">
        <a href="/IoTSolutions/Internet_Things_hardware">了解更多</a>
      </div>
    </div>
  </view>
</template>

<style scoped>
/* 组件样式 */
</style>