首页代码优化-结构-内容

app/components/index/index.vue

@@ -1,218 +1,33 @@
 <script lang="ts" setup>
 import {ref, onMounted, onUnmounted} from 'vue'
+import {
+  carouselData,
+  iotSolutionsData,
+  multiScenarioData,
+  softwareDevelopmentData,
+  smartHardwareData,
 
-/**
- * 页面数据管理
- * 存储页面中使用的各种数据和状态
- */
-const pageData = ref({
-  // 轮播图数据
-  carouselItems: [
-    {
-      image: '/img/yuxiupdata/banner_2021_1.png',
-      alt: '成本降低，效率更高',
-      active: false
-    },
-    {
-      image: '/img/yuxiupdata/banner_2021_2.png',
-      alt: '成本降低，效率更高',
-      active: false
-    },
-    {
-      image: '/img/yuxiupdata/index23.png',
-      alt: '共享单车最佳拍档',
-      active: true
-    }
-  ],
+  pageConfig
+} from '~/data/indexData'
 
-  // 物联网解决方案数据
-  iotSolutions: [
-    {
-      id: 1,
-      title: '共享陪护床',
-      description: '解决医院陪护家属未配有床位，休息不便的问题…',
-      fullDescription: '解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同事，给患者家属更舒适的修养环境。',
-      image: '/img/yuxiupdata/banner3-1.png',
-      link: '/sharedbed'
-    },
-    {
-      id: 2,
-      title: '共享单车',
-      description: '解决大型园区或短距离出行麻烦，提高出行效率…',
-      fullDescription: '解决大型园区或短距离出行麻烦，提高出行效率，分时租赁单车，无桩共享，是一种新型的经济环保出行方式。',
-      image: '/img/yuxiupdata/banner3-2.png',
-      link: '/sharedSolutions/bike',
-      external: false
-    },
-    {
-      id: 3,
-      title: '共享电单车',
-      description: '解决人们最后三公里的出行，促进环保和健康出行...',
-      fullDescription: '解决人们最后三公里的出行，促进环保和健康出行，电动助力，省力高效。',
-      image: '/img/yuxiupdata/banner3-3.png',
-      link: '/sharedSolutions/eBike'
-    },
-    {
-      id: 4,
-      title: '共享电动车',
-      description: '电动车相比续航能力更强，适用于各种出行场…',
-      fullDescription: '电动车相比续航能力更强，适用于各种出行场景，一站式提供硬件设备与软件开发',
-      image: '/img/yuxiupdata/banner3-4.png',
-      link: '/sharedSolutions/eBike'
-    },
-    {
-      id: 5,
-      title: '共享滑板车',
-      description: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符求…',
-      fullDescription: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合用户的短距离出行需求。',
-      image: '/img/yuxiupdata/banner3-5.png',
-      link: '/sharedSolutions/scooter'
-    }
-  ],
-
-  // 多场景应用数据
-  multiScenarioApplications: [
-    {
-      id: 1,
-      title: '智能家居',
-      description: '智能门锁<br> 智能空调<br> 智能电饭煲<br> 智能窗帘<br> …',
-      image: '/img/yuxiupdata/banner2-1.png',
-      class: 'bodycnt-info1'
-    },
-    {
-      id: 2,
-      title: '智慧出行',
-      description: '共享单车<br> 共享汽车<br> 共享滑板车<br> 共享电动车<br> …',
-      image: '/img/yuxiupdata/banner2-2.png',
-      class: 'bodycnt-info2'
-    },
-    {
-      id: 3,
-      title: '智慧医疗',
-      description: '共享陪护床<br> 智能安防<br> 共享打印机<br> 共享充电宝<br> …',
-      image: '/img/yuxiupdata/banner2-3.png',
-      class: 'bodycnt-info3'
-    },
-    {
-      id: 4,
-      title: '智慧园区',
-      description: '智能自提柜<br> 共享健身房<br> 共享洗衣机<br> 智能门禁<br> …',
-      image: '/img/yuxiupdata/banner2-4.png',
-      class: 'bodycnt-info4'
-    }
-  ],
-
-  // 软件应用开发数据
-  softwareDevelopment: [
-    {
-      id: 1,
-      title: 'iOS开发',
-      description: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。',
-      image: '/img/yuxiupdata/banner4-1.png'
-    },
-    {
-      id: 2,
-      title: 'Android开发',
-      description: '针对主流的android系统，提供一站式APP咨询、策划、开发服务。',
-      image: '/img/yuxiupdata/banner4-2.png'
-    },
-    {
-      id: 3,
-      title: '微信开发',
-      description: '针对企业需求提供专业微信公众平台开发服务。...',
-      image: '/img/yuxiupdata/banner4-3.png'
-    },
-    {
-      id: 4,
-      title: '小程序开发',
-      description: '无需安装APP，就可以带来更流畅快速的体验。',
-      image: '/img/yuxiupdata/banner4-4.png'
-    }
-  ],
-
-  // 联网智能硬件数据
-  smartHardware: [
-    {
-      id: 1,
-      title: '锁',
-      description: 'N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏（延伸），远程授权自动开锁，支持应急开锁（延伸），支持短信远程修改相关参数。',
-      image: '/img/yuxiupdata/locker.png',
-      position: 'left'
-    },
-    {
-      id: 2,
-      title: '联网控制器',
-      description: '通过改造传统传感器/PLC/变频器等实现快速联接（无需部署新设备）。通过灵活部署，快速形成各领域的物联网解决方案；有效降低用户改造、部署、维护成本。',
-      image: '/img/yuxiupdata/koz.png',
-      position: 'right'
-    }
-  ],
-
-  // 联系我们数据
-  contactInfo: {
-    phone: '0755-85225123',
-    business: '18123752516',
-    email: 'yuxi@yuxiit.com',
-    address: '深圳市龙华新区1970文化创意产业园A栋206',
-    wechat: '/img/img/qywx.png'
-  }
-})
-
-/**
- * 响应式状态管理
- * 用于控制页面交互状态
- */
+// 响应式状态
 const uiState = ref({
-  // 导航菜单状态
-  mobileMenuOpen: false,
-
-  // 轮播图状态
-  currentSlide: 2,
-  autoPlayInterval: null as NodeJS.Timeout | null,
-
-  // 悬停状态
-  hoveredItem: null as number | null,
-
-  // 模态框状态
-  showModal: false
+  currentSlide: 0,
+  autoPlayInterval: null as NodeJS.Timeout | null
 })
 
