104 lines
3.1 KiB
Vue
104 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
||
// 资源加载已移至页面级别管理，使用 useHead 统一处理
|
||
</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>
|