Signed-off-by: a123456 <1209165801@qq.com>

src/main/webapp/WEB-INF/manager/include/head-file.ftl

@@ -7,6 +7,9 @@
     <link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_974973_42u7cwycwta.css">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_1035189_ddqz6fpwzxb.css">
+    <!--自定义模型-->
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_997125_lflqkedj6s9.css">
+
     <!-- 引入样式 -->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
     <!-- 引入组件库 -->

src/main/webapp/static/mdiy/css/model-form.css

@@ -149,6 +149,9 @@ textarea::-webkit-input-placeholder {
 .ms-mdiy-model-form .ms-header-title {
   margin-bottom: 15px;
 }
+.ms-mdiy-model-form .el-checkbox-group {
+  font-size: inherit !important;
+}
 .ms-mdiy-model-form .ms-editor-type-layout {
   background: #fff;
   min-width: 15%;
@@ -172,13 +175,40 @@ textarea::-webkit-input-placeholder {
   cursor: pointer;
 }
 .ms-mdiy-model-form .ms-editor-type-layout ul li i {
+  font-weight: initial;
+  font-size: 1em;
   color: #999;
-  margin-right: 5px;
+  margin: 0 5px;
 }
 .ms-mdiy-model-form .ms-editor-body-layout {
   background: #fff;
   margin: 8px;
 }
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item {
+  padding: 5px 40px;
+  border: 1px solid transparent;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .unit-input {
+  width: calc(100% - 41px) !important;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-form-item__content {
+  display: flex;
+  align-items: flex-start;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-form-item__content .del-but {
+  visibility: hidden;
+  padding-left: 15px;
+  margin-left: auto;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-radio {
+  line-height: inherit;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .active {
+  border-color: #0099ff;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .active .del-but {
+  visibility: visible !important;
+}
 .ms-mdiy-model-form .ms-editor-attr-layout {
   background: #fff;
   min-width: 20%;
@@ -192,7 +222,6 @@ textarea::-webkit-input-placeholder {
   flex-direction: column;
 }
 .ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form {
-  padding: 15px;
   height: calc(100vh - 200px);
   overflow: auto;
 }
@@ -238,6 +267,15 @@ textarea::-webkit-input-placeholder {
 .ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus i {
   margin-right: 6px;
 }
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .sortable-ghost {
+  opacity: 0.3;
+  background: #ccc;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .sortable-ghost * {
+  background: #ccc !important;
+  border-color: transparent !important;
+  color: transparent !important;
+}
 .ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .footer {
   margin-top: auto;
   border-top: 1px solid #e6e6e6;

src/main/webapp/static/mdiy/less/model-form.less

@@ -13,6 +13,9 @@
     .ms-header-title {
         margin-bottom: 15px;
     }
+    .el-checkbox-group {
+        font-size: inherit !important;
+    }
     //左侧自定义表单项
     .ms-editor-type-layout {
         background: #fff;
@@ -31,8 +34,8 @@
                 border: 1px solid @borderColor;
                 cursor: pointer;
                 i {
-                    color: #999;
-                    margin-right: 5px;
+                    .ms-font(1em, #999);
+                    margin: 0 5px;
                 }
             }
         }
@@ -41,6 +44,32 @@
     .ms-editor-body-layout {
         background: #fff;
         margin: 8px;
+        .ms-form-item {
+            padding: 5px 40px;
+            border: 1px solid transparent;
+            //单位输入框
+            .unit-input {
+                width: ~'calc(100% - 41px)' !important;
+            }
+            .el-form-item__content {
+                display: flex;
+                align-items: flex-start;
+                .del-but {
+                    visibility: hidden;
+                    padding-left: 15px;
+                    margin-left: auto;
+                }
+            }
+            .el-radio {
+                line-height: inherit;
+            }
+        }
+        .active {
+            border-color: @themeColor;
+            .del-but {
+                visibility: visible !important;
+            }
+        }
     }
     //右侧选项属性
     .ms-editor-attr-layout {
@@ -54,7 +83,6 @@
             display: flex;
             flex-direction: column;
             .form {
-                padding: 15px;
                 height: ~'calc(100vh - 200px)';
                 overflow: auto;
                 .el-form-item__label {
@@ -89,6 +117,15 @@
                         }
                     }
                 }
+                .sortable-ghost {
+                    opacity: .3;
+                    background: #ccc;
+                    * {
+                        background: #ccc !important;
+                        border-color: transparent !important;
+                        color: transparent !important;
+                    }
+                }
             }
             .footer {
                 margin-top: auto;