ct/app/pages/sharedSolutions/bike.vue

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

definePageMeta({
  layout: 'no-new'
})

// 使用 Nuxt 3 的 useHead 来管理头部资源
useHead({
  link: [
    {rel: 'stylesheet', href: '/css/bootstrap.min.css'},
    {rel: 'stylesheet', href: '/css/main2.css'},
    {rel: 'stylesheet', href: '/cssBike/index.css'},
    {rel: 'stylesheet', href: '/cssBike/public.css'}
  ],
  script: [
    {src: '/jsBike/jquery.min.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();

    });


    // 初始化轮播图
    initBanner();
  }, 500);
})

// 轮播图初始化函数
function initBanner() {
  if (typeof $ === 'undefined') {
    console.error('jQuery未加载，无法初始化轮播图');
    return;
  }

  const pics = [
    {url: '/images/minBanner-1.png', link: '#', time: 3000},
    {url: '/images/minBanner-2.jpg', link: '', time: 3000},
    {url: '/images/minBanner-3.jpg', link: '', time: 3000},
    {url: '/images/minBanner-4.jpg', link: '', time: 3000}
  ];

  const $picplayer = $('#picplayer');
  const $piccontent = $('#piccontent');

  if ($picplayer.length === 0 || $piccontent.length === 0) {
    console.error('轮播图容器未找到');
    return;
  }

  // 清空现有内容
  $piccontent.empty();

  // 添加图片到容器中
  pics.forEach((pic, index) => {
    $piccontent.append(`<a target="_blank" href="${pic.link}"><img id="picitem${index}" style="display: none; z-index: ${index}" src="${pic.url}" /></a>`);
  });

  // 设置按钮点击事件
  pics.forEach((pic, index) => {
    $(`#picbtn${index}`).data('index', index);
    $(`#picbtn${index}`).off('click').on('click', function () {
      setSelectedItem(index);
    });
  });

  let selectedIndex = 0;
  let playID = null;

  function setSelectedItem(index) {
    selectedIndex = index;
    clearInterval(playID);

    // 隐藏当前图片
    $piccontent.find('img').fadeOut('fast');

    // 显示选中图片
    $(`#picitem${index}`).fadeIn('slow');

    // 更新按钮状态
    $('#picbtns .caption').each(function (i) {
      if (i === index) {
        $(this).find('span').css('backgroundColor', '#485766');
      } else {
        $(this).find('span').css('backgroundColor', '#D8D8D8');
      }
    });

    // 自动播放
    playID = setInterval(() => {
      const nextIndex = (selectedIndex + 1) % pics.length;
      setSelectedItem(nextIndex);
    }, pics[index].time);
  }

  // 初始化第一张图片
  setSelectedItem(0);
}


</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=564737095&amp;site=qq&amp;menu=yes"
            target="_blank">立即咨询</a></button>
      </div>
    </div>


    <!-- 我们的解决方案 -->
    <div class="index-solut">
      <h2 style="margin: 0;">我们的解决方案</h2>
      <p>通过APP+单车+智能锁实现GPS定位实时找车、扫码快速开锁用车、预约用车、实时计费等功能。</p>
      <ul>
        <li class="index-solut-li">APP</li>
        <li>后台</li>
        <li>智能锁</li>
      </ul>

    </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>
      <!-- 解决方案2***后台 -->
      <ul class="solut-detail-ul2" style="display: none;">
        <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>
      <!-- 解决方案3***智能锁 -->
      <ul class="solut-detail-ul2" style="display: none;">
        <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>


/* 响应式字体大小 */
@media (max-width: 640px) {
  .text-4xl {
    font-size: 2rem;
  }

  .text-5xl {
    font-size: 2.5rem;
  }

  .text-6xl {
    font-size: 3rem;
  }
}
</style>