3个组件
This commit is contained in:
WindowBird
parent
ee2b7b4943
commit
9bd66c6a32
|
|
@ -4,26 +4,31 @@
|
|||
height: 560px;
|
||||
color: #22282A;
|
||||
margin-top: 90px;
|
||||
background: url('../img/ebike/banner.png') no-repeat center center #FF0;
|
||||
background: url('../img/img/ebike/banner.png') no-repeat center center #FF0;
|
||||
background-size: auto 560px;
|
||||
overflow: hidden;
|
||||
padding-left: 15%;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .head {
|
||||
font-size: 46px;
|
||||
padding: 120px 0 70px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .contents {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .contents .contents_1 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .contents .contents_2 {
|
||||
width: 50%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .mores {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
|
@ -43,6 +48,7 @@
|
|||
padding: 80px 0 100px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 h2 {
|
||||
color: #333;
|
||||
margin: 0 0 100px 0;
|
||||
|
|
@ -51,13 +57,16 @@
|
|||
font-size: 34px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 div img {
|
||||
border: 1px solid #eee;
|
||||
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 div span {
|
||||
color: #333;
|
||||
display: block;
|
||||
|
|
@ -74,6 +83,7 @@
|
|||
background: url('../img/internet_thinks/car_bg.png') no-repeat center center #F6F7F9;
|
||||
background-size: auto 700;
|
||||
}
|
||||
|
||||
.internet_Things_car .item3 h2 {
|
||||
color: #333;
|
||||
padding: 0;
|
||||
|
|
@ -81,6 +91,7 @@
|
|||
font-weight: 700;
|
||||
margin: 160px 0 50px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item3 p {
|
||||
padding: 0;
|
||||
color: #666;
|
||||
|
|
@ -88,11 +99,13 @@
|
|||
line-height: 1.8;
|
||||
margin: 0 0 40px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item3 ul {
|
||||
margin: 0;
|
||||
color: #999;
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item3 ul li {
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
|
|
@ -105,12 +118,14 @@
|
|||
.internet_Things_car .item4 {
|
||||
padding: 176px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item4 h2 {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
padding: 0;
|
||||
margin: 0 0 50px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item4 p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -126,6 +141,7 @@
|
|||
padding: 80px 0 100px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item5 h2 {
|
||||
color: #333;
|
||||
margin: 0 0 100px 0;
|
||||
|
|
@ -134,6 +150,7 @@
|
|||
font-size: 34px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item5 .mini-group {
|
||||
height: 390px;
|
||||
margin: 0 -5px;
|
||||
|
|
@ -142,6 +159,7 @@
|
|||
box-shadow: 0 2px 17px 0 rgba(0, 0, 0, 0.14);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item5 .mini-group span {
|
||||
color: #333;
|
||||
display: block;
|
||||
|
|
@ -150,6 +168,7 @@
|
|||
margin-left: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item5 .mini-group p {
|
||||
padding: 0;
|
||||
color: #999;
|
||||
|
|
@ -166,6 +185,7 @@
|
|||
padding: 80px 0 100px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 h2 {
|
||||
color: #333;
|
||||
margin: 0 0 100px 0;
|
||||
|
|
@ -174,13 +194,16 @@
|
|||
font-size: 34px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 .mini-group {
|
||||
margin-bottom: 44px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 .mini-group img {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 .mini-group p {
|
||||
float: left;
|
||||
margin: 0 0 0 29px;
|
||||
|
|
@ -189,14 +212,17 @@
|
|||
max-width: 52%;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 .mini-group p span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 .mini-group p span:first-child {
|
||||
color: #333;
|
||||
font-size: 22px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 .mini-group p span:last-child {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
|
|
@ -212,29 +238,35 @@
|
|||
padding: 80px 0 100px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 h2 {
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .sys-pice {
|
||||
margin: 40px 0 20px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .mini-group {
|
||||
height: 218px;
|
||||
margin: 0 -10px;
|
||||
padding: 0 10%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .mini-group img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .mini-group span {
|
||||
color: #333;
|
||||
font-size: 22px;
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .mini-group p {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
|
|
@ -242,9 +274,6 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*@media screen and (max-width: 990px) {}
|
||||
@media screen and (max-width: 800px) {}
|
||||
@media screen and (max-width: 768px) {}
|
||||
|
|
@ -254,10 +283,12 @@
|
|||
.navbar-default .navbar-brand img {
|
||||
margin: 12px 0 13px 0;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand span {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
.internet_Things_car .item2,
|
||||
.internet_Things_car .item5,
|
||||
|
|
@ -265,6 +296,7 @@
|
|||
.internet_Things_car .item7 {
|
||||
padding: 20px 0 25px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 h2,
|
||||
.internet_Things_car .item3 h2,
|
||||
.internet_Things_car .item5 h2,
|
||||
|
|
@ -283,21 +315,26 @@
|
|||
padding-left: 2%;
|
||||
/*box-sizing: border-box;*/
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .head {
|
||||
font-size: 22px;
|
||||
padding: 15px 0 15px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .contents {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .contents .contents_1 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .contents .contents_2 {
|
||||
width: 50%;
|
||||
line-height: 1.5;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 .mores {
|
||||
width: 88px;
|
||||
height: 35px;
|
||||
|
|
@ -305,6 +342,7 @@
|
|||
font-size: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -313,6 +351,7 @@
|
|||
.internet_Things_car .item2 {
|
||||
padding: 20px 0 25px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 div span {
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
|
|
@ -323,12 +362,14 @@
|
|||
height: auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item5 .mini-group span {
|
||||
font-size: 20px;
|
||||
margin-top: 12px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item5 .mini-group p {
|
||||
font-size: 15px;
|
||||
margin: 0 10px;
|
||||
|
|
@ -339,14 +380,17 @@
|
|||
margin-top: 22px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 .mini-group p {
|
||||
margin: 0 0 0 15px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 .mini-group p span:first-child {
|
||||
font-size: 15px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item6 .mini-group p span:last-child {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -356,27 +400,34 @@
|
|||
background-size: 100% 170px;
|
||||
padding: 20px 0 25px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .sys-pice {
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .mini-group {
|
||||
padding: 0 4%;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .mini-group img {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .mini-group span {
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item7 .mini-group p {
|
||||
font-size: 13px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item8 h4 {
|
||||
font-size: 16px;
|
||||
margin: 11px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/*@media screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div id="mynav" class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="hidden-xs hidden-sm hidden-md"><a href="index.html">首页</a></li>
|
||||
<li class="hidden-xs hidden-sm hidden-md"><a href="/">首页</a></li>
|
||||
<!-- <span class="sr-only">(current)</span> -->
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" role="button">共享解决方案<span class="caret"/></a>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</li>
|
||||
<li><a href="scooter.html">共享滑板车<p>新的共享出行方式，轻便省力</p></a></li>
|
||||
<li><a href="sharedbed.html">共享陪护床<p>立足医院民生需求而诞生，解决医患家属的休息问题</p></a></li>
|
||||
<li><a href="Ebike.html">共享电动车<p>通过扫码开锁，循环共享</p></a></li>
|
||||
<li><a href="/sharedSolutions/eBike">共享电动车<p>通过扫码开锁，循环共享</p></a></li>
|
||||
<li><a href="sharabank.html">共享充电宝<p>
|
||||
企业提供的充电租赁设备，用户扫码取出后即可使用，用完后就近归还</p></a></li>
|
||||
</ul>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<ul class="pull-right col-xs-4 col-sm-6">
|
||||
<!-- <li><a class="menu-group" href="http://tianmei.yuxiit.com/" target="_blank">智慧餐饮<p>基于物联网和云计算技术为餐饮店量身打造的智能管理系统</p></a></li>
|
||||
<li><a href="http://hx.yuxiit.com/" target="_blank">智慧公寓<p>集多种设备操控,场景定制,产品于一体,让顾客在公寓体验到更舒适,更便捷,更个性化的服务</p></a></li> -->
|
||||
<li><a href="Internet_Things_ElectCar.html">智能电动车<p>
|
||||
<li><a href="/industrySolutions/ElectCar">智能电动车<p>
|
||||
打造智能电动车时代!方便用户的出行,让骑车出行便捷</p></a></li>
|
||||
<li><a href="Internet_Things_cabinet.html">智能换电柜<p>
|
||||
智能换电柜系统以集中换电替代用户充电，解决国内超过3.5亿辆电动车的电池续航问题</p></a></li>
|
||||
|
|
@ -114,36 +114,10 @@
|
|||
import {onMounted} from "vue";
|
||||
|
||||
/**
|
||||
* 加载 JavaScript 文件
|
||||
* 功能：动态加载所需的 JavaScript 库和脚本文件
|
||||
*/
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 组件挂载后加载 JavaScript 文件
|
||||
* 组件挂载后的初始化
|
||||
*/
|
||||
onMounted(() => {
|
||||
// 加载JavaScript文件
|
||||
loadJSFiles()
|
||||
// Navigation 组件初始化逻辑
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -303,6 +303,31 @@ const loadCSSFiles = () => {
|
|||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载 JavaScript 文件
|
||||
* 功能：动态加载所需的 JavaScript 库和脚本文件
|
||||
*/
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加网站图标
|
||||
* 功能：动态添加 favicon 到页面头部
|
||||
|
|
@ -383,6 +408,9 @@ onMounted(() => {
|
|||
// 加载CSS样式文件
|
||||
loadCSSFiles()
|
||||
|
||||
// 加载JavaScript文件
|
||||
loadJSFiles()
|
||||
|
||||
// 添加 favicon
|
||||
addFavicon()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
const items = [
|
||||
'https://picsum.photos/640/640?random=1',
|
||||
'https://picsum.photos/640/640?random=2',
|
||||
'https://picsum.photos/640/640?random=3',
|
||||
'https://picsum.photos/640/640?random=4',
|
||||
'https://picsum.photos/640/640?random=5',
|
||||
'https://picsum.photos/640/640?random=6'
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCarousel
|
||||
v-slot="{ item }" :items="items" :ui="{ item: 'basis-1/3' }" auto-scroll class="w-full max-w-full " dots
|
||||
loop>
|
||||
<img :src="item" alt="" class="rounded-lg">
|
||||
</UCarousel>
|
||||
</template>
|
||||
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
<template>
|
||||
<div class="bg-gray-50 dark:bg-gray-900 py-16">
|
||||
<div class="container mx-auto px-4 max-w-8xl">
|
||||
<!-- 标题区域 -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
物联网解决方案
|
||||
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
针对不同类型使用场景需求，量身定制解决方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 共享服务网格 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
|
||||
<div
|
||||
v-for="(service, index) in services"
|
||||
:key="index"
|
||||
class="group relative cursor-pointer"
|
||||
@mouseenter="activeCard = index"
|
||||
@mouseleave="activeCard = null"
|
||||
>
|
||||
<!-- 默认卡片 -->
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-300 group-hover:shadow-lg h-full flex flex-col">
|
||||
<!-- 图标（悬浮时隐藏） -->
|
||||
<div
|
||||
class="w-16 h-16 bg-primary-100 dark:bg-primary-900/20 rounded-lg flex items-center justify-center mb-4 mx-auto transition-opacity duration-300 group-hover:opacity-0">
|
||||
<UIcon :name="service.icon" class="w-8 h-8 text-primary-600 dark:text-primary-400"/>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center mb-2">
|
||||
{{ service.title }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 text-center line-clamp-2">
|
||||
{{ service.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮详情卡片 -->
|
||||
<div v-if="activeCard === index" class="absolute top-0 left-0 w-full h-full z-10">
|
||||
<div class="bg-primary-600 dark:bg-primary-700 rounded-xl p-6 h-full text-white shadow-xl flex flex-col">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold mb-4">{{ service.title }}</h3>
|
||||
<p class="text-sm opacity-90 mb-4 leading-relaxed">
|
||||
{{ service.detail }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 查看详情按钮 -->
|
||||
<UButton
|
||||
:to="service.link"
|
||||
class="w-full border-white/30 hover:bg-white/10 transition-colors mt-auto"
|
||||
color="white"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
查看详情
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const activeCard = ref(null)
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: '共享陪护床',
|
||||
icon: 'i-lucide-bed',
|
||||
description: '解决医院陪护家属未配有床位，休息不便的问题...',
|
||||
detail: '解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同时，给患者家属更舒适的修养环境。',
|
||||
link: '/solutions/bed'
|
||||
},
|
||||
{
|
||||
title: '共享单车',
|
||||
icon: 'i-lucide-bike',
|
||||
description: '解决大型园区或短距离出行麻烦，提高出行效率...',
|
||||
detail: '解决大型园区或短距离出行麻烦，提高出行效率，为校园、园区、社区提供便捷的绿色出行解决方案。',
|
||||
link: '/solutions/bike'
|
||||
},
|
||||
{
|
||||
title: '共享电单车',
|
||||
icon: 'i-lucide-zap',
|
||||
description: '解决人们最后三公里的出行，促进环保和健康出行...',
|
||||
detail: '解决人们最后三公里的出行，促进环保和健康出行，为城市短途交通提供智能、便捷的电动助力解决方案。',
|
||||
link: '/solutions/ebike'
|
||||
},
|
||||
{
|
||||
title: '共享电动车',
|
||||
icon: 'i-lucide-car',
|
||||
description: '电动车相比续航能力更强，适用于各种出行场景...',
|
||||
detail: '电动车相比续航能力更强，适用于各种出行场景，为城市中长途出行提供高效、可靠的电动交通工具。',
|
||||
link: '/sharedSolutions/eBike'
|
||||
},
|
||||
{
|
||||
title: '共享滑板车',
|
||||
icon: 'i-lucide-scooter',
|
||||
description: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合...',
|
||||
detail: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合现代城市微出行需求，为年轻人提供时尚、灵活的出行选择。',
|
||||
link: '/solutions/skateboard'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 确保所有卡片高度一致 */
|
||||
.group {
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
<template>
|
||||
<div class="bg-gray-50 dark:bg-gray-900 py-16">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<!-- 页面标题 -->
|
||||
<div class="text-center mb-12 px-4">
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
多场景应用
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
通过专业的智能硬件与软件系统开发，解决物联网平台在各类复杂场景下的应用问题
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 场景应用网格 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 px-4">
|
||||
<div
|
||||
v-for="(scene, index) in scenes"
|
||||
:key="index"
|
||||
class="group relative cursor-pointer"
|
||||
@mouseenter="activeScene = index"
|
||||
@mouseleave="activeScene = null"
|
||||
>
|
||||
<!-- 默认卡片 -->
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-300 group-hover:shadow-lg h-full flex flex-col items-center">
|
||||
<!-- 图标区域 -->
|
||||
<div :class="scene.bgColor" class="w-16 h-16 rounded-lg flex items-center justify-center mb-4 mx-auto">
|
||||
<UIcon :class="scene.iconColor" :name="scene.icon" class="w-8 h-8"/>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white text-center mb-4">
|
||||
{{ scene.title }}
|
||||
</h3>
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<ul class="space-y-2 text-center ">
|
||||
<li
|
||||
v-for="(device, deviceIndex) in scene.devices" :key="deviceIndex"
|
||||
class="text-gray-600 dark:text-gray-400 text-sm"
|
||||
>
|
||||
{{ device }}
|
||||
</li>
|
||||
<li class="text-gray-600 dark:text-gray-400 text-sm">...</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮详情卡片 -->
|
||||
<div v-if="activeScene === index" class="absolute top-0 left-0 h-full z-10 flex flex-col items-center">
|
||||
<div :class="scene.hoverBgColor" class="rounded-xl p-6 h-full text-white shadow-xl flex flex-col">
|
||||
<h3 class="text-xl font-semibold mb-4">{{ scene.title }}</h3>
|
||||
<p class="text-sm opacity-90 mb-6 leading-relaxed">
|
||||
{{ scene.description }}
|
||||
</p>
|
||||
|
||||
<UButton
|
||||
class="w-full border-white/30 hover:bg-white/10 transition-colors mt-auto"
|
||||
color="white"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
查看详情
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const activeScene = ref(null)
|
||||
|
||||
const scenes = [
|
||||
{
|
||||
title: '智能家居',
|
||||
icon: 'i-heroicons-home-20-solid',
|
||||
bgColor: 'bg-red-100 dark:bg-red-900/20',
|
||||
iconColor: 'text-red-600 dark:text-red-400',
|
||||
hoverBgColor: 'bg-red-600 dark:bg-red-700',
|
||||
devices: ['智能门锁', '智能空调', '智能电饭煲', '智能窗帘'],
|
||||
description: '通过智能硬件与软件系统集成，实现家居设备的智能化控制和管理，提升生活品质和能源效率。'
|
||||
},
|
||||
{
|
||||
title: '智慧出行',
|
||||
icon: 'i-heroicons-truck-20-solid',
|
||||
bgColor: 'bg-blue-100 dark:bg-blue-900/20',
|
||||
iconColor: 'text-blue-600 dark:text-blue-400',
|
||||
hoverBgColor: 'bg-blue-600 dark:bg-blue-700',
|
||||
devices: ['共享单车', '共享汽车', '共享滑板车', '共享电动车'],
|
||||
description: '提供多样化的共享交通工具解决方案，优化城市出行体验，促进绿色环保和交通效率提升。'
|
||||
},
|
||||
{
|
||||
title: '智慧医疗',
|
||||
icon: 'i-heroicons-heart-20-solid',
|
||||
bgColor: 'bg-green-100 dark:bg-green-900/20',
|
||||
iconColor: 'text-green-600 dark:text-green-400',
|
||||
hoverBgColor: 'bg-green-600 dark:bg-green-700',
|
||||
devices: ['共享陪护床', '智能安防', '共享打印机', '共享充电宝'],
|
||||
description: '为医疗机构提供智能化设备和共享服务解决方案，改善患者体验，提升医疗服务质量和管理效率。'
|
||||
},
|
||||
{
|
||||
title: '智慧园区',
|
||||
icon: 'i-heroicons-building-office-20-solid',
|
||||
bgColor: 'bg-purple-100 dark:bg-purple-900/20',
|
||||
iconColor: 'text-purple-600 dark:text-purple-400',
|
||||
hoverBgColor: 'bg-purple-600 dark:bg-purple-700',
|
||||
devices: ['智能自提柜', '共享健身房', '共享洗衣机', '智能门禁'],
|
||||
description: '为园区提供智能化基础设施和共享服务，打造高效、便捷、智能的园区生活环境和工作环境。'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 确保所有卡片高度一致 */
|
||||
.group {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保卡片不贴边 */
|
||||
.container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
<template>
|
||||
<div class="bg-white dark:bg-gray-900 py-16">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<!-- 页面标题 -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
软件应用开发
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
专业移动端与微信生态应用开发服务
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 开发平台网格 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div
|
||||
v-for="(platform, index) in platforms"
|
||||
:key="index"
|
||||
class="group relative cursor-pointer"
|
||||
@mouseenter="activePlatform = index"
|
||||
@mouseleave="activePlatform = null"
|
||||
>
|
||||
<!-- 默认卡片 -->
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-300 group-hover:shadow-lg h-full flex flex-col items-center">
|
||||
<!-- 红色六边形图标背景 -->
|
||||
<div
|
||||
class="w-20 h-20 bg-red-100 dark:bg-red-900/20 rounded-xl flex items-center justify-center mb-6 relative">
|
||||
<!-- 六边形装饰 -->
|
||||
<div class="absolute inset-0 border-2 border-red-200 dark:border-red-800 rounded-xl rotate-45"/>
|
||||
<!-- 平台图标 -->
|
||||
<UIcon :name="platform.icon" class="w-10 h-10 text-red-600 dark:text-red-400 z-10"/>
|
||||
</div>
|
||||
|
||||
<!-- 平台名称 -->
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white text-center mb-4">
|
||||
{{ platform.title }}
|
||||
</h3>
|
||||
|
||||
<!-- 平台描述 -->
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 text-center leading-relaxed flex-1">
|
||||
{{ platform.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮详情卡片 -->
|
||||
<div v-if="activePlatform === index" class="absolute top-0 left-0 w-full h-full z-10">
|
||||
<div
|
||||
class="bg-red-600 dark:bg-red-700 rounded-xl p-6 h-full text-white shadow-xl flex flex-col items-center">
|
||||
<!-- 悬浮图标 -->
|
||||
<div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
|
||||
<UIcon :name="platform.icon" class="w-8 h-8 text-white"/>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold text-center mb-4">{{ platform.title }}</h3>
|
||||
<p class="text-sm opacity-90 text-center mb-6 leading-relaxed flex-1">
|
||||
{{ platform.detailedDescription }}
|
||||
</p>
|
||||
|
||||
<UButton
|
||||
class="w-full border-white/30 hover:bg-white/10 transition-colors"
|
||||
color="white"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
立即咨询
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const activePlatform = ref(null)
|
||||
|
||||
const platforms = [
|
||||
{
|
||||
title: 'iOS开发',
|
||||
icon: 'i-simple-icons-apple',
|
||||
description: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。',
|
||||
detailedDescription: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。我们拥有丰富的iOS开发经验，能够为企业提供定制化的移动应用解决方案。'
|
||||
},
|
||||
{
|
||||
title: 'Android开发',
|
||||
icon: 'i-simple-icons-android',
|
||||
description: '针对主流的Android系统，提供一站式APP咨询、策划、开发服务。',
|
||||
detailedDescription: '针对主流的Android系统，提供一站式APP咨询、策划、开发服务。覆盖各类Android设备，确保应用在不同屏幕尺寸和系统版本上的完美运行。'
|
||||
},
|
||||
{
|
||||
title: '微信开发',
|
||||
icon: 'i-simple-icons-wechat',
|
||||
description: '针对企业需求提供专业微信公众平台开发服务。',
|
||||
detailedDescription: '针对企业需求提供专业微信公众平台开发服务。包括公众号、小程序、企业微信等微信生态产品的定制开发与集成。'
|
||||
},
|
||||
{
|
||||
title: '小程序开发',
|
||||
icon: 'i-simple-icons-miniprogram',
|
||||
description: '无需安装APP，就可以带来更流畅快速的体验。',
|
||||
detailedDescription: '无需安装APP，就可以带来更流畅快速的体验。提供轻量级应用解决方案，降低用户使用门槛，提升用户体验。'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 确保所有卡片高度一致 */
|
||||
.group {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,211 +0,0 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative py-16 md:py-24 lg:py-32 overflow-hidden">
|
||||
<!-- 背景图片 -->
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
alt="技术背景"
|
||||
class=" w-full h-full object-cover opacity-20 dark:opacity-10"
|
||||
src="https://picsum.photos/1920/1080?random=tech-background"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-blue-50/80 to-indigo-100/80 dark:from-gray-900/80 dark:to-gray-800/80"/>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
{{ pageData.mainTitle }}
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
{{ pageData.subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品展示区域 -->
|
||||
<section class="py-16 md:py-20 lg:py-24">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<!-- 主内容卡片 -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl overflow-hidden">
|
||||
<div class="p-8 md:p-12 lg:p-16">
|
||||
|
||||
<!-- 产品列表 -->
|
||||
<div class="space-y-16 md:space-y-20">
|
||||
<div
|
||||
v-for="(product, index) in pageData.products"
|
||||
:key="product.id"
|
||||
class="group"
|
||||
>
|
||||
<!-- 产品项目 -->
|
||||
<div
|
||||
:class="{ 'lg:grid-flow-col-dense': index % 2 === 1 }"
|
||||
class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
|
||||
|
||||
<!-- 产品图片 -->
|
||||
<div
|
||||
:class="{ 'lg:order-2': index % 2 === 1 }"
|
||||
class="relative order-2 lg:order-1"
|
||||
>
|
||||
<div class="relative overflow-hidden rounded-2xl bg-gray-100 dark:bg-gray-700 p-8">
|
||||
<img
|
||||
:alt="product.image.alt"
|
||||
:src="product.image.src"
|
||||
class="w-full h-64 md:h-80 object-contain transition-transform duration-300 group-hover:scale-105"
|
||||
>
|
||||
<!-- 装饰性背景 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-blue-100/50 to-indigo-200/50 dark:from-blue-900/30 dark:to-indigo-800/30 rounded-2xl"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品信息 -->
|
||||
<div
|
||||
:class="{ 'lg:order-1': index % 2 === 1 }"
|
||||
class="order-1 lg:order-2"
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<!-- 产品标题 -->
|
||||
<h3 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">
|
||||
{{ product.title }}
|
||||
</h3>
|
||||
|
||||
<!-- 产品描述 -->
|
||||
<div class="space-y-4">
|
||||
<p
|
||||
v-for="(paragraph, pIndex) in product.description"
|
||||
:key="pIndex"
|
||||
class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed"
|
||||
>
|
||||
{{ paragraph }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 产品特性 -->
|
||||
<div v-if="product.features" class="space-y-3">
|
||||
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">主要特性：</h4>
|
||||
<ul class="space-y-2">
|
||||
<li
|
||||
v-for="feature in product.features"
|
||||
:key="feature"
|
||||
class="flex items-start space-x-3"
|
||||
>
|
||||
<UIcon
|
||||
class="w-5 h-5 text-green-500 dark:text-green-400 mt-0.5 flex-shrink-0"
|
||||
name="i-lucide-check-circle"
|
||||
/>
|
||||
<span class="text-gray-600 dark:text-gray-300">{{ feature }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 了解更多按钮 -->
|
||||
<div class="pt-4">
|
||||
<NuxtLink
|
||||
:to="pageData.learnMoreButton.link"
|
||||
class="inline-flex items-center space-x-2 px-6 py-3 bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-semibold rounded-lg transition-colors duration-200 shadow-lg hover:shadow-xl"
|
||||
>
|
||||
<span>{{ pageData.learnMoreButton.text }}</span>
|
||||
<UIcon
|
||||
class="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1"
|
||||
name="i-lucide-arrow-right"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 页面数据配置
|
||||
const pageData = {
|
||||
mainTitle: '联网智能硬件',
|
||||
subtitle: '专业智能锁具与联网控制器解决方案，为传统设备提供智能化升级服务',
|
||||
products: [
|
||||
{
|
||||
id: 'smart-lock',
|
||||
title: '锁',
|
||||
image: {
|
||||
src: 'https://picsum.photos/600/400?random=smart-lock',
|
||||
alt: '智能锁'
|
||||
},
|
||||
description: [
|
||||
'N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。',
|
||||
'GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏(延伸)，远程授权自动开锁，支持应急开锁(延伸)，支持短信远程修改相关参数。'
|
||||
],
|
||||
features: [
|
||||
'蓝牙4.0通讯技术，秒连接秒解锁',
|
||||
'GPS+移动基站LBS多重精准定位',
|
||||
'蓝牙低功耗待机，延长电池寿命',
|
||||
'轨迹记录，电子围栏功能',
|
||||
'远程授权自动开锁',
|
||||
'支持应急开锁和短信远程修改参数'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'network-controller',
|
||||
title: '联网控制器',
|
||||
image: {
|
||||
src: 'https://picsum.photos/600/400?random=network-controller',
|
||||
alt: '联网控制器'
|
||||
},
|
||||
description: [
|
||||
'通过改造传统传感器/PLC/变频器等实现快速联接(无需部署新设备)。',
|
||||
'通过灵活部署，快速形成各领域的物联网解决方案;有效降低用户改造、部署、维护成本。'
|
||||
],
|
||||
features: [
|
||||
'快速联接传统传感器/PLC/变频器',
|
||||
'无需部署新设备，降低改造成本',
|
||||
'灵活部署，适应各种应用场景',
|
||||
'快速形成物联网解决方案',
|
||||
'有效降低部署和维护成本',
|
||||
'支持多种工业设备接入'
|
||||
]
|
||||
}
|
||||
],
|
||||
learnMoreButton: {
|
||||
text: '了解更多',
|
||||
link: '/products/smart-hardware'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 响应式图片调整 */
|
||||
@media (max-width: 640px) {
|
||||
.object-contain {
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) and (max-width: 768px) {
|
||||
.object-contain {
|
||||
height: 16rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬停效果增强 */
|
||||
.group:hover .group-hover\:scale-105 {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 平滑过渡 */
|
||||
* {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,440 +1,152 @@
|
|||
<script lang="ts" setup>
|
||||
// 智能控制器功能特性
|
||||
const controllerFeatures = [
|
||||
{
|
||||
icon: 'i-lucide-bluetooth',
|
||||
title: '蓝牙GPRS双通道解锁',
|
||||
description: '支持蓝牙和GPRS双重通信，确保解锁稳定可靠'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-key-round',
|
||||
title: '一键启动、无需钥匙',
|
||||
description: '智能启动系统，告别传统钥匙，操作更便捷'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-map-pin',
|
||||
title: '卫星定位、精准跟踪',
|
||||
description: 'GPS定位技术，实时掌握车辆位置信息'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-shield-alert',
|
||||
title: '防盗报警、不怕丢失',
|
||||
description: '智能防盗系统，异常情况及时报警通知'
|
||||
}
|
||||
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'
|
||||
]
|
||||
|
||||
// 快速定制服务
|
||||
const customizationServices = [
|
||||
{
|
||||
icon: 'i-lucide-smartphone',
|
||||
title: '独立APP定制',
|
||||
description: '15个工作日完成独立应用上线'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-zap',
|
||||
title: '小程序开发',
|
||||
description: '快速定制微信小程序解决方案'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-settings',
|
||||
title: '一键管理',
|
||||
description: '品牌信息一键管理，操作简单便捷'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-clock',
|
||||
title: '快速交付',
|
||||
description: '高效开发流程，确保项目按时交付'
|
||||
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/main.css',
|
||||
'/css/Internet_Things.css',
|
||||
'/css/yuxi2019.css'
|
||||
]
|
||||
|
||||
// 用户端功能
|
||||
const userFeatures = [
|
||||
{
|
||||
icon: 'i-lucide-battery',
|
||||
title: '智能电量计算',
|
||||
description: '精准计算剩余电量，合理安排出行'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-key',
|
||||
title: '智能无钥匙启停',
|
||||
description: '手机一键启动，告别传统钥匙'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-map',
|
||||
title: '实时定位轨迹查询',
|
||||
description: '实时查看车辆位置，历史轨迹一目了然'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-shield',
|
||||
title: '智能防盗',
|
||||
description: '多重防盗保护，车辆安全有保障'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-users',
|
||||
title: '车主授权家庭共享',
|
||||
description: '支持家庭成员共享使用，权限管理灵活'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-search',
|
||||
title: '一键寻车',
|
||||
description: '快速定位车辆位置，找车不再困难'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-lock',
|
||||
title: '远程设防撤防',
|
||||
description: '远程控制车辆状态，安全便捷'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-gauge',
|
||||
title: '速度检测',
|
||||
description: '实时监测行驶速度，安全驾驶提醒'
|
||||
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)
|
||||
}
|
||||
]
|
||||
|
||||
// 管理平台功能
|
||||
const managementFeatures = [
|
||||
{
|
||||
icon: 'i-lucide-monitor',
|
||||
title: '实时车辆监控',
|
||||
description: '全方位监控车辆状态，数据实时更新'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-bell',
|
||||
title: '智能异常报警',
|
||||
description: '异常情况自动报警，及时处理问题'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-remote',
|
||||
title: '远程车辆控制',
|
||||
description: '远程控制车辆功能，管理更高效'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-database',
|
||||
title: '用户数据查看',
|
||||
description: '详细用户数据分析，支持决策制定'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-cog',
|
||||
title: '智能服务设置',
|
||||
description: '灵活配置服务参数，满足不同需求'
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-user-check',
|
||||
title: '权限管理',
|
||||
description: '多级权限管理，确保系统安全'
|
||||
})
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-gray-50 dark:bg-gray-900">
|
||||
<!-- Hero Section - 创特科技倾心打造 -->
|
||||
<section class="py-16 md:py-20 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- 电动车图片 -->
|
||||
<div class="relative">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
|
||||
<img
|
||||
alt="智能电动车"
|
||||
class="w-full h-64 md:h-80 object-cover rounded-lg"
|
||||
src="https://picsum.photos/600/400?random=electric-scooter"
|
||||
>
|
||||
<div class="internet_Things_car ">
|
||||
<!-- item1 物联网系统开发 -->
|
||||
<div class="item1">
|
||||
<!-- <h5>创特科技倾心打造</h5>
|
||||
<h2>APP+智能中控+数据采集+云储存 </h2>
|
||||
<h4>电动车智能改造，建立智慧出行生态圈</h4> -->
|
||||
</div>
|
||||
|
||||
|
||||
<!--item2 APP/微信/小程序用户端 -->
|
||||
<div class="container itemImage">
|
||||
<div class="row item2 text-center">
|
||||
<h4>智慧电动车解决方案</h4>
|
||||
<div class="col-xs-12 col-lg-4">
|
||||
<img alt="" src="/img/img/internet_thinks/bitmap%402x.png">
|
||||
<div class="device">传统电动车</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-lg-4">
|
||||
<img alt="" src="/img/img/internet_thinks/bitmap%402x(1).png">
|
||||
<div class="device">智能中控</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-lg-4">
|
||||
<img alt="" src="/img/img/internet_thinks/bitmap%402x(2).png">
|
||||
<div class="device">系统软件</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文字内容 -->
|
||||
<div class="text-center lg:text-left">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
创特科技倾心打造
|
||||
</h1>
|
||||
<div class="text-2xl md:text-3xl font-semibold text-red-600 dark:text-red-400 mb-4">
|
||||
APP+智能中控+数据采集+云储存
|
||||
|
||||
<!-- item3 PC管理端 -->
|
||||
<div class="container-fluid">
|
||||
<div class="row item3">
|
||||
<div class="col-xs-12 col-lg-3 col-lg-offset-7">
|
||||
<h2>一个配件实现车辆智能化</h2>
|
||||
<p>
|
||||
为车厂量身打造，对电动车隐蔽加装智能控制器，增加智能防盗功能，智能控制器是系统核心，具备车辆定位信息采集、数据双向传输等功能通过，联动电动车控制系统和BMS电池系统实现各应用功能。</p>
|
||||
<ul>
|
||||
<li>蓝牙GPRS双通道解锁</li>
|
||||
<li>一键启动、无需钥匙</li>
|
||||
<li>卫星定位、精准跟踪</li>
|
||||
<li>防盗报警、不怕丢失</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
电动车智能改造，建立智慧出行生态圈
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--item2 APP/微信/小程序用户端 -->
|
||||
<div class="container">
|
||||
<div class="row itemOne text-center">
|
||||
<div class="col-xs-12 col-lg-3 col-lg-offset-5">
|
||||
<h4>快速定制能力实现品牌运营</h4>
|
||||
<p>独立app/小程序快速定制，15个工作日完成独立应用上线，一键管理品牌信息。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--item2 APP/微信/小程序用户端 -->
|
||||
<div class="container">
|
||||
<div class="row itemTwo text-center">
|
||||
<div class="col-xs-12 col-lg-6 ">
|
||||
<div class="col-xs-12 col-lg-3 col-lg-offset-1 textTitle">
|
||||
<h4 style="text-align: left;"><span>智能电动车 </span><span class="textColor">小程序/APP</span></h4>
|
||||
<p style="width: 300px;">为用户提供智能电量精算、智能无钥匙启动/关闭、实时定位、轨迹查询、智能防盗、车主授权全家共享使用车、一键寻车、远程设防撤防和检测车速等功能
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 智慧电动车解决方案三部分 -->
|
||||
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
智慧电动车解决方案
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300">
|
||||
从传统电动车到智能出行生态的完整解决方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- 传统电动车 -->
|
||||
<div class="text-center bg-gray-50 dark:bg-gray-700 rounded-2xl p-8">
|
||||
<div class="mb-6">
|
||||
<img
|
||||
alt="传统电动车"
|
||||
class="w-full h-48 object-cover rounded-lg mx-auto"
|
||||
src="https://picsum.photos/300/200?random=traditional-scooter"
|
||||
>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
传统电动车
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300">
|
||||
基础出行工具，功能单一，缺乏智能化
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 智能中控 -->
|
||||
<div class="text-center bg-gray-50 dark:bg-gray-700 rounded-2xl p-8">
|
||||
<div class="mb-6">
|
||||
<img
|
||||
alt="智能中控"
|
||||
class="w-full h-48 object-cover rounded-lg mx-auto"
|
||||
src="https://picsum.photos/300/200?random=smart-controller"
|
||||
>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
智能中控
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300">
|
||||
核心控制单元，实现车辆智能化升级
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 系统软件 -->
|
||||
<div class="text-center bg-gray-50 dark:bg-gray-700 rounded-2xl p-8">
|
||||
<div class="mb-6">
|
||||
<img
|
||||
alt="系统软件"
|
||||
class="w-full h-48 object-cover rounded-lg mx-auto"
|
||||
src="https://picsum.photos/300/200?random=system-software"
|
||||
>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
系统软件
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300">
|
||||
管理平台和用户端应用，完整生态闭环
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一个配件实现车辆智能化 -->
|
||||
<section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- 图片区域 -->
|
||||
<div class="relative flex justify-center items-center min-h-[400px]">
|
||||
<div class="relative">
|
||||
<img
|
||||
alt="电动车智能控制器"
|
||||
class="max-w-full h-auto rounded-lg shadow-xl"
|
||||
src="https://picsum.photos/500/400?random=scooter-controller"
|
||||
>
|
||||
<!-- 信号效果 -->
|
||||
<div class="absolute inset-0 flex justify-center items-center">
|
||||
<div class="absolute w-48 h-48 rounded-full border border-red-300 animate-ping-slow"/>
|
||||
<div class="absolute w-64 h-64 rounded-full border border-red-300 animate-ping-slow delay-100"/>
|
||||
<div class="absolute w-80 h-80 rounded-full border border-red-300 animate-ping-slow delay-200"/>
|
||||
<!-- 核心组件 -->
|
||||
<div
|
||||
class="absolute w-16 h-16 bg-red-600 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-lg">
|
||||
芯
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文字内容 -->
|
||||
<div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
一个配件实现车辆智能化
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
|
||||
为车厂量身打造，对电动车隐蔽加装智能控制器，增加智能防盗功能。智能控制器是系统核心，具备车辆定位信息采集、数据双向传输等功能，通过联动电动车控制系统和BMS电池系统实现各应用功能。
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div
|
||||
v-for="feature in controllerFeatures"
|
||||
:key="feature.title"
|
||||
class="flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm"
|
||||
>
|
||||
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3 flex-shrink-0 mt-1"/>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">{{ feature.title }}</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">{{ feature.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 快速定制能力 -->
|
||||
<section class="py-16 md:py-20 bg-white dark:bg-gray-800">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- 文字内容 -->
|
||||
<div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
快速定制能力实现品牌运营
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
|
||||
独立APP/小程序快速定制，15个工作日完成独立应用上线，一键管理品牌信息。
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div
|
||||
v-for="service in customizationServices"
|
||||
:key="service.title"
|
||||
class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
|
||||
>
|
||||
<UIcon :name="service.icon" class="w-6 h-6 text-green-600 dark:text-green-400 mr-3 flex-shrink-0 mt-1"/>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">{{ service.title }}</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">{{ service.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片区域 -->
|
||||
<div class="relative">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<img
|
||||
alt="电动车前部"
|
||||
class="w-full h-48 object-cover rounded-lg shadow-lg"
|
||||
src="https://picsum.photos/300/200?random=scooter-front"
|
||||
>
|
||||
<img
|
||||
alt="电动车后部"
|
||||
class="w-full h-48 object-cover rounded-lg shadow-lg"
|
||||
src="https://picsum.photos/300/200?random=scooter-rear"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 智能电动车小程序/APP 和 管理平台 -->
|
||||
<section class="py-16 md:py-20 bg-gray-50 dark:bg-gray-900">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
完整解决方案
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300">
|
||||
用户端与管理端双平台，构建完整智能出行生态
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<!-- 用户端 - 小程序/APP -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
|
||||
<div class="text-center mb-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
智能电动车
|
||||
<span class="text-red-600 dark:text-red-400">小程序/APP</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- 手机界面模拟 -->
|
||||
<div class="relative mx-auto w-64 h-96 bg-black rounded-3xl p-2 mb-8">
|
||||
<div class="w-full h-full bg-white rounded-2xl overflow-hidden">
|
||||
<div class="h-8 bg-gray-100 flex items-center justify-center">
|
||||
<div class="w-16 h-1 bg-gray-300 rounded-full"/>
|
||||
</div>
|
||||
<div class="p-4 h-full bg-gradient-to-b from-red-50 to-white">
|
||||
<div class="text-right mb-4">
|
||||
<UButton color="gray" size="xs" variant="outline">登录</UButton>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-32 h-32 mx-auto mb-4 bg-red-500 rounded-lg flex items-center justify-center">
|
||||
<UIcon class="w-16 h-16 text-white" name="i-lucide-zap"/>
|
||||
</div>
|
||||
<h4 class="text-lg font-semibold text-gray-900">智能电动车</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能列表 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div
|
||||
v-for="feature in userFeatures"
|
||||
:key="feature.title"
|
||||
class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
|
||||
>
|
||||
<UIcon :name="feature.icon" class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0"/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-200">{{ feature.title }}</span>
|
||||
<div class="col-xs-12 col-lg-6 textContent">
|
||||
<img alt="" src="/img/img/internet_thinks/1%203%402x.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 管理端 - 管理平台 -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
|
||||
<div class="text-center mb-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
智能电动车
|
||||
<span class="text-red-600 dark:text-red-400">管理平台</span>
|
||||
</h3>
|
||||
<!--item2 APP/微信/小程序用户端 -->
|
||||
<div class="container">
|
||||
<div class="row itemTwo itemContent text-center">
|
||||
<div class="col-xs-12 col-lg-6 ">
|
||||
<img alt="" src="/img/img/internet_thinks/1%203%402x(1).png">
|
||||
</div>
|
||||
<div class="col-xs-12 col-lg-6 ">
|
||||
<div class="col-xs-24 col-lg-12 col-lg-offset-1 textTitle">
|
||||
<h4 style="text-align: left;"><span>智能电动车 </span><span class="textColor">管理平台</span></h4>
|
||||
<p style="width: 300px;">
|
||||
为车厂提供实时车辆监控、智能异常报警信息查看、远程操控车辆、用户数据查看、智能服务设置和权限管理等功能</p>
|
||||
</div>
|
||||
|
||||
<!-- 电脑界面模拟 -->
|
||||
<div class="relative mx-auto w-80 h-48 bg-gray-200 rounded-lg p-2 mb-8">
|
||||
<div class="w-full h-full bg-white rounded shadow-inner overflow-hidden">
|
||||
<!-- 侧边栏 -->
|
||||
<div class="flex h-full">
|
||||
<div class="w-20 bg-gray-100 p-2">
|
||||
<div class="space-y-2">
|
||||
<div class="w-6 h-6 bg-blue-500 rounded mb-1"/>
|
||||
<div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
|
||||
<div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
|
||||
<div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
|
||||
<div class="w-6 h-6 bg-gray-300 rounded mb-1"/>
|
||||
<div class="w-6 h-6 bg-gray-300 rounded"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主内容区 -->
|
||||
<div class="flex-1 p-3">
|
||||
<div class="h-4 bg-gray-200 rounded mb-2"/>
|
||||
<div class="h-4 bg-gray-200 rounded mb-2 w-3/4"/>
|
||||
<div class="space-y-1">
|
||||
<div class="h-3 bg-gray-100 rounded"/>
|
||||
<div class="h-3 bg-gray-100 rounded"/>
|
||||
<div class="h-3 bg-gray-100 rounded w-5/6"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能列表 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div
|
||||
v-for="feature in managementFeatures"
|
||||
:key="feature.title"
|
||||
class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
|
||||
>
|
||||
<UIcon :name="feature.icon" class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0"/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-200">{{ feature.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
333
app/components/sharedSolutions/eBike/index.vue
Normal file
333
app/components/sharedSolutions/eBike/index.vue
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
<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/main.css',
|
||||
'/css/ebikes.css',
|
||||
'/css/yuxi2019.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">
|
||||
|
||||
|
||||
<!--
|
||||
item1
|
||||
创特共享电动车整体解决方案提供商
|
||||
-->
|
||||
<!-- <div class="container-fluid"> -->
|
||||
<div class="item1">
|
||||
<!-- item1_2 -->
|
||||
<div class="head hidden-xs">创特共享电动车整体解决方案提供商</div>
|
||||
<div class="contents">
|
||||
<div class="contents_1 hidden-xs">专业提供“共享电动车+智能硬件+多平台开发+运维管理”一站式服务</div>
|
||||
<div class="contents_2">
|
||||
专注于智慧出行，打造“共享出行”顶级方案。现已面向共享电动车、共享电池行业提供包含智能硬件+APP+云存储的全套解决方案。
|
||||
</div>
|
||||
</div>
|
||||
<a class="mores" href="http://p.qiao.baidu.com//im/index?siteid=8233756&ucid=7539873">了解更多</a>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
|
||||
<!--item2 共享电动车解决方案 -->
|
||||
<div class="container">
|
||||
<div class="row item2 text-center">
|
||||
<h2>共享电动车解决方案</h2>
|
||||
|
||||
<div class="col-xs-6 col-lg-3">
|
||||
<!-- <a class="list-item"> -->
|
||||
<img alt="定制化共享电动车" class="img-responsive center-block" src="/img/img/ebike/item2-1.png">
|
||||
<span>定制化共享电动车</span>
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-lg-3">
|
||||
<!-- <a class="list-item"> -->
|
||||
<img alt="专业级IOT物联网设备" class="img-responsive center-block" src="/img/img/ebike/item2-2.png">
|
||||
<span>专业级IOT物联网设备</span>
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-lg-3">
|
||||
<!-- <a class="list-item"> -->
|
||||
<img alt="多平台APP快速开发" class="img-responsive center-block" src="/img/img/ebike/item2-3.png">
|
||||
<span>多平台APP快速开发</span>
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-lg-3">
|
||||
<!-- <a class="list-item"> -->
|
||||
<img alt="专业级运营管理平台" class="img-responsive center-block" src="/img/img/ebike/item2-4.png">
|
||||
<span>专业级运营管理平台</span>
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--item5 共享电动车+物联网设备 -->
|
||||
<div style="background: #FAFAFA;">
|
||||
<div class="container">
|
||||
<div class="row item5">
|
||||
<h2 class="text-center">共享电动车+物联网设备</h2>
|
||||
<!-- <h4>提供共享电动车系统全网开发服务</h4> -->
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-2 col-lg-offset-1">
|
||||
<div class="mini-group">
|
||||
<img alt="物联网设备数据传输" class="img-responsive center-block" src="/img/img/ebike/item5-1.png">
|
||||
<span>物联网设备数据传输</span>
|
||||
<p>通过联网中控及车载控制器设备实现</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-2">
|
||||
<!-- <a class="list-item"> -->
|
||||
<div class="mini-group">
|
||||
<img alt="防水防盗防高温" class="img-responsive center-block" src="/img/img/ebike/item5-2.png">
|
||||
<span>防水防盗防高温</span>
|
||||
<p>车辆及设备采用防水式设计、材料采用防高温材料，并加载智能防盗系统</p>
|
||||
</div>
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-2">
|
||||
<!-- <a class="list-item"> -->
|
||||
<div class="mini-group">
|
||||
<img alt="出骑行区提醒" class="img-responsive center-block" src="/img/img/ebike/item5-3.png">
|
||||
<span>出骑行区提醒</span>
|
||||
<p>车辆出骑行区，车辆喇叭自动发出语音提醒，若不按语音要求返回则车辆自动断电</p>
|
||||
</div>
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-2">
|
||||
<!-- <a class="list-item"> -->
|
||||
<div class="mini-group">
|
||||
<img alt="在线寻车" class="img-responsive center-block" src="/img/img/ebike/item5-4.png">
|
||||
<span>在线寻车</span>
|
||||
<p>根据车辆定位及电量信息，可在线查找最合适的可骑行车辆</p>
|
||||
</div>
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-2">
|
||||
<!-- <a class="list-item"> -->
|
||||
<div class="mini-group">
|
||||
<img alt="规范停车区" class="img-responsive center-block" src="/img/img/ebike/item5-5.png">
|
||||
<span>规范停车区</span>
|
||||
<p>通过运营管理平台设置停车区，若用户不在停车区内停车，则需额外支付车辆调度费</p>
|
||||
</div>
|
||||
<!-- </a> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--item6 共享电动车APP/小程序 -->
|
||||
<div class="container">
|
||||
<div class="row item6">
|
||||
|
||||
<h2 class="text-center">共享电动车APP/小程序</h2>
|
||||
<div class="col-xs-12 col-lg-4">
|
||||
<img alt="共享电动车APP" class="img-responsive center-block" src="/img/img/ebike/item6-1.png">
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-lg-4">
|
||||
<div class="mini-group">
|
||||
<img alt="实名认证用车" class="img-responsive center-block" src="/img/img/ebike/item6-1i.png">
|
||||
<p>
|
||||
<span>实名认证用车</span>
|
||||
<span>通过实名认证，预防用户骑走车辆不归还及解决国家规定未满16周岁不能用车问题</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mini-group">
|
||||
<img alt="一键预约用车" class="img-responsive center-block" src="/img/img/ebike/item6-2i.png">
|
||||
<p>
|
||||
<span>一键预约用车</span>
|
||||
<span>选择合适车辆，一键预约车辆</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mini-group">
|
||||
<img alt="免押金卡骑行" class="img-responsive center-block" src="/img/img/ebike/item6-3i.png">
|
||||
<p>
|
||||
<span>免押金卡骑行</span>
|
||||
<span>考虑支付宝免押对接困难及用户不愿缴纳高额押金问题提出免押金卡方案，解决问题并增加额外收入</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mini-group">
|
||||
<img alt="用车前确认续航里程" class="img-responsive center-block" src="/img/img/ebike/item6-4i.png">
|
||||
<p>
|
||||
<span>用车前确认续航里程</span>
|
||||
<span>扫码用车弹出车辆当前可续航里程信息，用户根据该信息判断是否满足自身骑行要求</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-lg-4">
|
||||
<div class="mini-group">
|
||||
<img alt="时间+里程精准计费" class="img-responsive center-block" src="/img/img/ebike/item6-5i.png">
|
||||
<p>
|
||||
<span>时间+里程精准计费</span>
|
||||
<span>根据用车时间及车辆轮转里程精准计费</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mini-group">
|
||||
<img alt="临时停车" class="img-responsive center-block" src="/img/img/ebike/item6-6i.png">
|
||||
<p>
|
||||
<span>临时停车</span>
|
||||
<span>临时有事，一键临时停车，锁车不结束订单。忘记还车，系统自动还车。</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mini-group">
|
||||
<img alt="一键关锁结账" class="img-responsive center-block" src="/img/img/ebike/item6-7i.png">
|
||||
<p>
|
||||
<span>一键关锁结账</span>
|
||||
<span>手机一键关锁，系统自动结账</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mini-group">
|
||||
<img alt="多种支付方式" class="img-responsive center-block" src="/img/img/ebike/item6-8i.png">
|
||||
<p>
|
||||
<span>多种支付方式</span>
|
||||
<span>支持微信、支付宝等多种支付方式</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--item7 运营管理平台 -->
|
||||
<div class="container-fluid">
|
||||
<div class="row item7 text-center">
|
||||
<h2>运营管理平台</h2>
|
||||
<div class="sys-pice"><img
|
||||
alt="运营管理平台" class="img-responsive center-block"
|
||||
src="/img/img/ebike/item7-1.png">
|
||||
</div>
|
||||
<div class="col-xs-6 col-lg-2 col-lg-offset-2">
|
||||
<div class="mini-group">
|
||||
<img alt="实时车辆监控" class="img-responsive center-block" src="/img/img/ebike/item7-1i.png">
|
||||
<span>实时车辆监控</span>
|
||||
<p>运营平台大屏幕展示车辆的分布及状态</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-lg-2">
|
||||
<div class="mini-group">
|
||||
<img alt="智能异常报警" class="img-responsive center-block" src="/img/img/ebike/item7-2i.png">
|
||||
<span>智能异常报警</span>
|
||||
<p>车辆发生异常问题，运营平台发生警报</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-lg-2">
|
||||
<div class="mini-group">
|
||||
<img alt="规范骑行、停车区域" class="img-responsive center-block" src="/img/img/ebike/item7-3i.png">
|
||||
<span>规范骑行、停车区域</span>
|
||||
<p>运营平台设置骑行、停车区域运营平台设置骑行、停车电子围栏，规范用户用车，节约运维成本</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-lg-2">
|
||||
<div class="mini-group">
|
||||
<img alt="运营数据" class="img-responsive center-block" src="/img/img/ebike/item7-4i.png">
|
||||
<span>运营数据</span>
|
||||
<p>运营数据云储存，百万量级数据实时查询</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-xs-6 col-lg-2 col-lg-offset-2">
|
||||
<div class="mini-group">
|
||||
<img alt="运维数据" class="img-responsive center-block" src="/img/img/ebike/item7-5i.png">
|
||||
<span>运维数据</span>
|
||||
<p>运维数据实时上报，绩效考核有依据</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-lg-2">
|
||||
<div class="mini-group">
|
||||
<img alt="快速签署代理" class="img-responsive center-block" src="/img/img/ebike/item7-6i.png">
|
||||
<span>快速签署代理</span>
|
||||
<p>加盟商、代理商快速进入系统</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-lg-2">
|
||||
<div class="mini-group">
|
||||
<img alt="财务管理" class="img-responsive center-block" src="/img/img/ebike/item7-7i.png">
|
||||
<span>财务管理</span>
|
||||
<p>财务报表实时统计查询，财务清晰有记录</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-lg-2">
|
||||
<div class="mini-group">
|
||||
<img alt="权限管理" class="img-responsive center-block" src="/img/img/ebike/item7-8i.png">
|
||||
<span>权限管理</span>
|
||||
<p>根据公司员工岗位职责，自定义设置系统权限</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- over --> <!-- over -->
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <AppHeader/>-->
|
||||
<Navigation/>
|
||||
<slot/>
|
||||
<DevelopNews/>
|
||||
<BottomNavigation/>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 使用正确的导航组件 -->
|
||||
<Navigation/>
|
||||
|
||||
|
||||
<!-- <YuxiCarousel/>-->
|
||||
<!-- <IndexCarousel/>-->
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
<script lang="ts" setup>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<SharedSolutionsEBikeItem1/>
|
||||
<SharedSolutionsEBikeItem2/>
|
||||
<SharedSolutionsEBikeItem3/>
|
||||
<SharedSolutionsEBikeItem4/>
|
||||
<SharedSolutionsEBikeItem5/>
|
||||
|
||||
<SharedSolutionsEBike/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
BIN
public/img/img/internet_thinks/1081759.png
Normal file
BIN
public/img/img/internet_thinks/1081759.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Loading…
Reference in New Issue
Block a user