style(styles): 💄 adjust home style (#7)

src/views/home/index.vue

@@ -14,26 +14,26 @@ const gap = computed(() => (appStore.isMobile ? 0 : 16));
 </script>
 
 <template>
-  <ElSpace direction="vertical" fill :size="16">
-    <HeaderBanner />
-    <CardData />
+  <ElSpace direction="vertical" fill class="pb-0" :size="0">
+    <HeaderBanner class="mb-16px" />
+    <CardData class="mb-16px" />
     <ElRow :gutter="gap">
-      <ElCol :lg="14" :sm="24">
+      <ElCol :lg="14" :sm="24" class="mb-16px">
         <ElCard shadow="never" class="card-wrapper">
           <LineChart />
         </ElCard>
       </ElCol>
-      <ElCol :lg="10" :sm="24">
+      <ElCol :lg="10" :sm="24" class="mb-16px">
         <ElCard shadow="never" class="card-wrapper">
           <PieChart />
         </ElCard>
       </ElCol>
     </ElRow>
     <ElRow :gutter="gap">
-      <ElCol :lg="14" :sm="24">
+      <ElCol :lg="14" :sm="24" class="mb-16px">
         <ProjectNews />
       </ElCol>
-      <ElCol :lg="10" :sm="24">
+      <ElCol :lg="10" :sm="24" class="mb-16px">
         <CreativityBanner />
       </ElCol>
     </ElRow>

src/views/home/modules/header-banner.vue

@@ -26,7 +26,7 @@ const statisticData = computed<StatisticData[]>(() => [
 
 <template>
   <ElCard shadow="never" class="card-wrapper">
-    <ElRow :gutter="gap">
+    <ElRow :gutter="gap" class="px-8px">
       <ElCol :md="18" :sm="24">
         <div class="flex-y-center">
           <div class="size-72px shrink-0 overflow-hidden rd-1/2">
@@ -41,7 +41,7 @@ const statisticData = computed<StatisticData[]>(() => [
         </div>
       </ElCol>
       <ElCol :md="6" :sm="24">
-        <ElSpace direction="horizontal" :size="24">
+        <ElSpace direction="horizontal" class="w-full justify-end" :size="24">
           <ElStatistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item" />
         </ElSpace>
       </ElCol>