-/**
- * 导航菜单控制
- * 功能：切换移动端导航菜单的显示/隐藏状态
- */
-const toggleMobileMenu = () => {
-  uiState.value.mobileMenuOpen = !uiState.value.mobileMenuOpen
-}
-
-/**
- * 轮播图控制
- * 功能：管理轮播图的切换和自动播放
- */
+// 轮播图控制
 const goToSlide = (index: number) => {
   uiState.value.currentSlide = index
-  // 更新轮播图数据中的active状态
-  pageData.value.carouselItems.forEach((item, i) => {
-    item.active = i === index
-  })
 }
 
 const nextSlide = () => {
-  const nextIndex = (uiState.value.currentSlide + 1) % pageData.value.carouselItems.length
+  const nextIndex = (uiState.value.currentSlide + 1) % carouselData.length
   goToSlide(nextIndex)
 }
 
-const previousSlide = () => {
-  const prevIndex = uiState.value.currentSlide === 0
-      ? pageData.value.carouselItems.length - 1
-      : uiState.value.currentSlide - 1
-  goToSlide(prevIndex)
-}
-
 const startAutoPlay = () => {
-  uiState.value.autoPlayInterval = setInterval(() => {
-    nextSlide()
-  }, 5000) // 5秒自动切换
+  uiState.value.autoPlayInterval = setInterval(nextSlide, pageConfig.carousel.autoPlayInterval)
 }
 
 const stopAutoPlay = () => {
@@ -222,78 +37,11 @@ const stopAutoPlay = () => {
   }
 }
 
