弹框样式修改

src/assets/styles/yxk-admin.scss

@@ -214,7 +214,7 @@
     // margin-left: 0 !important;
   }
   .el-button--mini{
-    padding: 7px 12px;
+    padding: 7px 10px;
   }
   .el-button.is-disabled, 
   .el-button.is-disabled:hover, 
@@ -232,9 +232,6 @@
   min-height: auto;
 }
 
-// 无左右分区时
-.container-wrap{}
-
 .right-top-line,
 .left-bottom-line{
   display: block;
@@ -416,3 +413,169 @@
     color: #fff;
   }
 }
+
+//
+.el-dialog{
+  position: relative;
+  width: 620px;
+  padding: 2px;
+  background: linear-gradient(135deg, transparent 10px, #339CFF 0) top left, 
+              linear-gradient(-135deg, transparent 10px, #339CFF 0) top right, 
+              linear-gradient(-45deg, transparent 10px, #339CFF 0) bottom right, 
+              linear-gradient(45deg, transparent 10px, #339CFF 0) bottom left;
+  background-size: 50% 50%;
+  background-repeat: no-repeat;
+  box-shadow: none;
+  &::before,
+  &::after,
+  .dialog-right-top,
+  .dialog-left-bottom{
+    position: absolute;
+    content: "";
+    width: 134px;
+    height: 63px;
+    z-index: -1;
+  }
+  &::before{
+    left: -10px;
+    top: -28px;
+    background: url(~@/assets/images/left_top.png) no-repeat;
+  }
+  &::after{
+    right: -20px;
+    bottom: -10px;
+    background: url(~@/assets/images/right_bottom.png) no-repeat;
+  }
+  .dialog-right-top{
+    right: -20px;
+    top: -28px;
+    background: url(~@/assets/images/right_top.png) no-repeat;
+  }
+  .dialog-left-bottom{
+    left: -10px;
+    bottom: -10px;
+    background: url(~@/assets/images/left_bottom.png) no-repeat;
+  }
+  .el-dialog__header{
+    position: relative;
+    margin: -60px auto 0 auto;
+    width: 360px;
+    padding: 0;
+    &::before{
+      position: absolute;
+      left: -23px;
+      top: 0;
+      content: "";
+      width: 23px;
+      height: 42px;
+      background: url(~@/assets/images/dialog_left.png) no-repeat;
+      background-size: cover;
+    }
+    &::after{
+      position: absolute;
+      right: -23px;
+      top: 0;
+      content: "";
+      width: 23px;
+      height: 42px;
+      background: url(~@/assets/images/dialog_right.png) no-repeat;
+      background-size: cover;
+    }
+    .el-dialog__title{
+      display: block;
+      font-size: 18px;
+      font-weight: bold;
+      line-height: 38px;
+      color: #fff;
+      text-align: center;
+      background-color: #031435;
+      border-top: 2px solid #339CFF;
+      border-bottom: 2px solid #339CFF;
+    }
+    .el-dialog__headerbtn{
+      top: 4px;
+      right: -160px;
+    }
+    .el-dialog__close{
+      font-family: "iconfont" !important;
+      font-style: normal;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      
+      font-size: 24px;
+      color: #339CFF;
+      &::before{
+        content: "\e60c";
+      }
+    }
+  }
+  .el-dialog__body{
+    width: 100%;
+    // min-height: 400px;
+    background: linear-gradient(135deg, transparent 12px, #031435 0) top left, 
+              linear-gradient(-135deg, transparent 12px, #031435 0) top right, 
+              linear-gradient(-45deg, transparent 12px, #031435 0) bottom right, 
+              linear-gradient(45deg, transparent 12px, #031435 0) bottom left;
+    background-size: 50% 50%;
+    background-repeat: no-repeat;
+    box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6);
+  }
+
+  .el-form{
+    .el-form-item__label{
+      line-height: 36px;
+      color: $subMenuActiveText;
+    }
+    .el-input__inner{
+      height: 36px;
+      line-height: 36px;
+      color: #fff;
+      border: 1px solid $subMenuActiveText;
+      background-color: transparent;
+    }
+    .vue-treeselect__control, 
+    .vue-treeselect__placeholder,
+    .vue-treeselect__single-value{
+      height: 36px;
+      line-height: 36px;
+      color: #fff;      
+    }
+    .vue-treeselect__control{
+      border: 1px solid $subMenuActiveText;
+      background-color: transparent;
+    }
+    .el-radio{
+      color: #fff;
+    }
+    .el-textarea__inner{
+      color: #fff;
+      border: 1px solid $subMenuActiveText;
+      background-color: transparent;
+    }
+    .el-input-number.is-controls-right[class*=small] [class*=increase], 
+    .el-input-number.is-controls-right[class*=small] [class*=decrease]{
+      background-color: transparent;
+    }
+    .el-input-number__decrease,
+    .el-input-number__increase{
+      border-left-color: $subMenuActiveText;
+      &>i{
+        color: #fff;
+      }
+    }
+    .el-input-number__increase{
+      border-bottom-color: $subMenuActiveText;
+    }
+    .el-select .el-input .el-select__caret{
+      color: #fff;
+    }
+  }
+  .dialog-footer{
+    margin: 30px auto 0 auto;
+    text-align: center;
+    .el-button{
+      font-size: 16px;
+      padding: 8px 28px;
+    }
+  }
+}

src/views/archivesConfig/commonFields/index.vue

@@ -29,16 +29,20 @@
     <!--表单渲染-->
     <eForm />
     <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" width="35%" :before-close="handleClose">
-      <p><span>这里为技术人员维护系统时使用，用户无需设置</span></p>
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p><span style="color:#fff;">这里为技术人员维护系统时使用，用户无需设置</span></p>
         <p><span style="color:red;">注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
         <el-form :model="form">
           <el-form-item label="技术维护验证码" :label-width="formLabelWidth">
             <el-input v-model="form.verifyCode" />
           </el-form-item>
         </el-form>
-      <span slot="footer" class="dialog-footer">
+        <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click.native="handleConfirm">确定验证</el-button>
-      </span>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>

src/views/archivesConfig/commonFields/module/form.vue

@@ -1,5 +1,8 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
+  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="中文名称" prop="field_cn_name">
           <el-input v-model="form.field_cn_name" style="width: 370px;" />
@@ -27,6 +30,7 @@
           确认
         </el-button>
       </div>
+    </div>
   </el-dialog>
 </template>
 

src/views/archivesConfig/dict/dictDetail.vue

@@ -10,7 +10,10 @@
         </crudOperation>
       </div>
       <!--表单组件-->
-      <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
+      <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+        <span class="dialog-right-top" />
+        <span class="dialog-left-bottom" />
+        <div class="setting-dialog">
           <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
             <el-form-item label="字典名称" prop="dic_name">
               <el-input v-model="form.dic_name" style="width: 370px;" />
@@ -19,13 +22,14 @@
               <el-input v-model="form.dic_code" style="width: 370px;" />
             </el-form-item>
             <el-form-item label="内容说明" prop="dic_explain">
-            <el-input v-model="form.dic_explain" style="width: 370px;" type="textarea" :rows="2" />
+              <el-input v-model="form.dic_explain" style="width: 370px;" type="textarea" :rows="4" />
             </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
             <el-button type="text" @click="crud.cancelCU">取消</el-button>
             <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
           </div>
+        </div>
       </el-dialog>
       <!--表格渲染-->
       <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">

src/views/archivesConfig/dict/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="app-container">
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
         <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
           <el-form-item label="字典名称" prop="dic_name">
             <el-input v-model="form.dic_name" style="width: 370px;" />
@@ -10,17 +13,18 @@
             <el-input v-model="form.dic_code" style="width: 370px;" />
           </el-form-item>
           <el-form-item label="内容说明">
-          <el-input v-model="form.dic_explain" style="width: 370px;" type="textarea" :rows="2" />
+            <el-input v-model="form.dic_explain" style="width: 370px;" type="textarea" :rows="4" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button type="text" @click="crud.cancelCU">取消</el-button>
           <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
         </div>
+      </div>
     </el-dialog>
     <!-- 字典列表 -->
     <el-row class="container-main" :gutter="10">
-      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="5">
+      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
         <el-card class="box-card">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
@@ -131,11 +135,11 @@ export default {
 <style lang="scss" scoped>
 .el-card{
   min-height: calc(100vh - 210px);
+  .crud-opts{
+    padding: 20px 0;
+  }
 }
 
-.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-  /* background-color: rgb(158, 213, 250) !important; */
-}
 .el-card__body .crud-opts {
   justify-content: space-around;
 }

src/views/system/dept/index.vue

@@ -16,7 +16,10 @@
       <crudOperation :permission="permission" />
     </div>
     <!--表单组件-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
         <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
           <el-form-item label="部门名称" prop="name">
             <el-input v-model="form.name" style="width: 370px;" />
@@ -53,6 +56,7 @@
           <el-button type="text" @click="crud.cancelCU">取消</el-button>
           <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
         </div>
+      </div>
     </el-dialog>
     <!--表格渲染-->
     <el-table

src/views/system/job/module/form.vue

@@ -5,8 +5,10 @@
     :before-close="crud.cancelCU"
     :visible="crud.status.cu > 0"
     :title="crud.status.title"
-    width="500px"
   >
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
       <el-form
         ref="form"
         :model="form"
@@ -68,6 +70,7 @@
           确认
         </el-button>
       </div>
+    </div>
   </el-dialog>
 </template>
 

src/views/system/menu/index.vue

@@ -13,7 +13,10 @@
       <crudOperation :permission="permission" />
     </div>
     <!--表单渲染-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
         <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
           <el-form-item label="菜单类型" prop="type">
             <el-radio-group v-model="form.type" size="mini" style="width: 178px">
@@ -89,6 +92,7 @@
           <el-button type="text" @click="crud.cancelCU">取消</el-button>
           <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
         </div>
+      </div>
     </el-dialog>
     <!--表格渲染-->
     <el-table

src/views/system/role/index.vue

@@ -11,7 +11,10 @@
       <crudOperation :permission="permission" />
     </div>
     <!-- 表单渲染 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="520px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
         <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
           <el-form-item label="角色名称" prop="name">
             <el-input v-model="form.name" style="width: 380px;" />
@@ -47,6 +50,7 @@
           <el-button type="text" @click="crud.cancelCU">取消</el-button>
           <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
         </div>
+      </div>
     </el-dialog>
     <el-row :gutter="15">
       <!--角色管理-->

src/views/system/user/index.vue

@@ -64,7 +64,10 @@
           <crudOperation show="" :permission="permission" />
         </div>
         <!--表单渲染-->
-        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="570px">
+        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+          <span class="dialog-right-top" />
+          <span class="dialog-left-bottom" />
+          <div class="setting-dialog">
             <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
               <el-form-item label="用户名" prop="username">
                 <el-input v-model="form.username" @keydown.native="keydown($event)" />
@@ -83,14 +86,14 @@
                   v-model="form.dept.id"
                   :options="depts"
                   :load-options="loadDepts"
-                style="width: 178px"
+                  style="width: 184px"
                   placeholder="选择部门"
                 />
               </el-form-item>
               <el-form-item label="岗位" prop="jobs">
                 <el-select
                   v-model="jobDatas"
-                style="width: 178px"
+                  style="width: 184px"
                   multiple
                   placeholder="请选择"
                   @remove-tag="deleteTag"
@@ -105,7 +108,7 @@
                 </el-select>
               </el-form-item>
               <el-form-item label="性别">
-              <el-radio-group v-model="form.gender" style="width: 178px">
+                <el-radio-group v-model="form.gender" style="width: 184px">
                   <el-radio label="男">男</el-radio>
                   <el-radio label="女">女</el-radio>
                 </el-radio-group>
@@ -142,6 +145,7 @@
               <el-button type="text" @click="crud.cancelCU">取消</el-button>
               <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
             </div>
+          </div>
         </el-dialog>
         <!--表格渲染-->
         <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">