69 lines
3.0 KiB
Vue
69 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import {useConfigInfo, useMenu} from "~/composables/configState";
|
|
import { Search,Message, Fold } from '@element-plus/icons-vue'
|
|
const config = useConfigInfo();
|
|
const keyword = ref<string>('');
|
|
const i18n = useI18n();
|
|
const navigations = useMenu();
|
|
const drawer = ref<boolean>(false);
|
|
|
|
const onSearch = () => {
|
|
window.location.href = `/${i18n.locale.value}/search/${keyword.value}`;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="head-bg bg-blue-50 text-gray-400 px-2">
|
|
<div class=" flex justify-between items-center xl:w-screen-xl m-auto sm:px-0 w-full">
|
|
<span class="text-white">{{ config?.topWelcomeInfo }}</span>
|
|
<div class="lang flex justify-center text-center items-center">
|
|
<el-space size="large">
|
|
<a :href="`/zh?spm=zh_CN`" class="text-xs flex items-center hidden-sm-and-down"><el-icon color="#fff" size="16"><Message /></el-icon><span class="text-white px-1">校长信箱</span></a>
|
|
<a :href="`https://old.gxbsnx.com`" class="text-xs flex items-center hidden-sm-and-down"><el-icon color="#fff" size="16"><Message /></el-icon><span class="text-white px-1">旧版</span></a>
|
|
<div class="search mx-5 hidden-sm-and-down">
|
|
<div class="fl">
|
|
<el-input v-model="keyword" :placeholder="`${$t('searchKeywords')}...`" :suffix-icon="Search" @change="onSearch" />
|
|
</div>
|
|
</div>
|
|
<!-- 移动端 -->
|
|
<div class="hidden-sm-and-up">
|
|
<div class="hidden-sm-and-up mx-5 sm:mx-0">
|
|
<div class="el-dropdown-link flex items-center" @click="drawer = true">
|
|
<el-icon color="white" :size="24"><Fold /></el-icon>
|
|
</div>
|
|
<el-drawer
|
|
v-model="drawer"
|
|
:size="290"
|
|
>
|
|
<div id="menu">
|
|
<el-menu
|
|
currentIndex="/product"
|
|
:unique-opened="true"
|
|
>
|
|
<template v-for="(item,index) in navigations" :key="index">
|
|
<el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
|
|
<template #title><span>{{ item.title }}</span></template>
|
|
<el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
|
|
<el-space>
|
|
<el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
|
|
<a :href="navTo(sub)">{{ sub.title }}</a>
|
|
</el-space>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
<el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
|
|
</template>
|
|
</el-menu>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</div>
|
|
</el-space>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|