436 lines
13 KiB
Vue
436 lines
13 KiB
Vue
<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>
|