yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 国际化支持 + 导航右侧改造

Browse Source 
- 新建 js/i18n.js：轻量 i18n 引擎，130+ key 中英字典
- header.html: 去掉文档链接，控制台移入已登录区域
- header.html: 新增语言切换按钮 🌐（中/EN）
- header.html: 所有文字加 data-i18n 属性
- index.html: Banner/促销/产品/解决方案/基础设施/荣誉/新闻约 60 处 data-i18n
- common.css: 新增 .lang-switch 按钮样式
- 移动端侧边栏同步更新
This commit is contained in:
yiqiu
2026-03-18 18:33:12 +08:00
parent f78bded54f
commit f42dde0f95
5 changed files with 487 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
common/common.css
View File

@@ -129,6 +129,38 @@
color: rgba(220, 228, 240, 0.9);
}
/* 语言切换按钮 */
.lang-switch {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
margin-left: 12px;
border-radius: 6px;
cursor: pointer;
color: rgba(220, 228, 240, 0.85);
font-size: 13px;
font-weight: 500;
transition: background 0.15s ease, color 0.15s ease;
user-select: none;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.lang-switch:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.lang-switch .lang-icon {
font-size: 15px;
line-height: 1;
}
.lang-switch .lang-text {
font-weight: 600;
}
.breadcrumb {
padding-left: 0;
margin-bottom: 8px;

1
header.html
View File

@@ -105,6 +105,7 @@
<script src="/web/BlackFruit-web/common/common.js"></script>
<script src="/web/BlackFruit-web/js/nav-third-level.js"></script>
<script src="/web/BlackFruit-web/js/i18n.js"></script>
<script src="/web/BlackFruit-web/js/ai.js"></script>
<link rel="alternate" hreflang="zh-Hans" href="{$url}">

144
index.html
View File

@@ -58,12 +58,25 @@
<div class="section-content">
<div class="title-wrapper">
<div class="banner-tags">
<span class="banner-tag-pill"><span>云计算</span></span>
<span class="banner-tag-pill"><span>高性价比</span></span>
<span class="banner-tag-pill"><span data-i18n="banner_tag_cloud">云计算</span></span>
<span class="banner-tag-pill"><span data-i18n="banner_tag_value">高性价比</span></span>
</div>
<h1>中小企业的云计算底座</h1>
<h1 data-i18n="banner_title_1">中小企业的云计算底座</h1>
</div>
<p class="banner-desc">主题云聚焦中小企业的数智化转型进程，以技术和数据为驱动，以产品和场景为载体，专注于打磨云上业务服务能力，助力中小企业全面业务上云演化。</p>
<p class="banner-desc" data-i18n="banner_desc_1">主题云聚焦中小企业的数智化转型进程，以技术和数据为驱动，以产品和场景为载体，专注于打磨云上业务服务能力，助力中小企业全面业务上云演化。</p>
<div class="btn btn2 btn-normal" data-i18n="banner_btn">立即查看</div>
</div>
</div>
<div class="swiper-slide" style="background-image: url('/web/BlackFruit-web/assets/img/index/1@2x.png');">
<div class="section-content">
<div class="title-wrapper">
<div class="banner-tags">
<span class="banner-tag-pill"><span data-i18n="banner_tag_elastic">弹性伸缩</span></span>
<span class="banner-tag-pill"><span data-i18n="banner_tag_stable">安全稳定</span></span>
</div>
<h1 data-i18n="banner_title_2">企业级云服务解决方案</h1>
</div>
<p class="banner-desc" data-i18n="banner_desc_2">提供高性能、高可用的云计算服务，支持弹性伸缩，按需付费，助力企业数字化转型。</p>
<div class="btn btn2 btn-normal">立即查看</div>
</div>
</div>
@@ -71,24 +84,11 @@
<div class="section-content">
<div class="title-wrapper">
<div class="banner-tags">
<span class="banner-tag-pill"><span>弹性伸缩</span></span>
<span class="banner-tag-pill"><span>安全稳定</span></span>
<span class="banner-tag-pill"><span data-i18n="banner_tag_global">全球部署</span></span>
</div>
<h1>企业级云服务解决方案</h1>
<h1 data-i18n="banner_title_3">全球云基础设施</h1>
</div>
<p class="banner-desc">提供高性能、高可用的云计算服务，支持弹性伸缩，按需付费，助力企业数字化转型。</p>
<div class="btn btn2 btn-normal">立即查看</div>
</div>
</div>
<div class="swiper-slide" style="background-image: url('/web/BlackFruit-web/assets/img/index/1@2x.png');">
<div class="section-content">
<div class="title-wrapper">
<div class="banner-tags">
<span class="banner-tag-pill"><span>全球部署</span></span>
</div>
<h1>全球云基础设施</h1>
</div>
<p class="banner-desc">覆盖全球20+地区，60+可用区，500+CDN节点，为您提供低延迟、高可用的云服务体验。</p>
<p class="banner-desc" data-i18n="banner_desc_3">覆盖全球20+地区，60+可用区，500+CDN节点，为您提供低延迟、高可用的云服务体验。</p>
<div class="btn btn2 btn-normal">立即查看</div>
</div>
</div>
@@ -103,32 +103,32 @@
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon"
class="banner-item-icon" loading="lazy">
<div class="banner-item-content">
<h5>新用户最低可<span class="highlight">5折</span>优惠</h5>
<p class="title-desc mt-10 mb-10">无数个人用户的共同选择</p>
<h5 data-i18n="promo_new_user">新用户最低可<span class="highlight">5折</span>优惠</h5>
<p class="title-desc mt-10 mb-10" data-i18n="promo_new_user_desc">无数个人用户的共同选择</p>
</div>
</div>
<div class="banner-item" id="domain-box">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon"
class="banner-item-icon" loading="lazy">
<div class="banner-item-content">
<h5>域名<span class="highlight">低至9元</span>起</h5>
<p class="title-desc mt-10 mb-10">优选主流域名注册服务</p>
<h5 data-i18n="promo_domain">域名<span class="highlight">低至9元</span>起</h5>
<p class="title-desc mt-10 mb-10" data-i18n="promo_domain_desc">优选主流域名注册服务</p>
</div>
</div>
<div class="banner-item" id="cps-box">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon"
class="banner-item-icon" loading="lazy">
<div class="banner-item-content">
<h5>推广最高<span class="highlight">35%</span>佣金</h5>
<p class="title-desc mt-10 mb-10">多种产品高额返佣</p>
<h5 data-i18n="promo_cps">推广最高<span class="highlight">35%</span>佣金</h5>
<p class="title-desc mt-10 mb-10" data-i18n="promo_cps_desc">多种产品高额返佣</p>
</div>
</div>
<div class="banner-item" id="logon-box">
<img src="/web/BlackFruit-web/assets/picture_DyJDf/remoteL17140335436547.png" alt="icon"
class="banner-item-icon" loading="lazy">
<div class="banner-item-content">
<h5>注册送<span class="highlight">2000元</span>礼包</h5>
<p class="title-desc mt-10 mb-10">免费注册领取专属礼包</p>
<h5 data-i18n="promo_register">注册送<span class="highlight">2000元</span>礼包</h5>
<p class="title-desc mt-10 mb-10" data-i18n="promo_register_desc">免费注册领取专属礼包</p>
</div>
</div>
</div>
@@ -139,21 +139,21 @@
<div class="hot-products">
<div class="section-content">
<div class="hot-products-title">
<h3>热销产品推荐</h3>
<p class="subtitle">高性价比云服务器，助力您的业务快速上云</p>
<h3 data-i18n="hot_title">热销产品推荐</h3>
<p class="subtitle" data-i18n="hot_subtitle">高性价比云服务器，助力您的业务快速上云</p>
<!-- Products Grid -->
<div class="products-grid hot-products-list">
<!-- 产品卡片 1 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">香港弹性云</h4>
<h4 class="product-name" data-i18n="product_hk_elastic">香港弹性云</h4>
<div class="product-badges">
<span class="product-badge badge-hot">热销</span>
<span class="product-badge badge-hot" data-i18n="badge_hot">热销</span>
<span class="product-badge badge-promo">V0新春专享</span>
</div>
</div>
<p class="product-desc">稳定、安全、高效、易用，可存储任意类型和形式的非结构化数据</p>
<p class="product-desc" data-i18n="product_desc_storage">稳定、安全、高效、易用，可存储任意类型和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">2核CPU</span>
<span class="spec-divider">|</span>
@@ -171,18 +171,18 @@
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
<a href="./cloud.html" class="product-buy-btn" data-i18n="btn_buy">立即购买</a>
</div>
<!-- 产品卡片 2 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">美国高防云</h4>
<h4 class="product-name" data-i18n="product_us_defense">美国高防云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">V0新春专享</span>
</div>
</div>
<p class="product-desc">稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据</p>
<p class="product-desc" data-i18n="product_desc_scale">稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">4核CPU</span>
<span class="spec-divider">|</span>
@@ -206,9 +206,9 @@
<!-- 产品卡片 3 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">新加坡CN2云</h4>
<h4 class="product-name" data-i18n="product_sg_cn2">新加坡CN2云</h4>
<div class="product-badges">
<span class="product-badge badge-recommend">推荐</span>
<span class="product-badge badge-recommend" data-i18n="badge_recommend">推荐</span>
<span class="product-badge badge-promo">V0新春专享</span>
</div>
</div>
@@ -236,7 +236,7 @@
<!-- 产品卡片 4 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">日本BGP云</h4>
<h4 class="product-name" data-i18n="product_jp_bgp">日本BGP云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">V0新春专享</span>
</div>
@@ -265,12 +265,12 @@
<!-- 产品卡片 5 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">韩国CN2云</h4>
<h4 class="product-name" data-i18n="product_kr_cn2">韩国CN2云</h4>
<div class="product-badges">
<span class="product-badge badge-hot">热销</span>
</div>
</div>
<p class="product-desc">低延迟、高速度，适合游戏、视频等对网络质量要求高的业务</p>
<p class="product-desc" data-i18n="product_desc_kr">低延迟、高速度，适合游戏、视频等对网络质量要求高的业务</p>
<div class="product-specs">
<span class="spec-item">4核CPU</span>
<span class="spec-divider">|</span>
@@ -294,12 +294,12 @@
<!-- 产品卡片 6 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">国内BGP云</h4>
<h4 class="product-name" data-i18n="product_cn_bgp">国内BGP云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">特惠</span>
<span class="product-badge badge-promo" data-i18n="badge_promo">特惠</span>
</div>
</div>
<p class="product-desc">多线BGP接入，覆盖全国各地区，访问速度快，稳定性高</p>
<p class="product-desc" data-i18n="product_desc_cn">多线BGP接入，覆盖全国各地区，访问速度快，稳定性高</p>
<div class="product-specs">
<span class="spec-item">2核CPU</span>
<span class="spec-divider">|</span>
@@ -323,12 +323,12 @@
<!-- 产品卡片 7 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">镇江高防云</h4>
<h4 class="product-name" data-i18n="product_zj_defense">镇江高防云</h4>
<div class="product-badges">
<span class="product-badge badge-recommend">高防</span>
<span class="product-badge badge-recommend" data-i18n="badge_defense">高防</span>
</div>
</div>
<p class="product-desc">T级防御能力，有效抵御各类DDoS攻击，保障业务连续性</p>
<p class="product-desc" data-i18n="product_desc_defense">T级防御能力，有效抵御各类DDoS攻击，保障业务连续性</p>
<div class="product-specs">
<span class="spec-item">8核CPU</span>
<span class="spec-divider">|</span>
@@ -352,12 +352,12 @@
<!-- 产品卡片 8 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">宿迁BGP云</h4>
<h4 class="product-name" data-i18n="product_sq_bgp">宿迁BGP云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">上新</span>
<span class="product-badge badge-promo" data-i18n="badge_new">上新</span>
</div>
</div>
<p class="product-desc">全新BGP线路，性价比极高，适合个人站长及中小企业</p>
<p class="product-desc" data-i18n="product_desc_sq">全新BGP线路，性价比极高，适合个人站长及中小企业</p>
<div class="product-specs">
<span class="spec-item">4核CPU</span>
<span class="spec-divider">|</span>
@@ -415,33 +415,33 @@
<section class="section section-bg resolve">
<div class="section-content">
<div class="section-title">
<h2>全场景全栈解决方案</h2>
<div class="section-desc">专业构架师针对丰富的业务场景，为千行百业构建稳定、易用的高性价比解决方案。</div>
<h2 data-i18n="solution_title">全场景全栈解决方案</h2>
<div class="section-desc" data-i18n="solution_desc">专业构架师针对丰富的业务场景，为千行百业构建稳定、易用的高性价比解决方案。</div>
</div>
<!-- 新设计：上下两层布局 -->
<div class="solution-wrapper">
<!-- 上层：按钮导航 -->
<div class="solution-tabs">
<button class="solution-tab active" data-index="0">
<span>电商</span>
<span data-i18n="tab_ecommerce">电商</span>
</button>
<button class="solution-tab" data-index="1">
<span>金融</span>
<span data-i18n="tab_finance">金融</span>
</button>
<button class="solution-tab" data-index="2">
<span>游戏</span>
<span data-i18n="tab_game">游戏</span>
</button>
<button class="solution-tab" data-index="3">
<span>文旅</span>
<span data-i18n="tab_travel">文旅</span>
</button>
<button class="solution-tab" data-index="4">
<span>教育</span>
<span data-i18n="tab_education">教育</span>
</button>
<button class="solution-tab" data-index="5">
<span>医疗</span>
<span data-i18n="tab_medical">医疗</span>
</button>
<button class="solution-tab" data-index="6">
<span>农业</span>
<span data-i18n="tab_agriculture">农业</span>
</button>
</div>
@@ -603,21 +603,21 @@
<section class="section section-base">
<div class="section-content">
<div class="section-title">
<h2>安全合规、高速稳定的基础设施</h2>
<h2 data-i18n="infra_title">安全合规、高速稳定的基础设施</h2>
</div>
<div class="fboxRow base">
<div class="base-content mt-40">
<div class="fboxRow Ycenter mb-30">
<h2>20+</h2><span class="title-desc ml-10">国家地理区域</span>
<h2>20+</h2><span class="title-desc ml-10" data-i18n="infra_regions">国家地理区域</span>
</div>
<div class="fboxRow Ycenter mb-30">
<h2>60+</h2><span class="title-desc ml-10">可用区</span>
<h2>60+</h2><span class="title-desc ml-10" data-i18n="infra_zones">可用区</span>
</div>
<div class="fboxRow Ycenter mb-30">
<h2>500+</h2><span class="title-desc ml-10">全球CDN节点</span>
<h2>500+</h2><span class="title-desc ml-10" data-i18n="infra_cdn">全球CDN节点</span>
</div>
<div class="fboxRow Ycenter mb-30">
<h2>1T+</h2><span class="title-desc ml-10">可承载DDOS攻击</span>
<h2>1T+</h2><span class="title-desc ml-10" data-i18n="infra_ddos">可承载DDOS攻击</span>
</div>
</div>
@@ -629,8 +629,8 @@
<div class="honor-section">
<div class="section-content">
<div class="honor-title">
<h3>企业资质与荣誉</h3>
<p class="honor-subtitle">实体企业,资质齐全,技术独立<br>国三资资质证书+增值电信业务经营许可证(ISP资质)+其他资质齐全,可帮助用户办理ICP备案、公安备案等</p>
<h3 data-i18n="honor_title">企业资质与荣誉</h3>
<p class="honor-subtitle" data-i18n="honor_subtitle">实体企业,资质齐全,技术独立<br>国三资资质证书+增值电信业务经营许可证(ISP资质)+其他资质齐全,可帮助用户办理ICP备案、公安备案等</p>
</div>
<!-- 网格布局容器 -->
@@ -647,14 +647,14 @@
<section class="section news">
<div class="section-content">
<div class="section-title">
<h2>新动向，新机遇</h2>
<div class="section-desc">最新发展动态、最热行业资讯，与主题云一起见证云时代精彩瞬间</div>
<h2 data-i18n="news_title">新动向，新机遇</h2>
<div class="section-desc" data-i18n="news_desc">最新发展动态、最热行业资讯，与主题云一起见证云时代精彩瞬间</div>
</div>
<div class="news-content fboxWrap">
<div class="news-cont">
<div class="news-head fboxRow Xbetween Yend">
<div class="news-title">官方公告</div>
<div class="news-more"><a href="./announce.html">更多</a><span class="iconfont icon-arrow-right"></span></div>
<div class="news-title" data-i18n="news_announcement">官方公告</div>
<div class="news-more"><a href="./announce.html" data-i18n="news_more">更多</a><span class="iconfont icon-arrow-right"></span></div>
</div>
<div class="news-list" id="announceList">
@@ -663,8 +663,8 @@
<div class="news-cont">
<div class="news-head fboxRow Xbetween Yend">
<div class="news-title">新闻资讯</div>
<div class="news-more"><a href="./news.html">更多</a><span class="iconfont icon-arrow-right"></span></div>
<div class="news-title" data-i18n="news_info">新闻资讯</div>
<div class="news-more"><a href="./news.html" data-i18n="news_more">更多</a><span class="iconfont icon-arrow-right"></span></div>
</div>
<div class="news-list" id="newsList">
</div>

351
js/i18n.js Normal file
View File

@@ -0,0 +1,351 @@
/**
* i18n.js — 轻量国际化引擎
* 用法：给 HTML 元素加 data-i18n="key" 属性，调用 i18n.setLang('en') 切换
*/
(function () {
'use strict';
var i18n = {};
// 语言字典
i18n.dict = {
zh: {
// === Header ===
nav_console: '控制台',
nav_login: '登录',
nav_register: '立即注册',
lang_label: '中',
// === Banner 占位 ===
banner_tag_cloud: '云计算',
banner_tag_value: '高性价比',
banner_title_1: '中小企业的云计算底座',
banner_desc_1: '主题云聚焦中小企业的数智化转型进程，以技术和数据为驱动，以产品和场景为载体，专注于打磨云上业务服务能力，助力中小企业全面业务上云演化。',
banner_btn: '立即查看',
banner_tag_elastic: '弹性伸缩',
banner_tag_stable: '安全稳定',
banner_title_2: '企业级云服务解决方案',
banner_desc_2: '提供高性能、高可用的云计算服务，支持弹性伸缩，按需付费，助力企业数字化转型。',
banner_tag_global: '全球部署',
banner_title_3: '全球云基础设施',
banner_desc_3: '覆盖全球20+地区，60+可用区，500+CDN节点，为您提供低延迟、高可用的云服务体验。',
// === Banner 下方卡片 ===
promo_new_user: '新用户最低可<span class="highlight">5折</span>优惠',
promo_new_user_desc: '无数个人用户的共同选择',
promo_domain: '域名<span class="highlight">低至9元</span>起',
promo_domain_desc: '优选主流域名注册服务',
promo_cps: '推广最高<span class="highlight">35%</span>佣金',
promo_cps_desc: '多种产品高额返佣',
promo_register: '注册送<span class="highlight">2000元</span>礼包',
promo_register_desc: '免费注册领取专属礼包',
// === 热销产品 ===
hot_title: '热销产品推荐',
hot_subtitle: '高性价比云服务器，助力您的业务快速上云',
badge_hot: '热销',
badge_recommend: '推荐',
badge_promo: '特惠',
badge_new: '上新',
badge_defense: '高防',
btn_buy: '立即购买',
price_limit: '限购1台',
btn_more_products: '查看更多产品',
btn_collapse_products: '收起产品',
// === 产品名 ===
product_hk_elastic: '香港弹性云',
product_us_defense: '美国高防云',
product_sg_cn2: '新加坡CN2云',
product_jp_bgp: '日本BGP云',
product_kr_cn2: '韩国CN2云',
product_cn_bgp: '国内BGP云',
product_zj_defense: '镇江高防云',
product_sq_bgp: '宿迁BGP云',
// === 产品描述 ===
product_desc_storage: '稳定、安全、高效、易用，可存储任意类型和形式的非结构化数据',
product_desc_scale: '稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据',
product_desc_kr: '低延迟、高速度，适合游戏、视频等对网络质量要求高的业务',
product_desc_cn: '多线BGP接入，覆盖全国各地区，访问速度快，稳定性高',
product_desc_defense: 'T级防御能力，有效抵御各类DDoS攻击，保障业务连续性',
product_desc_sq: '全新BGP线路，性价比极高，适合个人站长及中小企业',
// === 解决方案 ===
solution_title: '全场景全栈解决方案',
solution_desc: '专业构架师针对丰富的业务场景，为千行百业构建稳定、易用的高性价比解决方案。',
tab_ecommerce: '电商',
tab_finance: '金融',
tab_game: '游戏',
tab_travel: '文旅',
tab_education: '教育',
tab_medical: '医疗',
tab_agriculture: '农业',
solution_ecommerce_title: '电商解决方案',
solution_ecommerce_sub: '应对高并发、大促等复杂场景',
solution_ecommerce_p1: '提供完整的电商云解决方案，有效应对大促、秒杀等高并发场景，保障系统稳定运行。',
solution_ecommerce_p2: '通过弹性扩容、智能调度等技术手段，助力电商平台快速响应业务需求，提升用户体验。',
solution_ecommerce_p3: '支持多种营销活动场景，实现营销创新与业务增收的双重目标。',
solution_finance_title: '金融解决方案',
solution_finance_sub: '安全可靠的金融级云服务',
solution_finance_p1: '为金融机构提供安全可靠的云计算基础设施，满足金融行业严格的监管要求和安全标准。',
solution_finance_p2: '助力金融机构打造面向垂直场景的创新金融产品，实现与用户之间的高效触达。',
solution_finance_p3: '提供风险控制、数据分析、智能客服等全方位技术支持，推动金融科技创新。',
solution_game_title: '游戏解决方案',
solution_game_sub: '低延迟、高并发的游戏云平台',
solution_game_p1: '构建高质量、全方位、深度体验的游戏云平台，提供低延迟、高并发的游戏运行环境。',
solution_game_p2: '支持游戏快速部署、弹性扩容，满足各类游戏场景需求。',
solution_game_p3: '通过智能运维、数据分析等技术手段，提升游戏研发效率，优化玩家游戏体验。',
solution_travel_title: '文旅解决方案',
solution_travel_sub: '科技赋能智慧文旅',
solution_travel_p1: '通过"科技+文化旅游"的深度融合创新及落地应用，推动文旅行业全面信息化、智慧化发展。',
solution_travel_p2: '提供智慧景区、智慧酒店、智慧旅行社等全场景解决方案，实现景区管理数字化、游客服务智能化。',
solution_travel_p3: '利用大数据、人工智能等技术，优化旅游资源配置，提升游客体验。',
solution_education_title: '教育解决方案',
solution_education_sub: '打造云时代教育新模式',
solution_education_p1: '实现教育数据互联互通、教学过程可视化、师生互动高交互的云上教育环境，打造云时代教育治理新模式。',
solution_education_p2: '提供在线课堂、智慧校园、教育管理等全方位解决方案，支持大规模在线教学和混合式教学模式。',
solution_education_p3: '通过人工智能、大数据等技术，实现个性化教学和精准教学评估。',
solution_medical_title: '医疗解决方案',
solution_medical_sub: '构建数字化医疗生态',
solution_medical_p1: '协助医疗机构打造医疗数据资源共享、医疗资源再利用、医疗知识再生产的数字化医疗生态循环体系。',
solution_medical_p2: '提供远程医疗、智慧医院、医疗影像云等解决方案，支持医疗数据安全存储和高效分析。',
solution_medical_p3: '通过云计算、人工智能等技术，辅助临床决策，提升医疗服务质量和效率。',
solution_agriculture_title: '农业解决方案',
solution_agriculture_sub: '推动智慧农业转型升级',
solution_agriculture_p1: '助力农业企业构建智慧农业生产服务体系，提升农业精细化种植与智能化管理水平。',
solution_agriculture_p2: '提供农业物联网、农产品溯源、智能灌溉等全链条解决方案，实现农业生产全过程数字化监控和管理。',
solution_agriculture_p3: '通过大数据分析和人工智能技术，优化种植方案，提高农作物产量和品质。',
solution_learn_more: '了解详情',
// === 基础设施 ===
infra_title: '安全合规、高速稳定的基础设施',
infra_regions: '国家地理区域',
infra_zones: '可用区',
infra_cdn: '全球CDN节点',
infra_ddos: '可承载DDOS攻击',
// === 荣誉 ===
honor_title: '企业资质与荣誉',
honor_subtitle: '实体企业,资质齐全,技术独立<br>国三资资质证书+增值电信业务经营许可证(ISP资质)+其他资质齐全,可帮助用户办理ICP备案、公安备案等',
// === 新闻 ===
news_title: '新动向，新机遇',
news_desc: '最新发展动态、最热行业资讯，与主题云一起见证云时代精彩瞬间',
news_announcement: '官方公告',
news_info: '新闻资讯',
news_more: '更多',
// === 登录菜单 ===
menu_account: '账户信息',
menu_unpaid: '未付款订单',
menu_ticket: '我的工单',
menu_logout: '退出账户',
menu_not_certified: '未实名',
menu_certified: '已实名',
},
en: {
// === Header ===
nav_console: 'Console',
nav_login: 'Login',
nav_register: 'Sign Up',
lang_label: 'EN',
// === Banner 占位 ===
banner_tag_cloud: 'Cloud',
banner_tag_value: 'Cost-effective',
banner_title_1: 'Cloud Foundation for SMEs',
banner_desc_1: 'Focused on digital transformation for small and medium enterprises, driven by technology and data, delivering reliable cloud services to accelerate your business growth.',
banner_btn: 'Learn More',
banner_tag_elastic: 'Auto-scaling',
banner_tag_stable: 'Secure & Stable',
banner_title_2: 'Enterprise Cloud Solutions',
banner_desc_2: 'High-performance, highly available cloud computing with elastic scaling and pay-as-you-go pricing to drive digital transformation.',
banner_tag_global: 'Global Deploy',
banner_title_3: 'Global Cloud Infrastructure',
banner_desc_3: 'Over 20 regions, 60+ availability zones, 500+ CDN nodes worldwide for low-latency, highly available cloud services.',
// === Banner 下方卡片 ===
promo_new_user: 'New users get up to <span class="highlight">50% off</span>',
promo_new_user_desc: 'Trusted by millions of individual users',
promo_domain: 'Domains from <span class="highlight">$1.29</span>',
promo_domain_desc: 'Premium domain registration services',
promo_cps: 'Earn up to <span class="highlight">35%</span> commission',
promo_cps_desc: 'High commissions across all products',
promo_register: 'Get <span class="highlight">$300</span> welcome bonus',
promo_register_desc: 'Sign up and claim your exclusive bonus',
// === 热销产品 ===
hot_title: 'Best-Selling Products',
hot_subtitle: 'High-performance cloud servers to accelerate your business',
badge_hot: 'Hot',
badge_recommend: 'Recommended',
badge_promo: 'Deal',
badge_new: 'New',
badge_defense: 'DDoS',
btn_buy: 'Buy Now',
price_limit: 'Limit 1',
btn_more_products: 'View More Products',
btn_collapse_products: 'Collapse',
// === 产品名 ===
product_hk_elastic: 'Hong Kong Elastic Cloud',
product_us_defense: 'US DDoS-Protected Cloud',
product_sg_cn2: 'Singapore CN2 Cloud',
product_jp_bgp: 'Japan BGP Cloud',
product_kr_cn2: 'Korea CN2 Cloud',
product_cn_bgp: 'China BGP Cloud',
product_zj_defense: 'Zhenjiang DDoS Cloud',
product_sq_bgp: 'Suqian BGP Cloud',
// === 产品描述 ===
product_desc_storage: 'Stable, secure, efficient, and user-friendly for storing unstructured data of any type',
product_desc_scale: 'Stable, secure, efficient, and user-friendly for workloads of any scale',
product_desc_kr: 'Low latency, high speed — ideal for gaming, video, and latency-sensitive applications',
product_desc_cn: 'Multi-line BGP access, nationwide coverage, fast speed and high stability',
product_desc_defense: 'T-level defense capability, effectively resisting various DDoS attacks',
product_desc_sq: 'Brand new BGP lines, extremely cost-effective, ideal for individual webmasters and SMEs',
// === 解决方案 ===
solution_title: 'Full-Stack Solutions for Every Scenario',
solution_desc: 'Professional architects build stable, easy-to-use, cost-effective solutions for all industries.',
tab_ecommerce: 'E-commerce',
tab_finance: 'Finance',
tab_game: 'Gaming',
tab_travel: 'Tourism',
tab_education: 'Education',
tab_medical: 'Healthcare',
tab_agriculture: 'Agriculture',
solution_ecommerce_title: 'E-commerce Solutions',
solution_ecommerce_sub: 'Handle high concurrency and flash sales',
solution_ecommerce_p1: 'Complete e-commerce cloud solutions for flash sales, promotions, and high-concurrency scenarios.',
solution_ecommerce_p2: 'Elastic scaling and intelligent scheduling to help e-commerce platforms respond quickly.',
solution_ecommerce_p3: 'Support various marketing scenarios to drive innovation and revenue growth.',
solution_finance_title: 'Financial Solutions',
solution_finance_sub: 'Secure and reliable financial-grade cloud',
solution_finance_p1: 'Secure cloud computing infrastructure that meets strict regulatory requirements.',
solution_finance_p2: 'Help financial institutions build innovative products for vertical scenarios.',
solution_finance_p3: 'Risk control, data analytics, and intelligent customer service support.',
solution_game_title: 'Gaming Solutions',
solution_game_sub: 'Low-latency, high-concurrency gaming platform',
solution_game_p1: 'Build high-quality gaming cloud platforms with low latency and high concurrency.',
solution_game_p2: 'Rapid deployment and elastic scaling for all game types.',
solution_game_p3: 'Intelligent operations and data analytics to optimize player experience.',
solution_travel_title: 'Tourism Solutions',
solution_travel_sub: 'Technology-powered smart tourism',
solution_travel_p1: 'Deep integration of technology and cultural tourism for industry-wide digital transformation.',
solution_travel_p2: 'Smart scenic areas, smart hotels, and smart travel agencies.',
solution_travel_p3: 'Big data and AI to optimize tourism resources and enhance visitor experience.',
solution_education_title: 'Education Solutions',
solution_education_sub: 'Cloud-era education innovation',
solution_education_p1: 'Cloud-based education with data interconnection, visual teaching, and interactive collaboration.',
solution_education_p2: 'Online classrooms, smart campuses, and education management at scale.',
solution_education_p3: 'AI and big data for personalized teaching and precise assessment.',
solution_medical_title: 'Healthcare Solutions',
solution_medical_sub: 'Building a digital medical ecosystem',
solution_medical_p1: 'Help medical institutions build a digital healthcare ecosystem for data sharing.',
solution_medical_p2: 'Telemedicine, smart hospitals, and medical imaging cloud solutions.',
solution_medical_p3: 'Cloud computing and AI to assist clinical decisions and improve care quality.',
solution_agriculture_title: 'Agriculture Solutions',
solution_agriculture_sub: 'Driving smart agriculture transformation',
solution_agriculture_p1: 'Build smart agricultural production service systems for precision farming.',
solution_agriculture_p2: 'IoT, traceability, and smart irrigation across the entire agricultural chain.',
solution_agriculture_p3: 'Big data and AI to optimize planting plans and improve crop yield.',
solution_learn_more: 'Learn More',
// === 基础设施 ===
infra_title: 'Secure, Compliant & High-Speed Infrastructure',
infra_regions: 'Geographic Regions',
infra_zones: 'Availability Zones',
infra_cdn: 'Global CDN Nodes',
infra_ddos: 'DDoS Protection Capacity',
// === 荣誉 ===
honor_title: 'Certifications & Awards',
honor_subtitle: 'Established enterprise with complete certifications and independent technology<br>ISP license, MIIT certification, and various qualifications to assist with ICP and public security filings',
// === 新闻 ===
news_title: 'Latest News & Opportunities',
news_desc: 'Stay updated with the latest developments and industry insights',
news_announcement: 'Announcements',
news_info: 'News',
news_more: 'More',
// === 登录菜单 ===
menu_account: 'Account',
menu_unpaid: 'Unpaid Orders',
menu_ticket: 'My Tickets',
menu_logout: 'Logout',
menu_not_certified: 'Unverified',
menu_certified: 'Verified',
}
};
/**
* 获取当前语言
*/
i18n.getLang = function () {
return localStorage.getItem('lang') || 'zh';
};
/**
* 设置语言并更新页面
*/
i18n.setLang = function (lang) {
if (!i18n.dict[lang]) return;
localStorage.setItem('lang', lang);
i18n.apply(lang);
};
/**
* 切换语言 (zh ↔ en)
*/
i18n.toggle = function () {
var current = i18n.getLang();
i18n.setLang(current === 'zh' ? 'en' : 'zh');
};
/**
* 应用语言到页面
*/
i18n.apply = function (lang) {
lang = lang || i18n.getLang();
var dict = i18n.dict[lang];
if (!dict) return;
// 遍历所有 data-i18n 元素
var els = document.querySelectorAll('[data-i18n]');
for (var idx = 0; idx < els.length; idx++) {
var el = els[idx];
var key = el.getAttribute('data-i18n');
if (dict[key] !== undefined) {
// 对包含 HTML 的内容用 innerHTML（如 <span class="highlight">）
if (dict[key].indexOf('<') !== -1) {
el.innerHTML = dict[key];
} else {
el.textContent = dict[key];
}
}
}
// 更新 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();
}
};
// 暴露到全局
window.i18n = i18n;
// DOM 就绪时自动应用
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () { i18n.apply(); });
} else {
i18n.apply();
}
})();

