ct/app/components/Navigation.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>
        <a class="navbar-brand" href="/"><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"><a href="/">首页</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">
              <div class="pull-left col-xs-8 col-sm-6">

                <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">
                <img alt="共享单车" class="img-responsive" src="/img/yuxiupdata/mune-1.png" style="display: block;">
              </div>
              <ul class="pull-right col-xs-4 col-sm-6">


                <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="/sharedSolutions/sharebank">共享充电宝<p>
                  企业提供的充电租赁设备，用户扫码取出后即可使用，用完后就近归还</p></a></li>
                <li><a href="/sharedSolutions/bike">共享单车<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 alt="智能电动车" class="img-responsive" src="/img/yuxiupdata/mune-12.png" style="display: block;">
                <img alt="智能换电柜" class="img-responsive" src="/img/yuxiupdata/mune-16.png">
              </div>
              <ul class="pull-right col-xs-4 col-sm-6">
                <!-- <li><a class="menu-group" href="http://tianmei.yuxiit.com/" target="_blank">智慧餐饮<p>基于物联网和云计算技术为餐饮店量身打造的智能管理系统</p></a></li>
                <li><a href="http://hx.yuxiit.com/" target="_blank">智慧公寓<p>集多种设备操控,场景定制,产品于一体,让顾客在公寓体验到更舒适,更便捷,更个性化的服务</p></a></li> -->
                <li><a href="/industrySolutions/ElectCar">智能电动车<p>
                  打造智能电动车时代!方便用户的出行,让骑车出行便捷</p></a></li>
                <li><a href="/industrySolutions/cabinet">智能换电柜<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">
              <div class="pull-left col-xs-8 col-sm-6">
                <img alt="APP开发" class="img-responsive" src="/img/yuxiupdata/mune-10.png" style="display: block;">
                <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><a href="/softwareDevelopment/app">APP开发<p>
                  小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验</p></a></li>
                <li><a href="/softwareDevelopment/miniprogram">小程序开发<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">
              <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><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>
          <li class="hidden-xs hidden-sm hidden-md"><a href="/about">关于创特 </a></li>
          <li><a href="https://ele.ccttiot.com/login" target="_blank">后台管理</a></li>
          <!-- <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>
  </nav>
</template>

<script lang="ts" setup>
// 使用 Nuxt 的 useHead 来管理页面资源
useHead({
  title: '创特科技 - 万物互联 智启未来',
  meta: [
    {
      name: 'description',
      content: '创特科技专注于共享解决方案、行业解决方案、软件应用开发和物联网解决方案，提供专业的智能化服务'
    },
    {name: 'keywords', content: '创特科技,共享解决方案,物联网,软件开发,智能硬件,共享单车,共享电动车'}
  ],
  link: [],
  script: [
    {src: '/js/gopcOm.js', defer: true}
  ]
})

onMounted(() => {
  // 初始化导航菜单图片切换功能
  nextTick(() => {
    initNavigationHover()
  })
})

// 下拉菜单图片切换功能
const handleDropdownImageHover = (dropdownMenu: Element, index: number) => {
  const images = dropdownMenu.querySelectorAll('.pull-left img')
  images.forEach((img, i) => {
    (img as HTMLElement).style.display = i === index ? 'block' : 'none'
  })
}

// 初始化导航菜单图片切换
const initNavigationHover = () => {
  // 为每个下拉菜单绑定事件
  const dropdownMenus = document.querySelectorAll('.dropdown-menu')
  dropdownMenus.forEach(dropdownMenu => {
    const menuItems = dropdownMenu.querySelectorAll('ul li')
    menuItems.forEach((item, index) => {
      item.addEventListener('mouseenter', () => handleDropdownImageHover(dropdownMenu, index))
    })
  })
}
</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;
}

@media (max-width: 768px) {
  .navbar-default .navbar-nav > li > a {
    height: 37px !important;
    line-height: 37px !important;
  }

  .navbar-default .navbar-brand {
    margin-top: 8px !important;
  }

  .navbar-default .navbar-toggle {
    padding: 7px 8px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
}


</style>