ct/app/components/industrySolutions/ElectCar/item1-5.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/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/main.css',
    '/css/Internet_Things.css',
    '/css/yuxi2019.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>
  <div class="internet_Things_car ">
    <!-- item1 物联网系统开发 -->
    <div class="item1">
      <!-- <h5>创特科技倾心打造</h5>
        <h2>APP+智能中控+数据采集+云储存 </h2>
        <h4>电动车智能改造，建立智慧出行生态圈</h4> -->
    </div>


    <!--item2  APP/微信/小程序用户端 -->
    <div class="container itemImage">
      <div class="row item2 text-center">
        <h4>智慧电动车解决方案</h4>
        <div class="col-xs-12 col-lg-4">
          <img alt="" src="/img/internet_thinks/bitmap%402x.png">
          <div class="device">传统电动车</div>
        </div>
        <div class="col-xs-12 col-lg-4">
          <img alt="" src="/img/internet_thinks/bitmap%402x(1).png">
          <div class="device">智能中控</div>
        </div>
        <div class="col-xs-12 col-lg-4">
          <img alt="" src="/img/internet_thinks/bitmap%402x(2).png">
          <div class="device">系统软件</div>
        </div>
      </div>
    </div>


    <!-- item3 PC管理端 -->
    <div class="container-fluid">
      <div class="row item3">
        <div class="col-xs-12 col-lg-3 col-lg-offset-7">
          <h2>一个配件实现车辆智能化</h2>
          <p>
            为车厂量身打造，对电动车隐蔽加装智能控制器，增加智能防盗功能，智能控制器是系统核心，具备车辆定位信息采集、数据双向传输等功能通过，联动电动车控制系统和BMS电池系统实现各应用功能。</p>
          <ul>
            <li>蓝牙GPRS双通道解锁</li>
            <li>一键启动、无需钥匙</li>
            <li>卫星定位、精准跟踪</li>
            <li>防盗报警、不怕丢失</li>
          </ul>
        </div>
      </div>
    </div>

    <!--item2  APP/微信/小程序用户端 -->
    <div class="container">
      <div class="row itemOne text-center">
        <div class="col-xs-12 col-lg-3 col-lg-offset-5">
          <h4>快速定制能力实现品牌运营</h4>
          <p>独立app/小程序快速定制，15个工作日完成独立应用上线，一键管理品牌信息。</p>
        </div>
      </div>
    </div>

    <!--item2  APP/微信/小程序用户端 -->
    <div class="container">
      <div class="row itemTwo text-center">
        <div class="col-xs-12 col-lg-6 ">
          <div class="col-xs-12 col-lg-3 col-lg-offset-1 textTitle">
            <h4 style="text-align: left;"><span>智能电动车 </span><span class="textColor">小程序/APP</span></h4>
            <p style="width: 300px;">为用户提供智能电量精算、智能无钥匙启动/关闭、实时定位、轨迹查询、智能防盗、车主授权全家共享使用车、一键寻车、远程设防撤防和检测车速等功能
            </p>
          </div>
        </div>
        <div class="col-xs-12 col-lg-6 textContent">
          <img alt="" src="/img/internet_thinks/1%203%402x.png">
        </div>
      </div>
    </div>

    <!--item2  APP/微信/小程序用户端 -->
    <div class="container">
      <div class="row itemTwo  itemContent text-center">
        <div class="col-xs-12 col-lg-6 ">
          <img alt="" src="/img/internet_thinks/1%203%402x(1).png">
        </div>
        <div class="col-xs-12 col-lg-6 ">
          <div class="col-xs-24 col-lg-12 col-lg-offset-1 textTitle">
            <h4 style="text-align: left;"><span>智能电动车 </span><span class="textColor">管理平台</span></h4>
            <p style="width: 300px;">
              为车厂提供实时车辆监控、智能异常报警信息查看、远程操控车辆、用户数据查看、智能服务设置和权限管理等功能</p>
          </div>

        </div>

      </div>
    </div>


  </div>

</template>

<style scoped>
/* 自定义动画效果 */
@keyframes ping-slow {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.animate-ping-slow {
  animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-ping-slow.delay-100 {
  animation-delay: 0.1s;
}

.animate-ping-slow.delay-200 {
  animation-delay: 0.2s;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}
</style>