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

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>