<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/news.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/ebikes.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>
  <view>
    <!-- 页面主体 -->
    <div class="internet_Things_car">


      <!--
          item1
          创特共享电动车整体解决方案提供商
      -->
      <!-- <div class="container-fluid"> -->
      <div class="item1">
        <!--  item1_2 -->
        <div class="head hidden-xs">创特共享电动车整体解决方案提供商</div>
        <div class="contents">
          <div class="contents_1 hidden-xs">专业提供“共享电动车+智能硬件+多平台开发+运维管理”一站式服务</div>
          <div class="contents_2">
            专注于智慧出行，打造“共享出行”顶级方案。现已面向共享电动车、共享电池行业提供包含智能硬件+APP+云存储的全套解决方案。
          </div>
        </div>
        <a class="mores" href="http://p.qiao.baidu.com//im/index?siteid=8233756&amp;ucid=7539873">了解更多</a>
      </div>
      <!-- </div> -->


      <!--item2  共享电动车解决方案 -->
      <div class="container">
        <div class="row item2 text-center">
          <h2>共享电动车解决方案</h2>

          <div class="col-xs-6 col-lg-3">
            <!-- <a class="list-item"> -->
            <img alt="定制化共享电动车" class="img-responsive center-block" src="img/ebike/item2-1.png">
            <span>定制化共享电动车</span>
            <!-- </a> -->
          </div>

          <div class="col-xs-6 col-lg-3">
            <!-- <a class="list-item"> -->
            <img alt="专业级IOT物联网设备" class="img-responsive center-block" src="img/ebike/item2-2.png">
            <span>专业级IOT物联网设备</span>
            <!-- </a> -->
          </div>

          <div class="col-xs-6 col-lg-3">
            <!-- <a class="list-item"> -->
            <img alt="多平台APP快速开发" class="img-responsive center-block" src="img/ebike/item2-3.png">
            <span>多平台APP快速开发</span>
            <!-- </a> -->
          </div>

          <div class="col-xs-6 col-lg-3">
            <!-- <a class="list-item"> -->
            <img alt="专业级运营管理平台" class="img-responsive center-block" src="img/ebike/item2-4.png">
            <span>专业级运营管理平台</span>
            <!-- </a> -->
          </div>

        </div>
      </div>


      <!--item5  共享电动车+物联网设备 -->
      <div style="background: #FAFAFA;">
        <div class="container">
          <div class="row item5">
            <h2 class="text-center">共享电动车+物联网设备</h2>
            <!-- <h4>提供共享电动车系统全网开发服务</h4> -->

            <div class="col-xs-12 col-sm-6 col-lg-2 col-lg-offset-1">
              <div class="mini-group">
                <img alt="物联网设备数据传输" class="img-responsive center-block" src="img/ebike/item5-1.png">
                <span>物联网设备数据传输</span>
                <p>通过联网中控及车载控制器设备实现</p>
              </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-2">
              <!-- <a class="list-item"> -->
              <div class="mini-group">
                <img alt="防水防盗防高温" class="img-responsive center-block" src="img/ebike/item5-2.png">
                <span>防水防盗防高温</span>
                <p>车辆及设备采用防水式设计、材料采用防高温材料，并加载智能防盗系统</p>
              </div>
              <!-- </a> -->
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-2">
              <!-- <a class="list-item"> -->
              <div class="mini-group">
                <img alt="出骑行区提醒" class="img-responsive center-block" src="img/ebike/item5-3.png">
                <span>出骑行区提醒</span>
                <p>车辆出骑行区，车辆喇叭自动发出语音提醒，若不按语音要求返回则车辆自动断电</p>
              </div>
              <!-- </a> -->
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-2">
              <!-- <a class="list-item"> -->
              <div class="mini-group">
                <img alt="在线寻车" class="img-responsive center-block" src="img/ebike/item5-4.png">
                <span>在线寻车</span>
                <p>根据车辆定位及电量信息，可在线查找最合适的可骑行车辆</p>
              </div>
              <!-- </a> -->
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-2">
              <!-- <a class="list-item"> -->
              <div class="mini-group">
                <img alt="规范停车区" class="img-responsive center-block" src="img/ebike/item5-5.png">
                <span>规范停车区</span>
                <p>通过运营管理平台设置停车区，若用户不在停车区内停车，则需额外支付车辆调度费</p>
              </div>
              <!-- </a> -->
            </div>

          </div>
        </div>
      </div>


      <!--item6 共享电动车APP/小程序 -->
      <div class="container">
        <div class="row item6">

          <h2 class="text-center">共享电动车APP/小程序</h2>
          <div class="col-xs-12 col-lg-4">
            <img alt="共享电动车APP" class="img-responsive center-block" src="img/ebike/item6-1.png">
          </div>

          <div class="col-xs-6 col-lg-4">
            <div class="mini-group">
              <img alt="实名认证用车" class="img-responsive center-block" src="img/ebike/item6-1i.png">
              <p>
                <span>实名认证用车</span>
                <span>通过实名认证，预防用户骑走车辆不归还及解决国家规定未满16周岁不能用车问题</span>
              </p>
            </div>

            <div class="mini-group">
              <img alt="一键预约用车" class="img-responsive center-block" src="img/ebike/item6-2i.png">
              <p>
                <span>一键预约用车</span>
                <span>选择合适车辆，一键预约车辆</span>
              </p>
            </div>

            <div class="mini-group">
              <img alt="免押金卡骑行" class="img-responsive center-block" src="img/ebike/item6-3i.png">
              <p>
                <span>免押金卡骑行</span>
                <span>考虑支付宝免押对接困难及用户不愿缴纳高额押金问题提出免押金卡方案，解决问题并增加额外收入</span>
              </p>
            </div>

            <div class="mini-group">
              <img alt="用车前确认续航里程" class="img-responsive center-block" src="img/ebike/item6-4i.png">
              <p>
                <span>用车前确认续航里程</span>
                <span>扫码用车弹出车辆当前可续航里程信息，用户根据该信息判断是否满足自身骑行要求</span>
              </p>
            </div>
          </div>

          <div class="col-xs-6 col-lg-4">
            <div class="mini-group">
              <img alt="时间+里程精准计费" class="img-responsive center-block" src="img/ebike/item6-5i.png">
              <p>
                <span>时间+里程精准计费</span>
                <span>根据用车时间及车辆轮转里程精准计费</span>
              </p>
            </div>
            <div class="mini-group">
              <img alt="临时停车" class="img-responsive center-block" src="img/ebike/item6-6i.png">
              <p>
                <span>临时停车</span>
                <span>临时有事，一键临时停车，锁车不结束订单。忘记还车，系统自动还车。</span>
              </p>
            </div>
            <div class="mini-group">
              <img alt="一键关锁结账" class="img-responsive center-block" src="img/ebike/item6-7i.png">
              <p>
                <span>一键关锁结账</span>
                <span>手机一键关锁，系统自动结账</span>
              </p>
            </div>
            <div class="mini-group">
              <img alt="多种支付方式" class="img-responsive center-block" src="img/ebike/item6-8i.png">
              <p>
                <span>多种支付方式</span>
                <span>支持微信、支付宝等多种支付方式</span>
              </p>
            </div>
          </div>

        </div>
      </div>


      <!--item7  运营管理平台 -->
      <div class="container-fluid">
        <div class="row item7 text-center">
          <h2>运营管理平台</h2>
          <div class="sys-pice"><img alt="运营管理平台" class="img-responsive center-block" src="img/ebike/item7-1.png">
          </div>
          <div class="col-xs-6 col-lg-2 col-lg-offset-2">
            <div class="mini-group">
              <img alt="实时车辆监控" class="img-responsive center-block" src="img/ebike/item7-1i.png">
              <span>实时车辆监控</span>
              <p>运营平台大屏幕展示车辆的分布及状态</p>
            </div>
          </div>
          <div class="col-xs-6 col-lg-2">
            <div class="mini-group">
              <img alt="智能异常报警" class="img-responsive center-block" src="img/ebike/item7-2i.png">
              <span>智能异常报警</span>
              <p>车辆发生异常问题，运营平台发生警报</p>
            </div>
          </div>
          <div class="col-xs-6 col-lg-2">
            <div class="mini-group">
              <img alt="规范骑行、停车区域" class="img-responsive center-block" src="img/ebike/item7-3i.png">
              <span>规范骑行、停车区域</span>
              <p>运营平台设置骑行、停车区域运营平台设置骑行、停车电子围栏，规范用户用车，节约运维成本</p>
            </div>
          </div>
          <div class="col-xs-6 col-lg-2">
            <div class="mini-group">
              <img alt="运营数据" class="img-responsive center-block" src="img/ebike/item7-4i.png">
              <span>运营数据</span>
              <p>运营数据云储存，百万量级数据实时查询</p>
            </div>
          </div>


          <div class="col-xs-6 col-lg-2 col-lg-offset-2">
            <div class="mini-group">
              <img alt="运维数据" class="img-responsive center-block" src="img/ebike/item7-5i.png">
              <span>运维数据</span>
              <p>运维数据实时上报，绩效考核有依据</p>
            </div>
          </div>
          <div class="col-xs-6 col-lg-2">
            <div class="mini-group">
              <img alt="快速签署代理" class="img-responsive center-block" src="img/ebike/item7-6i.png">
              <span>快速签署代理</span>
              <p>加盟商、代理商快速进入系统</p>
            </div>
          </div>
          <div class="col-xs-6 col-lg-2">
            <div class="mini-group">
              <img alt="财务管理" class="img-responsive center-block" src="img/ebike/item7-7i.png">
              <span>财务管理</span>
              <p>财务报表实时统计查询，财务清晰有记录</p>
            </div>
          </div>
          <div class="col-xs-6 col-lg-2">
            <div class="mini-group">
              <img alt="权限管理" class="img-responsive center-block" src="img/ebike/item7-8i.png">
              <span>权限管理</span>
              <p>根据公司员工岗位职责，自定义设置系统权限</p>
            </div>
          </div>
        </div>
      </div>


      <!-- over -->  <!-- over -->
    </div>
  </view>
</template>

<style scoped>

</style>