WindowBird/ct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

基础页面整改完毕

Browse Source
This commit is contained in:
WindowBird 2025-10-09 13:49:17 +08:00
parent 4ef4b5cef7
commit a643957589
15 changed files with 2163 additions and 588 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/components/DevelopNews.vue
View File

@ -1,3 +1,52 @@
<script lang="ts" setup>
import {onMounted} from "vue";
onMounted(() => {
// 加载CSS样式文件
loadCSSFiles()
// 加载JavaScript文件
loadJSFiles()
})
const loadJSFiles = () => {
const jsFiles = [
'/js/news.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 = []
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>
<!--box3 新闻-->
<!-- <div style="background: #fafafa;"> -->

663
app/components/IoTSolutions/applicationCustomization/index.vue
View File

@ -1,588 +1,157 @@
<script lang="ts" setup>
// 物联网系统开发数据
const iotSystemDevelopment = {
title: '物联网系统开发',
subtitle: '一站式物联网解决方案提供，携手搭建物联网生态圈',
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/index.js',
'/js/news.js',
'/js/gopcOm.js'
// APP/微信/小程序用户端功能
const userClientFeatures = [
{
id: 1,
title: '蓝牙连接',
icon: 'i-lucide-bluetooth',
description: '通过蓝牙连接完成APP与智能终端间的对接'
},
{
id: 2,
title: 'GPS定位',
icon: 'i-lucide-map-pin',
description: '调用GPS定位，达到定位用户位置，记录用户运动'
},
{
id: 3,
title: '数据分享',
icon: 'i-lucide-share',
description: '将运行数据、硬件数据意见分享到站外应用，如新浪微博、微信等，与更多朋友互动'
},
{
id: 4,
title: '扫码使用',
icon: 'i-lucide-qr-code',
description: '扫码使用设备，流程简单、体验佳'
},
{
id: 5,
title: '硬件数据分析',
icon: 'i-lucide-bar-chart',
description: '实时分析硬件数据，提供智能决策支持'
}
]
// PC管理端功能
const pcManagementFeatures = [
{
id: 1,
title: '设备管理',
icon: 'i-lucide-settings',
description: '全面的设备管理功能，支持设备配置、监控和维护'
},
{
id: 2,
title: '设备监控',
icon: 'i-lucide-monitor',
description: '实时监控设备状态，及时发现和处理异常情况'
},
{
id: 3,
title: '生命周期管理',
icon: 'i-lucide-clock',
description: '完整的设备生命周期管理，从采购到报废全程跟踪'
},
{
id: 4,
title: '维修工单管理',
icon: 'i-lucide-wrench',
description: '高效的维修工单管理系统，提升维护效率'
},
{
id: 5,
title: '合同管理',
icon: 'i-lucide-file-text',
description: '完善的合同管理功能，确保合规运营'
},
{
id: 6,
title: '工单流程管理',
icon: 'i-lucide-workflow',
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/yuxi2019.css',
'/css/Internet_Things.css',
]
// APP移动运维端功能
const mobileOandMFeatures = [
{
id: 1,
title: '实时监控',
icon: 'i-lucide-activity',
description: '监控所有设备位置、运行状态，实时掌握设备情况'
},
{
id: 2,
title: '权限分配',
icon: 'i-lucide-user-check',
description: '手机权限分配，支持厂家-经销商-合同能源管理企业-用户等角色管理'
},
{
id: 3,
title: '工单流转',
icon: 'i-lucide-arrow-right-left',
description: '手机工单流转，提升工作效率'
},
{
id: 4,
title: '扫码注册',
icon: 'i-lucide-scan',
description: '扫描二维码注册，识别当前设备所有参数、运行信息、维护人员及历史消息等'
},
{
id: 5,
title: '售后服务',
icon: 'i-lucide-headphones',
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 systemFeatures = [
{
id: 1,
title: '模块化设计',
icon: 'i-lucide-package',
description: '采用模块化设计，简便易用，高度自定义，无需二次开发'
},
{
id: 2,
title: '高度自定义',
icon: 'i-lucide-settings-2',
description: '根据用户需求配置各种应用模块，灵活适应不同业务场景'
},
{
id: 3,
title: '无需二次开发',
icon: 'i-lucide-zap',
description: '开箱即用的解决方案，快速部署，降低开发成本'
})
}
]
</script>
<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 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<!-- 几何图案 -->
<div class="absolute inset-0 opacity-20">
<div class="absolute inset-0">
<!-- 网格图案 -->
<div
v-for="i in 20"
:key="i"
class="absolute w-4 h-4 border border-blue-400/30 rounded"
:style="{
left: Math.random() * 100 + '%',
top: Math.random() * 100 + '%',
transform: `rotate(${Math.random() * 360}deg)`
}"
></div>
<view>
<div class="Internet_Things">
<!-- item1 物联网系统开发 -->
<div class="item1">
<h2>物联网系统开发 </h2>
<h4> 一站式物联网解决方案提供，携手搭建物联网生态圈</h4>
</div>
<!--item2 APP/微信/小程序用户端 -->
<div class="container">
<div class="row item2">
<!-- -->
<div class="col-xs-12 col-lg-5 col-lg-offset-1">
<img alt="联网智能硬件" class="img-responsive" src="/img/internet_thinks/1.png">
</div>
<!-- -->
<div class="col-xs-12 col-lg-5">
<h2>APP/微信/小程序用户端</h2>
<ul>
<li>通过蓝牙连接完成APP与智能终端间的对接；</li>
<li>调用GPS定位，达到定位用户位置，记录用户运动；</li>
<li>将运行数据、硬件数据意见分享到站外应用，如新浪微博、微信等，与更多朋友互动；</li>
<li>扫码使用设备，流程简单、体验佳。</li>
</ul>
</div>
<!-- -->
</div>
</div>
<!-- 发光圆形 -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96">
<div class="w-full h-full rounded-full border-2 border-dashed border-blue-400/50 animate-pulse"></div>
<div class="absolute inset-8 rounded-full border border-dashed border-blue-300/30 animate-pulse" style="animation-delay: 0.5s"></div>
<!-- item3 PC管理端 -->
<div id="grad" class="container-fluid">
<div class="row item3">
<div class="col-xs-12 col-lg-3 col-lg-offset-2">
<h2>PC管理端</h2>
<p>
可根据用户需要，配置成各个应用模块，如设备管理、设备监控、生命周期管理、维修工单管理、合同管理、工单流程管理等。采用模块化设计，简便易用、高度自定义，无需二次开发。</p>
</div>
<!-- 曲线线条 -->
<div class="absolute bottom-0 right-0 w-64 h-64">
<svg class="w-full h-full text-blue-400/30" viewBox="0 0 100 100">
<path d="M0,80 Q30,20 60,40 T100,20" stroke="currentColor" stroke-width="2" fill="none" class="animate-pulse"/>
<path d="M0,60 Q20,10 50,30 T100,10" stroke="currentColor" stroke-width="1" fill="none" class="animate-pulse" style="animation-delay: 1s"/>
</svg>
</div>
<!-- 手部线框 -->
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-32 h-32">
<svg class="w-full h-full text-blue-400" viewBox="0 0 100 100">
<path d="M20,80 L30,70 L40,75 L50,65 L60,70 L70,60 L80,65 L85,55" stroke="currentColor" stroke-width="2" fill="none"/>
<circle cx="25" cy="75" r="3" fill="currentColor"/>
<circle cx="35" cy="70" r="3" fill="currentColor"/>
<circle cx="45" cy="75" r="3" fill="currentColor"/>
<circle cx="55" cy="65" r="3" fill="currentColor"/>
<circle cx="65" cy="70" r="3" fill="currentColor"/>
<circle cx="75" cy="60" r="3" fill="currentColor"/>
<circle cx="80" cy="65" r="3" fill="currentColor"/>
<circle cx="85" cy="55" r="3" fill="currentColor"/>
</svg>
</div>
</div>
<!-- 内容 -->
<div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center text-white">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
{{ iotSystemDevelopment.title }}
</h1>
<p class="text-xl md:text-2xl text-blue-200 dark:text-blue-300 mb-8 max-w-4xl mx-auto leading-relaxed">
{{ iotSystemDevelopment.subtitle }}
</p>
<p class="text-lg md:text-xl text-blue-100 dark:text-blue-200 max-w-2xl mx-auto">
{{ iotSystemDevelopment.description }}
</p>
</div>
</div>
</section>
<!-- APP/微信/小程序用户端 -->
<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 lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
APP/微信/小程序用户端
</h2>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- 手机展示 -->
<div class="relative flex justify-center items-center">
<div class="relative w-64 h-96 md:w-80 md:h-[480px]">
<!-- 手机外壳 -->
<div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
<!-- 应用界面 -->
<div class="p-4 h-full">
<!-- 通知区域 -->
<div class="flex items-center mb-4">
<div class="w-8 h-4 bg-pink-200 dark:bg-pink-800 rounded mr-2"></div>
<div class="w-12 h-4 bg-pink-200 dark:bg-pink-800 rounded"></div>
</div>
<!-- 用户信息 -->
<div class="text-center mb-6">
<div class="w-16 h-16 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-2 flex items-center justify-center">
<UIcon name="i-lucide-user" class="w-8 h-8 text-gray-600 dark:text-gray-300" />
</div>
<div class="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
<div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mx-auto"></div>
</div>
<!-- 聊天区域 -->
<div class="flex justify-end mb-4">
<div class="w-20 h-12 bg-gray-900 dark:bg-gray-100 rounded-lg flex items-center justify-center">
<div class="w-6 h-4 bg-white dark:bg-gray-800 rounded"></div>
</div>
</div>
<div class="col-xs-12 col-lg-5 col-lg-offset-1">
<img alt="PC管理端" class="img-responsive" src="/img/internet_thinks/2.png">
</div>
</div>
</div>
<!-- 功能连接点 -->
<div class="absolute inset-0">
<!-- 蓝牙连接 -->
<div class="absolute -left-8 top-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
蓝牙连接
</div>
</div>
<!-- GPS定位 -->
<div class="absolute -right-8 top-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
GPS定位
<!-- item4 APP移动运维端 -->
<div class="container">
<div class="row item4">
<div class="col-xs-12 col-lg-5 col-lg-offset-1">
<img alt="联网智能硬件" class="img-responsive" src="/img/internet_thinks/3.png">
</div>
</div>
<!-- 扫码使用 -->
<div class="absolute -right-8 bottom-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
扫码使用
</div>
</div>
<!-- 硬件数据分析 -->
<div class="absolute -left-8 bottom-1/3">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
硬件数据分析
</div>
</div>
<!-- 连接线 -->
<svg class="absolute inset-0 w-full h-full pointer-events-none">
<line x1="0" y1="25%" x2="20%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
<line x1="80%" y1="25%" x2="100%" y2="25%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
<line x1="80%" y1="75%" x2="100%" y2="75%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
<line x1="0" y1="66%" x2="20%" y2="66%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5"/>
</svg>
<!-- -->
<div class="col-xs-12 col-lg-4 col-lg-offset-1">
<h2>APP移动运维端</h2>
<ul>
<li>手机权限分配：厂家-经销商-合同能源管理企业-用户等；</li>
<li>实时监控：监控所有设备位置、运行状态；</li>
<li>扫描二维码注册、识别当前设备所有参数、运行信息、维护人员及历史消息等；</li>
<li>手机工单流转；</li>
<li>售后拍照回传、信息录入、抄表。</li>
</ul>
</div>
</div>
</div>
<!-- 功能列表 -->
<div class="space-y-6">
<div
v-for="feature in userClientFeatures"
:key="feature.id"
class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
>
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{{ feature.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300">
{{ feature.description }}
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PC管理端 -->
<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 lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
PC管理端
</h2>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- 功能列表 -->
<div class="space-y-6">
<div
v-for="feature in pcManagementFeatures"
:key="feature.id"
class="flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300"
>
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{{ feature.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300">
{{ feature.description }}
</p>
</div>
</div>
</div>
<!-- 电脑展示 -->
<div class="relative flex justify-center items-center">
<div class="relative w-80 h-64 md:w-96 md:h-72">
<!-- 电脑外壳 -->
<div class="absolute inset-0 bg-gray-200 dark:bg-gray-600 rounded-lg shadow-2xl">
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
<!-- 屏幕内容 -->
<div class="p-4 h-full">
<!-- 顶部卡片 -->
<div class="flex space-x-2 mb-4">
<div class="w-16 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
<div class="w-20 h-8 bg-gray-100 dark:bg-gray-700 rounded"></div>
</div>
<!-- 图表区域 -->
<div class="flex space-x-4 mb-4">
<!-- 饼图 -->
<div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
<div class="w-12 h-12 bg-red-500 rounded-full"></div>
</div>
<!-- 柱状图 -->
<div class="flex-1 space-y-1">
<div class="h-3 bg-gray-200 dark:bg-gray-600 rounded"></div>
<div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
<div class="h-3 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
</div>
</div>
<!-- 底部图表 -->
<div class="space-y-2">
<div class="h-2 bg-red-500 rounded"></div>
<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded"></div>
<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
</div>
</div>
</div>
</div>
<!-- 功能标签 -->
<div class="absolute -top-4 -left-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
<div class="w-8 h-8 bg-red-100 dark:bg-red-900 rounded flex items-center justify-center">
<UIcon name="i-lucide-wrench" class="w-4 h-4 text-red-600 dark:text-red-400" />
</div>
</div>
<div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 rounded-lg p-2 shadow-lg">
<div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center">
<UIcon name="i-lucide-check-square" class="w-4 h-4 text-blue-600 dark:text-blue-400" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- APP移动运维端 -->
<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 lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
APP移动运维端
</h2>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- 手机展示 -->
<div class="relative flex justify-center items-center">
<div class="relative w-64 h-96 md:w-80 md:h-[480px]">
<!-- 手机外壳 -->
<div class="absolute inset-0 bg-gray-300 dark:bg-gray-600 rounded-3xl p-2 shadow-2xl">
<div class="w-full h-full bg-white dark:bg-gray-800 rounded-2xl overflow-hidden">
<!-- 应用界面 -->
<div class="p-4 h-full">
<!-- 进度环 -->
<div class="flex justify-center mb-6">
<div class="relative w-20 h-20">
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
<circle cx="50" cy="50" r="40" stroke="#ef4444" stroke-width="8" fill="none"
stroke-dasharray="251.2" stroke-dashoffset="105.5"/>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-sm font-bold text-gray-900 dark:text-white">58%</span>
</div>
</div>
</div>
<!-- 列表项 -->
<div class="space-y-3">
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-3/4"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-5/6"></div>
<div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-2/3"></div>
</div>
</div>
</div>
</div>
<!-- 功能连接点 -->
<div class="absolute inset-0">
<!-- 实时监控 -->
<div class="absolute -left-8 top-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
实时监控
</div>
</div>
<!-- 权限分配 -->
<div class="absolute -right-8 top-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
权限分配
</div>
</div>
<!-- 工单流转 -->
<div class="absolute -left-8 top-1/2">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
工单流转
</div>
</div>
<!-- 扫码注册 -->
<div class="absolute -left-8 bottom-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
扫码注册
</div>
</div>
<!-- 售后服务 -->
<div class="absolute -right-8 bottom-1/4">
<div class="w-4 h-4 bg-red-500 rounded-full"></div>
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
售后服务
</div>
</div>
<!-- 连接线 -->
<svg class="absolute inset-0 w-full h-full pointer-events-none">
<circle cx="50%" cy="50%" r="45%" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
</svg>
</div>
</div>
</div>
<!-- 功能列表 -->
<div class="space-y-6">
<div
v-for="feature in mobileOandMFeatures"
:key="feature.id"
class="flex items-start p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-300"
>
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
<UIcon :name="feature.icon" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{{ feature.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300">
{{ feature.description }}
</p>
</div>
</div>
</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="text-center mb-16">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
系统特性
</h2>
<div class="w-16 h-1 bg-blue-600 dark:bg-blue-500 mx-auto"></div>
</div>
<!-- 特性展示 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div
v-for="feature in systemFeatures"
:key="feature.id"
class="text-center p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
>
<div class="w-16 h-16 mx-auto mb-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
<UIcon :name="feature.icon" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
{{ feature.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
{{ feature.description }}
</p>
</div>
</div>
</div>
</section>
</div>
</view>
</template>
<style scoped>
/* 自定义动画 */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
/* 自定义动画效果 */
.hover\:shadow-lg:hover {
transform: translateY(-2px);
}
.animate-float {
animation: float 3s ease-in-out infinite;
/* 响应式字体大小 */
@media (max-width: 640px) {
.text-4xl {
font-size: 2rem;
}
/* 响应式调整 */
@media (max-width: 768px) {
.grid-cols-3 {
grid-template-columns: 1fr;
.text-5xl {
font-size: 2.5rem;
}
.text-6xl {
font-size: 3rem;
}
}
</style>

31
app/components/Navigation.vue
View File

@ -31,16 +31,14 @@
<ul class="pull-right col-xs-4 col-sm-6">
<li><a href="http://bike.yuxiit.com/" target="_blank">共享单车<p>
一种新型环保共享经济，最大化的利用了公共道路通过率</p></a></li>
<li id="gopcOm" style="cursor: pointer;">
<a>景区共享电动车
<!-- href="carShare.html" target="_blank" -->
<p>有助于缓解交通堵塞，以及公路的磨损，减少空气污染，降低对能量的依赖性</p>
</a>
</li>
<li><a href="scooter.html">共享滑板车<p>新的共享出行方式，轻便省力</p></a></li>
<li><a href="sharedbed.html">共享陪护床<p>立足医院民生需求而诞生，解决医患家属的休息问题</p></a></li>
<li><a href="/sharedSolutions/carShare">景区共享电动车<p>
有助于缓解交通堵塞，以及公路的磨损，减少空气污染，降低对能量的依赖性</p></a></li>
<li><a href="/sharedSolutions/scooter">共享滑板车<p>新的共享出行方式，轻便省力</p></a></li>
<li><a href="/sharedSolutions/sharedbed">共享陪护床<p>立足医院民生需求而诞生，解决医患家属的休息问题</p>
</a></li>
<li><a href="/sharedSolutions/eBike">共享电动车<p>通过扫码开锁，循环共享</p></a></li>
<li><a href="sharabank.html">共享充电宝<p>
<li><a href="/sharedSolutions/sharebank">共享充电宝<p>
企业提供的充电租赁设备，用户扫码取出后即可使用，用完后就近归还</p></a></li>
</ul>
</div>
@ -59,7 +57,7 @@
<li><a href="http://hx.yuxiit.com/" target="_blank">智慧公寓<p>集多种设备操控,场景定制,产品于一体,让顾客在公寓体验到更舒适,更便捷,更个性化的服务</p></a></li> -->
<li><a href="/industrySolutions/ElectCar">智能电动车<p>
打造智能电动车时代!方便用户的出行,让骑车出行便捷</p></a></li>
<li><a href="Internet_Things_cabinet.html">智能换电柜<p>
<li><a href="/industrySolutions/cabinet">智能换电柜<p>
智能换电柜系统以集中换电替代用户充电，解决国内超过3.5亿辆电动车的电池续航问题</p></a></li>
</ul>
</div>
@ -94,9 +92,12 @@
<img alt="物联网IOT云平台" class="img-responsive" src="/img/yuxiupdata/mune-14.png">
</div>
<ul class="pull-right col-xs-4 col-sm-6">
<li><a href="Internet_Things.html">物联网应用定制<p>规范化的开发流程，实现产品快速落地</p></a></li>
<li><a href="Internet_Things_hardware.html">物联网智能硬件<p>支持定制，满足各类硬件场景需求</p></a></li>
<li><a href="Internet_Things_IOT.html">物联网IOT云平台<p>灵活、可靠、安全，有效降低成本</p></a></li>
<li><a href="/IoTSolutions/applicationCustomization">物联网应用定制<p>
规范化的开发流程，实现产品快速落地</p></a></li>
<li><a href="/IoTSolutions/Internet_Things_hardware">物联网智能硬件<p>支持定制，满足各类硬件场景需求</p>
</a></li>
<li><a href="/IoTSolutions/Internet_Things_IOT">物联网IOT云平台<p>灵活、可靠、安全，有效降低成本</p></a>
</li>
</ul>
</div>
</li>
@ -127,7 +128,6 @@ const loadJSFiles = () => {
'/js/jquery-1.10.2.js',
'/js/bootstrap.min.js',
'/js/index.js',
'/js/news.js',
'/js/gopcOm.js'
]
@ -147,8 +147,7 @@ const loadCSSFiles = () => {
const cssFiles = [
'/css/bootstrap.min.css',
'/css/main2.css',
'/css/main.css',
'/css/yuxi2019.css'
'/css/yuxi2019.css',
]
cssFiles.forEach(href => {

2
app/components/about/aboutUs.vue
View File

@ -226,7 +226,7 @@ const loadCSSFiles = () => {
<div class="row text-center">
<div class="col-xs-12 about19-info2">
<p>我们的专业团队将为您精心研发更专业的系统</p>
<img alt="联系我们" src="/img/img/img/qywx.png" style="width: 120px; margin-top: 20px;">
<img alt="联系我们" src="/img/img/qywx.png" style="width: 120px; margin-top: 20px;">
<!-- <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1829668236&site=qq&menu=yes">立即咨询</a> -->
<!-- <a target="_blank" href="http://p.qiao.baidu.com//im/index?siteid=8233756&amp;ucid=7539873"> -->
</div>

13
app/layouts/article.vue
View File

@ -1,13 +0,0 @@
<script lang="ts" setup>
</script>
<template>
<div>
<UContainer>
<AppHeader/>
<slot/>
<BottomNavigation/>
<AppFooter/>
</UContainer>
</div>
</template>

12
app/layouts/mini.vue Normal file
View File

@ -0,0 +1,12 @@
<script lang="ts" setup>
</script>
<template>
<div>
<!-- <AppHeader/>-->
<Navigation/>
<slot/>
<BottomNavigation/>
<AppFooter/>
</div>
</template>

241
app/pages/IoTSolutions/Internet_Things_IOT.vue Normal file
View File

@ -0,0 +1,241 @@
<script lang="ts" setup>
import {onMounted} from "vue";
definePageMeta({
layout: 'mini'
})
onMounted(() => {
// 加载CSS样式文件
loadCSSFiles()
// 加载JavaScript文件
loadJSFiles()
})
const loadJSFiles = () => {
const jsFiles = [
'/js/jquery-1.11.3.min.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/about.css',
'/css/computer_public.css',
'/css/headORfooter.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_IOT">
<!-- item1 物联网IOT云平台 -->
<div class="item1">
<h2>物联网IOT云平台 </h2>
<h4>
帮助开发者快速将设备进行智能化改造，通过简明易懂的DEMO程序与开源项目，最大限度降低了物联网开发的技术门槛，降低研发成本，提升产品投产速度，服务最终消费者。</h4>
</div>
<!--item2 APP/微信/小程序用户端 -->
<div class="container">
<div class="row item2">
<!-- -->
<div class="col-xs-6 col-md-3">
<div class="row">
<div class="col-xs-12 col-md-3"><img
alt="适配模块" class="center-block"
src="/img/internet_thinks/icon_iot11.png"></div>
<div class="col-xs-12 col-md-9">
<h4>适配模块</h4>
<h6>帮助您的设备快速智能化</h6>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="row">
<div class="col-xs-12 col-md-3"><img
alt="多协议" class="center-block"
src="/img/internet_thinks/icon_iot11.png"></div>
<div class="col-xs-12 col-md-9">
<h4>多协议</h4>
<h6>支持多种行业的标准协议</h6>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="row">
<div class="col-xs-12 col-md-3"><img
alt="规则引擎"
class="img-responsive center-block" src="/img/internet_thinks/icon_iot11.png"></div>
<div class="col-xs-12 col-md-9">
<h4>规则引擎</h4>
<h6>灵活适配，助力业务升级</h6>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="row">
<div class="col-xs-12 col-md-3"><img
alt="安全"
class="img-responsive center-block" src="/img/internet_thinks/icon_iot11.png"></div>
<div class="col-xs-12 col-md-9">
<h4>安全</h4>
<h6>全链路高级别验证和授权机制</h6>
</div>
</div>
</div>
<!-- -->
</div>
</div>
<!-- item3 平台架构 -->
<div class="container-fluid">
<div class="row item3 text-center">
<!-- -->
<div class="col-xs-12">
<h2>平台架构</h2>
<img alt="平台架构" class="img-responsive center-block" src="/img/internet_thinks/group_ito.png">
</div>
<!-- -->
</div>
</div>
<!-- item4 APP移动运维端 -->
<div class="container">
<div class="row item4">
<!-- -->
<h2 class="text-center">接入优势</h2>
<div class="col-xs-12 col-md-6 item4-index">
<div class="row">
<div class="col-xs-5 col-md-3 col-md-offset-3">
<img alt="接入优势" class="img-responsive center-block" src="/img/internet_thinks/icon_iot21.png">
</div>
<div class="col-xs-7 col-md-5">
<h4>低成本快速接入</h4>
<h6>
无需投入巨大精力构架复杂的网络构架，可在最短一周内进行对接成功接入先进的物流网云平台，降低研发投入、云端部署及运维成本</h6>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 item4-index">
<div class="row">
<div class="col-xs-5 col-md-3">
<img alt="接入优势" class="img-responsive center-block" src="/img/internet_thinks/icon_iot22.png">
</div>
<div class="col-xs-7 col-md-5">
<h4>兼容多协议</h4>
<h6>平台支持不同的终端接入，通信协议支持MQTT、WebScoket、Http等，平台提供RESTFUL
API，支持第三方业务应用系统的接入</h6>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 item4-index">
<div class="row">
<div class="col-xs-5 col-md-3 col-md-offset-3">
<img alt="接入优势" class="img-responsive center-block" src="/img/internet_thinks/icon_iot23.png">
</div>
<div class="col-xs-7 col-md-5">
<h4>高并发量</h4>
<h6>
高度扩展的平台架构支持从几万到几百万的设备并发连接，采用分布式的NOSQL数据库，支持海量级别的数据存储</h6>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 item4-index">
<div class="row">
<div class="col-xs-5 col-md-3">
<img alt="接入优势" class="img-responsive center-block" src="/img/internet_thinks/icon_iot24.png">
</div>
<div class="col-xs-7 col-md-5">
<h4>大数据分析</h4>
<h6>每天自动备份数据，数据分析，并使用可视化、易用的数据分析界面定制数据报告</h6>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 item4-index">
<div class="row">
<div class="col-xs-5 col-md-3 col-md-offset-3">
<img alt="接入优势" class="img-responsive center-block" src="/img/internet_thinks/icon_iot25.png">
</div>
<div class="col-xs-7 col-md-5">
<h4>可视化运维管理</h4>
<h6>设置产品生命周期管理、设备管理日志、消息分发推送、远程监控、数据分析等多维度运营能力</h6>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 item4-index">
<div class="row">
<div class="col-xs-5 col-md-3">
<img alt="接入优势" class="img-responsive center-block" src="/img/internet_thinks/icon_iot26.png">
</div>
<div class="col-xs-7 col-md-5">
<h4>安全可靠</h4>
<h6>
监控系统7*24小时不间断服务，所有的设备数据和用户数据都采用加密传输、细化的权限管理、管理员和普通用户权限清晰，实现数据的安全存储和访问</h6>
</div>
</div>
</div>
<!-- -->
</div>
</div>
<!--
//////////////
-->
</div>
</view>
</template>

244
app/pages/IoTSolutions/Internet_Things_hardware.vue Normal file
View File

@ -0,0 +1,244 @@
<script lang="ts" setup>
import {onMounted} from "vue";
definePageMeta({
layout: 'mini'
})
onMounted(() => {
// 加载CSS样式文件
loadCSSFiles()
// 加载JavaScript文件
loadJSFiles()
})
const loadJSFiles = () => {
const jsFiles = [
'/js/jquery-1.11.3.min.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/about.css',
'/css/computer_public.css',
'/css/headORfooter.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_hardware">
<!-- item1 智能硬件—物联网解决方案基石-->
<div class="item1">
<h2>智能硬件—物联网解决方案基石</h2>
<h4>成熟稳定、可管可控、快速改造传统设备</h4>
</div>
<!--item2 多行业赋能 -->
<div class="container">
<div class="row item2 text-center">
<!-- -->
<h2>多行业赋能</h2>
<div class="col-xs-4 col-md-1 col-md-offset-2">
<img alt="共享经济" class="img-responsive center-block" src="/img/internet_thinks/icon_hard11.png">
<h4>共享经济</h4>
</div>
<div class="col-xs-4 col-md-1">
<img alt="新零售" class="img-responsive center-block" src="/img/internet_thinks/icon_hard12.png">
<h4>新零售</h4>
</div>
<div class="col-xs-4 col-md-1">
<img alt="智慧景区" class="img-responsive center-block" src="/img/internet_thinks/icon_hard13.png">
<h4>智慧景区</h4>
</div>
<div class="col-xs-4 col-md-1">
<img alt="智慧农业" class="img-responsive center-block" src="/img/internet_thinks/icon_hard14.png">
<h4>智慧农业</h4>
</div>
<div class="col-xs-4 col-md-1">
<img alt="智慧医疗" class="img-responsive center-block" src="/img/internet_thinks/icon_hard15.png">
<h4>智慧医疗</h4>
</div>
<div class="col-xs-4 col-md-1">
<img alt="智能家居" class="img-responsive center-block" src="/img/internet_thinks/icon_hard16.png">
<h4>智能家居</h4>
</div>
<div class="col-xs-4 col-md-1">
<img alt="智慧校区" class="img-responsive center-block" src="/img/internet_thinks/icon_hard17.png">
<h4>智慧校区</h4>
</div>
<div class="col-xs-4 col-md-1">
<img alt="智慧物业" class="img-responsive center-block" src="/img/internet_thinks/icon_hard18.png">
<h4>智慧物业</h4>
</div>
<div class="col-xs-12">
<a href="#">多行业赋能</a>
</div>
<!-- -->
</div>
</div>
<!-- item3 设备端物联网智能模块 -->
<div class="container-fluid">
<div class="row item3 text-center">
<!-- -->
<div class="col-xs-12">
<h2>设备端物联网智能模块</h2>
<h4>提供一系列集成物联网通信协议、保证实时可靠传输的IOT终端适配模块产品</h4>
<img
alt="设备端物联网智能模块" class="img-responsive center-block"
src="/img/internet_thinks/item_hard1.png">
</div>
<!-- -->
</div>
</div>
<!-- item4 软件功能模块 -->
<div class="container">
<div class="row item4 text-center">
<!-- -->
<h2>软件功能模块</h2>
<h3>与服务支撑系统无缝对接，可按需求定制，为企业有效降低开发成本</h3>
<div class="col-xs-6 col-md-3">
<img alt="接入优势" class="img-responsive center-block" src="/img/internet_thinks/icon_hard21.png">
<h4>对接</h4>
<h6>可按需求定义基于二进制的协议</h6>
</div>
<div class="col-xs-6 col-md-3">
<img alt="服务器协议" class="img-responsive center-block" src="/img/internet_thinks/icon_hard22.png">
<h4>服务器协议</h4>
<h6>可按需求定义基于二进制的协议</h6>
</div>
<div class="col-xs-6 col-md-3">
<img alt="逻辑控制" class="img-responsive center-block" src="/img/internet_thinks/icon_hard23.png">
<h4>逻辑控制</h4>
<h6>简单状态控制，数量报警</h6>
</div>
<div class="col-xs-6 col-md-3">
<img alt="数据传输" class="img-responsive center-block" src="/img/internet_thinks/icon_hard24.png">
<h4>数据传输</h4>
<h6>基于flash的可靠性数据传输</h6>
</div>
<!-- -->
</div>
</div>
<!-- item5 产品参数 -->
<div class="container-fluid">
<div id="grad2" class="row item5 text-center">
<!-- -->
<h2>产品参数</h2>
<h4>以下产品参数是以智能电动车解决方案为例，可根据客户需求调整或进行定制开发</h4>
<img alt="接入优势" class="img-responsive center-block" src="/img/internet_thinks/item_hard2.png">
<!-- -->
</div>
</div>
<!-- item6 产品参数 -->
<div class="container-fluid item6 text-center">
<!-- -->
<div class="row">
<h2>产品优势</h2>
<h4>具备高兼容性和柔性适配能力，能够完美支撑个性场景需求</h4>
</div>
<!-- -->
<div class="row item6-index">
<div class="col-xs-6 col-md-4">
<img alt="数据传输" class="img-responsive center-block" src="/img/internet_thinks/icon_hard31.png">
<p>硬件采用低功耗设计方案，联网状态下，功耗低于5mA以下</p>
</div>
<div class="col-xs-6 col-md-4">
<img alt="数据传输" class="img-responsive center-block" src="/img/internet_thinks/icon_hard32.png">
<p>支持GPRS数据通道，支持蓝牙4.0</p>
</div>
<div class="col-xs-6 col-md-4">
<img alt="数据传输" class="img-responsive center-block" src="/img/internet_thinks/icon_hard33.png">
<p>支持GPS定位，GPRS辅助定位，定位精度高</p>
</div>
<div class="col-xs-6 col-md-4">
<img alt="数据传输" class="img-responsive center-block" src="/img/internet_thinks/icon_hard34.png">
<p>支持标准TTL通道，TTL调试通道</p>
</div>
<div class="col-xs-6 col-md-4">
<img alt="数据传输" class="img-responsive center-block" src="/img/internet_thinks/icon_hard35.png">
<p>支持断电重启，支持软件和硬件看门狗</p>
</div>
<div class="col-xs-6 col-md-4">
<img alt="数据传输" class="img-responsive center-block" src="/img/internet_thinks/icon_hard36.png">
<p>整体方案，服务器指令响应时间2秒内</p>
</div>
</div>
<!-- -->
</div>
<!-- //////////////-->
<!-- //////////////-->
</div>
</view>
</template>

262
app/pages/industrySolutions/cabinet.vue Normal file
View File

@ -0,0 +1,262 @@
<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>

2
app/pages/new.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
// 设置页面布局
definePageMeta({
layout: 'article'
layout: 'mini'
})
</script>

281
app/pages/sharedSolutions/carShare.vue Normal file
View File

@ -0,0 +1,281 @@
<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>

261
app/pages/sharedSolutions/scooter.vue Normal file
View File

@ -0,0 +1,261 @@
<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="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&amp;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&amp;uin=1829668236&amp;site=qq&amp;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>

210
app/pages/sharedSolutions/sharebank.vue Normal file
View File

@ -0,0 +1,210 @@
<script lang="ts" setup>
import {onMounted} from "vue";
onMounted(() => {
// 加载CSS样式文件
loadCSSFiles()
// 加载JavaScript文件
loadJSFiles()
})
const loadJSFiles = () => {
const jsFiles = [
'/js/jquery-1.11.3.min.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/main.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="container-fluid">
<div class="row">
<!-- 焦点巨幕布图 -->
<img alt="" class="img-responsive center-block" src="/img/sharabank/banner.jpg">
<!-- 充电宝使用流程 -->
<div class="text-center layer">
<h2>充电宝使用流程</h2>
<div class="col-md-2 col-md-offset-2 tip-user">
<img alt="" class="img-responsive center-block" src="/img/sharabank/location.png">
<span class="userbank">地图找充电宝</span>
</div>
<div class="col-md-2 tip-user">
<img alt="" class="img-responsive center-block" src="/img/sharabank/wecode.png">
<span class="userbank">扫描充电宝柜机上的二维码</span>
</div>
<div class="col-md-2 tip-user">
<img alt="" class="img-responsive center-block" src="/img/sharabank/select.png">
<span class="userbank">选择充电接口</span>
</div>
<div class="col-md-2">
<img alt="" class="img-responsive center-block" src="/img/sharabank/reback.png">
<span class="userbank">使用完后扫码归还</span>
</div>
<!-- -->
<div class="clearfix"/>
<div style="margin: 110px 0;">
<img alt="" class="img-responsive center-block" src="/img/sharabank/sharabank.png">
</div>
</div><!-- 充电宝使用流程 over -->
<!-- 共享充电宝类型-->
<div class="layer layer-2 clearfix" style="background: #F6F6F6;">
<h2>共享充电宝类型</h2>
<div class="col-xs-12 col-md-4 col-md-offset-2">
<p style="margin-top: 160px; display: block;"><img
alt=""
class="img-responsive center-block" src="/img/sharabank/2.png"></p>
<p style="margin-top: 100px; display: none;"><img
alt=""
class="img-responsive center-block" src="/img/sharabank/3.png"></p>
<p><img alt="" class="img-responsive center-block" src="/img/sharabank/1.png"></p>
</div>
<ul class="col-xs-12 col-md-4 col-md-offset-1">
<div id="sanjiao"><img alt="" src="/img/sharabank/left.png"></div>
<li>
<span style="font-size: 16px; color: #484D55; margin-bottom: 15px; display: block; font-weight: 700">桌面型单台充电宝</span>
<span style="font-size: 12px; color: #999999;">线机一体，成本低，固定使用，促进商家消费</span>
</li>
<li>
<span style="font-size: 16px; color: #484D55; margin-bottom: 15px; display: block; font-weight: 700">桌面小型柜机</span>
<span style="font-size: 12px; color: #999999;">用户使用更自由，人工维护成本低，更符合生活使用场景</span>
</li>
<li>
<span style="font-size: 16px; color: #484D55; margin-bottom: 15px; display: block; font-weight: 700">立式大型柜机</span>
<span
style="font-size: 12px; color: #999999;">匹配人流较大的公共场所，便于用户准确找到设备，快速解决充电需求</span>
</li>
</ul>
</div><!-- 共享充电宝类型 over-->
<!-- 我们的服务 -->
<div class="text-center container layer" style="border-bottom: 1px solid #E3E3E3; line-height: 3">
<h2>我们的服务优势</h2>
<div class="col-xs-12 col-md-2 col-md-offset-1">
<img alt="" class="img-responsive center-block" src="/img/sharabank/APP.png">
APP
</div>
<div class="col-xs-12 col-md-2">
<img alt="" class="img-responsive center-block" src="/img/sharabank/wecata.png">
微信
</div>
<div class="col-xs-12 col-md-2">
<img alt="" class="img-responsive center-block" src="/img/sharabank/xiao.png">
小程序
</div>
<div class="col-xs-12 col-md-2">
<img alt="" class="img-responsive center-block" src="/img/sharabank/admnaoan.png">
智能终端
</div>
<div class="col-xs-12 col-md-2">
<img alt="" class="img-responsive center-block" src="/img/sharabank/setting.png">
管理后台
</div>
</div><!-- 我们的服务 over-->
<!-- 我们的售后 -->
<div class="text-center container layer">
<h2>我们的售后</h2>
<div class="col-xs-12 col-md-2 col-md-offset-2">
<img alt="" class="img-responsive center-block" src="/img/sharabank/fadeback.png"><br>
<span style="font-size: 14px; color: #333333;">技术支持<br></span>
<span style="font-size: 12px; color: #999999;">技术问题随时咨询</span>
</div>
<div class="col-xs-12 col-md-2">
<img alt="" class="img-responsive center-block" src="/img/sharabank/kefu.png"><br>
<span style="font-size: 14px; color: #333333;">客服服务<br></span>
<span style="font-size: 12px; color: #999999;">24小时咨询，答复疑问</span>
</div>
<div class="col-xs-12 col-md-2">
<img alt="" class="img-responsive center-block" src="/img/sharabank/lopt.png"><br>
<span style="font-size: 14px; color: #333333;">系统维护<br></span>
<span style="font-size: 12px; color: #999999;">时刻关注系统运维情况</span>
</div>
<div class="col-xs-12 col-md-2">
<img alt="" class="img-responsive center-block" src="/img/sharabank/updata.png"><br>
<span style="font-size: 14px; color: #333333;">系统升级<br></span>
<span style="font-size: 12px; color: #999999;">针对企业发展需求，按需升级</span>
</div>
</div><!-- 我们的售后 over-->
<!-- footer info -->
<!-- <div class="footer">
<iframe src="gwFooter.html" width="100%" height="340" scrolling="no" style="border:0; min-width: 1210px;"></iframe>
</div> -->
<!-- footer info over-->
</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>

345
app/pages/sharedSolutions/sharedbed.vue Normal file
View File

@ -0,0 +1,345 @@
<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/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>
<!-- banner -->
<div class="container-fluid bedbanner">
<div class="bedbanner-info">
<h2>共享陪护床小程序+管理后台+智能锁+陪护床柜 = 一站式解决方案</h2>
<p>智能租赁/无人值守/共享设备/功能实用/材质环保/人性化设计</p>
<a href="http://p.qiao.baidu.com//im/index?siteid=8233756&amp;ucid=7539873" target="_blank">立即咨询</a>
</div>
<div class="row bedbanner-item">
<div class="col-xs-6 col-md-2 col-md-offset-2 mintem-grop">
<div class="row">
<div class="col-xs-4"><img alt="" class="img-responsive" src="/img/bed/icon_1.png"></div>
<div class="col-xs-8"><span>智能</span> <br> 整体设备智能化、无人化管理、故障自动上报</div>
</div>
</div>
<div class="col-xs-6 col-md-2 mintem-grop">
<div class="row">
<div class="col-xs-4"><img alt="" class="img-responsive" src="/img/bed/icon_2.png"></div>
<div class="col-xs-8"><span>便携</span><br>微信、支付宝扫码开锁，免押金使用，自动关锁计费</div>
</div>
</div>
<div class="col-xs-6 col-md-2 mintem-grop">
<div class="row">
<div class="col-xs-4"><img alt="" class="img-responsive" src="/img/bed/icon_3.png"></div>
<div class="col-xs-8"><span>安全</span> <br>精工焊接，整体防水、防尘、抗压、防破坏</div>
</div>
</div>
<div class="col-xs-6 col-md-2 mintem-grop">
<div class="row">
<div class="col-xs-4"><img alt="" class="img-responsive" src="/img/bed/icon_4.png"></div>
<div class="col-xs-8"><span>舒适</span> <br>优质环保皮革，高密度回弹海绵，健康、舒适</div>
</div>
</div>
</div>
</div>
<!-- 共享经济 -->
<div class="container text-center bedConter">
<div class="row bed-head">实现共享床柜租赁解决方案</div>
<div class="row bed-body" style="color: #999; font-size: 14px;">
<div class="col-md-6 col-md-offset-3" style="line-height: 2.4;">
可通过GPRS远程开锁+GPS定位+蓝牙近距离开锁+使用定位轨迹+实时定位PC/微信/APP/服务器连接，支持定制、二次开发，可供单锁、可供锁+柜子+床配套生产
</div>
</div>
</div>
<!-- 微信小程序 -->
<div style="background: #F8F8F8;">
<div class="container text-center bedConter">
<div class="row bed-head">微信小程序</div>
<div class="row bed-body applet">
<div class="col-md-4">
<div><img alt="" class="center-block img-responsive" src="/img/bed/1.png"></div>
<h4>一键扫码，说用就用</h4>
<p>扫码开锁可以选择蓝牙，GPS、GPRS进行开锁，锁开之后即可使用</p>
</div>
<div class="col-md-4">
<div><img alt="" class="center-block img-responsive" src="/img/bed/2.png"></div>
<h4>实时计费，随心而行</h4>
<p>可查看使用设备，使用时长与花费情况，让您用的放心</p>
</div>
<div class="col-md-4">
<div><img alt="" class="center-block img-responsive" src="/img/bed/3.png"></div>
<h4>使用结束，关锁结算</h4>
<p>使用结束之后需将柜子合上以防影响他人过路，关锁即结束本次使用并结算金额</p>
</div>
</div>
</div>
</div>
<!-- 管理后台 -->
<div class="container bedConter">
<div class="row bed-head text-center">管理后台</div>
<div class="management">
<div class="row bed-body" style="line-height: 2.4;">
<div class="col-md-8"><img alt="" class="img-responsive" src="/img/bed/4.png"></div>
<div class="col-md-4">
<h4>后台管理，数据总览</h4>
<p>统计数据信息，查询每个数据来去记录</p>
</div>
</div>
<div class="row bed-body" style="line-height: 2.4;">
<div class="col-md-4">
<h4>设备健康，状态查询</h4>
<p>可查看使用设备，检测平台整个活跃度</p>
</div>
<div class="col-md-8"><img alt="" class="img-responsive" src="/img/bed/5.png"></div>
</div>
</div>
</div>
<!-- 陪护柜 -->
<div style="background: #F8F8F8;">
<div class="container text-center bedConter">
<div class="row bed-head">陪护柜</div>
<div class="row bed-body bedgroup">
<div class="col-md-6">
<img alt="" class="center-block img-responsive" src="/img/bed/bed1.png">
<h4>入柜式</h4>
<p>入柜式共享陪护床，一柜多用</p>
</div>
<div class="col-md-6">
<img alt="" class="center-block img-responsive" src="/img/bed/bed2.png">
<h4>大数据管理</h4>
<p>共享大数据精准分析提升陪护率</p>
</div>
</div>
</div>
</div>
<!-- 陪护床智能锁 -->
<div class="container text-center bedConter">
<div class="row bed-head">陪护床智能锁</div>
<div class="row bed-body lockgroup">
<div class="col-md-6">
<img alt="智能陪护床柜锁(网络锁)" class="center-block img-responsive" src="/img/bed/lock.png">
<h4>智能陪护床柜锁(网络锁)</h4>
<p>内置智能锁芯，表面无销钉处理，防水、防震、防拆，GPS精准定位，低功耗方案，支持蓝牙GPS、GPRS多种方案定制 </p>
</div>
<div class="col-md-6">
<img alt="智能陪护床柜锁(蓝牙锁)" class="center-block img-responsive" src="/img/bed/lock.png">
<h4>智能陪护床柜锁(蓝牙锁)</h4>
<p>内置智能锁芯，表面无销钉处理，防水、防震、防拆，只支持蓝牙进行开锁/椅两用</p>
</div>
</div>
</div>
<!-- 好行业、好项目、坐享收益 -->
<div style="background: #F8F8F8;">
<div class="container text-center bedConter">
<div class="row bed-head">好行业、好项目、坐享收益</div>
<div class="row bed-minhead">创特科技共享陪护床，一个站在“风口”的万亿蓝海市场</div>
<div class="row bed-body introduction">
<div class="col-md-3">
<h4>市场优势</h4>
<img alt="" class="center-block img-responsive" src="/img/bed/item1.png">
<p>刚需高频，市场前景巨大，3万家医院空白市场有待开发</p>
</div>
<div class="col-md-3">
<h4>模式优势</h4>
<img alt="" class="center-block img-responsive" src="/img/bed/item2.png">
<p>聚焦医院场景，模式简单可迅速复制，扩大规模</p>
</div>
<div class="col-md-3">
<h4>技术优势</h4>
<img alt="" class="center-block img-responsive" src="/img/bed/item3.png">
<p>自主研发，物联网+云计算技术实现系统化、统一化的云平台能力</p>
</div>
<div class="col-md-3">
<h4>运营优势</h4>
<img alt="" class="center-block img-responsive" src="/img/bed/item4.png">
<p>手机后台管理运营，无需现场管理，无需人工值守</p>
</div>
</div>
</div>
</div>
<!-- 投放优势 -->
<div class="advantage">
<div class="container text-center bedConter">
<div class="row bed-head">投放优势</div>
<div class="row bed-minhead">创特科技共享陪护床迎合市场需求，解决用户痛点</div>
<div class="row bed-body advantage-body">
<div class="col-md-3">
<img alt="" class="center-block img-responsive" src="/img/bed/t1.png">
<p>节省空间，方便医院管理</p>
</div>
<div class="col-md-3">
<img alt="" class="center-block img-responsive" src="/img/bed/t2.png">
<p>扫码即用，方便家属陪护</p>
</div>
<div class="col-md-3">
<img alt="" class="center-block img-responsive" src="/img/bed/t3.png">
<p>科技创新，自主技术研发</p>
</div>
<div class="col-md-3">
<img alt="" class="center-block img-responsive" src="/img/bed/t4.png">
<p>实时数据，方便报表统计</p>
</div>
</div>
</div>
</div>
<!-- 陪护柜 -->
<div class="container text-center bedConter">
<div class="row bed-head">支持全网开发</div>
<div class="row bed-body development">
<div class="col-xs-6 col-md-3">
<img alt="" class="center-block img-responsive" src="/img/bed/weixin.png">
<p>微信平台</p>
</div>
<div class="col-xs-6 col-md-3">
<img alt="" class="center-block img-responsive" src="/img/bed/houtai.png">
<p>管理后台</p>
</div>
<div class="col-xs-6 col-md-3">
<img alt="" class="center-block img-responsive" src="/img/bed/app.png">
<p>APP</p>
</div>
<div class="col-xs-6 col-md-3">
<img alt="" class="center-block img-responsive" src="/img/bed/lanya.png">
<p>蓝牙</p>
</div>
</div>
</div>
<!-- 联系我们 -->
<div class="abouts">
<div class="container text-center bedConter">
<div class="row bed-head"><img alt="" class="center-block" src="/img/bed/logo.png"></div>
<div class="row bed-body abouts-body">
<div class="col-md-3">
<img alt="" src="/img/bed/shouji.png">手机：18123752516
</div>
<div class="col-md-3">
<img alt="" src="/img/bed/phone.png">电话：0755-85225123
</div>
<div class="col-md-3">
<img alt="" src="/img/bed/youxiang.png">邮箱：yuxi@yuxiit.com
</div>
<div class="col-md-3">
<img alt="" src="/img/bed/qq.png">QQ：1829668236
</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>

123
app/pages/softwareDevelopment/MiniProgram.vue
View File

@ -1,15 +1,130 @@
<script lang="ts" setup>
import {onMounted} from "vue";
definePageMeta({
layout: 'mini'
})
onMounted(() => {
// 加载CSS样式文件
loadCSSFiles()
// 加载JavaScript文件
loadJSFiles()
})
const loadJSFiles = () => {
const jsFiles = [
'/js/jquery-1.11.3.min.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/about.css',
'/css/computer_public.css',
'/css/headORfooter.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>
<SoftwareDevelopmentMiniProgram/>
</view>
<div class="developBack"/>
<div class="developC1">
<div class="developC1_next">
<div class="title">
<span>五大技术核心</span>
<li>Five core technology</li>
<li class="p1"/>
</div>
<ul>
<li><img src="/img/devel_web.png">
<p>Web开发</p></li>
<li><img src="/img/devel_ios.png">
<p>ios APP</p></li>
<li><img src="/img/devel_android.png">
<p>android APP</p></li>
<li><img src="/img/devel_wx.png">
<p>微信开发</p></li>
<li><img src="/img/devel_html5.png">
<p>Html5开发</p></li>
</ul>
</div>
</div>
<div class="developC2">
<div class="developC2_next">
<div class="title">
<span>七大保障</span>
<li>Seven guarantee</li>
<li class="p1"/>
</div>
<ul class="develop_qz">
<li>平台系统是管理系统的一部分，在系统设计时尽可能照顾各方面的需要，在实现这些功能的时候，考虑下一步发展规划</li>
</ul>
<ul class="develop_aq">
<li>有健全的安全防范措施，从硬件、软件以及行政管理等方面严格管理，保证产品源代码安全</li>
</ul>
<ul class="develop_sy">
<li>打造高质量产品，对于各个场合都会有很强的实用性</li>
</ul>
<ul class="develop_kk">
<li>在网络设计时关键部位有高可靠性设备，对于重要的网络节点采用先进的高可靠性技术</li>
</ul>
<ul class="develop_kf">
<li>网络系统开放性要好，支持多网络协议</li>
</ul>
<ul class="develop_bz">
<li>
在网络设备和系统平台选型时，符合国际网络标准及工业标准，使系统的硬件环境、通信环境、软件环境相互间依赖减至最小，使其各自发挥自身优势
</li>
</ul>
<ul class="develop_xj">
<li>采用国际先进的互联网技术采用国际先进的网络技术模式采用国际先进的技术路线采用国际先进的体系结构</li>
</ul>
</div>
</div>
</view>
</template>
<style scoped>
</style>