首页创建0.8
This commit is contained in:
WindowBird
parent
53cba61a59
commit
ae50d50fe4
|
|
@ -3,30 +3,20 @@
|
|||
<div class="container wid-72">
|
||||
<div class="navbar-header">
|
||||
<button
|
||||
aria-expanded="false"
|
||||
class="navbar-toggle collapsed"
|
||||
data-target="#mynav"
|
||||
data-toggle="collapse"
|
||||
type="button"
|
||||
>
|
||||
aria-expanded="false" class="navbar-toggle collapsed" data-target="#mynav" data-toggle="collapse"
|
||||
type="button">
|
||||
<span class="sr-only"/>
|
||||
<span class="icon-bar"/>
|
||||
<span class="icon-bar"/>
|
||||
<span class="icon-bar"/>
|
||||
</button>
|
||||
<NuxtLink class="navbar-brand" to="/">
|
||||
<img alt="创特科技" class="img-responsive" src="/img/yuxiupdata/logo.png">
|
||||
<span>万物互联 智启未来</span>
|
||||
</NuxtLink>
|
||||
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="/img/yuxiupdata/logo.png"><span>万物互联 智启未来</span></a>
|
||||
</div>
|
||||
<!-- 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">
|
||||
<NuxtLink to="/">首页</NuxtLink>
|
||||
</li>
|
||||
|
||||
<!-- 共享解决方案 -->
|
||||
<li class="hidden-xs hidden-sm hidden-md"><a href="index.html">首页</a></li>
|
||||
<!-- <span class="sr-only">(current)</span> -->
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" role="button">共享解决方案<span class="caret"/></a>
|
||||
<div class="dropdown-menu">
|
||||
|
|
@ -39,56 +29,41 @@
|
|||
<img alt="共享充电宝" class="img-responsive" src="/img/yuxiupdata/mune-6.png">
|
||||
</div>
|
||||
<ul class="pull-right col-xs-4 col-sm-6">
|
||||
<li>
|
||||
<a href="http://bike.yuxiit.com/" target="_blank">共享单车
|
||||
<p>一种新型环保共享经济，最大化的利用了公共道路通过率</p>
|
||||
</a>
|
||||
</li>
|
||||
<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>
|
||||
<NuxtLink to="/sharedSolutions/scooter">共享滑板车<p>新的共享出行方式，轻便省力</p></NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/sharedSolutions/sharedbed">共享陪护床<p>
|
||||
立足医院民生需求而诞生，解决医患家属的休息问题</p></NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/sharedSolutions/ebike">共享电动车<p>通过扫码开锁，循环共享</p></NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/sharedSolutions/charging">共享充电宝<p>
|
||||
企业提供的充电租赁设备，用户扫码取出后即可使用，用完后就近归还</p></NuxtLink>
|
||||
</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="sharabank.html">共享充电宝<p>
|
||||
企业提供的充电租赁设备，用户扫码取出后即可使用，用完后就近归还</p></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 行业解决方案 -->
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" role="button">行业解决方案 <span class="caret"/></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="pull-left col-xs-8 col-sm-6">
|
||||
<!-- <img class="img-responsive" src="img/yuxiupdata/mune-7.png" alt="智慧餐饮" style="display: block;">
|
||||
<img class="img-responsive" src="img/yuxiupdata/mune-8.png" alt="智慧公寓"> -->
|
||||
<img alt="智能电动车" class="img-responsive" src="/img/yuxiupdata/mune-12.png">
|
||||
<img alt="智能换电柜" class="img-responsive" src="/img/yuxiupdata/mune-16.png">
|
||||
</div>
|
||||
<ul class="pull-right col-xs-4 col-sm-6">
|
||||
<li>
|
||||
<NuxtLink to="/industrySolutions/smartCar">智能电动车<p>
|
||||
打造智能电动车时代!方便用户的出行,让骑车出行便捷</p></NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/industrySolutions/batteryCabinet">智能换电柜<p>
|
||||
智能换电柜系统以集中换电替代用户充电，解决国内超过3.5亿辆电动车的电池续航问题</p></NuxtLink>
|
||||
</li>
|
||||
<!-- <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>
|
||||
打造智能电动车时代!方便用户的出行,让骑车出行便捷</p></a></li>
|
||||
<li><a href="Internet_Things_cabinet.html">智能换电柜<p>
|
||||
智能换电柜系统以集中换电替代用户充电，解决国内超过3.5亿辆电动车的电池续航问题</p></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 软件应用开发 -->
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" role="button">软件应用开发<span class="caret"/></a>
|
||||
<div class="dropdown-menu">
|
||||
|
|
@ -100,19 +75,13 @@
|
|||
<ul class="pull-right col-xs-4 col-sm-6">
|
||||
<li><a href="http://wechat.yuxiit.com/" target="_blank">微信开发<p>
|
||||
定制开发可使您的微信公众平台更突出价值</p></a></li>
|
||||
<li>
|
||||
<NuxtLink to="/softwareDevelopment/app">APP开发<p>
|
||||
小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验</p></NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/softwareDevelopment/miniprogram">小程序开发<p>
|
||||
提供高效的APP开发、手机APP制作与APP管理等服务</p></NuxtLink>
|
||||
</li>
|
||||
<li><a href="UI-s.html">APP开发<p>
|
||||
小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验</p></a></li>
|
||||
<li><a href="proDevelop.html">小程序开发<p>提供高效的APP开发、手机APP制作与APP管理等服务</p></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 物联网解决方案 -->
|
||||
<!-- <li><a href="Intelhardware.html">联网智能硬件</a></li> -->
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" role="button">物联网解决方案 <span class="caret"/></a>
|
||||
<div class="dropdown-menu">
|
||||
|
|
@ -124,25 +93,17 @@
|
|||
<img alt="物联网IOT云平台" class="img-responsive" src="/img/yuxiupdata/mune-14.png">
|
||||
</div>
|
||||
<ul class="pull-right col-xs-4 col-sm-6">
|
||||
<li>
|
||||
<NuxtLink to="/iotSolutions/application">物联网应用定制<p>规范化的开发流程，实现产品快速落地</p>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/iotSolutions/hardware">物联网智能硬件<p>支持定制，满足各类硬件场景需求</p></NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/iotSolutions/cloud">物联网IOT云平台<p>灵活、可靠、安全，有效降低成本</p></NuxtLink>
|
||||
</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="hidden-xs hidden-sm hidden-md">
|
||||
<NuxtLink to="/about">关于创特</NuxtLink>
|
||||
</li>
|
||||
<li class="hidden-xs hidden-sm hidden-md"><a href="about.html">关于创特 </a></li>
|
||||
<li><a href="#contact-us">联系我们</a></li>
|
||||
<li class="hidden-xs hidden-sm hidden-md hidden-lg"/>
|
||||
<!-- <li><a>0755-85225123</a></li> -->
|
||||
<!-- <li class="hidden-xs hidden-sm"><a>18123752516</a></li> -->
|
||||
<li class="hidden-xs hidden-sm hidden-md hidden-lg"/>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div>
|
||||
|
|
@ -150,33 +111,40 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// import {onMounted} from "vue";
|
||||
//
|
||||
// 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)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// // 组件逻辑可以在这里添加
|
||||
// onMounted(() => {
|
||||
// // 加载CSS样式文件
|
||||
// loadCSSFiles()
|
||||
// })
|
||||
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()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,249 +0,0 @@
|
|||
<template>
|
||||
<div class="container-fluid text-center mainitems" style="background: #FAFAFA;">
|
||||
<div class="headtit">多场景应用</div>
|
||||
<div class="minstit">通过专业的智能硬件与软件系统开发，解决物联网平台在各类复杂场景下的应用问题</div>
|
||||
<div class="row bodycnt">
|
||||
<div
|
||||
v-for="(application, index) in applications"
|
||||
:key="index"
|
||||
class="col-xs-12 col-lg-2"
|
||||
:class="{ 'col-lg-offset-2': index === 0 }"
|
||||
@mouseenter="setHovered(index)"
|
||||
@mouseleave="clearHovered"
|
||||
>
|
||||
<div
|
||||
class="bodycnt-info"
|
||||
:class="`bodycnt-info${index + 1}`"
|
||||
>
|
||||
<img :src="application.image" :alt="application.title">
|
||||
<span></span>{{ application.title }}
|
||||
</div>
|
||||
|
||||
<div class="bodycnt-datails" :class="{ 'show': hoveredIndex === index }">
|
||||
<h2>{{ application.title }}</h2>
|
||||
<span></span>
|
||||
<p v-html="application.description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-btns">
|
||||
<a href="/yuxi/Intelhardware">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 响应式数据
|
||||
const hoveredIndex = ref(-1)
|
||||
|
||||
// 应用场景数据
|
||||
const applications = [
|
||||
{
|
||||
title: '智能家居',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner2-1.png',
|
||||
description: '智能门锁<br> 智能空调<br> 智能电饭煲<br> 智能窗帘<br> …'
|
||||
},
|
||||
{
|
||||
title: '智慧出行',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner2-2.png',
|
||||
description: '共享单车<br> 共享汽车<br> 共享滑板车<br> 共享电动车<br> …'
|
||||
},
|
||||
{
|
||||
title: '智慧医疗',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner2-3.png',
|
||||
description: '共享陪护床<br> 智能安防<br> 共享打印机<br> 共享充电宝<br> …'
|
||||
},
|
||||
{
|
||||
title: '智慧园区',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner2-4.png',
|
||||
description: '智能自提柜<br> 共享健身房<br> 共享洗衣机<br> 智能门禁<br> …'
|
||||
}
|
||||
]
|
||||
|
||||
// 方法
|
||||
const setHovered = (index: number) => {
|
||||
hoveredIndex.value = index
|
||||
}
|
||||
|
||||
const clearHovered = () => {
|
||||
hoveredIndex.value = -1
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mainitems {
|
||||
padding: 60px 0;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.headtit {
|
||||
font-size: 2.5em;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.minstit {
|
||||
font-size: 1.2em;
|
||||
color: #666;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.bodycnt {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.bodycnt-info {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 40px 20px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bodycnt-info:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.bodycnt-info img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 15px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.bodycnt-info span {
|
||||
font-size: 1.2em;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 不同应用场景的背景色 */
|
||||
.bodycnt-info1 {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bodycnt-info2 {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bodycnt-info3 {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bodycnt-info4 {
|
||||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bodycnt-datails {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 30px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bodycnt-datails.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bodycnt-datails h2 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bodycnt-datails span {
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bodycnt-datails p {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.m-btns {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.m-btns a {
|
||||
display: inline-block;
|
||||
padding: 15px 30px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.m-btns a:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.bodycnt {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
flex: 0 0 30%;
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.headtit {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.minstit {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bodycnt-info {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,358 +0,0 @@
|
|||
<!--<template>-->
|
||||
<!-- <div>-->
|
||||
<!-- <!– 底部 –>-->
|
||||
<!-- <div class="footer">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="row">-->
|
||||
<!-- <div class="col-xs-4 col-lg-2">-->
|
||||
<!-- <h2>解决方案</h2>-->
|
||||
<!-- <ul class="list-unstyled">-->
|
||||
<!-- <li><a href="http://bike.yuxiit.com/" target="_blank">共享单车</a></li>-->
|
||||
<!-- <li><a href="/yuxi/scooter">共享滑板车</a></li>-->
|
||||
<!-- <li><a href="/yuxi/sharedbed">共享陪护床</a></li>-->
|
||||
<!-- <li><a href="/yuxi/Ebike">共享电动车</a></li>-->
|
||||
<!-- <li><a href="/yuxi/sharabank">共享充电宝</a></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="col-xs-4 col-lg-2">-->
|
||||
<!-- <h2>行业方案</h2>-->
|
||||
<!-- <ul class="list-unstyled">-->
|
||||
<!-- <li><a href="http://tianmei.yuxiit.com/" target="_blank" title="智慧餐饮">智慧餐饮</a></li>-->
|
||||
<!-- <li><a href="http://hx.yuxiit.com/" target="_blank" title="智慧公寓">智慧公寓</a></li>-->
|
||||
<!-- <li><a href="/yuxi/Internet_Things_ElectCar" target="_blank" title="智能电动车">智能电动车</a></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="col-xs-4 col-lg-2">-->
|
||||
<!-- <h2>软件开发</h2>-->
|
||||
<!-- <ul class="list-unstyled">-->
|
||||
<!-- <li><a href="http://wechat.yuxiit.com/" target="_blank">微信开发</a></li>-->
|
||||
<!-- <li><a href="/yuxi/UI-s">APP开发</a></li>-->
|
||||
<!-- <li><a href="/yuxi/proDevelop">小程序开发</a></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="col-xs-4 col-lg-2">-->
|
||||
<!-- <h2>智能硬件</h2>-->
|
||||
<!-- <ul class="list-unstyled">-->
|
||||
<!-- <li><a href="/yuxi/Internet_Things" title="车锁">物联网应用定制</a></li>-->
|
||||
<!-- <li><a href="/yuxi/Internet_Things_hardware" title="车锁">物联网智能硬件</a></li>-->
|
||||
<!-- <li><a href="/yuxi/Internet_Things_IOT" title="联网控制器">物联网IOT云平台</a></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="col-xs-8 col-lg-3 col-lg-offset-1" id="contact-us">-->
|
||||
<!-- <div class="row">-->
|
||||
<!-- <div class="col-xs-8">-->
|
||||
<!-- <h2>联系我们</h2>-->
|
||||
<!-- <ul class="list-unstyled">-->
|
||||
<!-- <li><span>客服电话：0755-85225123</span></li>-->
|
||||
<!-- <li><span>商务合作：18123752516</span></li>-->
|
||||
<!-- <li><span>反馈建议：yuxi@yuxiit.com</span></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="col-xs-4">-->
|
||||
<!-- <img src="/www.yuxiit.com/img/img/qywx.png" alt="联系我们" style="width: 120px; margin-top: 20px;">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- -->
|
||||
<!-- <!– 滚动文字 –>-->
|
||||
<!-- <div style="background: #000; color: #fff;">-->
|
||||
<!-- <MARQUEE>-->
|
||||
<!-- <a href="/yuxi/index-2" title="深圳APP开发" target="_blank" style="color: #fff;">-->
|
||||
<!-- <strong>共享APP开发-创特科技专注于共享陪护床，共享电动车，共享汽车，共享充电桩，共享家居电器，共享按摩椅，共享充电宝，共享滑板车等共享软件开发及物联网解决方案</strong>-->
|
||||
<!-- </a>-->
|
||||
<!-- </MARQUEE>-->
|
||||
<!-- </div>-->
|
||||
<!-- -->
|
||||
<!-- <!– 版权信息 –>-->
|
||||
<!-- <div class="containe min-footer text-center">-->
|
||||
<!-- <div class="row">-->
|
||||
<!-- <div class="col-xs-6">-->
|
||||
<!-- Copyright © 2013-2025深圳市创特科技有限公司 -->
|
||||
<!-- <a href="http://beian.miit.gov.cn/" target="_blank">粤ICP备14055703号-1</a>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="col-xs-6">公司地址：深圳市龙华新区1970文化创意产业园A栋206</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <!– 移动端服务按钮 –>-->
|
||||
<!-- <div class="col-xs-4 hidden-md hidden-lg">-->
|
||||
<!-- <div class="servers">-->
|
||||
<!-- <img src="/www.yuxiit.com/img/img/wecate.png" alt="18123752516" id="getphones">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <!– 复制成功模态框 –>-->
|
||||
<!-- <div class="modal fade" id="myModal">-->
|
||||
<!-- <div class="modal-dialog" role="document">-->
|
||||
<!-- <div class="modal-content">-->
|
||||
<!-- <div class="modal-header" style="border: none">-->
|
||||
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
|
||||
<!-- <span aria-hidden="true">×</span>-->
|
||||
<!-- </button>-->
|
||||
<!-- <h4 class="modal-title">复制成功</h4>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="modal-body" style="text-align: center;">-->
|
||||
<!-- <span class="glyphicon glyphicon-ok" style="color: green; font-size: 40px;"></span>-->
|
||||
<!-- <p>复制成功</p>-->
|
||||
<!-- <p>手机号：18123752516</p>-->
|
||||
<!-- <p>添加微信好友，详细了解产品。</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="modal-footer" style="border: none">-->
|
||||
<!-- <button type="button" class="btn btn-default" data-dismiss="modal" style="width: 100%; background: green; border: none; color: #fff;">知道了</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--</template>-->
|
||||
|
||||
<!--<script setup lang="ts">-->
|
||||
<!--import { onMounted } from 'vue'-->
|
||||
|
||||
<!--// 复制手机号功能-->
|
||||
<!--const copyPhoneNumber = () => {-->
|
||||
<!-- const phoneNumber = '18123752516'-->
|
||||
<!-- const oInput = document.createElement('input')-->
|
||||
<!-- oInput.value = phoneNumber-->
|
||||
<!-- document.body.appendChild(oInput)-->
|
||||
<!-- oInput.select()-->
|
||||
<!-- document.execCommand('Copy')-->
|
||||
<!-- oInput.className = 'oInput'-->
|
||||
<!-- oInput.style.display = 'none'-->
|
||||
<!-- -->
|
||||
<!-- // 显示模态框-->
|
||||
<!-- const modal = document.getElementById('myModal')-->
|
||||
<!-- if (modal) {-->
|
||||
<!-- modal.style.display = 'block'-->
|
||||
<!-- modal.classList.add('show')-->
|
||||
<!-- }-->
|
||||
<!--}-->
|
||||
|
||||
<!--onMounted(() => {-->
|
||||
<!-- // 绑定复制手机号事件-->
|
||||
<!-- const phoneElement = document.getElementById('getphones')-->
|
||||
<!-- if (phoneElement) {-->
|
||||
<!-- phoneElement.addEventListener('click', copyPhoneNumber)-->
|
||||
<!-- }-->
|
||||
<!-- -->
|
||||
<!-- // 绑定模态框关闭事件-->
|
||||
<!-- const closeButtons = document.querySelectorAll('[data-dismiss="modal"]')-->
|
||||
<!-- closeButtons.forEach(button => {-->
|
||||
<!-- button.addEventListener('click', () => {-->
|
||||
<!-- const modal = document.getElementById('myModal')-->
|
||||
<!-- if (modal) {-->
|
||||
<!-- modal.style.display = 'none'-->
|
||||
<!-- modal.classList.remove('show')-->
|
||||
<!-- }-->
|
||||
<!-- })-->
|
||||
<!-- })-->
|
||||
<!--})-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<style scoped>-->
|
||||
<!--.footer {-->
|
||||
<!-- background: #2c3e50;-->
|
||||
<!-- color: #fff;-->
|
||||
<!-- padding: 50px 0 30px;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.footer h2 {-->
|
||||
<!-- color: #fff;-->
|
||||
<!-- font-size: 1.2em;-->
|
||||
<!-- margin-bottom: 20px;-->
|
||||
<!-- font-weight: bold;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.footer .list-unstyled {-->
|
||||
<!-- list-style: none;-->
|
||||
<!-- padding: 0;-->
|
||||
<!-- margin: 0;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.footer .list-unstyled li {-->
|
||||
<!-- margin-bottom: 8px;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.footer .list-unstyled a {-->
|
||||
<!-- color: #bdc3c7;-->
|
||||
<!-- text-decoration: none;-->
|
||||
<!-- transition: color 0.3s ease;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.footer .list-unstyled a:hover {-->
|
||||
<!-- color: #3498db;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.footer .list-unstyled span {-->
|
||||
<!-- color: #bdc3c7;-->
|
||||
<!-- font-size: 0.9em;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.containe {-->
|
||||
<!-- background: #34495e;-->
|
||||
<!-- color: #bdc3c7;-->
|
||||
<!-- padding: 20px 0;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.containe a {-->
|
||||
<!-- color: #3498db;-->
|
||||
<!-- text-decoration: none;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.containe a:hover {-->
|
||||
<!-- color: #2980b9;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.servers {-->
|
||||
<!-- position: fixed;-->
|
||||
<!-- bottom: 20px;-->
|
||||
<!-- right: 20px;-->
|
||||
<!-- z-index: 1000;-->
|
||||
<!-- cursor: pointer;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.servers img {-->
|
||||
<!-- width: 60px;-->
|
||||
<!-- height: 60px;-->
|
||||
<!-- border-radius: 50%;-->
|
||||
<!-- box-shadow: 0 4px 12px rgba(0,0,0,0.3);-->
|
||||
<!-- transition: all 0.3s ease;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.servers img:hover {-->
|
||||
<!-- transform: scale(1.1);-->
|
||||
<!-- box-shadow: 0 6px 16px rgba(0,0,0,0.4);-->
|
||||
<!--}-->
|
||||
|
||||
<!--/* 模态框样式 */-->
|
||||
<!--.modal {-->
|
||||
<!-- display: none;-->
|
||||
<!-- position: fixed;-->
|
||||
<!-- z-index: 1000;-->
|
||||
<!-- left: 0;-->
|
||||
<!-- top: 0;-->
|
||||
<!-- width: 100%;-->
|
||||
<!-- height: 100%;-->
|
||||
<!-- background-color: rgba(0,0,0,0.5);-->
|
||||
<!--}-->
|
||||
|
||||
<!--.modal.show {-->
|
||||
<!-- display: block;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.modal-dialog {-->
|
||||
<!-- position: relative;-->
|
||||
<!-- width: auto;-->
|
||||
<!-- margin: 10px;-->
|
||||
<!-- max-width: 500px;-->
|
||||
<!-- margin: 30px auto;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.modal-content {-->
|
||||
<!-- position: relative;-->
|
||||
<!-- background-color: #fff;-->
|
||||
<!-- border-radius: 8px;-->
|
||||
<!-- box-shadow: 0 4px 12px rgba(0,0,0,0.3);-->
|
||||
<!--}-->
|
||||
|
||||
<!--.modal-header {-->
|
||||
<!-- padding: 20px;-->
|
||||
<!-- border-bottom: 1px solid #e9ecef;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.modal-title {-->
|
||||
<!-- margin: 0;-->
|
||||
<!-- font-size: 1.2em;-->
|
||||
<!-- font-weight: bold;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.close {-->
|
||||
<!-- float: right;-->
|
||||
<!-- font-size: 1.5em;-->
|
||||
<!-- font-weight: bold;-->
|
||||
<!-- line-height: 1;-->
|
||||
<!-- color: #000;-->
|
||||
<!-- text-shadow: 0 1px 0 #fff;-->
|
||||
<!-- opacity: 0.5;-->
|
||||
<!-- cursor: pointer;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.close:hover {-->
|
||||
<!-- opacity: 0.75;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.modal-body {-->
|
||||
<!-- padding: 20px;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.modal-footer {-->
|
||||
<!-- padding: 20px;-->
|
||||
<!-- border-top: 1px solid #e9ecef;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.btn {-->
|
||||
<!-- display: inline-block;-->
|
||||
<!-- padding: 8px 16px;-->
|
||||
<!-- margin-bottom: 0;-->
|
||||
<!-- font-size: 14px;-->
|
||||
<!-- font-weight: normal;-->
|
||||
<!-- line-height: 1.42857143;-->
|
||||
<!-- text-align: center;-->
|
||||
<!-- white-space: nowrap;-->
|
||||
<!-- vertical-align: middle;-->
|
||||
<!-- cursor: pointer;-->
|
||||
<!-- border: 1px solid transparent;-->
|
||||
<!-- border-radius: 4px;-->
|
||||
<!-- text-decoration: none;-->
|
||||
<!--}-->
|
||||
|
||||
<!--.btn-default {-->
|
||||
<!-- color: #333;-->
|
||||
<!-- background-color: #fff;-->
|
||||
<!-- border-color: #ccc;-->
|
||||
<!--}-->
|
||||
|
||||
<!--/* 滚动文字样式 */-->
|
||||
<!--MARQUEE {-->
|
||||
<!-- padding: 10px 0;-->
|
||||
<!-- font-size: 14px;-->
|
||||
<!--}-->
|
||||
|
||||
<!--/* 响应式设计 */-->
|
||||
<!--@media (max-width: 768px) {-->
|
||||
<!-- .footer {-->
|
||||
<!-- padding: 30px 0 20px;-->
|
||||
<!-- }-->
|
||||
<!-- -->
|
||||
<!-- .footer h2 {-->
|
||||
<!-- font-size: 1em;-->
|
||||
<!-- margin-bottom: 15px;-->
|
||||
<!-- }-->
|
||||
<!-- -->
|
||||
<!-- .containe {-->
|
||||
<!-- padding: 15px 0;-->
|
||||
<!-- font-size: 0.9em;-->
|
||||
<!-- }-->
|
||||
<!-- -->
|
||||
<!-- .col-xs-6 {-->
|
||||
<!-- margin-bottom: 10px;-->
|
||||
<!-- }-->
|
||||
<!-- -->
|
||||
<!-- .servers {-->
|
||||
<!-- bottom: 10px;-->
|
||||
<!-- right: 10px;-->
|
||||
<!-- }-->
|
||||
<!-- -->
|
||||
<!-- .servers img {-->
|
||||
<!-- width: 50px;-->
|
||||
<!-- height: 50px;-->
|
||||
<!-- }-->
|
||||
<!--}-->
|
||||
<!--</style>-->
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
<template>
|
||||
<div class="container-fluid text-center mainitems hardware">
|
||||
<div class="headtit" style="color: #fff;">联网智能硬件</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-lg-8 col-lg-offset-2">
|
||||
<!-- 智能锁 -->
|
||||
<div class="hardware-conter">
|
||||
<img class="img-responsive" src="/www.yuxiit.com/img/yuxiupdata/locker.png" alt="联网智能硬件">
|
||||
<div class="col-xs-12 col-lg-8">
|
||||
<span>锁</span>
|
||||
<i></i>
|
||||
<p>N2搭载蓝牙4.0通讯技术，以及充分利用这项技术配合物联锁App实现蓝牙秒连接，秒解锁。未来，无需等待。GPS+移动基站LBS多重精准定位，蓝牙低功耗待机，轨迹记录，电子围栏（延伸），远程授权自动开锁，支持应急开锁（延伸），支持短信远程修改相关参数。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联网控制器 -->
|
||||
<div class="hardware-conter" style="margin-top: 30px;">
|
||||
<div class="col-xs-12 col-lg-8">
|
||||
<span>联网控制器</span>
|
||||
<i></i>
|
||||
<p>通过改造传统传感器/PLC/变频器等实现快速联接（无需部署新设备）。通过灵活部署，快速形成各领域的物联网解决方案；有效降低用户改造、部署、维护成本。</p>
|
||||
</div>
|
||||
<img class="img-responsive" src="/www.yuxiit.com/img/yuxiupdata/koz.png" alt="联网智能硬件" style="float: right;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 了解更多按钮 -->
|
||||
<div class="m-btns" style="background: none">
|
||||
<a href="/yuxi/Intelhardware">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 组件逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hardware {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 80px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hardware::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.headtit {
|
||||
font-size: 2.5em;
|
||||
color: #fff;
|
||||
margin-bottom: 50px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hardware-conter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hardware-conter img {
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hardware-conter img:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 12px 32px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.hardware-conter span {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.hardware-conter i {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #fff, #f0f0f0);
|
||||
margin: 20px 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.hardware-conter p {
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.8;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.m-btns {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.m-btns a {
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: 30px;
|
||||
font-weight: bold;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.m-btns a:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-color: rgba(255,255,255,0.5);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.hardware-conter {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hardware-conter img {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.headtit {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.hardware-conter span {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.hardware-conter p {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.hardware-conter img {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.hardware-conter img {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hardware-conter:nth-child(2) img {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,435 +0,0 @@
|
|||
<template>
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container wid-72">
|
||||
<div class="navbar-header">
|
||||
<button
|
||||
type="button"
|
||||
class="navbar-toggle collapsed"
|
||||
data-toggle="collapse"
|
||||
data-target="#mynav"
|
||||
aria-expanded="false"
|
||||
@click="toggleMobileMenu"
|
||||
>
|
||||
<span class="sr-only"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/yuxi">
|
||||
<img class="img-responsive" src="/www.yuxiit.com/img/yuxiupdata/logo.png" alt="玉犀科技">
|
||||
<span>万物互联 智启未来</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" :class="{ 'in': mobileMenuOpen }" id="mynav">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="hidden-xs hidden-sm hidden-md">
|
||||
<NuxtLink to="/yuxi">首页</NuxtLink>
|
||||
</li>
|
||||
|
||||
<!-- 共享解决方案 -->
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" role="button" @click="toggleDropdown('shared')">
|
||||
共享解决方案<span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu" :class="{ 'show': activeDropdown === 'shared' }">
|
||||
<div class="pull-left col-xs-8 col-sm-6">
|
||||
<img
|
||||
v-for="(img, index) in sharedMenuImages"
|
||||
:key="index"
|
||||
class="img-responsive"
|
||||
:src="img.src"
|
||||
:alt="img.alt"
|
||||
:style="{ display: index === 0 ? 'block' : 'none' }"
|
||||
>
|
||||
</div>
|
||||
<ul class="pull-right col-xs-4 col-sm-6">
|
||||
<li v-for="(item, index) in sharedMenuItems" :key="index">
|
||||
<a
|
||||
:href="item.href"
|
||||
:target="item.target"
|
||||
@mouseenter="showMenuImage(index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
<p>{{ item.description }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 行业解决方案 -->
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" role="button" @click="toggleDropdown('industry')">
|
||||
行业解决方案 <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu" :class="{ 'show': activeDropdown === 'industry' }">
|
||||
<div class="pull-left col-xs-8 col-sm-6">
|
||||
<img
|
||||
v-for="(img, index) in industryMenuImages"
|
||||
:key="index"
|
||||
class="img-responsive"
|
||||
:src="img.src"
|
||||
:alt="img.alt"
|
||||
:style="{ display: index === 0 ? 'block' : 'none' }"
|
||||
>
|
||||
</div>
|
||||
<ul class="pull-right col-xs-4 col-sm-6">
|
||||
<li v-for="(item, index) in industryMenuItems" :key="index">
|
||||
<a
|
||||
:href="item.href"
|
||||
:target="item.target"
|
||||
@mouseenter="showIndustryMenuImage(index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
<p>{{ item.description }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 软件应用开发 -->
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" role="button" @click="toggleDropdown('software')">
|
||||
软件应用开发<span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu" :class="{ 'show': activeDropdown === 'software' }">
|
||||
<div class="pull-left col-xs-8 col-sm-6">
|
||||
<img
|
||||
v-for="(img, index) in softwareMenuImages"
|
||||
:key="index"
|
||||
class="img-responsive"
|
||||
:src="img.src"
|
||||
:alt="img.alt"
|
||||
:style="{ display: index === 0 ? 'block' : 'none' }"
|
||||
>
|
||||
</div>
|
||||
<ul class="pull-right col-xs-4 col-sm-6">
|
||||
<li v-for="(item, index) in softwareMenuItems" :key="index">
|
||||
<a
|
||||
:href="item.href"
|
||||
:target="item.target"
|
||||
@mouseenter="showSoftwareMenuImage(index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
<p>{{ item.description }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 物联网解决方案 -->
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" role="button" @click="toggleDropdown('iot')">
|
||||
物联网解决方案 <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu" :class="{ 'show': activeDropdown === 'iot' }">
|
||||
<div class="pull-left col-xs-8 col-sm-6">
|
||||
<img
|
||||
v-for="(img, index) in iotMenuImages"
|
||||
:key="index"
|
||||
class="img-responsive"
|
||||
:src="img.src"
|
||||
:alt="img.alt"
|
||||
:style="{ display: index === 0 ? 'block' : 'none' }"
|
||||
>
|
||||
</div>
|
||||
<ul class="pull-right col-xs-4 col-sm-6">
|
||||
<li v-for="(item, index) in iotMenuItems" :key="index">
|
||||
<a
|
||||
:href="item.href"
|
||||
:target="item.target"
|
||||
@mouseenter="showIotMenuImage(index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
<p>{{ item.description }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="hidden-xs hidden-sm hidden-md">
|
||||
<NuxtLink to="/yuxi/about">关于创特</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#contact-us">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 响应式数据
|
||||
const mobileMenuOpen = ref(false)
|
||||
const activeDropdown = ref('')
|
||||
|
||||
// 共享解决方案菜单数据
|
||||
const sharedMenuImages = [
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-1.png', alt: '共享单车' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-2.png', alt: '景区共享电动车' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-3.png', alt: '共享滑板车' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-4.png', alt: '共享陪护床' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-5.png', alt: '共享电动车' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-6.png', alt: '共享充电宝' }
|
||||
]
|
||||
|
||||
const sharedMenuItems = [
|
||||
{
|
||||
title: '共享单车',
|
||||
description: '一种新型环保共享经济，最大化的利用了公共道路通过率',
|
||||
href: 'http://bike.yuxiit.com/',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
title: '景区共享电动车',
|
||||
description: '有助于缓解交通堵塞，以及公路的磨损，减少空气污染，降低对能量的依赖性',
|
||||
href: '#',
|
||||
target: '_self'
|
||||
},
|
||||
{
|
||||
title: '共享滑板车',
|
||||
description: '新的共享出行方式，轻便省力',
|
||||
href: '/yuxi/scooter',
|
||||
target: '_self'
|
||||
},
|
||||
{
|
||||
title: '共享陪护床',
|
||||
description: '立足医院民生需求而诞生，解决医患家属的休息问题',
|
||||
href: '/yuxi/sharedbed',
|
||||
target: '_self'
|
||||
},
|
||||
{
|
||||
title: '共享电动车',
|
||||
description: '通过扫码开锁，循环共享',
|
||||
href: '/yuxi/Ebike',
|
||||
target: '_self'
|
||||
},
|
||||
{
|
||||
title: '共享充电宝',
|
||||
description: '企业提供的充电租赁设备，用户扫码取出后即可使用，用完后就近归还',
|
||||
href: '/yuxi/sharabank',
|
||||
target: '_self'
|
||||
}
|
||||
]
|
||||
|
||||
// 行业解决方案菜单数据
|
||||
const industryMenuImages = [
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-12.png', alt: '智能电动车' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-16.png', alt: '智能换电柜' }
|
||||
]
|
||||
|
||||
const industryMenuItems = [
|
||||
{
|
||||
title: '智能电动车',
|
||||
description: '打造智能电动车时代!方便用户的出行,让骑车出行便捷',
|
||||
href: '/yuxi/Internet_Things_ElectCar',
|
||||
target: '_self'
|
||||
},
|
||||
{
|
||||
title: '智能换电柜',
|
||||
description: '智能换电柜系统以集中换电替代用户充电，解决国内超过3.5亿辆电动车的电池续航问题',
|
||||
href: '/yuxi/Internet_Things_cabinet',
|
||||
target: '_self'
|
||||
}
|
||||
]
|
||||
|
||||
// 软件应用开发菜单数据
|
||||
const softwareMenuImages = [
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-9.png', alt: '微信开发' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-10.png', alt: 'APP开发' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-11.png', alt: '小程序开发' }
|
||||
]
|
||||
|
||||
const softwareMenuItems = [
|
||||
{
|
||||
title: '微信开发',
|
||||
description: '定制开发可使您的微信公众平台更突出价值',
|
||||
href: 'http://wechat.yuxiit.com/',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
title: 'APP开发',
|
||||
description: '小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验',
|
||||
href: '/yuxi/UI-s',
|
||||
target: '_self'
|
||||
},
|
||||
{
|
||||
title: '小程序开发',
|
||||
description: '提供高效的APP开发、手机APP制作与APP管理等服务',
|
||||
href: '/yuxi/proDevelop',
|
||||
target: '_self'
|
||||
}
|
||||
]
|
||||
|
||||
// 物联网解决方案菜单数据
|
||||
const iotMenuImages = [
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-15.png', alt: '物联网应用定制' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-13.png', alt: '物联网智能硬件' },
|
||||
{ src: '/www.yuxiit.com/img/yuxiupdata/mune-14.png', alt: '物联网IOT云平台' }
|
||||
]
|
||||
|
||||
const iotMenuItems = [
|
||||
{
|
||||
title: '物联网应用定制',
|
||||
description: '规范化的开发流程，实现产品快速落地',
|
||||
href: '/yuxi/Internet_Things',
|
||||
target: '_self'
|
||||
},
|
||||
{
|
||||
title: '物联网智能硬件',
|
||||
description: '支持定制，满足各类硬件场景需求',
|
||||
href: '/yuxi/Internet_Things_hardware',
|
||||
target: '_self'
|
||||
},
|
||||
{
|
||||
title: '物联网IOT云平台',
|
||||
description: '灵活、可靠、安全，有效降低成本',
|
||||
href: '/yuxi/Internet_Things_IOT',
|
||||
target: '_self'
|
||||
}
|
||||
]
|
||||
|
||||
// 方法
|
||||
const toggleMobileMenu = () => {
|
||||
mobileMenuOpen.value = !mobileMenuOpen.value
|
||||
}
|
||||
|
||||
const toggleDropdown = (type: string) => {
|
||||
activeDropdown.value = activeDropdown.value === type ? '' : type
|
||||
}
|
||||
|
||||
const showMenuImage = (index: number) => {
|
||||
// 显示对应的菜单图片
|
||||
const images = document.querySelectorAll('.dropdown-menu .pull-left img')
|
||||
images.forEach((img, i) => {
|
||||
;(img as HTMLElement).style.display = i === index ? 'block' : 'none'
|
||||
})
|
||||
}
|
||||
|
||||
const showIndustryMenuImage = (index: number) => {
|
||||
const images = document.querySelectorAll('.dropdown-menu .pull-left img')
|
||||
images.forEach((img, i) => {
|
||||
;(img as HTMLElement).style.display = i === index ? 'block' : 'none'
|
||||
})
|
||||
}
|
||||
|
||||
const showSoftwareMenuImage = (index: number) => {
|
||||
const images = document.querySelectorAll('.dropdown-menu .pull-left img')
|
||||
images.forEach((img, i) => {
|
||||
;(img as HTMLElement).style.display = i === index ? 'block' : 'none'
|
||||
})
|
||||
}
|
||||
|
||||
const showIotMenuImage = (index: number) => {
|
||||
const images = document.querySelectorAll('.dropdown-menu .pull-left img')
|
||||
images.forEach((img, i) => {
|
||||
;(img as HTMLElement).style.display = i === index ? 'block' : 'none'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu .pull-left {
|
||||
width: 60%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dropdown-menu .pull-right {
|
||||
width: 40%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.dropdown-menu ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu li {
|
||||
padding: 8px 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.dropdown-menu li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu a:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.dropdown-menu p {
|
||||
margin: 5px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
border-top: 1px solid #e7e7e7;
|
||||
}
|
||||
|
||||
.navbar-collapse.in {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,324 +0,0 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
<div class="blank50"></div>
|
||||
<div class="cBlack f_42 line42 marginB10 wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
|
||||
开发资讯
|
||||
</div>
|
||||
<div class="cGray f_18 wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
|
||||
NEWS
|
||||
</div>
|
||||
<div class="blank20"></div>
|
||||
<div class="blank20"></div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="(newsCategory, index) in newsCategories"
|
||||
:key="index"
|
||||
class="col-md-4 firstPageBox3Li wow fadeInDown animated active"
|
||||
:data-wow-delay="`${300 + index * 200}ms`"
|
||||
style="visibility: visible; animation-delay: 300ms; animation-name: fadeInDown;"
|
||||
>
|
||||
<div class="title f_22 cBlue text-center pointer" :title="newsCategory.title">
|
||||
{{ newsCategory.title }}
|
||||
</div>
|
||||
<hr>
|
||||
<div class="blank20"></div>
|
||||
<ul>
|
||||
<li v-for="(item, itemIndex) in newsCategory.items" :key="itemIndex">
|
||||
<a :href="item.link" :target="item.target">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<span class="date">{{ item.date }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="blank50"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 新闻资讯数据
|
||||
const newsCategories = [
|
||||
{
|
||||
title: '解决方案',
|
||||
items: [
|
||||
{
|
||||
title: '共享单车解决方案助力城市绿色出行',
|
||||
link: '/yuxi/news/solution1',
|
||||
target: '_self',
|
||||
date: '2024-01-15'
|
||||
},
|
||||
{
|
||||
title: '智能电动车系统提升出行效率',
|
||||
link: '/yuxi/news/solution2',
|
||||
target: '_self',
|
||||
date: '2024-01-10'
|
||||
},
|
||||
{
|
||||
title: '共享陪护床解决医院陪护难题',
|
||||
link: '/yuxi/news/solution3',
|
||||
target: '_self',
|
||||
date: '2024-01-08'
|
||||
},
|
||||
{
|
||||
title: '物联网平台助力智慧城市建设',
|
||||
link: '/yuxi/news/solution4',
|
||||
target: '_self',
|
||||
date: '2024-01-05'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '开发知识',
|
||||
items: [
|
||||
{
|
||||
title: 'Vue 3 Composition API 最佳实践',
|
||||
link: '/yuxi/news/knowledge1',
|
||||
target: '_self',
|
||||
date: '2024-01-12'
|
||||
},
|
||||
{
|
||||
title: 'Nuxt.js 服务端渲染优化技巧',
|
||||
link: '/yuxi/news/knowledge2',
|
||||
target: '_self',
|
||||
date: '2024-01-09'
|
||||
},
|
||||
{
|
||||
title: 'TypeScript 在大型项目中的应用',
|
||||
link: '/yuxi/news/knowledge3',
|
||||
target: '_self',
|
||||
date: '2024-01-07'
|
||||
},
|
||||
{
|
||||
title: '移动端开发性能优化指南',
|
||||
link: '/yuxi/news/knowledge4',
|
||||
target: '_self',
|
||||
date: '2024-01-04'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '行业动态',
|
||||
items: [
|
||||
{
|
||||
title: '2024年物联网行业发展趋势分析',
|
||||
link: '/yuxi/news/industry1',
|
||||
target: '_self',
|
||||
date: '2024-01-14'
|
||||
},
|
||||
{
|
||||
title: '共享经济模式创新与挑战',
|
||||
link: '/yuxi/news/industry2',
|
||||
target: '_self',
|
||||
date: '2024-01-11'
|
||||
},
|
||||
{
|
||||
title: '智能硬件市场前景展望',
|
||||
link: '/yuxi/news/industry3',
|
||||
target: '_self',
|
||||
date: '2024-01-06'
|
||||
},
|
||||
{
|
||||
title: '数字化转型助力企业升级',
|
||||
link: '/yuxi/news/industry4',
|
||||
target: '_self',
|
||||
date: '2024-01-03'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 60px 0;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.blank50 {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.blank20 {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.cBlack {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cGray {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.f_42 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.f_22 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.f_18 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.line42 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.marginB10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cBlue {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.firstPageBox3Li {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.firstPageBox3Li:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #007bff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: #007bff;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: #e0e0e0;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background: #f8f9fa;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 0.95em;
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
ul li a:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: block;
|
||||
color: #999;
|
||||
font-size: 0.8em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.wow {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.wow.animated {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
animation: fadeInDown 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.f_42 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.f_22 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.firstPageBox3Li {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.col-md-4 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
<template>
|
||||
<div class="container text-center mainitems">
|
||||
<div class="headtit">软件应用开发</div>
|
||||
<div class="row applicatBody">
|
||||
<div
|
||||
v-for="(software, index) in softwareItems"
|
||||
:key="index"
|
||||
class="col-xs-12 col-lg-3"
|
||||
>
|
||||
<div class="appbody-info">
|
||||
<img :src="software.image" :alt="software.title">
|
||||
<h2>{{ software.title }}</h2>
|
||||
<p>{{ software.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 软件开发数据
|
||||
const softwareItems = [
|
||||
{
|
||||
title: 'iOS开发',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner4-1.png',
|
||||
description: '专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务。'
|
||||
},
|
||||
{
|
||||
title: 'Android开发',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner4-2.png',
|
||||
description: '针对主流的android系统，提供一站式APP咨询、策划、开发服务。'
|
||||
},
|
||||
{
|
||||
title: '微信开发',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner4-3.png',
|
||||
description: '针对企业需求提供专业微信公众平台开发服务。...'
|
||||
},
|
||||
{
|
||||
title: '小程序开发',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner4-4.png',
|
||||
description: '无需安装APP，就可以带来更流畅快速的体验。'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mainitems {
|
||||
padding: 60px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.headtit {
|
||||
font-size: 2.5em;
|
||||
color: #333;
|
||||
margin-bottom: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.applicatBody {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.appbody-info {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 40px 30px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.appbody-info::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.appbody-info:hover::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.appbody-info:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.appbody-info img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 25px;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.appbody-info:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.appbody-info h2 {
|
||||
font-size: 1.5em;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.appbody-info p {
|
||||
color: #666;
|
||||
font-size: 0.95em;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 不同软件开发类型的特殊样式 */
|
||||
.appbody-info:nth-child(1) {
|
||||
border-top: 4px solid #007AFF;
|
||||
}
|
||||
|
||||
.appbody-info:nth-child(2) {
|
||||
border-top: 4px solid #3DDC84;
|
||||
}
|
||||
|
||||
.appbody-info:nth-child(3) {
|
||||
border-top: 4px solid #07C160;
|
||||
}
|
||||
|
||||
.appbody-info:nth-child(4) {
|
||||
border-top: 4px solid #FF6B35;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.applicatBody {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.col-lg-3 {
|
||||
flex: 0 0 45%;
|
||||
max-width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.headtit {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.col-lg-3 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.appbody-info {
|
||||
height: 250px;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.appbody-info img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
<template>
|
||||
<div class="container-fluid text-center mainitems">
|
||||
<div class="headtit">物联网解决方案</div>
|
||||
<div class="minstit">针对不同类型使用场景需求，量身定制解决方案</div>
|
||||
<div class="row inteBody">
|
||||
<div
|
||||
v-for="(solution, index) in solutions"
|
||||
:key="index"
|
||||
class="col-xs-12 col-lg-2"
|
||||
:class="{ 'col-lg-offset-1': index === 0 }"
|
||||
>
|
||||
<div class="intebody-info">
|
||||
<a href="#" @click.prevent="goToDetail(solution.link)">
|
||||
<img :src="solution.image" :alt="solution.title">
|
||||
</a>
|
||||
<h2>{{ solution.title }}</h2>
|
||||
<p>{{ solution.shortDescription }}</p>
|
||||
</div>
|
||||
|
||||
<div class="intebody-hover">
|
||||
<h2>{{ solution.title }}</h2>
|
||||
<p>{{ solution.fullDescription }}</p>
|
||||
<a :href="solution.link" @click.prevent="goToDetail(solution.link)">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 响应式数据
|
||||
const hoveredIndex = ref(-1)
|
||||
|
||||
// 解决方案数据
|
||||
const solutions = [
|
||||
{
|
||||
title: '共享陪护床',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner3-1.png',
|
||||
shortDescription: '解决医院陪护家属未配有床位，休息不便的问题…',
|
||||
fullDescription: '解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同事，给患者家属更舒适的修养环境。',
|
||||
link: '/yuxi/sharedbed'
|
||||
},
|
||||
{
|
||||
title: '共享单车',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner3-2.png',
|
||||
shortDescription: '解决大型园区或短距离出行麻烦，提高出行效率…',
|
||||
fullDescription: '解决大型园区或短距离出行麻烦，提高出行效率，分时租赁单车，无桩共享，是一种新型的经济环保出行方式。',
|
||||
link: 'http://bike.yuxiit.com/'
|
||||
},
|
||||
{
|
||||
title: '共享电单车',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner3-3.png',
|
||||
shortDescription: '解决人们最后三公里的出行，促进环保和健康出行...',
|
||||
fullDescription: '解决人们最后三公里的出行，促进环保和健康出行，电动助力，省力高效。',
|
||||
link: '/yuxi/Ebike'
|
||||
},
|
||||
{
|
||||
title: '共享电动车',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner3-4.png',
|
||||
shortDescription: '电动车相比续航能力更强，适用于各种出行场…',
|
||||
fullDescription: '电动车相比续航能力更强，适用于各种出行场景，一站式提供硬件设备与软件开发',
|
||||
link: '/yuxi/Ebike'
|
||||
},
|
||||
{
|
||||
title: '共享滑板车',
|
||||
image: '/www.yuxiit.com/img/yuxiupdata/banner3-5.png',
|
||||
shortDescription: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符求…',
|
||||
fullDescription: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合用户的短距离出行需求。',
|
||||
link: '/yuxi/scooter'
|
||||
}
|
||||
]
|
||||
|
||||
// 方法
|
||||
const goToDetail = (link: string) => {
|
||||
if (link.startsWith('http')) {
|
||||
window.open(link, '_blank')
|
||||
} else {
|
||||
navigateTo(link)
|
||||
}
|
||||
}
|
||||
|
||||
const setHovered = (index: number) => {
|
||||
hoveredIndex.value = index
|
||||
}
|
||||
|
||||
const clearHovered = () => {
|
||||
hoveredIndex.value = -1
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mainitems {
|
||||
padding: 60px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.headtit {
|
||||
font-size: 2.5em;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.minstit {
|
||||
font-size: 1.2em;
|
||||
color: #666;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.inteBody {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.intebody-info {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 30px 20px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.intebody-info:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.intebody-info img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.intebody-info h2 {
|
||||
font-size: 1.5em;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.intebody-info p {
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intebody-hover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 30px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.intebody-info:hover .intebody-hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.intebody-hover h2 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.intebody-hover p {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.intebody-hover a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 25px;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.intebody-hover a:hover {
|
||||
background: #fff;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.inteBody {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
flex: 0 0 30%;
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.headtit {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.minstit {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.col-lg-2 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.intebody-info {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 使用正确的导航组件 -->
|
||||
<Navigation />
|
||||
<Navigation/>
|
||||
|
||||
<!-- <YuxiCarousel/>-->
|
||||
<!-- <IndexCarousel/>-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user