diff --git a/src/store/modules/billing/billing.ts b/src/store/modules/billing/billing.ts
new file mode 100644
index 0000000..bc138f3
--- /dev/null
+++ b/src/store/modules/billing/billing.ts
@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia';
+
+interface BillingState {
+  balance: number;
+  usedAmount: number;
+}
+
+export const useBillingStore = defineStore('billing', {
+  state: (): BillingState => ({
+    balance: 23,
+    usedAmount: 77,
+  }),
+
+  actions: {
+    updateBalance(newBalance: number) {
+      this.balance = Number(newBalance.toFixed(2));
+    },
+    updateUsedAmount(newUsedAmount: number) {
+      this.usedAmount = Number(newUsedAmount.toFixed(2));
+    }
+  },
+
+  getters: {
+    getBalance: (state): number => state.balance,
+    getUsedAmount: (state): number => state.usedAmount
+  }
+});
diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue
index e6e8d14..49cdebb 100644
--- a/src/views/home/modules/header-banner.vue
+++ b/src/views/home/modules/header-banner.vue
@@ -3,7 +3,11 @@ import { computed, watch, ref } from 'vue';
 import { useEcharts } from '@/hooks/common/echarts';
 import { useAppStore } from '@/store/modules/app';
 import type { ECOption } from '@/hooks/common/echarts';
+import { useBillingStore } from '@/store/modules/billing/billing';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
+const billingStore = useBillingStore();
 defineOptions({
   name: 'HeaderBanner'
 });
@@ -24,30 +28,30 @@ interface GaugeData {
 const baseData = ref([
   {
     id: 0,
-    title: '剩余话费',
+    title: t('page.headerbanner.Remainingcredit'),
     value: 23,
     max: 100,
     unit: '元',
-    description: '本月话费',
-    subTitle: '已用: 77元'
+    description: t('page.headerbanner.monthphonebill'),
+    subTitle: t('page.headerbanner.Used')+'77元'
   },
   {
     id: 1,
-    title: '剩余流量',
+    title: t('page.headerbanner.Flowremaining'),
     value: 890,
     max: 1024,
     unit: 'MB',
-    description: '本月流量',
-    subTitle: '已用: 134MB'
+    description: t('page.headerbanner.monthflowr'),
+    subTitle: t('page.headerbanner.Used')+'134MB'
   },
   {
     id: 2,
-    title: '流量速率',
+    title: t('page.headerbanner.Trafficrate'),
     value: 3,
     max: 10,
     unit: 'MB/s',
-    description: '当前速度',
-    subTitle: '峰值: 8MB/s'
+    description: t('page.headerbanner.Currentspeed'),
+    subTitle: t('page.headerbanner.maxspeed')+'8MB/s'
   }
 ]);
 
@@ -192,10 +196,14 @@ function updateBillingData() {
   // 更新话费数据
   const remainingBill = Number((Math.random() * 50).toFixed(2)); // 0-50元
   const usedBill = Number((100 - remainingBill).toFixed(2));
+  // 更新 store 中的数据
+  billingStore.updateBalance(remainingBill);
+  billingStore.updateUsedAmount(usedBill);
+
   baseData.value[0] = {
     ...baseData.value[0],
     value: remainingBill,
-    subTitle: `已用: ${usedBill}元`
+    subTitle: t('page.headerbanner.Used')+`: ${usedBill}元`
   };
 
   // 更新流量数据
@@ -204,7 +212,7 @@ function updateBillingData() {
   baseData.value[1] = {
     ...baseData.value[1],
     value: remainingData,
-    subTitle: `已用: ${usedData}MB`
+    subTitle: t('page.headerbanner.Used')+`: ${usedData}MB`
   };
 
   // 更新图表
@@ -240,7 +248,7 @@ function resetPeakSpeed() {
   baseData.value[2] = {
     ...baseData.value[2],
     value: 0,  // 同时也将当前值重置为 0
-    subTitle: `峰值: ${peakSpeed.value.toFixed(2)}MB/s`
+    subTitle: t('page.headerbanner.maxspeed')+`: ${peakSpeed.value.toFixed(2)}MB/s`
   };
   // 更新图表
   updateGauge3(opts => updateGaugeData(opts, baseData.value[2]));
@@ -270,7 +278,7 @@ function mockDataUpdate() {
     baseData.value[2] = {
       ...baseData.value[2],
       value: Number(speedValue.toFixed(2)),
-      subTitle: `峰值: ${peakSpeed.value.toFixed(2)}MB/s`
+      subTitle: t('page.headerbanner.maxspeed')+`: ${peakSpeed.value.toFixed(2)}MB/s`
     };
 
     // 更新图表