You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
364 lines
16 KiB
364 lines
16 KiB
<template>
|
|
<header class="header fixed" style="display: none">
|
|
<div class="wrap">
|
|
<div class="header_box fix">
|
|
<div class="header_logo">
|
|
<a href="https://www.algig.cn/" alt="" title="" target="view_window"> <h1 class="logo"></h1> </a>
|
|
</div>
|
|
<div class="header_tools">
|
|
<ul class="fix">
|
|
<li class="mobile_key">
|
|
<a href="https://www.algig.cn/about-us.htm#menu"> <i class="iconfont"></i> </a>
|
|
</li>
|
|
<li class="search"><i class="iconfont"></i></li>
|
|
<li class="quick_a">
|
|
<a href="javascript:;">LANGUAGE<i class="iconfont"></i></a>
|
|
<div class="quick_box">
|
|
<a target="_blank" href="https://www.algig.cn/"><i class="lin">|</i> 中文</a>
|
|
<a target="_blank" href="http://en.algig.cn/"><i class="lin">|</i> English</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 下拉导航有两种不同的形式 -->
|
|
<div class="header_nav">
|
|
<div id="menu" class="nav_container">
|
|
<ul>
|
|
<li>
|
|
<a href="https://www.algig.cn/about-us.htm" class="cur" target="">关于我们</a>
|
|
<!-- 普通下拉 -->
|
|
<div class="inner_box fix">
|
|
<div class="box_l">
|
|
<ul>
|
|
<li><a href="https://www.algig.cn/company-profile.htm">企业简介</a></li>
|
|
<li><a href="https://www.algig.cn/corporate-culture.htm">企业文化</a></li>
|
|
<li><a href="https://www.algig.cn/leader-visits.jsp">领导关怀</a></li>
|
|
<li><a href="https://www.algig.cn/development-milestones.htm">发展历程</a></li>
|
|
<li><a href="https://www.algig.cn/company-honors.jsp">企业荣誉</a></li>
|
|
<li><a href="https://www.algig.cn/global-footprint.jsp">全球布局</a></li>
|
|
<li><a href="https://www.algig.cn/organizational-structure.htm">组织架构</a></li>
|
|
<li><a href="https://www.algig.cn/social-responsibility.jsp">社会责任</a></li>
|
|
<li><a href="https://www.algig.cn/party-construction.jsp">党建品牌</a></li>
|
|
<li><a href="https://www.algig.cn/employee-activities.jsp">员工风采</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="box_r">
|
|
<img
|
|
src="./关于我们_航空航天交通铝新材料先进制造商_files/a476ff3e324940a98f172b9b2ccc4320.jpg"
|
|
alt=""
|
|
class="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="pro">
|
|
<a href="https://www.algig.cn/our-businesses/aerospace&aviation.jsp" target="">业务领域</a>
|
|
<!-- 产品下拉 -->
|
|
<div class="inner_box">
|
|
<div class="box_l">
|
|
<ul>
|
|
<!-- 标题 是t -->
|
|
<li class="t">
|
|
<a href="https://www.algig.cn/our-businesses/aerospace&aviation.jsp">航空航天领域</a>
|
|
</li>
|
|
<li><a href="https://www.algig.cn/our-businesses/aerospace&aviation.jsp">航空</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/aerospace&aviation.jsp">航天</a></li>
|
|
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
|
|
</ul>
|
|
<ul>
|
|
<!-- 标题 是t -->
|
|
<li class="t">
|
|
<a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">轨道交通领域</a>
|
|
</li>
|
|
<li><a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">动车组</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">地铁</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">空轨</a></li>
|
|
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
|
|
</ul>
|
|
<ul>
|
|
<!-- 标题 是t -->
|
|
<li class="t"><a href="https://www.algig.cn/our-businesses/automotive.jsp">汽车领域</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/automotive.jsp">乘用车</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/automotive.jsp">油罐车</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/automotive.jsp">客车</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/automotive.jsp">厢车</a></li>
|
|
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
|
|
</ul>
|
|
<ul>
|
|
<!-- 标题 是t -->
|
|
<li class="t"><a href="https://www.algig.cn/our-businesses/marine.jsp">船舶领域</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/marine.jsp">船用铝合金</a></li>
|
|
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
|
|
</ul>
|
|
<ul>
|
|
<!-- 标题 是t -->
|
|
<li class="t"><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">3C电子领域</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">电脑产品</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">智能手机</a></li>
|
|
<li><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">其他3C及周边</a></li>
|
|
<li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="box_r">
|
|
<img
|
|
src="./关于我们_航空航天交通铝新材料先进制造商_files/1412f7d1f27241f6a2e0ea4db34d5c62.jpg"
|
|
alt=""
|
|
class="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.algig.cn/our-advantages.htm" target="">核心优势</a>
|
|
<!-- 普通下拉 -->
|
|
<div class="inner_box fix">
|
|
<div class="box_l">
|
|
<ul>
|
|
<li><a href="https://www.algig.cn/scientific-innovation.htm">科技创新</a></li>
|
|
<li><a href="https://www.algig.cn/technology.htm">技术实力</a></li>
|
|
<li><a href="https://www.algig.cn/intelligent-manufacturing.htm">智慧互联</a></li>
|
|
<li><a href="https://www.algig.cn/quality-management.jsp">质量管理</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="box_r">
|
|
<img
|
|
src="./关于我们_航空航天交通铝新材料先进制造商_files/2ce9966e83004469af3036168abded7f.jpg"
|
|
alt=""
|
|
class="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.algig.cn/news-releases/company-news.jsp" target="">新闻资讯</a>
|
|
<!-- 普通下拉 -->
|
|
<div class="inner_box fix">
|
|
<div class="box_l">
|
|
<ul>
|
|
<li><a href="https://www.algig.cn/news-releases/company-news.jsp">企业动态</a></li>
|
|
<li><a href="https://www.algig.cn/news-releases/announcement.jsp">企业公告</a></li>
|
|
<li><a href="https://www.algig.cn/news-releases/media-focus.jsp">媒体视角</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="box_r">
|
|
<img
|
|
src="./关于我们_航空航天交通铝新材料先进制造商_files/43fdf4f688784dc8ad3499b61b92d515.jpg"
|
|
alt=""
|
|
class="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.algig.cn/talent-policy.htm" target="">职业发展</a>
|
|
<!-- 普通下拉 -->
|
|
<div class="inner_box fix">
|
|
<div class="box_l">
|
|
<ul>
|
|
<li><a href="https://www.algig.cn/talent-policy.htm">人才政策</a></li>
|
|
<li><a href="https://www.algig.cn/job-opportunities.jsp">社会招聘</a></li>
|
|
<li><a href="https://www.algig.cn/campus-recruitment.jsp">校园招聘</a></li>
|
|
<li><a href="https://www.algig.cn/contact-us.jsp">联系我们</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="box_r">
|
|
<img
|
|
src="./关于我们_航空航天交通铝新材料先进制造商_files/1907e129b5154356989bcd130b1c5dce.jpg"
|
|
alt=""
|
|
class="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.algig.cn/corporate-governance.htm" target="">信访举报</a>
|
|
<!-- 普通下拉 -->
|
|
</li>
|
|
<li>
|
|
<a href="https://www.algig.cn/Information/nnl-informition-disclosure.jsp" target="">信息公开</a>
|
|
<!-- 普通下拉 -->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="header_search_fix">
|
|
<div class="box">
|
|
<div class="search">请输入您要搜索的关键词...</div>
|
|
<form action="https://www.algig.cn/site/solr.htm">
|
|
<div class="search_box">
|
|
<input type="text" name="keywords" class="input" placeholder="SEARCH HERE" />
|
|
<button type="submit" c-text="点击搜索" class="submit common_btn text_cxw_loaded">
|
|
<span>点</span><span>击</span><span>搜</span><span>索</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="close">
|
|
<i class="iconfont" data-code="xe641;"></i>
|
|
</div>
|
|
<div class="pro_list">
|
|
<div class="t">热门产品搜索</div>
|
|
<a href="https://www.algig.cn/our-businesses/aerospace&aviation.jsp">航空航天领域</a>
|
|
<a href="https://www.algig.cn/our-businesses/automotive.jsp">汽车领域</a>
|
|
<a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">轨道交通领域</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<header class="header bg-white fixed z-10 w-full">
|
|
<div class="flex between md:w-3/4 m-auto px-2">
|
|
<div class="header__left flex">
|
|
<div class="logo w-[140px] flex items-center" @click="reload">
|
|
<nuxt-link v-if="config?.siteLogo" to="/">
|
|
<el-image
|
|
:src="config.siteLogo"
|
|
shape="square"
|
|
:alt="config.siteName"
|
|
:title="config.siteName"
|
|
class="w-[120px]"
|
|
/>
|
|
</nuxt-link>
|
|
<nuxt-link v-else to="/">
|
|
<text>{{ config?.siteName || '网宿软件' }}</text>
|
|
</nuxt-link>
|
|
</div>
|
|
<nav v-if="route.path.indexOf('/user') === -1" class="hidden-sm-and-down">
|
|
<el-menu
|
|
:default-active="currentIndex"
|
|
mode="horizontal"
|
|
:collapse="true"
|
|
:ellipsis="false"
|
|
style="border-bottom: none"
|
|
@select="handleSelect"
|
|
>
|
|
<template v-for="(item, index) in navigations">
|
|
<el-menu-item :index="item.path" v-if="index < visibleNumber">
|
|
<template v-if="item.children.length > 0">
|
|
<el-sub-menu :index="item.path">
|
|
<template #title>
|
|
<text class="text-[17px]">{{ item.title }}</text>
|
|
</template>
|
|
<el-menu-item v-for="(sub,subIndex) in item.children" :index="`${sub.path}`" :key="subIndex">{{ sub.title }}</el-menu-item>
|
|
</el-sub-menu>
|
|
</template>
|
|
<template v-else>
|
|
<text class="text-[17px]">{{ item.title }}</text>
|
|
</template>
|
|
</el-menu-item>
|
|
</template>
|
|
|
|
<!-- 顶部菜单超出数量折叠 -->
|
|
<el-sub-menu index="more" v-if="navigations && navigations.length > visibleNumber">
|
|
<template #title>更多菜单</template>
|
|
<template v-for="(item, index) in navigations">
|
|
<el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
|
|
{{ item.title }}</el-menu-item
|
|
>
|
|
</template>
|
|
</el-sub-menu>
|
|
</el-menu>
|
|
</nav>
|
|
</div>
|
|
<div class="header__right items-center">
|
|
<el-input
|
|
class="w-20 mr-4"
|
|
placeholder="站内搜索"
|
|
:suffix-icon="ElIconSearch"
|
|
v-model="searchValue"
|
|
@keyup.enter.native="handleSearch"
|
|
/>
|
|
<ClientOnly>
|
|
<template v-if="token">
|
|
<el-dropdown @command="handleCommand">
|
|
<el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
|
<el-dropdown-item divided command="logOut">退出</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
<template v-else>
|
|
<el-button circle :icon="ElIconUserFilled" @click="goLogin"></el-button>
|
|
</template>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- <div class="header__height__placeholder"></div>-->
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Config } from '~/types/config';
|
|
import type { ApiResult } from '~/api';
|
|
import type { Navigation } from '~/api/cms/navigation/model';
|
|
import { useServerRequest } from '~/composables/useServerRequest';
|
|
import {useConfigInfo} from "~/composables/configState";
|
|
const route = useRoute();
|
|
|
|
const searchValue = ref<string>();
|
|
const token = ref<string | undefined>(undefined);
|
|
const navigations = ref<Navigation[] | any>([]);
|
|
const config = useConfigInfo();
|
|
// 顶部栏初始数
|
|
const visibleNumber = ref<number>(10);
|
|
// 当前激活菜单的 index
|
|
const currentIndex = ref<string>('2');
|
|
const showSubMenu = ref<boolean>(false);
|
|
|
|
function handleCommand(command: string) {
|
|
switch (command) {
|
|
case 'logOut':
|
|
logOut();
|
|
break;
|
|
default:
|
|
navigateTo('/user');
|
|
break;
|
|
}
|
|
}
|
|
|
|
function logOut() {}
|
|
|
|
function goLogin() {}
|
|
|
|
const handleSearch = (key: string, keyPath: string) => {
|
|
console.log(key, keyPath);
|
|
navigateTo('/search?keyword=' + searchValue.value);
|
|
};
|
|
|
|
function handleSelect(key: string, keyPath: any) {
|
|
console.log(key,'key')
|
|
console.log(keyPath,'keyPath')
|
|
currentIndex.value = key;
|
|
navigateTo(`${key}`);
|
|
}
|
|
|
|
function openSubMenu(ee) {
|
|
showSubMenu.value = true;
|
|
console.log('000', showSubMenu.value);
|
|
}
|
|
|
|
// 获取数据
|
|
const reload = async () => {
|
|
await nextTick();
|
|
const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/website-field/config', {});
|
|
config.value = fields.value?.data;
|
|
const { data: navigation } = await useServerRequest<ApiResult<Navigation[]>>('/cms/navigation/tree', {
|
|
query: {
|
|
position: 1
|
|
}
|
|
});
|
|
navigations.value = navigation.value?.data;
|
|
};
|
|
|
|
reload();
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
body {
|
|
background-color: #f3f6f8;
|
|
}
|
|
</style>
|