<template>
|
<div class="pageHeader">
|
<div class="header-box">
|
<ul class="page-title">
|
<img @click="goHome()" class="zylogo" src="../../assets/images/home/zylogo.png" alt="">
|
<li class="separator"></li>
|
<img class="sylogo" src="../../assets/images/home/sylogo.svg" alt="">
|
<li class="title-text">{{ t('message.logoTitle') }}</li>
|
</ul>
|
<div class="page-select">
|
<el-select v-model="currentLocale" placeholder="Language" style="width: 120px">
|
<el-option v-for="item in availableLocales" :key="item.value" :label="t(item.label)" :value="item.value" />
|
</el-select>
|
</div>
|
</div>
|
|
</div>
|
<!-- 导航栏 -->
|
</template>
|
|
<script setup lang="ts">
|
import { useRouter } from 'vue-router'
|
import { inject, reactive, computed } from 'vue'
|
const config: any = inject('config')
|
const router = useRouter()
|
import { useI18n } from 'vue-i18n';
|
const { locale, t } = useI18n();
|
|
const availableLocales = [
|
{ value: 'zh', label: 'langSelector.chinese' },
|
{ value: 'en', label: 'langSelector.english' },
|
];
|
|
const currentLocale = computed({
|
get: () => locale.value,
|
set: (value) => {
|
locale.value = value;
|
// (可选) 将语言偏好保存到 localStorage，以便下次记住用户选择
|
localStorage.setItem('user-locale', value);
|
},
|
});
|
|
const goHome = () => {
|
router.push({ path: '/' });
|
};
|
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
.pageHeader {
|
display: flex;
|
justify-content: center;
|
width: 100%;
|
background-color: #ecf9f6;
|
height: 78px;
|
}
|
|
.header-box {
|
width: 65%;
|
margin: 0 auto;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
|
.page-title {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.zylogo {
|
width: 21%;
|
cursor: pointer;
|
}
|
|
.separator {
|
list-style: none;
|
width: 20px;
|
height: 20px;
|
margin-right: 15px;
|
position: relative;
|
}
|
|
/* 2. 创建第一个伪元素（'\' 斜杠） */
|
.separator::before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
width: 100%;
|
/* 和容器一样宽 */
|
height: 1px;
|
/* 线条粗细 */
|
border-top: 1px dashed #ccc;
|
/* 虚线样式 */
|
transform: translateY(-50%) rotate(45deg);
|
/* 先垂直居中，再旋转45度 */
|
}
|
|
/* 3. 创建第二个伪元素（'/' 斜杠） */
|
.separator::after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
width: 100%;
|
/* 和容器一样宽 */
|
height: 1px;
|
/* 线条粗细 */
|
border-top: 1px dashed #ccc;
|
/* 虚线样式 */
|
transform: translateY(-50%) rotate(-45deg);
|
/* 先垂直居中，再反向旋转45度 */
|
}
|
|
.sylogo {
|
padding-right: 18px;
|
border-right: 1px solid #0c73b8;
|
width: 21%;
|
}
|
|
.title-text {
|
width: 450px;
|
padding-left: 14px;
|
font-weight: bold;
|
font-size: 20px;
|
}
|
</style>
|
