7.18 国际化文件添加

src/views/home/homepage/index.css

@@ -22,11 +22,11 @@
   border: 1px solid #ccc;
 }
 .tops_content .electricity_status .block_spans {
-  width: 100px;
+  padding: 5px;
   line-height: 30px;
   border-radius: 7px;
   color: #fff;
-  background: #24ebf1;
+  background: #79bd56;
   text-align: center;
   margin-left: 8px;
 }
@@ -42,7 +42,7 @@
 .tops_content .electricity_status .bottom_status > div {
   width: 46%;
   height: 30%;
-  background: #e5f8fd;
+  background: #e3f1cb;
   margin: 0 5px;
   display: flex;
   flex-direction: column;
@@ -106,7 +106,7 @@
 .tops_content .electricity_imgs .bg_imgs {
   width: 100%;
   height: 100%;
-  background: url('../../../assets/imgs/电站.png') no-repeat center;
+  background: url('../../../assets/imgs/shouye.png') no-repeat center;
   background-size: 100% 100%;
   position: relative;
 }
@@ -202,7 +202,7 @@
   flex: 1;
   height: 90%;
   margin: 0 5px;
-  background: #e5f8fd;
+  background: #e3f1cb;
   display: flex;
   align-items: center;
   justify-content: center;

src/views/home/homepage/index.less

@@ -24,7 +24,8 @@
         }
 
         .block_spans {
-            width: 100px;
+            // width: 100px;
+            padding: 5px;
             line-height: 30px;
             border-radius: 7px;
             color: #fff;

src/views/home/homepage/index.vue

@@ -4,33 +4,33 @@
 		<div class="tops_content">
 			<div class="electricity_status">
 				<div class="div_shadowing">
-					<span>当前换电状态:</span>
+					<span>{{ $t('message.homepage.stepName') }}:</span>
 					<span class="block_spans"> {{ bmsSwapSts.stepName }} </span>
 				</div>
 				<div class="bottom_status div_shadowing">
 					<div>
 						<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.chargeTodayCount }}</span>
-						<span style="font-size: 12px">当日充电 (次)</span>
+						<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.chargeTodayCount') }}</span>
 					</div>
 					<div>
 						<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapTodayElectricity }}</span>
-						<span style="font-size: 12px">当日换电量 (度)</span>
+						<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapTodayElectricity') }}</span>
 					</div>
 					<div>
 						<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapTodayCount }}</span>
-						<span style="font-size: 12px">当日换电 (次)</span>
+						<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapTodayCount') }}</span>
 					</div>
 					<div>
 						<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapTotalCount }}</span>
-						<span style="font-size: 12px">累计换电 (次)</span>
+						<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapTotalCount') }}</span>
 					</div>
 					<div>
 						<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapMonthElectricity }}</span>
-						<span style="font-size: 12px">当月换电量 (度)</span>
+						<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapMonthElectricity') }}</span>
 					</div>
 					<div>
 						<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.chargeTotalCount }}</span>
-						<span style="font-size: 12px">累计充电 (次)</span>
+						<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.chargeTotalCount') }}</span>
 					</div>
 				</div>
 			</div>
@@ -47,7 +47,7 @@
 							<img :src="item.url_A" v-if="item.exists == 1 && item.chargeStatus == 4" />
 							<img :src="item.url" v-if="item.exists == 1 && item.chargeStatus == 1" />
 						</div> -->
-						<!-- <div
+					<!-- <div
 							:class="item.offectleft"
 							:style="{
 								'background-image': item.url,
@@ -84,28 +84,28 @@
 		<div class="bottom_tips">
 			<div class="div_shadowing">
 				<img src="../../../assets/imgs/故障提示.png" />
-				<span class="tips_font">故障提示</span>
+				<span class="tips_font">{{ $t('message.homepage.error_Total') }}</span>
 				<span class="tips_font" style="font-size: 25px; color: black">{{ error_Total }}</span>
 			</div>
 			<div class="left_icons div_shadowing">
 				<div>
 					<img src="../../../assets/imgs/电池总数.png" />
 					<div class="flex_public">
-						<span class="tips_font">电池总数</span>
+						<span class="tips_font"> {{ $t('message.homepage.btyTotalCount') }} </span>
 						<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.btyTotalCount }}</span>
 					</div>
 				</div>
 				<div>
 					<img src="../../../assets/imgs/满电数量.png" />
 					<div class="flex_public">
-						<span class="tips_font">满足换电数量</span>
+						<span class="tips_font"> {{ $t('message.homepage.canSwapCount') }} </span>
 						<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.canSwapCount }}</span>
 					</div>
 				</div>
 				<div>
 					<img src="../../../assets/imgs/充电中.png" />
 					<div class="flex_public">
-						<span class="tips_font">充电中</span>
+						<span class="tips_font"> {{ $t('message.homepage.chargingCount') }} </span>
 						<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.chargingCount }}</span>
 					</div>
 				</div>
@@ -129,6 +129,8 @@
 </template>
 
 <script setup>
+import { useI18n } from 'vue-i18n';
+
 import { getAPI } from '/@/utils/axios-utils';
 import { SysMonitorApi, SysChargeMonitorApi, SysEquipAlarmLogApi } from '/@/api-services/api';
 import home_imgs from '/@/assets/imgs/A1.png';
@@ -148,6 +150,8 @@ import home_imgs_A6 from '/@/assets/imgs/A4_black.png';
 import home_imgs_A7 from '/@/assets/imgs/A6_black.png';
 import home_imgs_A8 from '/@/assets/imgs/A8_black.png';
 import { onMounted, reactive, ref } from 'vue';
+const { t } = useI18n();
+
 const bmsSwapSts = ref({
 	stepName: '空闲',
 });