-/**
- * 悬停效果控制
- * 功能：管理卡片悬停时的状态变化
- */
-const handleMouseEnter = (itemId: number) => {
-  uiState.value.hoveredItem = itemId
-}
-
-const handleMouseLeave = () => {
-  uiState.value.hoveredItem = null
-}
-
-/**
- * 复制手机号功能
- * 功能：复制手机号到剪贴板并显示成功提示
- */
-const copyPhoneNumber = async () => {
-  try {
-    await navigator.clipboard.writeText(pageData.value.contactInfo.business)
-    uiState.value.showModal = true
-
-    // 3秒后自动关闭模态框
-    setTimeout(() => {
-      uiState.value.showModal = false
-    }, 3000)
-  } catch (error) {
-    console.error('复制失败:', error)
-    // 降级方案：使用传统复制方法
-    const textArea = document.createElement('textarea')
-    textArea.value = pageData.value.contactInfo.business
-    document.body.appendChild(textArea)
-    textArea.select()
-    document.execCommand('copy')
-    document.body.removeChild(textArea)
-    uiState.value.showModal = true
-  }
-}
-
-/**
- * 关闭模态框
- * 功能：关闭复制成功的提示模态框
- */
-const closeModal = () => {
-  uiState.value.showModal = false
-}
-
-/**
- * 处理锚点链接
- * 功能：清除URL中的锚点，避免页面跳转问题
- */
-const handleAnchorLinks = () => {
-  if (window.location.hash) {
-    history.replaceState('', document.title, window.location.pathname + window.location.search)
-  }
-}
-
-/**
- * 加载CSS样式文件
- * 功能：动态加载所需的CSS样式文件
- */
-const loadCSSFiles = () => {
-  const cssFiles = [
-    '/css/bootstrap.min.css',
-    '/css/main2.css',
-    '/css/main.css',
-    '/css/yuxi2019.css'
-  ]
-
-  cssFiles.forEach(href => {
-    // 检查是否已经加载过该CSS文件
-    const existingLink = document.querySelector(`link[href="${href}"]`)
-    if (!existingLink) {
+// 动态加载资源
+const loadResources = () => {
+  // 加载CSS
+  pageConfig.cssFiles.forEach(href => {
+    if (!document.querySelector(`link[href="${href}"]`)) {
       const link = document.createElement('link')
       link.rel = 'stylesheet'
       link.href = href
@@ -301,150 +49,88 @@ const loadCSSFiles = () => {
       document.head.appendChild(link)
     }
   })
-}
 
-/**
- * 加载 JavaScript 文件
- * 功能：动态加载所需的 JavaScript 库和脚本文件
- */
-const loadJSFiles = () => {
-  const jsFiles = [
-    '/js/jquery-1.10.2.js',
-    '/js/bootstrap.min.js',
-    '/js/index.js',
-    '/js/news.js',
-    '/js/gopcOm.js'
-  ]
-
-  jsFiles.forEach(src => {
-    // 检查是否已经加载过该JS文件
-    const existingScript = document.querySelector(`script[src="${src}"]`)
-    if (!existingScript) {
+  // 加载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 到页面头部
- */
-const addFavicon = () => {
-  const link = document.createElement('link')
-  link.rel = 'shortcut icon'
-  link.href = '/img/logoIco.ico'
-  document.head.appendChild(link)
-}
+  // 添加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 loadBaiduAnalytics = () => {
+  // 加载百度统计
   const protocol = window.location.protocol === 'https:' ? 'https://' : 'http://'
   const script = document.createElement('script')
-  script.src = `${protocol}hm.baidu.com/h.js?34439d222cbf169237b7b18841a6c8f0`
+  script.src = `${protocol}hm.baidu.com/h.js?${pageConfig.baiduAnalytics}`
   script.type = 'text/javascript'
   document.head.appendChild(script)
 }
 
-/**
- * 解决方案标签页切换
- * 功能：处理解决方案部分的标签页切换逻辑
- */
-const handleSolutionTabHover = (index: number) => {
-  // 移除所有active类
-  const tabs = document.querySelectorAll('.solution .items-body li')
-  tabs.forEach(tab => tab.classList.remove('active'))
+// 处理锚点链接
+const handleAnchorLinks = () => {
+  if (window.location.hash) {
+    history.replaceState('', document.title, window.location.pathname + window.location.search)
+  }
+}
 
-  // 添加active类到当前标签
+// 解决方案标签页切换
+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')
   }
 
-  // 显示对应的内容
-  const contents = document.querySelectorAll('.items-body-right .solution-rightTabs')
   contents.forEach((content, i) => {
-    if (i === index) {
-      (content as HTMLElement).style.display = 'block'
-    } else {
-      (content as HTMLElement).style.display = 'none'
-    }
+    (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) => {
-      if (i === index) {
-        (img as HTMLElement).style.display = 'block'
-      } else {
-        (img as HTMLElement).style.display = 'none'
-      }
+      (img as HTMLElement).style.display = i === index ? 'block' : 'none'
     })
   }
 }
 
-/**
- * 页面初始化
- * 功能：设置页面初始状态和事件监听
- */
 onMounted(() => {
-  // 加载CSS样式文件
-  loadCSSFiles()
-
-  // 加载JavaScript文件
-  loadJSFiles()
-
-  // 添加 favicon
-  addFavicon()
-
-  // 处理锚点链接
+  loadResources()
   handleAnchorLinks()
-
-  // 启动轮播图自动播放
   startAutoPlay()
 
-  // 初始化轮播图状态
-  pageData.value.carouselItems.forEach((item, index) => {
-    item.active = index === uiState.value.currentSlide
-  })
-
-  // 加载百度统计
-  loadBaiduAnalytics()
-
-  // 绑定解决方案标签页事件
+  // 绑定事件
   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()
 })
@@ -452,260 +138,139 @@ onUnmounted(() => {
 
 <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 class="active" data-slide-to="0" data-target="#carousel-example-generic"/>
-        <li data-slide-to="1" data-target="#carousel-example-generic"/>
-        <li data-slide-to="2" data-target="#carousel-example-generic"/>
+        <li
+            v-for="(item, index) in carouselData"
+            :key="index"
+            :class="{ active: index === uiState.currentSlide }"
+            :data-slide-to="index"
+            data-target="#carousel-example-generic"
+        />
       </ol>
-      <!-- Wrapper for slides -->
+
       <div class="carousel-inner" role="listbox">
-        <div class="item">
-          <img alt="成本降低，效率更高" src="/img/yuxiupdata/banner_2021_1.png" style="width: 100%;">
+        <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 class="item">
-          <img alt="成本降低，效率更高" src="/img/yuxiupdata/banner_2021_2.png" style="width: 100%;">
-        </div>
-        <div class="item active">
-          <img alt="共享单车最佳拍档" src="/img/yuxiupdata/index23.png" style="width: 100%;">
-          <!-- <div class="carousel-caption">
-          <h2>智慧科技让生活更美好，帮助企业快速实现智能化</h2>
-          <ul class="list-unstyled hidden-xs hidden-sm">
-          <li><a href="/softwareDevelopment/app"><img src="/img/yuxiupdata/item1-1.png" alt="APP定制开发"></a> <span></span>APP定制开发</li>
-          <li><a href="/softwareDevelopment/wechat" target="_blank"><img src="/img/yuxiupdata/item1-2.png" alt="微信开发"></a><span></span>微信开发</li>
-          <li><a><img src="/img/yuxiupdata/item1-3.png" alt="管理后台开发"></a><span></span>管理后台开发</li>
-          <li><a href="/softwareDevelopment/miniprogram"><img src="/img/yuxiupdata/item1-4.png" alt="小程序开发"></a><span></span>小程序开发</li>
-          </ul>
-          </div> -->
-        </div>
-        <!-- <div class="item">
-        <img src="/img/yuxiupdata/banner1.png" alt="成本降低，效率更高"> -->
-        <!-- <div class="carousel-caption">
-        <h4 style="margin-top: 160px;">成本降低，效率更高</h4>
-        <h2 class="scondh2">物联网软硬件一站式解决方案提供商</h2>
-        <ul class="list-unstyled hidden-xs hidden-sm">
-        <li><a href="/softwareDevelopment/app"><img src="/img/yuxiupdata/item1-1.png" alt="APP定制开发"></a> <span></span>APP定制开发</li>
-        <li><a href="/softwareDevelopment/wechat" target="_blank"><img src="/img/yuxiupdata/item1-2.png" alt="微信开发"></a><span></span>微信开发</li>
-        <li><a><img src="/img/yuxiupdata/item1-3.png" alt="管理后台开发"></a><span></span>管理后台开发</li>
-        <li><a href="/softwareDevelopment/miniprogram"><img src="/img/yuxiupdata/item1-4.png" alt="小程序开发"></a><span></span>小程序开发</li>
-        </ul>
-        </div> -->
-        <!-- </div> -->
       </div>
     </div>
 
-
     <!-- 物联网解决方案 -->
     <div class="container-fluid text-center mainitems">
       <div class="headtit">物联网解决方案</div>
       <div class="minstit">针对不同类型使用场景需求，量身定制解决方案</div>
       <div class="row inteBody">
-        <!--  -->
-        <div class="col-xs-12 col-lg-2 col-lg-offset-1">
+        <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="" src="/img/yuxiupdata/banner3-1.png"></a>
-            <h2>共享陪护床</h2>
-            <p>解决医院陪护家属未配有床位，休息不便的问题…</p>
+            <a href="#">
+              <img :alt="solution.title" :src="solution.image">
+            </a>
+            <h2>{{ solution.title }}</h2>
+            <p>{{ solution.description }}</p>
           </div>
 
           <div class="intebody-hover">
-            <h2>共享陪护床</h2>
-            <p>
-              解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同事，给患者家属更舒适的修养环境。</p>
-            <a href="/sharedSolutions/sharedbed">查看详情</a>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-2">
-          <div class="intebody-info">
-            <a href="#"><img alt="" src="/img/yuxiupdata/banner3-2.png"></a>
-            <h2>共享单车</h2>
-            <p>解决大型园区或短距离出行麻烦，提高出行效率…</p>
-          </div>
-
-          <div class="intebody-hover">
-            <h2>共享单车</h2>
-            <p>解决大型园区或短距离出行麻烦，提高出行效率，分时租赁单车，无桩共享，是一种新型的经济环保出行方式。</p>
-            <a href="/sharedSolutions/bike" target="_blank">查看详情</a>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-2">
-          <div class="intebody-info">
-            <a href="#"><img alt="" src="/img/yuxiupdata/banner3-3.png"></a>
-            <h2>共享电单车</h2>
-            <p>解决人们最后三公里的出行，促进环保和健康出行...</p>
-          </div>
-          <div class="intebody-hover">
-            <h2>共享单车</h2>
-            <p>解决人们最后三公里的出行，促进环保和健康出行，电动助力，省力高效。</p>
-            <a href="/sharedSolutions/eBike">查看详情</a>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-2">
-          <div class="intebody-info">
-            <a href="#"><img alt="" src="/img/yuxiupdata/banner3-4.png"></a>
-            <h2>共享电动车</h2>
-            <p>电动车相比续航能力更强，适用于各种出行场…</p>
-          </div>
-
-          <div class="intebody-hover">
-            <h2>共享电动车</h2>
-            <p>电动车相比续航能力更强，适用于各种出行场景，一站式提供硬件设备与软件开发</p>
-            <a href="/sharedSolutions/eBike">查看详情</a>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-2">
-          <div class="intebody-info">
-            <a href="#"><img alt="" src="/img/yuxiupdata/banner3-5.png"></a>
-            <h2>共享滑板车</h2>
-            <p>滑板车相对更加轻便，可穿梭于狭窄街巷，更符求…</p>
-          </div>
-
-          <div class="intebody-hover">
-            <h2>共享滑板车</h2>
-            <p>滑板车相对更加轻便，可穿梭于狭窄街巷，更符合用户的短距离出行需求。</p>
-            <a href="/sharedSolutions/scooter">查看详情</a>
+            <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 class="col-xs-12 col-lg-2 col-lg-offset-2">
-          <div class="bodycnt-info bodycnt-info1">
-            <img alt="" src="/img/yuxiupdata/banner2-1.png"><span/>智能家居
+        <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>智能家居</h2>
+            <h2>{{ scenario.title }}</h2>
             <span/>
-            <p>智能门锁<br> 智能空调<br> 智能电饭煲<br> 智能窗帘<br> …</p>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-2">
-          <div class="bodycnt-info bodycnt-info2">
-            <img alt="" src="/img/yuxiupdata/banner2-2.png"><span/>智慧出行
-          </div>
-
-          <div class="bodycnt-datails">
-            <h2>智慧出行</h2>
-            <span/>
-            <p>共享单车<br> 共享汽车<br> 共享滑板车<br> 共享电动车<br> …</p>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-2">
-          <div class="bodycnt-info bodycnt-info3">
-            <img alt="" src="/img/yuxiupdata/banner2-3.png"><span/>智慧医疗
-          </div>
-          <div class="bodycnt-datails">
-            <h2>智慧医疗</h2>
-            <span/>
-            <p>共享陪护床<br> 智能安防<br> 共享打印机<br> 共享充电宝<br> …</p>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-2">
-          <div class="bodycnt-info bodycnt-info4">
-            <img alt="" src="/img/yuxiupdata/banner2-4.png"><span/>智慧园区
-          </div>
-          <div class="bodycnt-datails">
-            <h2>智慧园区</h2>
-            <span/>
-            <p>智能自提柜<br> 共享健身房<br> 共享洗衣机<br> 智能门禁<br> …</p>
+            <p v-html="scenario.description"/>
           </div>
         </div>
       </div>
-      <div class="m-btns"><a href="/IoTSolutions/Internet_Things_hardware">了解更多</a></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 class="col-xs-12 col-lg-3">
+        <div
+            v-for="software in softwareDevelopmentData"
+            :key="software.id"
+            class="col-xs-12 col-lg-3"
+        >
           <div class="appbody-info">
-            <img alt="" src="/img/yuxiupdata/banner4-1.png">
-            <h2>iOS开发</h2>
-            <p>专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。</p>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-3">
-          <div class="appbody-info">
-            <img alt="" src="/img/yuxiupdata/banner4-2.png">
-            <h2>Android开发</h2>
-            <p>针对主流的android系统，提供一站式APP咨询、策划、开发服务。</p>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-3">
-          <div class="appbody-info">
-            <img alt="" src="/img/yuxiupdata/banner4-3.png">
-            <h2>微信开发</h2>
-            <p>针对企业需求提供专业微信公众平台开发服务。...</p>
-          </div>
-        </div>
-        <!--  -->
-        <div class="col-xs-12 col-lg-3">
-          <div class="appbody-info">
-            <img alt="" src="/img/yuxiupdata/banner4-4.png">
-            <h2>小程序开发</h2>
-            <p>无需安装APP，就可以带来更流畅快速的体验。</p>
+            <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 class="hardware-conter">
-            <img alt="联网智能硬件" class="img-responsive" src="/img/yuxiupdata/locker.png">
+        <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>锁</span>
+              <span>{{ hardware.title }}</span>
               <i/>
-              <p>
-                N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏（延伸），远程授权自动开锁，支持应急开锁（延伸），支持短信远程修改相关参数。</p>
+              <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 class="hardware-conter" style="margin-top: 30px;">
-            <div class="col-xs-12 col-lg-8">
-              <span>联网控制器</span>
-              <i/>
-              <p>
-                通过改造传统传感器/PLC/变频器等实现快速联接（无需部署新设备）。通过灵活部署，快速形成各领域的物联网解决方案；有效降低用户改造、部署、维护成本。</p>
-            </div>
-            <img alt="联网智能硬件" class="img-responsive" src="/img/yuxiupdata/koz.png" style="float: right;">
-          </div>
-
         </div>
       </div>
-      <!-- 联网智能硬件锁-->
       <div class="m-btns" style="background: none">
         <a href="/IoTSolutions/Internet_Things_hardware">了解更多</a>
       </div>
     </div>
-
-
   </view>
 </template>
 

app/data/indexData.ts

@@ -0,0 +1,169 @@
+/**
+ * 首页数据配置
+ * 包含轮播图、解决方案、应用场景等所有页面数据
+ */
+
+// 轮播图数据
+export const carouselData = [
+    {
+        image: '/img/yuxiupdata/banner_2021_1.png',
+        alt: '成本降低，效率更高',
+        active: true
+    },
+    {
+        image: '/img/yuxiupdata/banner_2021_2.png',
+        alt: '成本降低，效率更高',
+        active: false
+    },
+    {
+        image: '/img/yuxiupdata/index23.png',
+        alt: '共享单车最佳拍档',
+        active: false
+    }
+]
+
+// 物联网解决方案数据
+export const iotSolutionsData = [
+    {
+        id: 1,
+        title: '共享陪护床',
+        description: '解决医院陪护家属未配有床位，休息不便的问题…',
+        fullDescription: '解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同事，给患者家属更舒适的修养环境。',
+        image: '/img/yuxiupdata/banner3-1.png',
+        link: '/sharedSolutions/sharedbed'
+    },
+    {
+        id: 2,
+        title: '共享单车',
+        description: '解决大型园区或短距离出行麻烦，提高出行效率…',
+        fullDescription: '解决大型园区或短距离出行麻烦，提高出行效率，分时租赁单车，无桩共享，是一种新型的经济环保出行方式。',
+        image: '/img/yuxiupdata/banner3-2.png',
+        link: '/sharedSolutions/bike'
+    },
+    {
+        id: 3,
+        title: '共享电单车',
+        description: '解决人们最后三公里的出行，促进环保和健康出行...',
+        fullDescription: '解决人们最后三公里的出行，促进环保和健康出行，电动助力，省力高效。',
+        image: '/img/yuxiupdata/banner3-3.png',
+        link: '/sharedSolutions/eBike'
+    },
+    {
+        id: 4,
+        title: '共享电动车',
+        description: '电动车相比续航能力更强，适用于各种出行场…',
+        fullDescription: '电动车相比续航能力更强，适用于各种出行场景，一站式提供硬件设备与软件开发',
+        image: '/img/yuxiupdata/banner3-4.png',
+        link: '/sharedSolutions/eBike'
+    },
+    {
+        id: 5,
+        title: '共享滑板车',
+        description: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符求…',
+        fullDescription: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合用户的短距离出行需求。',
+        image: '/img/yuxiupdata/banner3-5.png',
+        link: '/sharedSolutions/scooter'
+    }
+]
+
+// 多场景应用数据
+export const multiScenarioData = [
+    {
+        id: 1,
+        title: '智能家居',
+        description: '智能门锁<br> 智能空调<br> 智能电饭煲<br> 智能窗帘<br> …',
+        image: '/img/yuxiupdata/banner2-1.png',
+        class: 'bodycnt-info1'
+    },
+    {
+        id: 2,
+        title: '智慧出行',
+        description: '共享单车<br> 共享汽车<br> 共享滑板车<br> 共享电动车<br> …',
+        image: '/img/yuxiupdata/banner2-2.png',
+        class: 'bodycnt-info2'
+    },
+    {
+        id: 3,
+        title: '智慧医疗',
+        description: '共享陪护床<br> 智能安防<br> 共享打印机<br> 共享充电宝<br> …',
+        image: '/img/yuxiupdata/banner2-3.png',
+        class: 'bodycnt-info3'
+    },
+    {
+        id: 4,
+        title: '智慧园区',
+        description: '智能自提柜<br> 共享健身房<br> 共享洗衣机<br> 智能门禁<br> …',
+        image: '/img/yuxiupdata/banner2-4.png',
+        class: 'bodycnt-info4'
+    }
+]
+
+// 软件应用开发数据
+export const softwareDevelopmentData = [
+    {
+        id: 1,
+        title: 'iOS开发',
+        description: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。',
+        image: '/img/yuxiupdata/banner4-1.png'
+    },
+    {
+        id: 2,
+        title: 'Android开发',
+        description: '针对主流的android系统，提供一站式APP咨询、策划、开发服务。',
+        image: '/img/yuxiupdata/banner4-2.png'
+    },
+    {
+        id: 3,
+        title: '微信开发',
+        description: '针对企业需求提供专业微信公众平台开发服务。...',
+        image: '/img/yuxiupdata/banner4-3.png'
+    },
+    {
+        id: 4,
+        title: '小程序开发',
+        description: '无需安装APP，就可以带来更流畅快速的体验。',
+        image: '/img/yuxiupdata/banner4-4.png'
+    }
+]
+
+// 联网智能硬件数据
+export const smartHardwareData = [
+    {
+        id: 1,
+        title: '锁',
+        description: 'N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏（延伸），远程授权自动开锁，支持应急开锁（延伸），支持短信远程修改相关参数。',
+        image: '/img/yuxiupdata/locker.png',
+        position: 'left'
+    },
+    {
+        id: 2,
+        title: '联网控制器',
+        description: '通过改造传统传感器/PLC/变频器等实现快速联接（无需部署新设备）。通过灵活部署，快速形成各领域的物联网解决方案；有效降低用户改造、部署、维护成本。',
+        image: '/img/yuxiupdata/koz.png',
+        position: 'right'
+    }
+]
+
+
+// 页面配置
+export const pageConfig = {
+    carousel: {
+        autoPlayInterval: 5000,
+        initialSlide: 0
+    },
+    cssFiles: [
+        '/css/bootstrap.min.css',
+        '/css/main2.css',
+        '/css/main.css',
+        '/css/yuxi2019.css'
+    ],
+    jsFiles: [
+        '/js/jquery-1.10.2.js',
+        '/js/bootstrap.min.js',
+        '/js/index.js',
+        '/js/news.js',
+        '/js/gopcOm.js'
+    ],
+    favicon: '/img/logoIco.ico',
+    baiduAnalytics: '34439d222cbf169237b7b18841a6c8f0'
+}