262 lines
9.4 KiB
Vue
262 lines
9.4 KiB
Vue
<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/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/yuxi2019.css',
|
||
'/css/new_index.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="container-fluid scootbanner">
|
||
<div class="scootbanner-info">
|
||
<div class="head">共享电动滑板车，重塑共享出行智能形象</div>
|
||
<div class="min-head">小巧省力时髦，真正解决最后一公里</div>
|
||
<div class="conter">拥有多个共享类项目成功案例，成熟优质的解决方案提供商——创特科技</div>
|
||
<a href="http://p.qiao.baidu.com//im/index?siteid=8233756&ucid=7539873" target="_blank">立即咨询</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- item1 -->
|
||
<div class="container">
|
||
<div class="row scoot-item1">
|
||
<div class="col-xs-6 col-md-3 scoot-item1-grop">
|
||
<div class="row">
|
||
<div class="col-md-4"><img alt="" src="/img/scooter/icon_1.png"></div>
|
||
<div class="col-md-8"><span>轻松省力</span>站上去即可启动，电动助力，速度最高可达 25 km/h，更快更轻松</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="col-xs-6 col-md-3 scoot-item1-grop">
|
||
<div class="row">
|
||
<div class="col-md-4"><img alt="" src="/img/scooter/icon_2.png"></div>
|
||
<div class="col-md-8"><span>小巧便携</span>和自行车相比，滑板车更小更轻便，占地面积小，停放更方便</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="col-xs-6 col-md-3 scoot-item1-grop">
|
||
<div class="row">
|
||
<div class="col-md-4"><img alt="" src="/img/scooter/icon_3.png"></div>
|
||
<div class="col-md-8"><span>便宜又快</span>通勤的最后几公里，打车太贵，且高峰期打车难，拥堵的问题较多，滑板车相比成本更低
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="col-xs-6 col-md-3 scoot-item1-grop">
|
||
<div class="row">
|
||
<div class="col-md-4"><img alt="" src="/img/scooter/icon_4.png"></div>
|
||
<div class="col-md-8"><span>年轻时髦</span>滑板车更代表一种年轻的生活态度，比自行车更酷</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 好行业、好项目、坐享收益 -->
|
||
<div class="scooter-introduction" style="background: #F8F8F8;">
|
||
<div class="container text-center" style="background: #F8F8F8;">
|
||
<div class="col-md-3 introductions">
|
||
<img alt="" class="center-block img-responsive" src="/img/scooter/item1.png">
|
||
<h4>市场优势</h4>
|
||
<p>支持GPRS定位，随时监控滑板车位置，记录用户骑行轨迹</p>
|
||
</div>
|
||
|
||
<div class="col-md-3 introductions">
|
||
<img alt="" class="center-block img-responsive" src="/img/scooter/item2.png">
|
||
<h4>模式优势</h4>
|
||
<p>GPRS远程开锁，蓝牙近距离开锁，满足多种场景开锁需求</p>
|
||
</div>
|
||
|
||
<div class="col-md-3 introductions">
|
||
<img alt="" class="center-block img-responsive" src="/img/scooter/item3.png">
|
||
<h4>技术优势</h4>
|
||
<p>通通过电子围栏规范用户停放，降低维护成本</p>
|
||
</div>
|
||
|
||
<div class="col-md-3 introductions">
|
||
<img alt="" class="center-block img-responsive" src="/img/scooter/item4.png">
|
||
<h4>运营优势</h4>
|
||
<p>支持多种第三方支付，常用的银联支付、微信支付、支付宝支付、PayPal等都有对接经验</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提供一站式解决方案 -->
|
||
<div class="container text-center">
|
||
<div class="row oneStep">
|
||
<div class="row step-head">提供一站式解决方案</div>
|
||
<div class="row step-min-head">APP+小程序+管理后台+智能锁+电动滑板车</div>
|
||
<div class="step-tips"><span>APP</span></div>
|
||
|
||
<div class="col-md-4 step-group">
|
||
<img alt="" class="center-block img-responsive" src="/img/scooter/1.png">
|
||
<h4>扫码开锁，说走就走</h4>
|
||
<p>扫码开锁可以选择蓝牙，GPS、GPRS进行开锁，锁开之后踏上滑板车即可出发</p>
|
||
</div>
|
||
|
||
<div class="col-md-4 step-group">
|
||
<img alt="" class="center-block img-responsive" src="/img/scooter/2.png">
|
||
<h4>邀请好友，骑行免费</h4>
|
||
<p>把邀请码发送给好友，与好友共享免费骑行</p>
|
||
</div>
|
||
|
||
<div class="col-md-4 step-group">
|
||
<img alt="" class="center-block img-responsive" src="/img/scooter/3.png">
|
||
<h4>个人信息，清晰可查</h4>
|
||
<p>骑行记录/钱包管理等清晰简要，随时可以查询</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 管理后台 -->
|
||
<div style="background: #f8f8f8">
|
||
<div class="container text-center">
|
||
<div class="row oneStep">
|
||
<div class="step-tips"><span>管理后台</span></div>
|
||
<div class="step-group">
|
||
<img alt="" class="center-block img-responsive" src="/img/scooter/ht1.png">
|
||
<h4>数据总览，助力运营</h4>
|
||
<p>统计数据信息，查询每个数据来去记录</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 滑板车 -->
|
||
<div class="container text-center">
|
||
<div class="row oneStep">
|
||
<div class="step-tips"><span>滑板车</span></div>
|
||
<div class="step-group">
|
||
<img alt="" class="center-block img-responsive" src="/img/scooter/hbc.png">
|
||
<h4 style="margin-top: 40px;">防水防盗，支持定制</h4>
|
||
<p>共享滑板车防水能力强，并采用电机锁，骑行结束后自动锁住电机，防止雨后损坏或被用户占用</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 行业优势 -->
|
||
<div class="in-advantage" style="background: #f8f8f8;">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="in-advantage-head text-center">行业优势</div>
|
||
|
||
<div class="col-sm-12 col-md-6 advant-gro">
|
||
<div class="col-xs-3" style="margin-left: 10px;"><img
|
||
alt=""
|
||
class="center-block img-responsive" src="/img/scooter/advan1.png"></div>
|
||
<div class="col-xs-7"><span>高效的需求分析</span>将想法快速落地成操作方案，呈现高效率高质量成果</div>
|
||
<div class="serial">1</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="col-sm-12 col-md-6 advant-gro">
|
||
<div class="col-xs-3" style="margin-left: 10px;"><img
|
||
alt=""
|
||
class="center-block img-responsive" src="/img/scooter/advan2.png"></div>
|
||
<div class="col-xs-7"><span>满意的视觉呈现</span>行业UI设计精英，助您达到满意的视觉效果</div>
|
||
<div class="serial">2</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="col-sm-12 col-md-6 advant-gro">
|
||
<div class="col-xs-3" style="margin-left: 10px;"><img
|
||
alt=""
|
||
class="center-block img-responsive" src="/img/scooter/advan3.png"></div>
|
||
<div class="col-xs-7"><span>实时的效果监控</span>专业项目经理负责制，全方位监控开发环节，确保准时交付</div>
|
||
<div class="serial">3</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="col-sm-12 col-md-6 advant-gro">
|
||
<div class="col-xs-3" style="margin-left: 10px;"><img
|
||
alt=""
|
||
class="center-block img-responsive" src="/img/scooter/advan4.png"></div>
|
||
<div class="col-xs-7"><span>省心的售后服务</span>交付协助项目上架，售后问题高效全面解决</div>
|
||
<div class="serial">4</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 为您创造价值，是我们坚定不移的宗旨 -->
|
||
<div class="container-fluild text-center industry">
|
||
<div class="row industry-head">为您创造价值，是我们坚定不移的宗旨</div>
|
||
<a href="http://wpa.qq.com/msgrd?v=3&uin=1829668236&site=qq&menu=yes" target="_blank">立即咨询</a>
|
||
</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>
|