|
@@ -1,102 +1,114 @@
|
|
|
<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="value" placeholder="请输入查询内容">
|
|
|
- <template #append>
|
|
|
- <el-button :icon="Search" />
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <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 { ref, watch } from 'vue'
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
-const router = useRouter();
|
|
|
+const router = useRouter()
|
|
|
|
|
|
const logoUrl = ref('logo.png')
|
|
|
const activeIndex = ref('/')
|
|
|
|
|
|
-const value = ref('')
|
|
|
+const key = ref('')
|
|
|
+
|
|
|
+const toSearch = () => {
|
|
|
+ if (key.value) {
|
|
|
+ window.open(`/${import.meta.env.VITE_BASE_URL}/queryIndex?key=${key.value}`)
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
/* 监听 */
|
|
|
watch(
|
|
|
- () => router.currentRoute.value,
|
|
|
- (to) => {
|
|
|
- activeIndex.value = to.path
|
|
|
- }, { deep: true, immediate: true }
|
|
|
-);
|
|
|
-
|
|
|
+ () => router.currentRoute.value,
|
|
|
+ (to) => {
|
|
|
+ activeIndex.value = to.path
|
|
|
+ },
|
|
|
+ { deep: true, immediate: true },
|
|
|
+)
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.menus {
|
|
|
- padding: 0 10%;
|
|
|
+ padding: 0 10%;
|
|
|
|
|
|
- .left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .imgs {
|
|
|
- height: 46px;
|
|
|
-
|
|
|
- .images {
|
|
|
- width: 203px;
|
|
|
- height: 46px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .imgs {
|
|
|
+ height: 46px;
|
|
|
|
|
|
- .menusInfo {
|
|
|
- height: 46px;
|
|
|
- }
|
|
|
+ .images {
|
|
|
+ width: 203px;
|
|
|
+ height: 46px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ .menusInfo {
|
|
|
+ height: 46px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-menu--horizontal {
|
|
|
- height: 46px;
|
|
|
+ height: 46px;
|
|
|
}
|
|
|
|
|
|
.el-menu--horizontal.el-menu {
|
|
|
- border-bottom: none;
|
|
|
+ border-bottom: none;
|
|
|
}
|
|
|
|
|
|
-.el-menu--horizontal>.el-menu-item.is-active {
|
|
|
- border-bottom: 2px solid #1586FF;
|
|
|
+.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;
|
|
|
+ background-color: transparent !important;
|
|
|
+ color: #000000 !important;
|
|
|
+ border-bottom: 2px solid #1586ff;
|
|
|
}
|
|
|
|
|
|
-.el-menu--horizontal>.el-menu-item {
|
|
|
- font-weight: bold;
|
|
|
- width: 100px
|
|
|
+.el-menu--horizontal > .el-menu-item {
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100px;
|
|
|
}
|
|
|
</style>
|