NEZ-3031 feat：批量删除样式调整

nezha-fronted/src/assets/css/components/common/configSync.scss

@@ -1,4 +1,8 @@
 .configSync-dialog{
+  .el-dialog__title{
+    font-size: 14px;
+    font-weight: 600;
+  }
   .dialog-header {
     margin-bottom: 10px;
     word-wrap: break-word;
@@ -69,20 +73,17 @@
       }
     }
   }
+  .el-dialog__footer{
+    padding-top: 20px;
+  }
   .sync-select-list{
     padding-top: 5px;
-    padding-bottom: 15px;
     .sync-select-item{
       margin-top: 6px;
-      .el-checkbox__input.is-checked+.el-checkbox__label{
+      .el-checkbox__label{
         color: $--checkbox-font-color !important;
+        padding-left: 6px;
       }
     }
   }
-  .el-dialog__footer{
-    .footer__btn{
-      margin-right: 0;
-      margin-left: 10px;
-    }
-  }
 }

nezha-fronted/src/assets/css/components/common/deleteButton.scss

@@ -1,12 +1,9 @@
-.batch-delete-footer{
-  box-shadow: none !important;
-  height: auto !important;
-  display: flex;
-  justify-content: space-between !important;
-  flex-direction: row-reverse;
-}
 .batch-delete-dialog{
   transition: all 0.3s;
+  .el-dialog__title{
+    font-size: 14px;
+    font-weight: 600;
+  }
   .dialog-header {
     margin-bottom: 10px;
     word-wrap: break-word;
@@ -27,17 +24,20 @@
   .el-dialog__body {
     padding: 0 20px;
   }
+  .batch-delete-tree{
+    border: 1px solid $--border-color-light;
     .tree-header{
       background: $--background-color-base;
       padding: 7px 10px 7px 0px;
       font-weight: 600;
+      margin-bottom: 0 !important;
       .batch-delete-item-id, .batch-delete-item-name{
         font-weight: 600;
       }
     }
     .tree-body{
-    //min-height: 160px;
+      box-sizing: content-box;
-    //max-height: 220px;
+      padding-top: 10px;
       height: 160px;
       overflow-y: auto;
     }
@@ -97,10 +97,24 @@
       transform: rotate(90deg);
       transition: all 0.3s;
     }
-  .check-title{
-    color: $--color-text-regular;
-    vertical-align: middle;
   }
+  .el-dialog__footer{
+    padding-top: 20px;
+  }
+  .forceDelete-check{
+    padding-top: 10px;
+    .el-checkbox__label{
+      color: $--checkbox-font-color !important;
+      padding-left: 6px;
+    }
+  }
+}
+.batch-delete-footer{
+  box-shadow: none !important;
+  height: auto !important;
+  display: flex;
+  justify-content: space-between !important;
+  flex-direction: row-reverse;
 }
 .delete-button{
   margin-right: 10px;

nezha-fronted/src/assets/css/components/common/rightBox/asset/assetBox.scss

@@ -36,7 +36,6 @@
   );
 }
 .nz-btn-size-normal.nz-btn-style-light {
-  font-size: 12px;
   color: #3C92F1;
   i {
     font-size: 12px;

nezha-fronted/src/assets/stylus/main.scss

@@ -1277,8 +1277,9 @@ li {
   .import-select-list{
     .import-select-item{
       margin-top: 6px;
-      .el-checkbox__input.is-checked+.el-checkbox__label{
+      .el-checkbox__label{
         color: $--checkbox-font-color !important;
+        padding-left: 6px;
       }
     }
   }

nezha-fronted/src/components/common/configSync.vue

@@ -43,8 +43,8 @@
         </li>
       </ul>
       <div slot="footer">
-        <button @click="dialogVisible = false" class="footer__btn footer__btn--light">{{$t("overall.cancel")}}</button>
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10" @click="dialogVisible = false">{{$t("overall.cancel")}}</button>
-        <button @click="configSync" class="footer__btn" :class="{'nz-btn-disabled': prevent_opt.save||!idArr.length}" :disabled="prevent_opt.save||!idArr.length">{{$t('overall.synchronize')}}</button>
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" :class="{'nz-btn-disabled': prevent_opt.save||!idArr.length}" :disabled="prevent_opt.save||!idArr.length" @click="configSync">{{$t('overall.synchronize')}}</button>
       </div>
     </el-dialog>
   </div>

nezha-fronted/src/components/common/deleteButton.vue

@@ -13,11 +13,11 @@
       ref="batchDeleteDialog"
       id="batch-delete-dialog"
       class="batch-delete-dialog"
-      :title="$t('deleteButton.confirm')"
+      :title="$t('overall.hint')"
       v-if="dialogVisible"
       :visible.sync="dialogVisible"
       @close='handleClose'
-      width="660px"
+      width="580px"
       :modal-append-to-body="true"
       :append-to-body="true"
     >
@@ -36,7 +36,7 @@
         <i class="nz-icon nz-icon-import-success1"></i>
         <span>{{$t('batch.finish', {title: $t(deleteTitle)})}}</span>
       </div>
-      <div class="batch-delete-tree">
+      <div class="batch-delete-tree" :style="{marginBottom:finish?'40px':0}">
         <div class="tree-header tree-body-item">
           <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange" v-if="!finish"></el-checkbox>
           <div class="batch-delete-item-id" v-if="idShow">ID</div>
@@ -71,17 +71,14 @@
           </div>
         </el-checkbox-group>
       </div>
+      <div v-if="!finish&&forceDeleteShow" class="forceDelete-check">
+        <el-checkbox v-model="forceDelete" text-color="black" name="type" :true-label="1" :false-label="0">{{$t('batch.forceDelete')}}</el-checkbox>
+      </div>
       <!-- 底部按钮 -->
-      <span slot="footer" class="dialog-footer right-box__footer batch-delete-footer" v-if="!finish">
+      <div slot="footer" class="dialog-footer" v-if="!finish">
-        <div>
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10" @click="dialogVisible = false">{{$t('tip.no')}}</button>
-          <button id="batch-delete-cancel" class="footer__btn footer__btn--light" style="margin-top: 8px;"  type="button" @click="dialogVisible = false">{{$t('tip.no')}}</button>
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-error" :class="{'nz-btn-disabled': prevent_opt.save||!idStr.length}" :disabled="prevent_opt.save||!idStr.length" @click="batchDeleteYes">{{$t('overall.delete')}}</button>
-          <button id="batch-delete-next" class="footer__btn"  type="button" @click="batchDeleteYes">{{$t('tip.yes')}}</button>
       </div>
-        <div v-if="forceDeleteShow">
-          <el-checkbox v-model="forceDelete" text-color="black" name="type" :true-label="1" :false-label="0"></el-checkbox>
-          <span class="check-title">{{$t('batch.forceDelete')}}</span>
-        </div>
-      </span>
     </el-dialog>
   </div>
 </template>

nezha-fronted/src/components/page/config/mibBrowser.vue

@@ -187,7 +187,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <button @click="snmpSetFormVisible = false" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-20">{{$t("overall.cancel")}}</button>
+        <button @click="snmpSetFormVisible = false" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10">{{$t("overall.cancel")}}</button>
         <button @click="search(true)" class="nz-btn nz-btn-size-normal nz-btn-style-normal" :class="{'nz-btn-disabled': loading}" :disabled="loading">{{$t('el.datepicker.confirm')}}</button>
       </div>
     </el-dialog>