158 lines
4.2 KiB
Vue
158 lines
4.2 KiB
Vue
<script lang="ts" setup>
|
||
import {onMounted} from "vue";
|
||
|
||
onMounted(() => {
|
||
// 加载CSS样式文件
|
||
loadCSSFiles()
|
||
|
||
// 加载JavaScript文件
|
||
loadJSFiles()
|
||
})
|
||
|
||
const loadJSFiles = () => {
|
||
const jsFiles = [
|
||
'/js/jquery-1.10.2.js',
|
||
'/js/bootstrap.min.js',
|
||
'/js/index.js',
|
||
|
||
'/js/gopcOm.js'
|
||
|
||
|
||
]
|
||
|
||
jsFiles.forEach(src => {
|
||
// 检查是否已经加载过该JS文件
|
||
const existingScript = document.querySelector(`script[src="${src}"]`)
|
||
if (!existingScript) {
|
||
const script = document.createElement('script')
|
||
script.src = src
|
||
script.type = 'text/javascript'
|
||
document.head.appendChild(script)
|
||
}
|
||
})
|
||
}
|
||
|
||
const loadCSSFiles = () => {
|
||
const cssFiles = [
|
||
'/css/bootstrap.min.css',
|
||
'/css/main2.css',
|
||
|
||
|
||
'/css/yuxi2019.css',
|
||
'/css/Internet_Things.css',
|
||
]
|
||
|
||
cssFiles.forEach(href => {
|
||
// 检查是否已经加载过该CSS文件
|
||
const existingLink = document.querySelector(`link[href="${href}"]`)
|
||
if (!existingLink) {
|
||
const link = document.createElement('link')
|
||
link.rel = 'stylesheet'
|
||
link.href = href
|
||
link.type = 'text/css'
|
||
document.head.appendChild(link)
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
|
||
<view>
|
||
|
||
|
||
<div class="Internet_Things">
|
||
<!-- item1 物联网系统开发 -->
|
||
<div class="item1">
|
||
<h2>物联网系统开发 </h2>
|
||
<h4> 一站式物联网解决方案提供，携手搭建物联网生态圈</h4>
|
||
</div>
|
||
|
||
|
||
<!--item2 APP/微信/小程序用户端 -->
|
||
<div class="container">
|
||
<div class="row item2">
|
||
<!-- -->
|
||
<div class="col-xs-12 col-lg-5 col-lg-offset-1">
|
||
<img alt="联网智能硬件" class="img-responsive" src="/img/internet_thinks/1.png">
|
||
</div>
|
||
<!-- -->
|
||
<div class="col-xs-12 col-lg-5">
|
||
<h2>APP/微信/小程序用户端</h2>
|
||
<ul>
|
||
<li>通过蓝牙连接完成APP与智能终端间的对接；</li>
|
||
<li>调用GPS定位，达到定位用户位置，记录用户运动；</li>
|
||
<li>将运行数据、硬件数据意见分享到站外应用，如新浪微博、微信等，与更多朋友互动；</li>
|
||
<li>扫码使用设备，流程简单、体验佳。</li>
|
||
</ul>
|
||
</div>
|
||
<!-- -->
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- item3 PC管理端 -->
|
||
<div id="grad" class="container-fluid">
|
||
<div class="row item3">
|
||
<div class="col-xs-12 col-lg-3 col-lg-offset-2">
|
||
<h2>PC管理端</h2>
|
||
<p>
|
||
可根据用户需要，配置成各个应用模块，如设备管理、设备监控、生命周期管理、维修工单管理、合同管理、工单流程管理等。采用模块化设计，简便易用、高度自定义，无需二次开发。</p>
|
||
</div>
|
||
|
||
<div class="col-xs-12 col-lg-5 col-lg-offset-1">
|
||
<img alt="PC管理端" class="img-responsive" src="/img/internet_thinks/2.png">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- item4 APP移动运维端 -->
|
||
<div class="container">
|
||
<div class="row item4">
|
||
<div class="col-xs-12 col-lg-5 col-lg-offset-1">
|
||
<img alt="联网智能硬件" class="img-responsive" src="/img/internet_thinks/3.png">
|
||
</div>
|
||
<!-- -->
|
||
<div class="col-xs-12 col-lg-4 col-lg-offset-1">
|
||
<h2>APP移动运维端</h2>
|
||
<ul>
|
||
<li>手机权限分配：厂家-经销商-合同能源管理企业-用户等；</li>
|
||
<li>实时监控：监控所有设备位置、运行状态；</li>
|
||
<li>扫描二维码注册、识别当前设备所有参数、运行信息、维护人员及历史消息等；</li>
|
||
<li>手机工单流转；</li>
|
||
<li>售后拍照回传、信息录入、抄表。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义动画效果 */
|
||
.hover\:shadow-lg:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* 响应式字体大小 */
|
||
@media (max-width: 640px) {
|
||
.text-4xl {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.text-5xl {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.text-6xl {
|
||
font-size: 3rem;
|
||
}
|
||
}
|
||
</style>
|