Files
2024-03-05 17:25:48 +08:00

435 lines
11 KiB
Vue

<template>
<div class="webHead">
<div class="site-title">
<img class="site-logo" :src="sitelogo"/>
<span>{{ t('common.siteTitle') }}</span>
</div>
<el-row style="height: 80px">
<el-col :span="20">
<ul class="menu">
<li class="menu-item1">
<div
class="menu-item-tit"
:class="pagePath === '/' ? 'active' : ''"
@click="handlePath('/')"
>
{{ t("headerMenu.home") }}
</div>
</li>
<li class="menu-item1">
<div
class="menu-item-tit"
:class="pagePath === '/news' ? 'active' : ''"
@click="handlePath('/news')"
>
{{ t("headerMenu.news") }}
</div>
</li>
<li class="menu-item1 solution">
<div
class="menu-item-tit"
:class="pagePath.indexOf('/solution/') !== -1 ? 'active' : ''"
>
{{ t("headerMenu.resolution") }}
</div>
<div class="show_box">
<div
v-for="item in categoryList"
class="pointer"
:class="
pagePath === `/solution/${item.id}` ? 'x_blue _active' : ''
"
@click="
handlePath(
`/solution/${item.id}?name=${item[solutionNameField]}`
)
"
>
{{ item[solutionNameField] }}
</div>
<!--
<div
class="pointer"
:class="pagePath == '/solution/small' ? 'x_blue _active' : ''"
@click="handlePath('/solution/small')"
>
中小型企业服务
</div>
<div
class="pointer"
:class="pagePath == '/solution/large' ? 'x_blue _active' : ''"
@click="handlePath('/solution/large')"
>
大型企业服务
</div>
<div
class="pointer"
:class="
pagePath == '/solution/government' ? 'x_blue _active' : ''
"
@click="handlePath('/solution/government')"
>
政府区域服务
</div>
<div
class="pointer"
:class="
pagePath == '/solution/scientific' ? 'x_blue _active' : ''
"
@click="handlePath('/solution/scientific')"
>
科研区域服务
</div>
-->
</div>
</li>
<li class="menu-item1">
<div
class="menu-item-tit"
:class="pagePath === '/innovate' ? 'active' : ''"
@click="handlePath('/innovate')"
>
{{ t("headerMenu.innovation") }}
</div>
</li>
<li class="menu-item1">
<div
class="menu-item-tit"
:class="pagePath === '/activity' ? 'active' : ''"
@click="handlePath('/activity')"
>
{{ t("headerMenu.activity") }}
</div>
</li>
<li class="menu-item1">
<div
class="menu-item-tit"
:class="pagePath === '/about' ? 'active' : ''"
@click="handlePath('/about')"
>
{{ t("headerMenu.aboutUs") }}
</div>
</li>
<li class="menu-item1 profile-menu-group" style="display: flex">
<div
v-if="!userStore.token"
class="menu-item-tit"
:class="pagePath === '/login' ? 'active' : ''"
@click="handlePath('/login')"
>
{{ t("headerMenu.loginRegister") }}
</div>
<!-- <el-popover
placement="bottom"
:title="`32`"
:width="200"
trigger="hover"
:content="userStore.nickName"
> -->
<!-- content="this is content, this is content, this is content" -->
<!-- <template #reference> -->
<div v-else class="avatar-wrapper">
<img
:src="
userStore.avatar
? `${baseUrl}/file${userStore.avatar}`
: defaultAvatar
"
class="user-avatar"
/>
<i class="el-icon-caret-bottom"/>
</div>
<!-- </template> -->
<!-- </el-popover> -->
<div
v-if="userStore.token"
class="menu-item-tit"
:class="pagePath === '/login' ? 'active' : ''"
@click="handlePage"
>
{{ t("headerMenu.personalCenter") }}
</div>
<div
v-if="userStore.token"
class="menu-item-tit"
:class="pagePath === '/login' ? 'active' : ''"
@click="logout"
>
{{ t("headerMenu.logout") }}
</div>
<!-- <el-dropdown
style="margin-top: 20px"
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" />
</div>
<template #dropdown>
<el-dropdown-menu>
// <router-link to="/identity/index">
<el-dropdown-item @click="handlePage"
>个人中心</el-dropdown-item
>
// </router-link>
<el-dropdown-item divided @click="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown> -->
</li>
</ul>
</el-col>
</el-row>
<div class="switch-locale">
<el-button round @click="switchLocale">
<!-- {{ localeDict.find((item) => item.value === locale)?.label }}-->
{{ locale === "zh" ? "ru" : "zh" }}
</el-button>
</div>
</div>
</template>
<script setup>
import {computed, reactive, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import useUserStore from "@/store/modules/user";
import {getCategory} from "@/api/website/solution";
import {useI18n} from "vue-i18n";
import useSettingsStore from "@/store/modules/settings";
import defaultAvatar from "@/assets/logo/avatar.png";
import modal from "@/plugins/modal";
import sitelogo from "@/assets/logo/咸海logo.png"
const userStore = useUserStore();
let state = reactive({});
let pagePath = ref("");
const route = useRoute();
const router = useRouter();
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
const categoryList = ref([]);
// 当前的语言
const {locale, t} = useI18n();
const solutionNameField = computed(() => {
return locale.value === "zh" ? "name" : `${locale.value}Name`;
});
const settingsStore = useSettingsStore();
const loadCategoryList = async () => {
const {data} = await getCategory();
categoryList.value = data;
};
loadCategoryList();
watch(
() => route.path,
(newVal, oldVal) => {
pagePath.value = newVal;
}
);
pagePath.value = route.path;
const switchLocale = () => {
settingsStore.toggleLocale();
// if (settingsStore.locale === "zh") {
// settingsStore.setLocale("ru");
// } else if (settingsStore.locale === "ru") {
// settingsStore.setLocale("zh");
// }
};
function handlePage() {
// router.push("/identity/index");
// let routeData = "";
// const selectRole = localStorage.getItem("select_identity");
// if (selectRole > 0) {
// routeData = router.resolve({ path: "/admin" });
// } else {
// routeData = router.resolve({ path: "/identity/index" });
// }
// window.open(routeData.href, "_blank");
const routeData = router.resolve({path: "/identity/index"});
window.open(routeData.href, "_blank");
}
const showBoxHandlePath = (path) => {
if (path === "") {
}
handlePath(path);
};
function handlePath(path) {
pagePath.value = path;
router.push(path);
// window.open(path, "_blank");
}
function logout() {
modal
.confirm(t("common.areYouSureYouWantToLogOutAndExitTheSystem"))
.then(() => {
useUserStore()
.logOut()
.then(() => {
location.href = "/";
});
})
.catch(() => {
});
}
</script>
<style lang="scss">
ol,
ul,
dl {
margin: 0;
padding: 0;
}
li,
dd,
dt {
padding: 0;
margin: 0;
list-style: none;
}
.webHead {
position: fixed;
z-index: 2001;
top: 0;
left: 0;
width: 100%;
//height: 80px;
padding: 0 120px;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0px 0px 43px 0px rgba(0, 42, 255, 0.09);
.logo {
height: 30px;
margin: 25px 0;
}
.menu {
display: flex;
// justify-content: space-between;
.solution {
position: relative;
.show_box {
display: none;
position: absolute;
padding-top: 5px;
top: 75px;
width: 100%;
text-align: center;
background-color: transparent;
div {
// height: 42px;
// line-height: 42px;
padding: 8px 0;
font-size: 14px;
color: #666666;
background-color: #f2f6ff;
}
._active {
background-color: #fff;
}
}
&:hover {
.show_box {
display: block;
}
}
}
.menu-item1 {
flex: 1;
text-align: center;
.menu-item-tit {
display: inline-block;
padding: 25px 0;
font-size: 16px;
font-family: Source Han Sans CN, sans-serif;
font-weight: 400;
color: #000;
cursor: pointer;
height: 75px;
}
.menu-item-tit:hover {
opacity: 0.8;
}
.active {
//font-size: 20px;
font-weight: 500;
border-bottom: 2.5px solid #000;
}
}
.profile-menu-group {
height: 75px;
flex: 2;
justify-content: space-between;
align-items: center;
// .avatar-wrapper {
// box-sizing: border-box;
// padding: 10px;
// .user-avatar {
// width: 20px;
// height: 20px;
// }
// }
}
}
}
</style>
<style lang="scss" scoped>
.user-avatar {
// cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
}
.webHead {
.site-title {
padding-top: 8px;
height: 80px;
display: flex;
justify-content: start;
align-items: center;
font-size: 24px;
margin-left: 32px;
font-weight: bold;
.site-logo {
width: 90px;
height: 82px;
object-fit: contain;
margin-right: 8px;
}
}
.switch-locale {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
}
</style>