边距调整

src/views/project/index.vue

 <template>
-    <div class="flex flex-row p-4">
-        <div class="target-left pl-8">
-            <base-box label="部门项目情况">
-                <project-grade></project-grade>
-            </base-box>
-            <base-box label="优秀项目展示">
-                <project-time></project-time>
-            </base-box>
-        </div>
-        <div class="flex-1">
-            <project-horn></project-horn>
-            <project-earth></project-earth>
-        </div>
+  <div class="flex flex-row p-4">
+    <div class="target-left pl-8">
+      <base-box label="部门项目情况">
+        <project-grade></project-grade>
+      </base-box>
+      <base-box label="优秀项目展示">
+        <project-time></project-time>
+      </base-box>
+    </div>
+    <div class="flex-1">
+      <project-horn></project-horn>
+      <project-earth></project-earth>
+    </div>
 
-        <div class="target-right pr-8">
-            <base-box class="flex-1" label="合同规模数量">
-                <project-pie></project-pie>
-            </base-box>
-            <base-box label="建设项目库数量">
-                <project-ring></project-ring>
-            </base-box>
-        </div>
+    <div class="target-right pr-8">
+      <base-box class="flex-1" label="合同规模数量">
+        <project-pie></project-pie>
+      </base-box>
+      <base-box label="建设项目库数量">
+        <project-ring></project-ring>
+      </base-box>
     </div>
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
@@ -34,27 +34,29 @@ import ProjectPie from "./comps/pie.vue";
 import ProjectRing from "./comps/ring.vue";
 
 export default defineComponent({
-    components: {
-        "base-box": BaseBox,
-        "project-earth": ProjectEarth,
-        "project-horn": ProjectHorn,
-        "project-grade": ProjectGrade,
-        "project-time": ProjectTime,
-        "project-pie": ProjectPie,
-        "project-ring": ProjectRing,
-    },
-    setup() {},
+  components: {
+    "base-box": BaseBox,
+    "project-earth": ProjectEarth,
+    "project-horn": ProjectHorn,
+    "project-grade": ProjectGrade,
+    "project-time": ProjectTime,
+    "project-pie": ProjectPie,
+    "project-ring": ProjectRing,
+  },
+  setup() {},
 });
 </script>
-<style>
+<style scoped>
 .target-left {
-    width: 420px;
+  margin-left: 50px;
+  width: 420px;
 }
 
 .target-right {
-    width: 360px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
+  width: 360px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-right: 30px;
 }
 </style>