ct/app/pages/sharedSolutions/bike.vue

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

// 使用 Nuxt 3 的 useHead 来管理头部资源
useHead({
  link: [
    {rel: 'stylesheet', href: '/cssBike/bootstrap.min.css'},
    {rel: 'stylesheet', href: '/cssBike/main2.css'},
    {rel: 'stylesheet', href: '/cssBike/index.css'},
    {rel: 'stylesheet', href: '/cssBike/public.css'}
  ],
  script: [
    {src: '/jsBike/jquery.min.js'},
    {src: '/jsBike/minBanner.js'},
    {src: '/jsBike/news.js'}
  ]
})

onMounted(() => {
  // 延迟加载以确保DOM完全渲染
  setTimeout(() => {
    // 设置首页巨幕高度
    $('.index-giant').height($(window).height());
    
    // 解决方案切换功能
    $('.index-solut ul li').on('click', function(){
      $(this).addClass('index-solut-li').siblings().removeClass('index-solut-li');
      $('.solut-detail ul').eq($(this).index()).show().siblings().hide();
      if($(this).index()==0){
        $('#triangle-up').css({
          'left': '45%'
        });
      }
      if($(this).index()==1){
        $('#triangle-up').css({
          'left': '49.5%'
        });
      }
      if($(this).index()==2){
        $('#triangle-up').css({
          'left': '54.5%'
        });
      }
    });
    
    // 左侧栏动画功能
    (function offBar(){
      var off=true;
      $('.left-bar-1').on('click',function(){
        if(off){
          $('.left-bar').animate({'right':0}, "1000");
          off=false;
        }else{
          $('.left-bar').animate({'right':'-32px'}, "slow");
          off=true;
        }
      });
    })();
    
    // 微信二维码悬停效果
    $('.left-bar-2 a.wecate').hover(function() {
      $('.left-bar-3').show();
    }, function() {
      $('.left-bar-3').hide();
    });
    
    // 腾讯QQ悬停效果
    $('._tencent').hover(function() {
      $('.left-bar-4').show();
    }, function() {
      $('.left-bar-4').hide();
    });
    
    // 电话悬停效果
    $('._phone').hover(function() {
      $('.left-bar-5').show();
    }, function() {
      $('.left-bar-5').hide();
    });
    
    // 锚点滚动功能
    $(".miaodian a").click(function() {
      $("body").animate({    
        scrollTop: 3550
      }, 1500);
      return false;
    });
  }, 100);
})


</script>

<template>
  <div>


    <!-- 首页巨幕 -->
    <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>
  </div>
</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>