243 lines
7.8 KiB
Vue
243 lines
7.8 KiB
Vue
<script lang="ts" setup>
|
||
import {onMounted} from 'vue'
|
||
import {
|
||
iotSolutionsData,
|
||
multiScenarioData,
|
||
softwareDevelopmentData,
|
||
smartHardwareData,
|
||
pageConfig
|
||
} from '~/data/indexData'
|
||
|
||
// 动态加载资源
|
||
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()
|
||
|
||
// 绑定事件
|
||
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))
|
||
})
|
||
})
|
||
</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 data-slide-to="0" data-target="#carousel-example-generic" class="active"></li>
|
||
<li data-slide-to="1" data-target="#carousel-example-generic"></li>
|
||
<li data-slide-to="2" data-target="#carousel-example-generic"></li>
|
||
</ol>
|
||
|
||
<div class="carousel-inner" role="listbox">
|
||
<div class="item active">
|
||
<img alt="成本降低，效率更高" src="/img/yuxiupdata/banner_2021_1.png" style="width: 100%;">
|
||
</div>
|
||
<div class="item">
|
||
<img alt="成本降低，效率更高" src="/img/yuxiupdata/banner_2021_2.png" style="width: 100%;">
|
||
</div>
|
||
<div class="item">
|
||
<img alt="共享单车最佳拍档" src="/img/yuxiupdata/index23.png" 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> |