55
public/header.html
View File

@@ -27,31 +27,36 @@
</div>
</div>
<div class="nav-right">
<a href="/document.html" class="nav-text-link nav-desktop-link">文档</a>
<span class="nav-divider nav-desktop-link">|</span>
<a href="/home.htm" class="nav-text-link nav-desktop-link">控制台</a>
<span class="nav-divider nav-desktop-link">|</span>
<!-- 未登录状态 -->
<div class="no-login nav-desktop-link d-none">
<span class="nav-text-link" id="loginBtn">登录</span>
<span class="nav-text-link" id="loginBtn" data-i18n="nav_login">登录</span>
<span class="nav-divider">|</span>
<div class="btn btn-normal" id="registBtn">
<img src="/web/BlackFruit-web/assets/img/header/liwu.svg" class="regist-icon" alt="Gift">
<span class="regist-text">立即注册</span>
<span class="regist-text" data-i18n="nav_register">立即注册</span>
</div>
</div>
<!-- 已登录状态 -->
<div class="login-in nav-desktop-link d-none">
<a href="/home.htm" class="nav-text-link" data-i18n="nav_console">控制台</a>
<span class="nav-divider">|</span>
<div id="headImg" class="head-img"></div>
<span class="ml-10 font-el1 name" id="username"></span>
<div class="login-menu animated fadeIn">
<div class="login-menu-item" id="accountBtn">账户信息
<span class="no-real-name real-name" id="noCertification">未实名</span>
<span class="real-name d-none" id="isCertification">已实名</span>
<div class="login-menu-item" id="accountBtn"><span data-i18n="menu_account">账户信息</span>
<span class="no-real-name real-name" id="noCertification" data-i18n="menu_not_certified">未实名</span>
<span class="real-name d-none" id="isCertification" data-i18n="menu_certified">已实名</span>
</div>
<div class="login-menu-item" id="financeBtn">未付款订单</div>
<div class="login-menu-item" id="ticketBtn">我的工单</div>
<div class="login-menu-item" id="logout">退出账户</div>
<div class="login-menu-item" id="financeBtn" data-i18n="menu_unpaid">未付款订单</div>
<div class="login-menu-item" id="ticketBtn" data-i18n="menu_ticket">我的工单</div>
<div class="login-menu-item" id="logout" data-i18n="menu_logout">退出账户</div>
</div>
</div>
<!-- 语言切换（始终显示） -->
<div class="lang-switch nav-desktop-link" id="langSwitch" onclick="i18n.toggle()">
<span class="lang-icon">🌐</span>
<span class="lang-text">中</span>
</div>
<!-- 移动端汉堡菜单按钮 -->
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation">
<img src="/web/BlackFruit-web/assets/img/header/bar.svg" alt="Menu" class="mobile-menu-icon">
@@ -171,20 +176,17 @@
{/if}
<!-- 分隔线 -->
<div class="mobile-nav-divider"></div>
<!-- 文档和控制台 -->
<div class="mobile-nav-item">
<a href="/document.html" class="mobile-nav-link">文档</a>
</div>
<div class="mobile-nav-item">
<a href="/home.htm" class="mobile-nav-link">控制台</a>
<!-- 控制台（已登录时显示） -->
<div class="mobile-nav-item mobile-login-in" style="display: none;">
<a href="/home.htm" class="mobile-nav-link" data-i18n="nav_console">控制台</a>
</div>
<!-- 登录注册（未登录状态） -->
<div class="mobile-nav-actions mobile-no-login" style="display: none;">
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileLoginBtn">登录</span>
<span class="mobile-nav-link" id="mobileLoginBtn" data-i18n="nav_login">登录</span>
</div>
<div class="mobile-nav-item">
<div class="mobile-nav-btn" id="mobileRegistBtn">立即注册</div>
<div class="mobile-nav-btn" id="mobileRegistBtn" data-i18n="nav_register">立即注册</div>
</div>
</div>
<!-- 用户信息（已登录状态） -->
@@ -195,18 +197,23 @@
<div class="mobile-user-name" id="mobileUsername"></div>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileAccountBtn">账户信息</span>
<span class="mobile-nav-link" id="mobileAccountBtn" data-i18n="menu_account">账户信息</span>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileFinanceBtn">未付款订单</span>
<span class="mobile-nav-link" id="mobileFinanceBtn" data-i18n="menu_unpaid">未付款订单</span>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileTicketBtn">我的工单</span>
<span class="mobile-nav-link" id="mobileTicketBtn" data-i18n="menu_ticket">我的工单</span>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileLogout">退出账户</span>
<span class="mobile-nav-link" id="mobileLogout" data-i18n="menu_logout">退出账户</span>
</div>
</div>
<!-- 语言切换 -->
<div class="mobile-nav-divider"></div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" onclick="i18n.toggle()">🌐 <span class="lang-text">中</span> / EN</span>
</div>
</div>
</div>
</div>