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