feat: 基本信息蒙版距离任务包名称16，任务包名称距离输入框8，

src/views/home/content/modal/PackageSettingsModal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { FormInst, FormRules } from 'naive-ui';
+import type { FormInst, FormRules } from 'naive-ui'
-import { useMessage } from 'naive-ui';
+import { useMessage } from 'naive-ui'
-import { ref } from 'vue';
+import { ref } from 'vue'
 
 const emit = defineEmits<{
   (e: 'commit', value: any)
@@ -72,18 +72,38 @@ function afterLeave() {
 
 <template>
   <n-modal v-model:show="show" transform-origin="center" @after-leave="afterLeave">
-    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      :style="cardStyle"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <div class="wrapper">
         <span class="wrapper-title">生成任务包设置</span>
         <div class="wrapper-bar">
           <div class="wrapper-info">
-            <span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span>
+            <span
+              :style="{
+                'margin-left': '18px',
+                'font-size': '16px',
+                'font-weight': '600',
+              }"
+            >基本信息</span>
           </div>
         </div>
         <!-- require-mark-placement="left" -->
-        <n-form ref="formRef" :model="model"  style="margin-top: 8px;" :rules="rules">
+        <n-form ref="formRef" :model="model" style="margin-top: 8px" :rules="rules">
-          <n-form-item class="wrapper-task-package-name" path="packagename" label="任务包名称">
+          <n-form-item
-            <n-input v-model:value="model.packagename" maxlength="12" @keydown.enter.prevent />
+            class="wrapper-task-package-name"
+            path="packagename"
+            label="任务包名称"
+          >
+            <n-input
+              v-model:value="model.packagename"
+              maxlength="12"
+              @keydown.enter.prevent
+            />
           </n-form-item>
           <!-- <n-form-item path="mark" :style="formItemStyle">
             <n-checkbox v-model:checked="model.mark" >
@@ -94,10 +114,23 @@ function afterLeave() {
       </div>
       <template #footer>
         <div class="wrapper-footer">
-          <n-button style="background-color: #507AFD !important;" type="info" @click="handleSumbit">
+          <n-button
+            style="background-color: #507afd !important"
+            type="info"
+            @click="handleSumbit"
+          >
             生成任务包
           </n-button>
-          <n-button secondary style="margin-left:15px;color: #333;background-color: #fff;border: 1px solid #CAD2DD;" @click="closeModal">
+          <n-button
+            secondary
+            style="
+              margin-left: 15px;
+              color: #333;
+              background-color: #fff;
+              border: 1px solid #cad2dd;
+            "
+            @click="closeModal"
+          >
             取消
           </n-button>
         </div>
@@ -110,7 +143,7 @@ function afterLeave() {
 .wrapper {
   display: flex;
   flex-direction: column;
-  padding: 14px 14px 0 14px ;
+  padding: 14px 14px 0 14px;
   &-title {
     font-weight: 600;
     // font-weight: bold;
@@ -123,7 +156,8 @@ function afterLeave() {
     width: 100%;
     margin-top: 24px;
     font-size: 16px;
-    margin-bottom: 16px;
+    // 任务包名称有margin-top:8px;
+    margin-bottom: 8px;
     span {
       color: #333;
     }
@@ -139,7 +173,8 @@ function afterLeave() {
     ::v-deep(.n-form-item-label) {
       color: #666;
       font-weight: 500;
-      margin-bottom: 8px;
+      // label自带padding-bottom 2px  最后得出8-2
+      margin-bottom: 6px;
     }
   }
 
@@ -162,8 +197,8 @@ function afterLeave() {
   &-footer {
     display: flex;
     justify-content: flex-end;
-    padding-bottom:6px ;
+    padding-bottom: 6px;
-    button{
+    button {
       font-size: 14px !important;
       font-weight: 500 !important;
     }
@@ -174,7 +209,7 @@ function afterLeave() {
     position: relative;
 
     &:before {
-      background-color: #1980FF;
+      background-color: #1980ff;
       content: "";
       width: 5px;
       border-radius: 2px;
@@ -185,7 +220,6 @@ function afterLeave() {
   }
 }
 
-::v-deep(.n-button--info-type){
+::v-deep(.n-button--info-type) {
-
 }
 </style>