头尾多语言

This commit is contained in:
李志鹏
2026-05-18 11:13:48 +08:00
parent 57835e6416
commit e36b17642f
6 changed files with 107 additions and 37 deletions

View File

@@ -3,15 +3,14 @@
<a href="/" class="logo"><img src="../assets/logo-full.png" alt="code-create" /></a>
<div class="center-nav">
<div class="nav-item" v-for="item in navList" :key="item.name">
<down-menu :title="item.name" v-if="item.children">
<router-link :to="child.path" v-for="child in item.children" :key="child.path">
<down-menu :title="$t(item.name)" v-if="item.children">
<router-link :to="child.path" v-for="child in item.children" :key="child.name">
{{ $t(child.name) }}
</router-link>
</down-menu>
<router-link class="link hover-bottom-animation" :to="item.path" v-else>
{{ $t(item.name) }}
<span v-show="item.children" class="iconfont icon-arrow-down-bold"></span>
</router-link>
<router-link class="link hover-bottom-animation" :to="item.path" v-else>{{
$t(item.name)
}}</router-link>
</div>
</div>
<div class="right">
@@ -21,14 +20,19 @@
:to="`/${item.value}`"
v-for="item in langList"
:key="item.value"
v-show="item.value !== locale"
>
{{ item.label }}
</router-link>
</down-menu>
<span class="">
<span class="iconfont icon-wode"></span>
<span>My Account</span>
</span>
<router-link class="link" to="/my-account">
<span class="iconfont icon-tubiao-"></span>
<span>{{ $t('MainHeader.LoginOrSignin') }}</span>
</router-link>
<router-link class="link" to="/my-account">
<span class="iconfont icon-tubiao-"></span>
<span>{{ $t('MainHeader.MyAccount') }}</span>
</router-link>
</div>
</header>
</template>
@@ -66,47 +70,47 @@
path: '/'
},
{
name: 'About Us',
name: 'MainHeader.AboutUs',
path: '/about-us'
},
{
name: 'Our Solutions',
name: 'MainHeader.OurSolutions',
path: '',
children: [
{
name: 'AiDA 3.1',
name: 'MainHeader.AiDA31',
path: '/aida'
},
{
name: 'Mixi',
name: 'MainHeader.Mixi',
path: '/mixi'
}
]
},
{
name: 'Communities',
name: 'MainHeader.Communities',
path: '',
children: [
{
name: 'Events',
name: 'MainHeader.Events',
path: '/events'
},
{
name: 'User Stories',
name: 'MainHeader.UserStories',
path: '/user-stories'
},
{
name: 'Help Centre',
name: 'MainHeader.HelpCentre',
path: '/help-centre'
}
]
},
{
name: 'Media',
name: 'MainHeader.Media',
path: '/media'
},
{
name: 'Contact Us',
name: 'MainHeader.ContactUs',
path: '/contact-us'
}
])
@@ -142,19 +146,14 @@
justify-content: center;
> .nav-item {
position: relative;
&:deep(> .down-menu > .title),
> .link {
margin: 0 14px;
color: #fff;
font-size: 15px;
font-size: 14px;
text-decoration: none;
line-height: 37px;
display: inline-block;
> .iconfont {
opacity: 0.5;
font-size: 10px;
margin-left: 5px;
}
}
> .child {
position: absolute;
@@ -201,14 +200,23 @@
display: flex;
align-items: center;
justify-content: center;
> span {
> .link {
margin: 0 14px;
color: #fff;
font-size: 15px;
font-size: 14px;
text-decoration: none;
line-height: 37px;
display: inline-block;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&:hover {
opacity: 0.8;
}
> .iconfont {
margin-right: 5px;
font-size: 22px;
}
}
}
}