web/src/components/windows/menusIndex.vue

<template>
  <el-row class="menus">
    <el-col :span="20" class="left">
      <el-col :span="6" class="imgs">
        <el-image class="images" :src="logoUrl"></el-image>
      </el-col>
      <el-col :span="18" class="menusInfo">
        <el-menu
          :router="true"
          :default-active="activeIndex"
          mode="horizontal"
          background-color="transparent"
          text-color="#4E5051"
          active-text-color="#000000"
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/introduceIndex">集团介绍</el-menu-item>
          <el-menu-item index="/newsIndex">集团新闻</el-menu-item>
          <el-menu-item index="/messIndex">信息公开</el-menu-item>
          <el-menu-item index="/popularwillIndex">民意征集</el-menu-item>
          <el-menu-item index="/watersupplyIndex">供水信息</el-menu-item>
          <el-menu-item index="/inwaterIndex">走进水务</el-menu-item>
        </el-menu>
      </el-col>
    </el-col>
    <el-col :span="4" class="right">
      <el-input v-model="key" placeholder="请输入查询内容">
        <template #append>
          <el-button @click="toSearch" :icon="Search" />
        </template>
      </el-input>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
defineOptions({ name: 'menusIndex' })
// 基础
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const logoUrl = ref('logo.png')
const activeIndex = ref('/')

const key = ref('')

const toSearch = () => {
  if (key.value) {
    window.open(`/queryIndex?key=${key.value}`)
  }
}

/* 监听 */
watch(
  () => router.currentRoute.value,
  (to) => {
    activeIndex.value = to.path
  },
  { deep: true, immediate: true },
)
</script>
<style scoped lang="scss">
.menus {
  padding: 0 10%;

  .left {
    display: flex;
    align-items: center;

    .imgs {
      height: 46px;

      .images {
        width: 203px;
        height: 46px;
      }
    }

    .menusInfo {
      height: 46px;
    }
  }

  .right {
    display: flex;
    align-items: center;
  }
}

.el-menu--horizontal {
  height: 46px;
}

.el-menu--horizontal.el-menu {
  border-bottom: none;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #1586ff;
}

.el-menu-item:hover {
  background-color: transparent !important;
  color: #000000 !important;
  border-bottom: 2px solid #1586ff;
}

.el-menu--horizontal > .el-menu-item {
  font-weight: bold;
  width: 100px;
}
</style>