262 lines
8.0 KiB
Vue
262 lines
8.0 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/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_cabinet.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="item1"/>
|
|||
|
|
<!--item2 APP/微信/小程序用户端 -->
|
|||
|
|
<!-- <div class="container itemImage"> -->
|
|||
|
|
<div class="row item2 text-center">
|
|||
|
|
<h3>智慧换电柜解决方案构成</h3>
|
|||
|
|
<div style="display: flex;justify-content: space-between;margin-top: 60px;">
|
|||
|
|
<div class="text-center">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/timg.png">
|
|||
|
|
<p class="item2_p">智能换电柜</p>
|
|||
|
|
<label class="item2_lable">全自助智能换电站，快速更换电动车电池，方便快捷</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-center">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/pexel.png">
|
|||
|
|
<p class="item2_p">系统软件</p>
|
|||
|
|
<label class="item2_lable">按期/按次自助换电，省钱省心省事</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- </div> -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- item3 PC管理端 -->
|
|||
|
|
<div class="text-center item2 row">
|
|||
|
|
<h3>换电柜的优势</h3>
|
|||
|
|
<div style="display: flex;justify-content: space-between;margin-top: 50px;">
|
|||
|
|
<div class="item3_div">
|
|||
|
|
<div class="item3_div_bg" style="background:url(/img/Internet_cabinet/timg1.png);">
|
|||
|
|
市场需求大
|
|||
|
|
</div>
|
|||
|
|
<div class="item3_div_txt">
|
|||
|
|
电动车人群大，用于外卖的电动车就达到数百万辆，市场及其庞大。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item3_div">
|
|||
|
|
<div class="item3_div_bg" style="background:url(/img/Internet_cabinet/timg2.png);">
|
|||
|
|
规范化管理
|
|||
|
|
</div>
|
|||
|
|
<div class="item3_div_txt">
|
|||
|
|
需要放在指定区域，所以几乎不存在乱停乱放的现象，不会恶意占用公共交通。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex;justify-content: space-between;margin-top: 50px;">
|
|||
|
|
<div class="item3_div">
|
|||
|
|
<div class="item3_div_bg" style="background:url(/img/Internet_cabinet/timg3.png);">
|
|||
|
|
不易丢失
|
|||
|
|
</div>
|
|||
|
|
<div class="item3_div_txt">
|
|||
|
|
通过换电柜形式换电，不易丢失。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item3_div">
|
|||
|
|
<div class="item3_div_bg" style="background:url(/img/Internet_cabinet/timg4.png);">
|
|||
|
|
收益可观
|
|||
|
|
</div>
|
|||
|
|
<div class="item3_div_txt">
|
|||
|
|
用户使用频率特别高，例如外卖人员、快递人
|
|||
|
|
员等，租金收益非常可观。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--item2 APP/微信/小程序用户端 -->
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="text-center item2 row">
|
|||
|
|
<h3>换电柜系统核心功能</h3>
|
|||
|
|
<div style="height: 30px;"/>
|
|||
|
|
<div class="col-xs-7 col-lg-4">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/icon_1.png">
|
|||
|
|
<h4>用户管理</h4>
|
|||
|
|
<h6>对注册小程序/app的用户进行管理。</h6>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-xs-7 col-lg-4">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/icon_3.png">
|
|||
|
|
<h4>换电柜管理</h4>
|
|||
|
|
<h6>可分地区、分站点查询换电柜状态，对换电柜进行管理。</h6>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-xs-7 col-lg-4">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/icon_4.png">
|
|||
|
|
<h4>网点/代理商管理</h4>
|
|||
|
|
<h6>对各城市、各区域代理点/网点信息
|
|||
|
|
数据进行统计分析管理。</h6>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-xs-7 col-lg-4">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/icon_5.png">
|
|||
|
|
<h4>订单管理</h4>
|
|||
|
|
<h6>可查询并管理换电柜的换电订单详细信息。</h6>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-xs-7 col-lg-4">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/icon_6.png">
|
|||
|
|
<h4>财务管理</h4>
|
|||
|
|
<h6>可根据租赁情况、财务费用生成统
|
|||
|
|
计报表。</h6>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-xs-7 col-lg-4">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/icon_7.png">
|
|||
|
|
<h4>运维管理</h4>
|
|||
|
|
<h6>可分站点查询充电柜的运维人员、
|
|||
|
|
运维记录、运维进度和故障情况等。</h6>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--item2 APP/微信/小程序用户端 -->
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="text-center item2 row">
|
|||
|
|
<h3>应用场景</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="row itemTwo text-center">
|
|||
|
|
<div class="col-xs-12 col-lg-6 ">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/item4_img1.png">
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12 col-lg-6 ">
|
|||
|
|
<div class="col-xs-12 col-lg-3 col-lg-offset-1 textTitle" style="text-align: left;">
|
|||
|
|
<h4><span>外卖送餐、物流快递员等电动车使用 </span></h4>
|
|||
|
|
<p>主要用户为外卖送餐、物流快递员等电动车使用，使用是刚需
|
|||
|
|
，使用频次较高，因为他们业务繁忙，智能充电柜解决了他们
|
|||
|
|
“坐骑”日常充电麻烦的问题。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row itemTwo text-center">
|
|||
|
|
<div class="col-xs-12 col-lg-6 ">
|
|||
|
|
<div class="col-xs-12 col-lg-3 textTitle col-lg-offset-1" style="text-align: left;">
|
|||
|
|
<h4><span>使用电动车作为上下班代步工具的市民 </span></h4>
|
|||
|
|
<p>该人群在小区等地方充电不便。把充电柜存放在各个
|
|||
|
|
小区、电动车维修站等地方使用频次高的地方。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-12 col-lg-6 ">
|
|||
|
|
<img alt="" src="/img/Internet_cabinet/item4_img2.png">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.item3_div .item3_div_bg {
|
|||
|
|
height: 110px;
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: 110px;
|
|||
|
|
padding-left: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item3_div {
|
|||
|
|
width: 540px;
|
|||
|
|
height: 220px;
|
|||
|
|
border: 1px solid rgba(143, 143, 143, 1);
|
|||
|
|
font-family: "PingFangSC-Regular, PingFang SC";
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item3_div .item3_div_txt {
|
|||
|
|
height: 110px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: rgba(102, 102, 102, 1);
|
|||
|
|
padding-top: 20px;
|
|||
|
|
padding-left: 40px;
|
|||
|
|
padding-right: 40px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item2_p {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-family: "PingFangSC-Semibold,PingFang SC";
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: rgba(51, 51, 51, 1);
|
|||
|
|
line-height: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item2_lable {
|
|||
|
|
height: 30px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-family: "PingFangSC-Regular,PingFang SC";
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: rgba(102, 102, 102, 1);
|
|||
|
|
line-height: 30px;
|
|||
|
|
}
|
|||
|
|
</style>
|