From b9b292289e8ddc907ece37989d9577c32d4c9564 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Wed, 17 Apr 2024 10:35:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9F=BA=E6=9C=AC=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E8=92=99=E7=89=88=E8=B7=9D=E7=A6=BB=E4=BB=BB=E5=8A=A1=E5=8C=85?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B016=EF=BC=8C=E4=BB=BB=E5=8A=A1=E5=8C=85?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E8=B7=9D=E7=A6=BB=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?8=EF=BC=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../content/modal/PackageSettingsModal.vue    | 70 ++++++++++++++-----
 1 file changed, 52 insertions(+), 18 deletions(-)

diff --git a/src/views/home/content/modal/PackageSettingsModal.vue b/src/views/home/content/modal/PackageSettingsModal.vue
index 0127675..e592eb5 100644
--- a/src/views/home/content/modal/PackageSettingsModal.vue
+++ b/src/views/home/content/modal/PackageSettingsModal.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { FormInst, FormRules } from 'naive-ui';
-import { useMessage } from 'naive-ui';
-import { ref } from 'vue';
+import type { FormInst, FormRules } from 'naive-ui'
+import { useMessage } from 'naive-ui'
+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-item class="wrapper-task-package-name" path="packagename" label="任务包名称">
-            <n-input v-model:value="model.packagename" maxlength="12" @keydown.enter.prevent />
+        <n-form ref="formRef" :model="model" style="margin-top: 8px" :rules="rules">
+          <n-form-item
+            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 ;
-    button{
+    padding-bottom: 6px;
+    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>