diff --git a/common/common.css b/common/common.css index 875dd71..71a6132 100644 --- a/common/common.css +++ b/common/common.css @@ -133,32 +133,62 @@ .lang-switch { display: flex; align-items: center; - gap: 4px; - padding: 6px 12px; - margin-left: 12px; - border-radius: 6px; + gap: 6px; + padding: 5px 14px; + margin-left: 16px; + border-radius: 20px; cursor: pointer; - color: rgba(220, 228, 240, 0.85); - font-size: 13px; + color: rgba(203, 213, 225, 0.7); + font-size: 12px; font-weight: 500; - transition: background 0.15s ease, color 0.15s ease; + letter-spacing: 0.5px; + transition: all 0.25s ease; user-select: none; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.08); + background: transparent; + border: 1px solid rgba(148, 163, 184, 0.15); } .lang-switch:hover { - background: rgba(255, 255, 255, 0.12); - color: #fff; + background: rgba(56, 189, 248, 0.08); + border-color: rgba(56, 189, 248, 0.3); + color: #38BDF8; } .lang-switch .lang-icon { - font-size: 15px; - line-height: 1; + width: 16px; + height: 16px; + flex-shrink: 0; + opacity: 0.7; + transition: opacity 0.25s ease; +} + +.lang-switch:hover .lang-icon { + opacity: 1; } .lang-switch .lang-text { font-weight: 600; + color: rgba(226, 232, 240, 0.95); + transition: color 0.25s ease; +} + +.lang-switch:hover .lang-text { + color: #38BDF8; +} + +.lang-switch .lang-sep { + color: rgba(148, 163, 184, 0.3); + font-weight: 300; +} + +.lang-switch .lang-alt { + color: rgba(148, 163, 184, 0.45); + font-weight: 400; + transition: color 0.25s ease; +} + +.lang-switch:hover .lang-alt { + color: rgba(56, 189, 248, 0.6); } .breadcrumb { diff --git a/js/i18n.js b/js/i18n.js index b344256..042b929 100644 --- a/js/i18n.js +++ b/js/i18n.js @@ -14,7 +14,7 @@ nav_console: '控制台', nav_login: '登录', nav_register: '立即注册', - lang_label: '中', + lang_label: 'CN', // === Banner 占位 === banner_tag_cloud: '云计算', @@ -332,10 +332,14 @@ // 更新 html lang 属性 document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en'; - // 更新语言切换按钮文字 - var langText = document.querySelector('.lang-text'); - if (langText) { - langText.textContent = dict.lang_label || lang.toUpperCase(); + // 更新语言切换按钮 + var langTexts = document.querySelectorAll('.lang-text'); + var langAlts = document.querySelectorAll('.lang-alt'); + for (var i = 0; i < langTexts.length; i++) { + langTexts[i].textContent = lang === 'zh' ? 'CN' : 'EN'; + } + for (var j = 0; j < langAlts.length; j++) { + langAlts[j].textContent = lang === 'zh' ? 'EN' : 'CN'; } }; diff --git a/public/header.html b/public/header.html index 769f43a..225fe7b 100644 --- a/public/header.html +++ b/public/header.html @@ -54,8 +54,10 @@