257 lines
9.1 KiB
Vue
257 lines
9.1 KiB
Vue
<template>
|
||
<nav class="navbar navbar-default navbar-fixed-top">
|
||
<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"
|
||
>
|
||
<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>
|
||
</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="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 alt="共享单车" class="img-responsive" src="/img/yuxiupdata/mune-1.png" style="display: block;">
|
||
<img alt="景区共享电动车" class="img-responsive" src="/img/yuxiupdata/mune-2.png">
|
||
<img alt="共享滑板车" class="img-responsive" src="/img/yuxiupdata/mune-3.png">
|
||
<img alt="共享陪护床" class="img-responsive" src="/img/yuxiupdata/mune-4.png">
|
||
<img alt="共享电动车" class="img-responsive" src="/img/yuxiupdata/mune-5.png">
|
||
<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 id="gopcOm" style="cursor: pointer;">
|
||
<a>景区共享电动车
|
||
<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>
|
||
</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 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>
|
||
</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 alt="微信开发" class="img-responsive" src="/img/yuxiupdata/mune-9.png" style="display: block;">
|
||
<img alt="APP开发" class="img-responsive" src="/img/yuxiupdata/mune-10.png">
|
||
<img alt="小程序开发" class="img-responsive" src="/img/yuxiupdata/mune-11.png">
|
||
</div>
|
||
<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>
|
||
</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
|
||
alt="物联网应用定制" class="img-responsive" src="/img/yuxiupdata/mune-15.png"
|
||
style="display: block;">
|
||
<img alt="物联网智能硬件" class="img-responsive" src="/img/yuxiupdata/mune-13.png">
|
||
<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>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="hidden-xs hidden-sm hidden-md">
|
||
<NuxtLink to="/about">关于创特</NuxtLink>
|
||
</li>
|
||
<li><a href="#contact-us">联系我们</a></li>
|
||
<li class="hidden-xs hidden-sm hidden-md hidden-lg"/>
|
||
</ul>
|
||
</div><!-- /.navbar-collapse -->
|
||
</div>
|
||
</nav>
|
||
</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()
|
||
// })
|
||
</script>
|
||
|
||
<style scoped>
|
||
html {
|
||
font-size: 45px;
|
||
}
|
||
|
||
html, body {
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
font-family: "PingFangSC-Regular", "微软雅黑", "Microsoft YaHei";
|
||
}
|
||
|
||
|
||
/*头部导航*/
|
||
.top-list-nav {
|
||
background: #fff;
|
||
}
|
||
|
||
.top-list-nav p, .top-list-nav ul li, .top-list-nav p a, .top-list-nav ul li a {
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
}
|
||
|
||
.top-list-nav .navbar-brand {
|
||
height: auto;
|
||
padding: 0;
|
||
}
|
||
|
||
.top-list-nav ul li {
|
||
position: relative;
|
||
}
|
||
|
||
.top-list-nav ul li a {
|
||
margin: 0 15px;
|
||
display: block;
|
||
color: #717171;
|
||
}
|
||
|
||
.top-list-nav ul li dl {
|
||
background: #fff;
|
||
position: absolute;
|
||
top: 60px;
|
||
left: 0;
|
||
display: none;
|
||
}
|
||
|
||
.top-list-nav ul li dl dd {
|
||
width: 4rem; /*padding: 0.2rem;*/
|
||
cursor: pointer;
|
||
}
|
||
|
||
.top-list-nav ul li dl dd a {
|
||
height: 100%;
|
||
line-height: 3;
|
||
}
|
||
|
||
.top-list-nav ul li dl dd:hover {
|
||
background: #ddd;
|
||
}
|
||
|
||
.top-list-nav ul li:hover dl {
|
||
display: block;
|
||
}
|
||
|
||
.top-list-nav .activ {
|
||
color: #749dd6;
|
||
}
|
||
|
||
.top-list-nav .navbar-header {
|
||
padding-right: 75px;
|
||
}
|
||
|
||
|
||
</style>
|