ct/app/components/IoTSolutions/applicationCustomization/index.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>