a91c379096
useI18n({ useScope: 'global' }) 在嵌入时解析到宿主已安装的 i18n 实例，
而非本子项目实例 -> mobileGame.* 文案回退成 i18n key（显示 ID）。
改为 useLocale composable 直接读本模块级 i18n.global，无论是否 app.use() 都正确。
65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<script setup>
|
|
import { useLocale } from '../composables/useLocale.js'
|
|
import Tag from './ui/Tag.vue'
|
|
import { heroMeta } from '../config.js'
|
|
|
|
const { t } = useLocale()
|
|
</script>
|
|
|
|
<template>
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero__eyebrow">
|
|
<Tag>{{ t(heroMeta.courseKey) }}</Tag>
|
|
</div>
|
|
<h1 class="hero__title">{{ t('mobileGame.hero.title') }}</h1>
|
|
<p class="hero__desc">{{ t('mobileGame.hero.desc') }}</p>
|
|
<div class="hero__meta">
|
|
<div v-for="item in heroMeta.items" :key="item.labelKey" class="hero__meta-item">
|
|
<span class="hero__meta-label">{{ t(item.labelKey) }}</span>
|
|
<span>{{ t(item.valueKey) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.hero {
|
|
padding: var(--space-2xl) 0 var(--space-xl);
|
|
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.hero__eyebrow {
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
.hero__title {
|
|
font-size: 2.3rem;
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
.hero__desc {
|
|
max-width: 720px;
|
|
font-size: 1.02rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
.hero__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xl);
|
|
}
|
|
.hero__meta-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
font-size: 0.92rem;
|
|
color: var(--text-primary);
|
|
}
|
|
.hero__meta-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-tertiary);
|
|
}
|
|
</style>
|