diff --git a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
index 010a21a5fa..1c9eabb172 100644
--- a/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
@@ -83,14 +83,14 @@
                       {{apiCountData.runningCount}}
                     </span>
                   </el-col>
-                  <el-col>
+                  <el-col style="margin-top: 5px;">
                     <span class="default-property">
                       {{$t('api_test.home_page.detail_card.not_started')}}
                       {{"\xa0\xa0"}}
                       {{apiCountData.notStartedCount}}
                     </span>
                   </el-col>
-                  <el-col>
+                  <el-col style="margin-top: 5px;">
                     <span class="main-property">
                       {{$t('api_test.home_page.detail_card.finished')}}
                       {{"\xa0\xa0"}}
@@ -157,10 +157,11 @@ export default {
   box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
 }
 .default-property{
-
+  font-size: 12px
 }
 .main-property{
   color: #F39021;
+  font-size: 12px
 }
 
 .el-card /deep/ .el-card__header {
diff --git a/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue b/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
index 7da19aaa67..1683a9121c 100644
--- a/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
@@ -11,7 +11,9 @@
           <span class="count-number">
             {{sceneCountData.allApiDataCountNumber}}
           </span>
-          {{$t('api_test.home_page.unit_of_measurement')}}
+          <span style="color: #6C317C;">
+            {{$t('api_test.home_page.unit_of_measurement')}}
+          </span>
         </div>
       </el-main>
     </el-container>
@@ -65,12 +67,14 @@
                       {{sceneCountData.unexecuteCount}}
                     </span>
                   </el-col>
-                  <el-col>
-                    {{$t('api_test.home_page.detail_card.execution_failed')}}
-                    {{"\xa0\xa0"}}
-                    {{sceneCountData.executionFailedCount}}
+                  <el-col style="margin-top: 5px;">
+                    <span class="defaultProperty">
+                      {{$t('api_test.home_page.detail_card.execution_failed')}}
+                      {{"\xa0\xa0"}}
+                      {{sceneCountData.executionFailedCount}}
+                    </span>
                   </el-col>
-                  <el-col>
+                  <el-col style="margin-top: 5px;">
                     <span class="main-property">
                       {{$t('api_test.home_page.detail_card.execution_pass')}}
                       {{"\xa0\xa0"}}
@@ -141,10 +145,11 @@ export default {
   box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
 }
 .defaultProperty{
-
+  font-size: 12px
 }
 .main-property{
   color: #F39021;
+  font-size: 12px
 }
 
 .el-card /deep/ .el-card__header {
diff --git a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
index 8d57c6ddcf..6f9d952ab6 100644
--- a/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
@@ -11,7 +11,9 @@
           <span class="count-number">
             {{scheduleTaskCountData.allApiDataCountNumber}}
           </span>
-          {{$t('api_test.home_page.unit_of_measurement')}}
+          <span style="color: #6C317C;">
+            {{$t('api_test.home_page.unit_of_measurement')}}
+          </span>
         </div>
       </el-main>
     </el-container>
@@ -66,9 +68,9 @@
                       {{scheduleTaskCountData.failedCount}}
                     </span>
                   </el-col>
-                  <el-col style=" height: 20px">
+                  <el-col style=" height: 20px;margin-top: 3px;">
                   </el-col>
-                  <el-col>
+                  <el-col style="margin-top: 5px;">
                     <span class="main-property">
                       {{$t('api_test.home_page.detail_card.success')}}
                       {{"\xa0\xa0"}}
@@ -146,10 +148,11 @@ export default {
   box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
 }
 .default-property{
-
+  font-size: 12px
 }
 .main-property{
   color: #F39021;
+  font-size: 12px;
 }
 
 .el-card /deep/ .el-card__header {
diff --git a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
index 8495305479..2b77654801 100644
--- a/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
+++ b/frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
@@ -99,9 +99,9 @@
                       {{testCaseCountData.uncoverageCount}}
                     </span>
                   </el-col>
-                  <el-col style=" height: 20px">
+                  <el-col style=" height: 20px;margin-top: 3px;">
                   </el-col>
-                  <el-col>
+                  <el-col style="margin-top: 5px;">
                     <span class="main-property">
                       {{$t('api_test.home_page.detail_card.coverage')}}
                       {{"\xa0\xa0"}}
@@ -176,10 +176,11 @@ export default {
   box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
 }
 .default-property{
-
+  font-size: 12px
 }
 .main-property{
   color: #F39021;
+  font-size: 12px
 }
 
 .el-card /deep/ .el-card__header {