f/web-kboss/src/router/index.js

@@ -314,7 +314,7 @@ export const asyncRoutes = [
     children: [
       {
         path: "overview",
-        component: () => import('@/views/product/productHome/productIndex/index.vue'),
+        component: () => import('../views/customer/orderManagement/index.vue'),
         name: 'ProductOverview',
         meta: {
           title: "资源概览",

f/web-kboss/src/utils/language.js

@@ -0,0 +1,36 @@
+// src/utils/language.js
+import Vue from 'vue'
+
+// 创建一个事件总线用于组件通信
+export const languageBus = new Vue()
+
+// 语言状态管理
+export const languageStore = {
+  state: {
+    language: 'zh'
+  },
+
+  setLanguage(lang) {
+    if (lang === 'zh' || lang === 'en') {
+      this.state.language = lang
+      localStorage.setItem('language', lang)
+      // 触发语言改变事件
+      languageBus.$emit('language-changed', lang)
+    }
+  },
+
+  getLanguage() {
+    return this.state.language
+  },
+
+  init() {
+    const savedLanguage = localStorage.getItem('language')
+    if (savedLanguage && (savedLanguage === 'zh' || savedLanguage === 'en')) {
+      this.state.language = savedLanguage
+    }
+    return this.state.language
+  }
+}
+
+// 初始化
+languageStore.init()

f/web-kboss/src/views/customer/orderDetil/index.vue

@@ -452,7 +452,7 @@ export default {
   padding-top: 25px;
   //margin-top: -20px;
   display: flex;
-  justify-content: flex-start;
+  justify-content: center ;
   align-items: center;
   //margin-right: 25%;
   list-style: none;
@@ -516,6 +516,7 @@ export default {
   }
   .itemMobile {
     height: auto !important;
+
   }
 }
 

f/web-kboss/src/views/customer/orderManagement/index.vue

@@ -7,23 +7,23 @@
           <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
             size="small">
             <!-- <el-option label="全部" value="all" /> -->
-            <el-option label="订单号" value="id"/>
-            <el-option label="订单日期" value="order_date"/>
-            <el-option label="订单状态:未支付" value="0"/>
-            <el-option label="订单状态:已支付" value="1"/>
-            <el-option label="订单状态:已取消" value="3"/>
+
+            <el-option label="订单号" value="id" />
+            <el-option label="订单日期" value="order_date" />
+            <el-option label="订单状态:未支付" value="0" />
+            <el-option label="订单状态:已支付" value="1" />
+            <el-option label="订单状态:已取消" value="3" />
           </el-select>
-          <el-input size="small" v-show="this.select=='id'" placeholder="请输入内容" class="input-with-select"
-                    @input="input" v-model="searchValue" clearable></el-input>
+          <el-input size="small" v-show="this.select == 'id'" placeholder="请输入内容" class="input-with-select" @input="input"
+            v-model="searchValue" clearable></el-input>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24" style="margin-top:5px;">
-          <div v-if="select=='order_date'">
+          <div v-if="select == 'order_date'">
             <div class="datePicker">
               <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
-                              start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日"
-                              value-format="yyyy-MM-dd">
+                start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
               </el-date-picker>
             </div>
           </div>
@@ -43,20 +43,18 @@
           <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
             width="130px" size="small">
             <!-- <el-option label="全部" value="all" /> -->
-            <el-option label="订单号" value="id"/>
-            <el-option label="订单日期" value="order_date"/>
-            <el-option label="订单状态:未支付" value="0"/>
-            <el-option label="订单状态:已支付" value="1"/>
-            <el-option label="订单状态:已取消" value="3"/>
+            <el-option label="订单号" value="id" />
+            <el-option label="订单日期" value="order_date" />
+            <el-option label="订单状态:未支付" value="0" />
+            <el-option label="订单状态:已支付" value="1" />
+            <el-option label="订单状态:已取消" value="3" />
           </el-select>
-          <el-input style="width: 150px;margin-left:10px;" size="small" v-show="this.select=='id'"
-                    placeholder="请输入内容" class="input-with-select" @input="input" v-model="searchValue"
-                    clearable></el-input>
-          <div v-if="select=='order_date'">
+          <el-input style="width: 150px;margin-left:10px;" size="small" v-show="this.select == 'id'" placeholder="请输入内容"
+            class="input-with-select" @input="input" v-model="searchValue" clearable></el-input>
+          <div v-if="select == 'order_date'">
             <div style="display:flex;margin-left:10px;">
               <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
-                              start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日"
-                              value-format="yyyy-MM-dd">
+                start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
               </el-date-picker>
             </div>
           </div>
@@ -66,7 +64,7 @@
           <span
             style="font-size: 16px;padding-left:15px;display: flex;justify-content: center;align-items: center">支付总金额:
             <div style="width: 250px;line-height: 36px">
-              <el-skeleton animated v-if="all_price_show" rows="2"/>
+              <el-skeleton animated v-if="all_price_show" rows="2" />
               <span v-else> ¥ {{ all_price }}</span>
             </div>
 
@@ -76,23 +74,31 @@
     </el-card>
     <!-- 表格 -->
     <el-card class="orderList">
-      <el-table border :data="tableData" class="table" height="calc(100vh - 200px)" v-loading="all_price_show">
-        <el-table-column min-width="200" align="center" header-align="center" prop="id"
-                         label="订单号"></el-table-column>
-        <el-table-column min-width="80" align="center" header-align="center" label="原价">
+      <el-table border :data="tableData" class="table" height="calc(100vh - 280px)" v-loading="all_price_show">
+        <!-- 序号 -->
+        <el-table-column label="序号" width="80">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <!-- 订单名称 -->
+        <el-table-column align="center" min-width="180" header-align="center" prop="source" label="产品名称">
+        </el-table-column>
+        <el-table-column align="center" min-width="300" header-align="center" prop="id" label="订单号"></el-table-column>
+        <el-table-column align="center" header-align="center" label="订单原价">
           <template slot-scope="scope">
             <!--                <div style="padding-left: 35px">-->
             ￥{{ scope.row.countprice }}
             <!--                </div>-->
           </template>
         </el-table-column>
-        <el-table-column min-width="80" align="center" header-align="center" label="折后实付价">
+        <el-table-column align="center" header-align="center" label="订单折后价">
           <template slot-scope="scope">
             {{ scope.row.amount ? "￥" + scope.row.amount : "-" }}
           </template>
 
         </el-table-column>
-        <el-table-column min-width="80" align="center" header-align="center" label="订单类型">
+        <el-table-column align="center" header-align="center" label="订单类型">
           <template slot-scope="scope">
             <!--            {{ orderTypeMap(scope.row.business_op) }}-->
             <el-tag :style="{ padding: '0 8px' }" :type="orderTypeMap(scope.row.business_op).type">
@@ -100,14 +106,13 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column min-width="150" align="center" header-align="center" prop="order_date"
-                         label="订单日期"></el-table-column>
-        <el-table-column min-width="150" align="center" header-align="center" label="订单状态">
+
+        <el-table-column align="center" header-align="center" label="订单状态">
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.order_status==='0'" style="padding: 0 5px" type="warning" effect="dark">
+            <el-tag v-if="scope.row.order_status === '0'" style="padding: 0 5px" type="warning" effect="dark">
               {{ getResult(scope.row.order_status) }}
             </el-tag>
-            <el-tag v-else-if="scope.row.order_status==='1'" style="padding: 0 5px" type="success" effect="dark">
+            <el-tag v-else-if="scope.row.order_status === '1'" style="padding: 0 5px" type="success" effect="dark">
               {{ getResult(scope.row.order_status) }}
             </el-tag>
             <el-tag v-else style="padding: 0 5px" type="info" effect="dark">
@@ -115,9 +120,10 @@
             </el-tag>
           </template>
         </el-table-column>
+        <el-table-column align="center" header-align="center" prop="order_date" label="订单日期"></el-table-column>
         <el-table-column align="center" header-align="center" label="操作">
           <template slot-scope="scope">
-            <el-button size="small" v-if="scope.row.order_status==='0'" type="primary" @click="orderDetails(scope.row)"
+            <el-button size="small" v-if="scope.row.order_status === '0'" type="primary" @click="orderDetails(scope.row)"
               style="padding: 8px 15px">去支付
             </el-button>
             <el-button size="small" v-else type="primary" @click="orderDetails(scope.row)" style="padding: 8px">
@@ -126,16 +132,25 @@
           </template>
         </el-table-column>
       </el-table>
+
+      <!-- 分 页-->
+      <div class="page">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
+        :total="400">
+      </el-pagination>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script>
-import {getOrderAPI} from "@/api/product/product";
+import { getOrderAPI } from "@/api/product/product";
 
 export default {
   data() {
     return {
+
       all_price_show: true,//金额显示骨架屏
       // 获取用户代理字P串
       userAgent: window.navigator.userAgent,
@@ -197,17 +212,18 @@ export default {
     this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
   },
   methods: {
+    // 订单类型映射
     orderTypeMap(type) {
       switch (type) {
         case 'BUY_REVERSE':
           // return <el-tag type="danger"></el-tag>;
-          return {text: "退款", type: "danger"};
+          return { text: "退款", type: "danger" };
         case 'RENEW':
-          return {text: "续费", type: "primary"};
+          return { text: "续费", type: "primary" };
         case 'BUY':
-          return {text: "购买", type: "success"};
+          return { text: "购买", type: "success" };
         default:
-          return {text: "-", type: "primary"};
+          return { text: "-", type: "primary" };
       }
     },
     getOrder(data) {//获取订单
@@ -263,7 +279,7 @@ export default {
       this.getOrder(e)
     },
     orderDetails(row) {  //查看订单详情
-      this.$router.push({name: "orderDetil", query: {id: row.id}});
+      this.$router.push({ name: "orderDetil", query: { id: row.id } });
     },
     getResult(data) {
       switch (data) {
@@ -280,18 +296,23 @@ export default {
       }
     },
   },
+  handleSizeChange(val) {
+    console.log(`每页 ${val} 条`);
+  },
+  handleCurrentChange(val) {
+    console.log(`当前页: ${val}`);
+  }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 * {
   padding: 0;
   margin: 0;
 }
 
 .orderManagement {
-  height: 100%;
-
+  height: calc(100vh - 180px);
   .mobileCaed {
     height: 100px;
     display: flex;
@@ -353,8 +374,8 @@ export default {
     }
 
     .orderList {
-      margin-top: 5px;
-      height: calc(100vh - 180px);
+      margin-top: 10px;
+      // height: calc(100vh - 180px);
 
       .table {
         width: 100%;
@@ -362,6 +383,10 @@ export default {
     }
   }
 }
+.page{
+  text-align: center;
+  margin: 20px;
+}
 </style>
 <style>
 .el-table .el-table__header {
@@ -371,4 +396,5 @@ export default {
 ::v-deep .el-tag {
   padding: 0 8px !important;
 }
+
 </style>

f/web-kboss/src/views/homePage/components/topBox/index.vue

@@ -268,6 +268,9 @@ import { reqApplyChannel } from "@/api/customer/channel";
 import store from "@/store";
 // 导入工具函数
 import { getHomePath } from '@/views/setting/tools'
+// 导入语言管理
+import { languageStore, languageBus } from '@/utils/language'
+
 export default Vue.extend({
   name: "TopBox",
   data() {
@@ -287,7 +290,7 @@ export default Vue.extend({
       threeData: [], // 三级菜单数据
       fourData: [], // 四级菜单数据（未使用）
       product_service: [], // 产品服务数据
-      language: 'zh', // 默认语言
+      language: languageStore.getLanguage(), // 从共享状态获取语言
       translations: {
         zh: {
           home: '首页',
@@ -336,11 +339,10 @@ export default Vue.extend({
     // 初始化组件
     this.init()
 
-    // 尝试从本地存储获取语言设置
-    const savedLanguage = localStorage.getItem('language');
-    if (savedLanguage && (savedLanguage === 'zh' || savedLanguage === 'en')) {
-      this.language = savedLanguage;
-    }
+    // 监听语言变化事件
+    languageBus.$on('language-changed', (lang) => {
+      this.language = lang
+    })
   },
   mounted() {
     // 组件挂载时，从sessionStorage获取用户名
@@ -361,6 +363,10 @@ export default Vue.extend({
     // 初始化导航数据
     this.initData()
   },
+  beforeDestroy() {
+    // 移除事件监听
+    languageBus.$off('language-changed')
+  },
   computed: {
     // 判断当前是否为ncmatchHome页面
     isNcmatchHome() {
@@ -404,10 +410,10 @@ export default Vue.extend({
         this.$router.push('/operation/supplierManagement')
       }
     },
-    // 切换语言
+    // 切换语言 - 修改为使用共享状态
     toggleLanguage() {
-      this.language = this.language === 'zh' ? 'en' : 'zh';
-      localStorage.setItem('language', this.language);
+      const newLanguage = this.language === 'zh' ? 'en' : 'zh';
+      languageStore.setLanguage(newLanguage)
     },
     // 初始化Logo信息
     init() {

f/web-kboss/src/views/homePage/mainPage/index.vue

@@ -3,7 +3,7 @@
     <!-- 粘性导航组件 -->
     <HomePageSticky
       ref="stickyNav"
-      :sections="stickySections"
+      :sections="getStickySections()"
       @navigate="handleNavigation"
       :show-threshold-element-selector="'.tagUl'"
       :show-offset="0"
@@ -14,30 +14,30 @@
       <div class="centerBox">
         <span style="margin-top: 100px" class="title">
           <span v-if="JSON.stringify(logoInfoNew) !== '{}'" class="leftText">
-            {{ logoInfoNew.home.bannerTitle || "" }}
+            {{ getBannerTitle() }}
           </span>
-          <span class="rightText"> 您身边的AI管家</span>
+          <span class="rightText"> {{ translations[language].aiButler }}</span>
         </span>
         <!-- 当滚动到这个元素位置时，显示粘性导航 -->
         <ul style="margin-top: 50px" class="tagUl">
-          <li>全 球 领 先 的 AI 服 务 运 营 商</li>
+          <li>{{ translations[language].slogan }}</li>
         </ul>
       </div>
 
       <div style="cursor: pointer" class="tag">
         <span @click="openTalk" class="product">
-          <span class="productName">4090 裸金属</span>
+          <span class="productName">{{ translations[language].product1Name }}</span>
           <span class="price">
             <span class="smallText">￥</span>
             <span class="bigText">6000</span>
-            <span class="smallText">/台/月</span>
+            <span class="smallText">/{{ translations[language].month }}</span>
           </span>
         </span>
         <span @click="goBaiduFn" style="top: 180px" class="product">
-          <span class="productName">云资源</span>
+          <span class="productName">{{ translations[language].product2Name }}</span>
           <span class="price">
             <span style="margin-top: 15px" class="smallText">
-              直降
+              {{ translations[language].discount }}
               <span style="font-size: 30px; display: inline-block" class="bigText">20%</span>
             </span>
           </span>
@@ -50,18 +50,18 @@
       <div class="bg"></div>
       <div class="itemTitle">
         <span class="topText">
-          <span>云筑</span>
-          <span class="commonTextColor">企业基座</span>
+          <span>{{ translations[language].baseTitle1 }}</span>
+          <span class="commonTextColor">{{ translations[language].baseTitle2 }}</span>
         </span>
-        <span class="bottomText">多云融合 让上云更简单</span>
+        <span class="bottomText">{{ translations[language].baseSubtitle }}</span>
       </div>
 
       <ul class="myTab">
         <li
-          v-for="menu in baseMenu"
+          v-for="menu in getBaseMenu()"
           :class="currentBaseMenu === menu.id ? 'activeMenu' : ''"
           @click="clickBaseMenu(menu)"
-          :key="menu.name"
+          :key="menu.id"
         >
           <img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
           {{ menu.name }}
@@ -74,10 +74,10 @@
           :style="{ backgroundImage: 'url(' + baseItem.bgImgUrl + ')' }"
           class="itemContent"
         >
-          <span class="title">{{ baseItem.title }}</span>
-          <p style="line-height: 2" class="description">{{ baseItem.description }}</p>
+          <span class="title">{{ getBaseItemTitle() }}</span>
+          <p style="line-height: 2" class="description">{{ getBaseItemDescription() }}</p>
           <ul class="itemContentTag">
-            <li v-for="(item, index) in baseItem.list" :key="index">
+            <li v-for="(item, index) in getBaseItemList()" :key="index">
               <img :src="item.icon" alt="" />
               <span
                 v-if="item.name"
@@ -95,16 +95,16 @@
           </span>
           <div class="twoBtn">
             <div class="butStyle" @click="goBaiduFn(baseItem)">
-              立即购买
+              {{ translations[language].buyNow }}
               <span style="display: inline-block; margin-left: 5px; color: white">></span>
             </div>
             <div v-show="false" class="lookDetailStyle">
-              查看详情&nbsp;&nbsp;>
+              {{ translations[language].viewDetails }}&nbsp;&nbsp;>
               <span style="display: inline-block; margin-left: 5px;"></span>
             </div>
           </div>
           <span class="discountStyle">
-            <span style="font-size: 18px">官网折扣</span>
+            <span style="font-size: 18px">{{ translations[language].officialDiscount }}</span>
             <span style="font-size: 24px">{{ baseItem.discount }}折</span>
           </span>
         </div>
@@ -115,18 +115,18 @@
       <div class="bg"></div>
       <div class="itemTitle">
         <span class="topText">
-          <span>智算</span>
-          <span class="commonTextColor">未来征程</span>
+          <span>{{ translations[language].suanTitle1 }}</span>
+          <span class="commonTextColor">{{ translations[language].suanTitle2 }}</span>
         </span>
-        <span class="bottomText">多元异构 灵活短租</span>
+        <span class="bottomText">{{ translations[language].suanSubtitle }}</span>
       </div>
 
       <ul class="myTab">
         <li
-          v-for="menu in suanMenu"
+          v-for="menu in getSuanMenu()"
           :class="currentSuanMenu === menu.id ? 'activeMenu' : ''"
           @click="clickSuanMenu(menu)"
-          :key="menu.name"
+          :key="menu.id"
         >
           <img :src="currentSuanMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
           {{ menu.name }}
@@ -135,9 +135,9 @@
 
       <transition name="slide-fade" mode="out-in">
         <div :key="currentSuanMenu" class="itemContentSuan">
-          <span class="title">{{ suanItem.title }}</span>
+          <span class="title">{{ getSuanItemTitle() }}</span>
           <ul class="itemContentTag">
-            <li v-for="(item, index) in suanItem.list" :key="index">
+            <li v-for="(item, index) in getSuanItemList()" :key="index">
               <img :src="item.icon" alt="" />
               <span
                 v-if="item.name"
@@ -153,16 +153,16 @@
             <span style="font-weight: bold;">￥</span>
             <span style="font-weight: bold; font-size: 48px">{{ suanItem.price }}</span>
             <span style="color: #7a82a0">/{{ suanItem.price_unit }}</span>
-            <span style="color: #222f60">（可短租）</span>
+            <span style="color: #222f60">（{{ translations[language].shortRent }}）</span>
           </span>
 
           <div style="margin-top: 10px !important;" class="twoBtn">
             <div class="butStyle" @click="openTalk">
-              立即咨询
+              {{ translations[language].consultNow }}
               <span style="display: inline-block; margin-left: 5px; color: white">></span>
             </div>
             <div v-show="false" class="lookDetailStyle">
-              查看详情&nbsp;&nbsp;>
+              {{ translations[language].viewDetails }}&nbsp;&nbsp;>
               <span style="display: inline-block; margin-left: 5px;"></span>
             </div>
           </div>
@@ -174,17 +174,17 @@
       <div class="bg"></div>
       <div class="itemTitle">
         <span class="topText">
-          <span>网织</span>
-          <span class="commonTextColor">智能经纬</span>
+          <span>{{ translations[language].netTitle1 }}</span>
+          <span class="commonTextColor">{{ translations[language].netTitle2 }}</span>
         </span>
-        <span class="bottomText">云算网融合 让连接更简单</span>
+        <span class="bottomText">{{ translations[language].netSubtitle }}</span>
       </div>
       <ul class="myTab">
         <li
-          v-for="menu in netMenu"
+          v-for="menu in getNetMenu()"
           :class="currentNetMenu === menu.id ? 'activeMenu' : ''"
           @click="clickNetMenu(menu)"
-          :key="menu.name"
+          :key="menu.id"
         >
           <img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
           {{ menu.name }}
@@ -193,29 +193,29 @@
 
       <transition name="slide-fade" mode="out-in">
         <div :key="currentNetMenu" class="itemContentNet">
-          <span style="margin-bottom: 15px" class="title">{{ netItem.title }}</span>
+          <span style="margin-bottom: 15px" class="title">{{ getNetItemTitle() }}</span>
           <p style="line-height: 2; margin-bottom: 15px" class="description">
-            {{ netItem.description }}
+            {{ getNetItemDescription() }}
           </p>
-          <span class="subTitle">产品优势</span>
+          <span class="subTitle">{{ translations[language].productAdvantage }}</span>
           <ul class="itemContentTag">
-            <li v-for="(item, index) in netItem.advantageList" :key="index">
+            <li v-for="(item, index) in getNetAdvantageList()" :key="index">
               <img :src="item.icon" alt="" />
               <span style="width: fit-content !important;" class="tagTitle">{{ item.name }}</span>
               <span class="tagContent">{{ item.content }}</span>
             </li>
           </ul>
-          <span class="subTitle">应用场景</span>
+          <span class="subTitle">{{ translations[language].applicationScenario }}</span>
           <ul class="netTagUl">
-            <li v-for="(i, d) in netItem.tagList" :key="d">{{ i.name }}</li>
+            <li v-for="(i, d) in getNetTagList()" :key="d">{{ i.name }}</li>
           </ul>
           <div class="twoBtn">
             <div @click="openTalk" class="butStyle">
-              立即咨询
+              {{ translations[language].consultNow }}
               <span style="display: inline-block; margin-left: 5px; color: white">></span>
             </div>
             <div @click="goDetail(netItem.id)" class="lookDetailStyle">
-              查看详情&nbsp;&nbsp;>
+              {{ translations[language].viewDetails }}&nbsp;&nbsp;>
               <span style="display: inline-block; margin-left: 5px;"></span>
             </div>
           </div>
@@ -225,7 +225,7 @@
       <div style="margin-top: 80px; margin-bottom: 50px" class="itemTitle">
         <span class="topText">
           <span></span>
-          <span class="commonTextColor">合作伙伴</span>
+          <span class="commonTextColor">{{ translations[language].partners }}</span>
         </span>
       </div>
       <div
@@ -239,31 +239,31 @@
       <div class="bg"></div>
       <div style="margin-top: 140px" class="itemTitle">
         <span class="topText">
-          <span>算力</span>
-          <span class="commonTextColor">资源</span>
+          <span>{{ translations[language].resourcesTitle1 }}</span>
+          <span class="commonTextColor">{{ translations[language].resourcesTitle2 }}</span>
         </span>
       </div>
       <div class="mapBox">
         <div style="display: flex; justify-content: space-around; width: 100%;">
           <div class="map">
             <span class="mapItem" style="top: 130px; right: 149px">
-              <span class="title">北京</span>
+              <span class="title">{{ translations[language].beijing }}</span>
               <img src="./img/map.png" alt="" />
             </span>
             <span class="mapItem" style="top: 154px; right: 124px">
-              <span class="title">天津</span>
+              <span class="title">{{ translations[language].tianjin }}</span>
               <img src="./img/map.png" alt="" />
             </span>
             <span class="mapItem" style="top: 278px; right: 310px">
-              <span class="title">四川</span>
+              <span class="title">{{ translations[language].sichuan }}</span>
               <img src="./img/map.png" alt="" />
             </span>
             <span class="mapItem" style="top: 291px; right: 136px">
-              <span class="title">上海</span>
+              <span class="title">{{ translations[language].shanghai }}</span>
               <img src="./img/map.png" alt="" />
             </span>
             <span class="mapItem" style="top: 261px; right: 174px">
-              <span class="title">江苏</span>
+              <span class="title">{{ translations[language].jiangsu }}</span>
               <img src="./img/map.png" alt="" />
             </span>
           </div>
@@ -274,7 +274,7 @@
                   8
                   <span class="mapTag">+</span>
                 </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">算力中心接入</span>
+                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].computeCenters }}</span>
               </div>
             </li>
             <li>
@@ -283,7 +283,7 @@
                   2000
                   <span style="right: -35px" class="mapTag">P+</span>
                 </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">算力</span>
+                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].computingPower }}</span>
               </div>
             </li>
             <li>
@@ -292,7 +292,7 @@
                   10
                   <span style="right: -35px" class="mapTag">ms</span>
                 </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">实时算力响应</span>
+                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].realTimeResponse }}</span>
               </div>
             </li>
             <li>
@@ -301,7 +301,7 @@
                   100,000
                   <span class="mapTag">+</span>
                 </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">注册用户</span>
+                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].registeredUsers }}</span>
               </div>
             </li>
           </ul>
@@ -311,7 +311,7 @@
 
     <div class="tiyan">
       <div>
-        <el-input v-model="phone" placeholder="请输入您的手机号" class="custom-input">
+        <el-input v-model="phone" :placeholder="translations[language].phonePlaceholder" class="custom-input">
           <template #append>
             <span
               @click="
@@ -321,7 +321,7 @@
                 })
               "
               class="experience-btn"
-              >立即体验</span
+              >{{ translations[language].experienceNow }}</span
             >
           </template>
         </el-input>
@@ -336,23 +336,23 @@
       :before-close="handleClose"
       width="30%"
     >
-      <span class="title">官方申明</span>
-      <p>尊敬用户：</p>
-      <p>您好~~</p>
-      <p>本平台公示的所有产品折扣活动均真实有效，价格体系严格遵循公开透明原则。</p>
+      <span class="title">{{ translations[language].officialStatement }}</span>
+      <p>{{ translations[language].dearUser }}：</p>
+      <p>{{ translations[language].greeting }}</p>
+      <p>{{ translations[language].statement1 }}</p>
       <p>
-        特别说明：<span style="color: #7a82a0 !important;"
-          >云服务产品页面所示价格属参考性标价，实际交易金额须以资源清单订单页面为准。</span
+        {{ translations[language].specialNote }}：<span style="color: #7a82a0 !important;"
+          >{{ translations[language].statement2 }}</span
         >
       </p>
-      <p>请您知悉上述条款并放心进行购买决策，如有任何疑问，可随时联系平台官方客服，我们将为您详细说明。</p>
+      <p>{{ translations[language].statement3 }}</p>
       <div style="margin-top: 85px" class="footerBox">
         <div class="item">
-          <span style="margin-bottom: 10px">客服热线</span>
+          <span style="margin-bottom: 10px">{{ translations[language].customerService }}</span>
           <span style="color: #7a82a0 !important;">4006150805</span>
         </div>
         <div style="margin-right: 50px" class="item">
-          <span>2025年6月30日</span>
+          <span>{{ translations[language].currentDate }}</span>
         </div>
       </div>
     </el-dialog>
@@ -368,6 +368,8 @@ import { mapState } from "vuex";
 import IndexTwo from "@/views/homePage/mainPage/logoG/indexTwo.vue";
 
 import HomePageSticky from "@/components/HomePageSticky/index.vue";
+// 导入语言管理
+import { languageStore, languageBus } from '@/utils/language'
 
 export default Vue.extend({
   name: "mainPage",
@@ -379,55 +381,195 @@ export default Vue.extend({
       currentBaseMenu: "hot",
       currentNetMenu: "hot",
       currentSuanMenu: 'hot',
-      suanMenu: [
-        { id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
-        { id: "4090", name: "4090", icon: require("./img/suan/1.png"), activeIcon: require("./img/suan/1.png") },
-        { id: "A100", name: "A100", icon: require("./img/suan/2.png"), activeIcon: require("./img/suan/2.png") },
-        { id: "A800", name: "A800", icon: require("./img/suan/3.png"), activeIcon: require("./img/suan/3.png") },
-        { id: "910B", name: "910B", icon: require("./img/suan/5.png"), activeIcon: require("./img/suan/5.png") }
-      ],
-      baseMenu: [
-        { id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
-        { id: "computing", name: "计算", icon: require("../newImg/computing.png"), activeIcon: require("../newImg/computingActive.png") },
-        { id: "storage", name: "存储", icon: require("../newImg/cun.png"), activeIcon: require("../newImg/cunActive.png") },
-        { id: "database", name: "数据库", icon: require("../newImg/database.png"), activeIcon: require("../newImg/databaseActive.png") },
-        { id: "container", name: "人脸识别", icon: require("../newImg/container.png"), activeIcon: require("../newImg/containerActive.png") }
-      ],
-      netMenu: [
-        { id: "hot", name: "热门推荐", icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
-        { id: "hlzx", name: "互联网专线", icon: require("./img/net/1.png"), activeIcon: require("./img/net/1.png") },
-        { id: "SDWAN", name: "SDWAN", icon: require("./img/net/2.png"), activeIcon: require("./img/net/2.png") },
-        { id: "DCI", name: "DCI", icon: require("./img/net/3.png"), activeIcon: require("./img/net/3.png") },
-        { id: "AI", name: "AI专线", icon: require("./img/net/4.png"), activeIcon: require("./img/net/4.png") }
-      ],
       base: {},
       baseItem: {},
       net: {},
       netItem: {},
       suan: {},
       suanItem: {},
-      // 定义导航项数据，传递给子组件
-      stickySections: [
-        { title: '云筑企业基座', ref: 'baseSection' },
-        { title: '智算未来征程', ref: 'suanSection' },
-        { title: '网织智能经纬', ref: 'netSection' },
-      ]
+      // 从共享状态获取语言
+      language: languageStore.getLanguage(),
+      translations: {
+        zh: {
+          // Banner 区域
+          aiButler: '您身边的AI管家',
+          slogan: '全 球 领 先 的 AI 服 务 运 营 商',
+          product1Name: '4090 裸金属',
+          product2Name: '云资源',
+          month: '台/月',
+          discount: '直降',
+
+          // 基础产品区域
+          baseTitle1: '云筑',
+          baseTitle2: '企业基座',
+          baseSubtitle: '多云融合 让上云更简单',
+
+          // 智算区域
+          suanTitle1: '智算',
+          suanTitle2: '未来征程',
+          suanSubtitle: '多元异构 灵活短租',
+          shortRent: '可短租',
+
+          // 网络区域
+          netTitle1: '网织',
+          netTitle2: '智能经纬',
+          netSubtitle: '云算网融合 让连接更简单',
+          productAdvantage: '产品优势',
+          applicationScenario: '应用场景',
+          partners: '合作伙伴',
+
+          // 资源区域
+          resourcesTitle1: '算力',
+          resourcesTitle2: '资源',
+          beijing: '北京',
+          tianjin: '天津',
+          sichuan: '四川',
+          shanghai: '上海',
+          jiangsu: '江苏',
+          computeCenters: '算力中心接入',
+          computingPower: '算力',
+          realTimeResponse: '实时算力响应',
+          registeredUsers: '注册用户',
+
+          // 按钮文本
+          buyNow: '立即购买',
+          consultNow: '立即咨询',
+          viewDetails: '查看详情',
+          experienceNow: '立即体验',
+          officialDiscount: '官网折扣',
+
+          // 输入框
+          phonePlaceholder: '请输入您的手机号',
+
+          // 弹窗内容
+          officialStatement: '官方申明',
+          dearUser: '尊敬用户',
+          greeting: '您好~~',
+          statement1: '本平台公示的所有产品折扣活动均真实有效，价格体系严格遵循公开透明原则。',
+          specialNote: '特别说明',
+          statement2: '云服务产品页面所示价格属参考性标价，实际交易金额须以资源清单订单页面为准。',
+          statement3: '请您知悉上述条款并放心进行购买决策，如有任何疑问，可随时联系平台官方客服，我们将为您详细说明。',
+          customerService: '客服热线',
+          currentDate: '2025年6月30日',
+
+          // 菜单项
+          hotRecommend: '热门推荐',
+          computing: '计算',
+          storage: '存储',
+          database: '数据库',
+          container: '人脸识别',
+          internetLine: '互联网专线',
+          sdwan: 'SDWAN',
+          dci: 'DCI',
+          aiLine: 'AI专线',
+
+          // 粘性导航
+          stickyBase: '云筑企业基座',
+          stickySuan: '智算未来征程',
+          stickyNet: '网织智能经纬'
+        },
+        en: {
+          // Banner 区域
+          aiButler: 'Your AI Butler',
+          slogan: 'Leading AI Service Operator Worldwide',
+          product1Name: '4090 Bare Metal',
+          product2Name: 'Cloud Resources',
+          month: 'unit/month',
+          discount: 'Off',
+
+          // 基础产品区域
+          baseTitle1: 'Cloud Build',
+          baseTitle2: 'Enterprise Foundation',
+          baseSubtitle: 'Multi-cloud integration makes cloud migration easier',
+
+          // 智算区域
+          suanTitle1: 'Intelligent Computing',
+          suanTitle2: 'Future Journey',
+          suanSubtitle: 'Multi-source heterogeneous Flexible short-term rental',
+          shortRent: 'Short rent available',
+
+          // 网络区域
+          netTitle1: 'Network Weaving',
+          netTitle2: 'Smart Framework',
+          netSubtitle: 'Cloud-computing-network integration makes connection easier',
+          productAdvantage: 'Product Advantages',
+          applicationScenario: 'Application Scenarios',
+          partners: 'Partners',
+
+          // 资源区域
+          resourcesTitle1: 'Computing',
+          resourcesTitle2: 'Resources',
+          beijing: 'Beijing',
+          tianjin: 'Tianjin',
+          sichuan: 'Sichuan',
+          shanghai: 'Shanghai',
+          jiangsu: 'Jiangsu',
+          computeCenters: 'Compute Centers Access',
+          computingPower: 'Computing Power',
+          realTimeResponse: 'Real-time Response',
+          registeredUsers: 'Registered Users',
+
+          // 按钮文本
+          buyNow: 'Buy Now',
+          consultNow: 'Consult Now',
+          viewDetails: 'View Details',
+          experienceNow: 'Experience Now',
+          officialDiscount: 'Official Discount',
+
+          // 输入框
+          phonePlaceholder: 'Please enter your phone number',
+
+          // 弹窗内容
+          officialStatement: 'Official Statement',
+          dearUser: 'Dear User',
+          greeting: 'Hello~~',
+          statement1: 'All product discount activities displayed on this platform are valid and the pricing system strictly follows the principle of transparency.',
+          specialNote: 'Special Note',
+          statement2: 'The prices shown on cloud service product pages are reference prices, and the actual transaction amount shall be subject to the resource list order page.',
+          statement3: 'Please be aware of the above terms and make purchase decisions with confidence. If you have any questions, please contact our official customer service at any time for detailed explanation.',
+          customerService: 'Customer Service',
+          currentDate: 'June 30, 2025',
+
+          // 菜单项
+          hotRecommend: 'Hot Recommend',
+          computing: 'Computing',
+          storage: 'Storage',
+          database: 'Database',
+          container: 'Face Recognition',
+          internetLine: 'Internet Line',
+          sdwan: 'SDWAN',
+          dci: 'DCI',
+          aiLine: 'AI Line',
+
+          // 粘性导航
+          stickyBase: 'Cloud Enterprise Foundation',
+          stickySuan: 'Intelligent Computing Journey',
+          stickyNet: 'Smart Network Framework'
         }
+      }
+    }
+  },
+  created() {
+    // 监听语言变化事件
+    languageBus.$on('language-changed', (lang) => {
+      this.language = lang
+    })
   },
   mounted() {
     // 监听滚动 控制sticky显示隐藏
     document.getElementById("homeOut").addEventListener('scroll', (e) =>{
-
-      // console.log("滚动条事件",e.target.scrollTop);
       if (e.target.scrollTop > 500) {
         document.getElementById('sticky').style.display = 'block'
       } else {
         document.getElementById('sticky').style.display = 'none'
       }
-
     })
     this.initData()
   },
+  beforeDestroy() {
+    // 移除事件监听
+    languageBus.$off('language-changed')
+  },
   computed: {
     ...mapState({
       logoInfoNew: state => state.product.logoInfoNew,
@@ -438,6 +580,120 @@ export default Vue.extend({
     },
   },
   methods: {
+    // 获取粘性导航数据
+    getStickySections() {
+      return [
+        { title: this.translations[this.language].stickyBase, ref: 'baseSection' },
+        { title: this.translations[this.language].stickySuan, ref: 'suanSection' },
+        { title: this.translations[this.language].stickyNet, ref: 'netSection' },
+      ]
+    },
+
+    // 获取基础菜单
+    getBaseMenu() {
+      return [
+        { id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
+        { id: "computing", name: this.translations[this.language].computing, icon: require("../newImg/computing.png"), activeIcon: require("../newImg/computingActive.png") },
+        { id: "storage", name: this.translations[this.language].storage, icon: require("../newImg/cun.png"), activeIcon: require("../newImg/cunActive.png") },
+        { id: "database", name: this.translations[this.language].database, icon: require("../newImg/database.png"), activeIcon: require("../newImg/databaseActive.png") },
+        { id: "container", name: this.translations[this.language].container, icon: require("../newImg/container.png"), activeIcon: require("../newImg/containerActive.png") }
+      ]
+    },
+
+    // 获取智算菜单
+    getSuanMenu() {
+      return [
+        { id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
+        { id: "4090", name: "4090", icon: require("./img/suan/1.png"), activeIcon: require("./img/suan/1.png") },
+        { id: "A100", name: "A100", icon: require("./img/suan/2.png"), activeIcon: require("./img/suan/2.png") },
+        { id: "A800", name: "A800", icon: require("./img/suan/3.png"), activeIcon: require("./img/suan/3.png") },
+        { id: "910B", name: "910B", icon: require("./img/suan/5.png"), activeIcon: require("./img/suan/5.png") }
+      ]
+    },
+
+    // 获取网络菜单
+    getNetMenu() {
+      return [
+        { id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
+        { id: "hlzx", name: this.translations[this.language].internetLine, icon: require("./img/net/1.png"), activeIcon: require("./img/net/1.png") },
+        { id: "SDWAN", name: this.translations[this.language].sdwan, icon: require("./img/net/2.png"), activeIcon: require("./img/net/2.png") },
+        { id: "DCI", name: this.translations[this.language].dci, icon: require("./img/net/3.png"), activeIcon: require("./img/net/3.png") },
+        { id: "AI", name: this.translations[this.language].aiLine, icon: require("./img/net/4.png"), activeIcon: require("./img/net/4.png") }
+      ]
+    },
+
+    // 获取Banner标题
+    getBannerTitle() {
+      if (this.language === 'en') {
+        // 这里可以根据需要提供英文的banner标题
+        return this.logoInfoNew.home.bannerTitle || ""
+      }
+      return this.logoInfoNew.home.bannerTitle || ""
+    },
+
+    // 获取基础产品标题
+    getBaseItemTitle() {
+      if (this.language === 'en') {
+        // 这里可以根据实际数据结构提供英文标题
+        return this.baseItem.title || ""
+      }
+      return this.baseItem.title || ""
+    },
+
+    // 获取基础产品描述
+    getBaseItemDescription() {
+      if (this.language === 'en') {
+        // 这里可以根据实际数据结构提供英文描述
+        return this.baseItem.description || ""
+      }
+      return this.baseItem.description || ""
+    },
+
+    // 获取基础产品列表
+    getBaseItemList() {
+      // 这里可以处理产品列表的翻译
+      return this.baseItem.list || []
+    },
+
+    // 获取智算产品标题
+    getSuanItemTitle() {
+      if (this.language === 'en') {
+        return this.suanItem.title || ""
+      }
+      return this.suanItem.title || ""
+    },
+
+    // 获取智算产品列表
+    getSuanItemList() {
+      return this.suanItem.list || []
+    },
+
+    // 获取网络产品标题
+    getNetItemTitle() {
+      if (this.language === 'en') {
+        return this.netItem.title || ""
+      }
+      return this.netItem.title || ""
+    },
+
+    // 获取网络产品描述
+    getNetItemDescription() {
+      if (this.language === 'en') {
+        return this.netItem.description || ""
+      }
+      return this.netItem.description || ""
+    },
+
+    // 获取网络产品优势列表
+    getNetAdvantageList() {
+      return this.netItem.advantageList || []
+    },
+
+    // 获取网络产品标签列表
+    getNetTagList() {
+      return this.netItem.tagList || []
+    },
+
     goBaiduFn(item) {
       if (this.loginState) {
         this.$store.commit('setRedirectUrl', item.url)
@@ -507,7 +763,7 @@ export default Vue.extend({
     // 处理来自子组件的导航事件
     handleNavigation(index) {
       console.log('父组件接收到导航事件，索引:', index);
-      const sectionRef = this.stickySections[index]?.ref;
+      const sectionRef = this.getStickySections()[index]?.ref;
       if (sectionRef && this.$refs[sectionRef]) {
         // 使用原生 scrollIntoView 实现平滑滚动
         this.$refs[sectionRef].scrollIntoView({
@@ -515,14 +771,16 @@ export default Vue.extend({
           block: 'start',
           inline: 'start'
         });
-
       }
     }
-  },
+  }
 })
 </script>
 
+
+
 <style scoped lang="scss">
+// 原有的样式保持不变...
 // 添加动画样式
 .slide-fade-enter-active {
   transition: all 0.3s ease;
@@ -1365,7 +1623,3 @@ export default Vue.extend({
 
 }
 </style>
-
-
-
-