42 lines
1006 B
Vue
42 lines
1006 B
Vue
<script setup lang="ts">
|
|
import { useI18n } from '@/composables/useI18n'
|
|
|
|
const { currentLang, setLang, t } = useI18n()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="lang-switch">
|
|
<button
|
|
:class="['lang-btn', { active: currentLang === 'zh' }]"
|
|
@click="setLang('zh')"
|
|
>中文</button>
|
|
<button
|
|
:class="['lang-btn', { active: currentLang === 'en' }]"
|
|
@click="setLang('en')"
|
|
>English</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.lang-switch {
|
|
display: flex;
|
|
gap: 2px;
|
|
}
|
|
|
|
.lang-btn {
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
color: #888;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.lang-btn:first-child { border-radius: 3px 0 0 3px; }
|
|
.lang-btn:last-child { border-radius: 0 3px 3px 0; }
|
|
|
|
.lang-btn:hover { color: #ccc; background: rgba(255, 255, 255, 0.1); }
|
|
.lang-btn.active { color: #fff; background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); }
|
|
</style>
|