ct/app/pages/sharedSolutions/bike.vue

<script lang="ts" setup>
import {onMounted} from "vue";

onMounted(() => {
  // 加载CSS样式文件
  loadCSSFiles()

  // 加载JavaScript文件
  loadJSFiles()
})

const loadJSFiles = () => {
  const jsFiles = [
    '/jsBike/jquery.min.js',
    '/jsBike/minBanner.js',
    '/jsBike/news.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 = [
    '/cssBike/bootstrap.min.css',
    '/cssBike/main2.css',


    '/cssBike/index.css',
    '/cssBike/public.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="index-giant">
      <div class="index-giant-cont">
        <h1>共享单车APP + 运营管理后台 + 智能锁 = 一站式解决方案</h1>
        <p><img alt="" src="/images/P_1_English.png"></p>
        <button><a
            href="http://wpa.qq.com/msgrd?v=3&amp;uin=1829668236&amp;site=qq&amp;menu=yes"
            target="_blank">立即咨询</a></button>
      </div>
    </div>


    <!-- 我们的解决方案 -->
    <div class="index-solut">
      <h2>我们的解决方案</h2>
      <p>通过APP+单车+智能锁实现GPS定位实时找车、扫码快速开锁用车、预约用车、实时计费等功能。</p>
      <ul>
        <li class="index-solut-li">APP</li>
        <li>后台</li>
        <li>智能锁</li>
      </ul>
      <div id="triangle-up"/>
    </div>
    <!--  -->
    <div class="solut-detail">
      <!-- 解决方案1***APP -->
      <ul class="solut-detail-ul1" style="display: block;">
        <li>
          <img alt="" src="/images/location-icon.png">
          <p>实时定位找车</p>
        </li>
        <li>
          <img alt="" src="/images/Group.png">
          <p>扫码快速开锁</p>
        </li>
        <li>
          <img alt="" src="/images/togo.png">
          <p>实时预约用车</p>
        </li>
        <li>
          <img alt="" src="/images/pay.png">
          <p>精准实时计费</p>
        </li>
      </ul>
      <!--  -->
      <ul class="solut-detail-ul2">
        <li>
          <img alt="" src="/images/electricquantity.png">
          <p>实时观察管理车辆</p>
        </li>
        <li>
          <img alt="" src="/images/match.png">
          <p>用户多数据一目了然</p>
        </li>
        <li>
          <img alt="" src="/images/sett.png">
          <p>财务管理清晰</p>
        </li>
      </ul>
      <!--  -->
      <ul class="solut-detail-ul2">
        <li>
          <img alt="" src="/images/clock.png">
          <p>GPS智能锁精准定位</p>
        </li>
        <li>
          <img alt="" src="/images/speaktoke.png">
          <p>蓝牙智能模块快速开锁</p>
        </li>
        <li>
          <img alt="" src="/images/GPRS.png">
          <p>GPRS超强通信</p>
        </li>
      </ul>
    </div>


    <!-- 玩转单车，你只差这个APP -->
    <div class="app-introduce">
      <div class="app-introd-top">
        <h2>玩转单车，你只差个APP</h2>
        <p>来一场所走就走的骑行之旅</p>
      </div>


      <div class="min-banner">
        <div id="picplayer">
          <div id="piccontent"/>
        </div>

        <div id="picbtnHolder">
          <div id="picbtns">
            <div id="picbtn0" class="caption">
              <span><img alt="" src="/images/loction-2.png"></span>
              <h2>精准定位，找车不难</h2>
              <p>APP寻附近单车，GPS精准定位让您找车不再困难</p>
            </div>

            <div id="picbtn1" class="caption">
              <span><img alt="" src="/images/QR-2.png"></span>
              <h2>一键扫码，说走就走</h2>
              <p>扫码开锁可以选择蓝牙，GPS，GPRS进行开锁，锁开之后即可骑行</p>
            </div>

            <div id="picbtn2" class="caption">
              <span><img alt="" src="/images/che-2.png"></span>
              <h2>用车骑行，随心而行</h2>
              <p>可查看当前位置，使用时长与花费情况，让您用的放心。</p>
            </div>

            <div id="picbtn3" class="caption">
              <span><img alt="" src="/images/prem-2.png"></span>
              <h2>结束骑行，关锁结算</h2>
              <p>骑行结束之后需将单车停靠在单车公共停放区域，关锁即结束骑行并结算金额</p>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 我们的收益在哪里？ -->
    <div class="index-profit">
      <h2>我们的收益在哪里？</h2>
      <p>来一场所走就走的骑行之旅</p>
      <ul>
        <li>
          <p>可根据不同城市区域设置不同价格</p>
          <h2>租金收益</h2>
        </li>
        <li>
          <p>单车广告更直观，收益更可观</p>
          <h2>广告收益</h2>
        </li>
        <li>
          <p>符合政府绿色出行低碳环保理念</p>
          <h2>政府补贴</h2>
        </li>
      </ul>
    </div>


    <!-- 推荐投放应用场景 -->
    <div class="use-scene">
      <div class="use-scene-tit">
        <h2>推荐投放应用场景</h2>
        <p>景区、园区、校区、城区</p>
      </div>

      <ul>
        <li>
          <img alt="" src="/images/lighthouse-581082_1920.png">
          <div class="use-scene-info">
            <a href="#">景区</a>
            <p>景区内有数家自行车租赁点，租金也比较多
              而且在哪里租的骑完之后还要到那里还回去
              这样会给用户造成诸多的不便。<br><br>

              共享单车是一个自由共享模式，随时随地骑
              行，随时随地还车，计费也很便宜。这种自
              由方便的模式就解决了让用户跑动跑西的去
              还车，以及高额的租赁费，这样会大大吸引
              用户去使用，提高APP的使用量和微信吸粉
              量。
            </p>
          </div>
        </li>
        <li>
          <img alt="" src="/images/bridge-53769_1920.png">
          <div class="use-scene-info">
            <a href="#">园区</a>
            <p>景区内有数家自行车租赁点，租金也比较多
              而且在哪里租的骑完之后还要到那里还回去
              这样会给用户造成诸多的不便。<br><br>

              共享单车是一个自由共享模式，随时随地骑
              行，随时随地还车，计费也很便宜。这种自
              由方便的模式就解决了让用户跑动跑西的去
              还车，以及高额的租赁费，这样会大大吸引
              用户去使用，提高APP的使用量和微信吸粉
              量。
            </p>
          </div>

        </li>
        <li>
          <img alt="" src="/images/universit.png">
          <div class="use-scene-info">
            <a href="#">校区</a>
            <p>景区内有数家自行车租赁点，租金也比较多
              而且在哪里租的骑完之后还要到那里还回去
              这样会给用户造成诸多的不便。<br><br>

              共享单车是一个自由共享模式，随时随地骑
              行，随时随地还车，计费也很便宜。这种自
              由方便的模式就解决了让用户跑动跑西的去
              还车，以及高额的租赁费，这样会大大吸引
              用户去使用，提高APP的使用量和微信吸粉
              量。
            </p>
          </div>
        </li>
        <li>
          <img alt="" src="/images/malaysia-911580_1920.png">
          <div class="use-scene-info">
            <a href="#">城区</a>
            <p>景区内有数家自行车租赁点，租金也比较多
              而且在哪里租的骑完之后还要到那里还回去
              这样会给用户造成诸多的不便。<br><br>

              共享单车是一个自由共享模式，随时随地骑
              行，随时随地还车，计费也很便宜。这种自
              由方便的模式就解决了让用户跑动跑西的去
              还车，以及高额的租赁费，这样会大大吸引
              用户去使用，提高APP的使用量和微信吸粉
              量。
            </p>
          </div>
        </li>
      </ul>
    </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>