277 lines
8.5 KiB
Vue
277 lines
8.5 KiB
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完全渲染
|
||
|
||
})
|
||
|
||
|
||
</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&uin=1829668236&site=qq&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>
|