282 lines
12 KiB
Vue
282 lines
12 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/news.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/Internet_Things.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="internet_Things_car">
|
||
<div class="item12">
|
||
<img alt="景区共享出行" src="/img/internet_thinks/banner7.jpg">
|
||
</div>
|
||
|
||
<div class="container" style="margin:0 auto; padding:0;">
|
||
<!-- item1 景区共享出行解决方案 -->
|
||
<div class="row item12 text-center" style="margin:0; padding:0 10px;">
|
||
<h2>景区共享出行</h2>
|
||
<h4>通过智能硬件及软件系统，为景区提供内部智慧出行解决方案</h4>
|
||
</div>
|
||
<div class="container text-center">
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="设备" class="center-block img-responsive case_img" src="/img/internet_thinks/device.png">
|
||
<span class="case_text">设备</span>
|
||
</div>
|
||
<!-- <div class="col-md-1 hidden-xs" style="font-size: 40px; line-height: 168px; color: #333333;" >+</div> -->
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="控制器" class="center-block img-responsive case_img" src="/img/internet_thinks/pilot.png">
|
||
<span class="case_text">控制器</span>
|
||
</div>
|
||
<!-- <div class="col-md-1 hidden-xs" style="font-size: 40px; line-height: 168px; color: #333333;">+</div> -->
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="小程序/APP" class="center-block img-responsive case_img" src="/img/internet_thinks/phone.png">
|
||
<span class="case_text">小程序/APP</span>
|
||
</div>
|
||
<!-- <div class="col-md-1 hidden-xs" style="font-size: 40px; line-height: 168px; color: #333333;">+</div> -->
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="智能管理后台" class="center-block img-responsive case_img" src="/img/internet_thinks/admin.png">
|
||
<span class="case_text">智能管理后台</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!--item2 景区电瓶车款式多样化 -->
|
||
<div class="row item12 text-center" style="margin:80px 0 0 0; padding:0 10px;">
|
||
<h2>景区出行方式多样化</h2>
|
||
</div>
|
||
<div class="container text-center">
|
||
<div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
|
||
<img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-4.png">
|
||
<!-- <h4 style="margin-top: 38px;">款式1</h4> -->
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
|
||
<img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-5.png">
|
||
<!-- <h4 style="margin-top: 38px;">款式2</h4> -->
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
|
||
<img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-6.png">
|
||
<!-- <h4 style="margin-top: 38px;">款式3</h4> -->
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
|
||
<img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-7.png">
|
||
<!-- <h4 style="margin-top: 38px;">款式4</h4> -->
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
|
||
<img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-8.png">
|
||
<!-- <h4 style="margin-top: 38px;">款式5</h4> -->
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
|
||
<img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-9.png">
|
||
<!-- <h4 style="margin-top: 38px;">款式6</h4> -->
|
||
</div>
|
||
</div>
|
||
|
||
<!--item5 用户端小程序/APP -->
|
||
<div class="row item12 text-center" style="margin:50px 0 0 0; padding:0 10px;">
|
||
<h2>用户端小程序/APP</h2>
|
||
</div>
|
||
<div class="container">
|
||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||
<div style="border:1px solid #ddd; margin-bottom:10px;">
|
||
<img alt="扫码自助借车" src="/img/internet_thinks/user_1.png" style="width: 100%;">
|
||
<div style="font-size:21px; padding: 32px 8px 16px 8px;">扫码自助借车</div>
|
||
<div style="font-size:14px; padding: 0 8px;">小程序扫景区代步车上设有的二维码即可解锁使用</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||
<div style="border:1px solid #ddd; margin-bottom:10px;">
|
||
<img alt="精准计费" src="/img/internet_thinks/user_2.png" style="width: 100%;">
|
||
<div style="font-size:21px; padding: 32px 8px 16px 8px;">精准计费&查询行驶</div>
|
||
<div style="font-size:14px;padding: 0 8px;">小程序可以进行精准计费，查看行驶时间与里程</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||
<div style="border:1px solid #ddd; margin-bottom:10px;">
|
||
<img alt="超出服务区提示" src="/img/internet_thinks/user_3.png" style="width: 100%;">
|
||
<div style="font-size:21px; padding: 32px 8px 16px 8px;">超出服务区提示</div>
|
||
<div style="font-size:14px;padding: 0 8px;">车身喇叭会进行多次提醒，若骑出服务区后将断电</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||
<div style="border:1px solid #ddd; margin-bottom:10px;">
|
||
<img alt="定点自助借还车" src="/img/internet_thinks/user_4.png" style="width: 100%;">
|
||
<div style="font-size:21px; padding: 32px 8px 16px 8px;">定点自助借还车</div>
|
||
<div style="font-size:14px;padding: 0 8px;">小程序可以进行精准计费，查看行驶时间与里程</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--item6 运维端小程序/APP -->
|
||
<div class="row item12 text-center" style="margin:70px 0 0 0; padding:0 10px;">
|
||
<h2>运维端小程序</h2>
|
||
</div>
|
||
<div class="container text-center">
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="车辆监控" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_1.png">
|
||
<span class="opera_text">车辆监控</span>
|
||
</div>
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="绑定中控" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_2.png">
|
||
<span class="opera_text">绑定中控</span>
|
||
</div>
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="低电筛选" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_3.png">
|
||
<span class="opera_text">低电筛选</span>
|
||
</div>
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="轨迹查询" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_4.png">
|
||
<span class="opera_text">轨迹查询</span>
|
||
</div>
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="开锁关锁" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_5.png">
|
||
<span class="opera_text">开锁关锁</span>
|
||
</div>
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="车辆仓库" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_6.png">
|
||
<span class="opera_text">车辆仓库</span>
|
||
</div>
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="车辆管理" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_7.png">
|
||
<span class="opera_text">车辆管理</span>
|
||
</div>
|
||
<div class="col-xs-6 col-sm-3">
|
||
<img alt="订单管理" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_8.png">
|
||
<span class="opera_text">订单管理</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!--item10 景区管理端 -->
|
||
<div class="row item12 text-center" style="margin:40px 0 0 0; padding:0 10px;">
|
||
<h2>智能管理后台</h2>
|
||
</div>
|
||
<div class="container text-center">
|
||
<div class="col-md-7">
|
||
<img alt="" class="center-block img-responsive" src="/img/internet_thinks/iMac-27.png">
|
||
</div>
|
||
<div class="col-md-5">
|
||
<div class="right_list">
|
||
<img alt="" src="/img/internet_thinks/admin_1.png">
|
||
<span>设置定点还车区域</span>
|
||
</div>
|
||
<div class="right_list" style="margin-top: 20px;">
|
||
<img alt="" src="/img/internet_thinks/admin_2.png">
|
||
<span>骑行费用设置</span>
|
||
</div>
|
||
<div class="right_list" style="margin-top: 20px;">
|
||
<img alt="" src="/img/internet_thinks/admin_2.png">
|
||
<span>景区智能管理</span>
|
||
</div>
|
||
<div class="right_list" style="margin-top: 20px;">
|
||
<img alt="" src="/img/internet_thinks/admin_2.png">
|
||
<span>智能监控车辆</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--item7 方案优势 -->
|
||
<div class="row item12 text-center" style="margin:80px 0 0 0; padding:0 10px;">
|
||
<h2>方案优势</h2>
|
||
</div>
|
||
<div class="container text-center" style="margin-bottom: 32px;">
|
||
<div class="col-sm-4" style="margin-bottom: 32px;">
|
||
<img alt="" class="center-block img-responsive advantage_img" src="/img/internet_thinks/case_1.png">
|
||
<div class="advantage_title">区域封闭，电子围栏设置</div>
|
||
<div class="advantage_tips">方便运营管理</div>
|
||
</div>
|
||
<div class="col-sm-4" style="margin-bottom: 32px;">
|
||
<img alt="" class="center-block img-responsive advantage_img" src="/img/internet_thinks/case_2.png">
|
||
<div class="advantage_title">定点自助租借/归还</div>
|
||
<div class="advantage_tips">降低人工成本，规范管理便于维护</div>
|
||
</div>
|
||
<div class="col-sm-4" style="margin-bottom: 32px;">
|
||
<img alt="" class="center-block img-responsive advantage_img" src="/img/internet_thinks/case_3.png">
|
||
<div class="advantage_title">多城市、多景区</div>
|
||
<div class="advantage_tips">高效管理运营</div>
|
||
</div>
|
||
</div>
|
||
<!-- ***********-->
|
||
</div>
|
||
|
||
|
||
</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>
|