update：更新编辑表单

src/components/app-form-group/app-form-group.scss

 .app-form-group {
-
-    >.ivu-card-head {
-        >p {
-            >i {
-                margin-right: 8px;
-                cursor: pointer;
-            }
-        }
+    .app-form-group-caption {
+        padding-left: 20px;
     }
-
-    >.ivu-card-extra {
-
-        .item-extract-mode {
-            display: flex;
-
-            .item {
-                margin-left: 12px;
-            }
-        }
+    .collapse-icon {
+        font-size: 20px;
+        margin-right: 20px;
     }
-}
-
-.app-form-group.app-group-collapse-contant {
-
-    .ivu-card-body {
-        display: none;
+    >.ivu-card-body {
+        padding: 20px 5px 10px 5px;
+    }
+    &.app-group-collapse-content {
+        >.ivu-card-head {
+            color: var(--app-color-gray-200);
+            height: 48px;
+            border-bottom: none;
+        }
+        >.ivu-card-body {
+            display: none;
+        }
     }
-}
-
-.app-group-flex {
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
 
-    >.ivu-card-body {
-        height: calc(100% - 51px);
+    &.app-group-flex {
+        height: 100%;
         overflow-y: auto;
         overflow-x: hidden;
+
+        >.ivu-card-body {
+            height: calc(100% - 51px);
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
     }
 }
\ No newline at end of file

src/components/app-form-group/app-form-group.vue

@@ -12,12 +12,12 @@
                 </app-form-group2>
         </template>
         <template v-else>
-            <card v-if="isShowCaption === true" :bordered="false" :dis-hover="true" :class="classes">
-                <p class='' slot='title'>
-                     <icon v-if="titleBarCloseMode !== 0" :type="collapseContant ? 'ios-arrow-dropright-circle' : 'ios-arrow-dropdown-circle'"
+            <card v-if="isShowCaption === true" :dis-hover="true" :class="classes">
+                <span class='app-form-group-caption' slot='title'>
+                    <icon v-if="titleBarCloseMode !== 0" :type="collapseContent ? 'md-add' : 'md-remove'" class="collapse-icon"
                     @click="clickCollapse"></icon>
                     <span :class="titleClass">{{caption}}</span>
-                </p>
+                </span>
                 <template v-if="uiActionGroup">
                     <a slot='extra'>
                         <template v-if="uiActionGroup.extractMode && Object.is(uiActionGroup.extractMode, 'ITEMS')">
@@ -61,7 +61,7 @@
                                         <span v-show="detail.visabled" :style="{'pointer-events':detail.disabled?'none':'auto','color':detail.disabled?'#7b7979':'#2d8cf0'}" class='item' @click="doUIAction($event, detail)">
                                             <template v-if="detail.isShowIcon">
                                                 <template v-if="detail.icon && !Object.is(detail.icon, '')">
-                                                    <i :class="detail.icon" ></i>
+                                                    <i :class="detail.icon"></i>
                                                 </template>
                                                 <template v-if="!(detail.icon && !Object.is(detail.icon, ''))">
                                                     <div v-if="detail.img && !Object.is(detail.img, '')">
@@ -283,7 +283,7 @@ export default class AppFormGroup extends Vue {
      * @type {boolean}
      * @memberof AppFormGroup
      */
-    public collapseContant: boolean = false;
+    public collapseContent: boolean = false;
 
     /**
      * 计算样式
@@ -295,7 +295,7 @@ export default class AppFormGroup extends Vue {
     get classes(): string[] {
         return [
             'app-form-group',
-            this.isShowCaption && this.collapseContant ? 'app-group-collapse-contant' : '',
+            this.isShowCaption && this.collapseContent ? 'app-group-collapse-content' : '',
             this.isInfoGroupMode ? 'app-info-group-mode' : '',
             Object.is(this.layoutType, 'FLEX') ? 'app-group-flex': ''
         ];
@@ -318,7 +318,7 @@ export default class AppFormGroup extends Vue {
      * @memberof AppFormGroup
      */
     public created() {
-        this.collapseContant = this.titleBarCloseMode === 2 ? true : false;
+        this.collapseContent = this.titleBarCloseMode === 2 ? true : false;
     }
 
     /**
@@ -327,7 +327,7 @@ export default class AppFormGroup extends Vue {
      * @memberof AppFormGroup
      */
     public clickCollapse(): void {
-        this.collapseContant = !this.collapseContant;
+        this.collapseContent = !this.collapseContent;
     }
 
     /**

src/components/app-form-item/app-form-item.scss

 .app-form-item {
-  height: 100%;
-  padding: 0 6px;
-  .editor {
-      height: 100%;
-      .ivu-form-item-content {
-          height: 100%;
-          min-height: 36px;
-      }
-  }
-  .app-form-item-label {
-      line-height: 21px;
-      padding: 6px 10px 6px 0px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-  }
+    height: 100%;
+    padding: 0 15px;
+
+    .app-form-item-label {
+        line-height: 21px;
+        padding: 6px 10px 6px 0px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding-left: 7px;
+        &.app-form-item-label--required {
+            padding-left: 0;
+        }
+    }
+
+    .required {
+        color: var(--app-color-red);
+    }
 }
 
-.app-form-item.label-top, .app-form-item.label-bottom {
-  .app-form-item-label {
-      display: block;
-  }
+.app-form-item.label-top,
+.app-form-item.label-bottom {
+    .app-form-item-label {
+        display: block;
+    }
 }
 
-.app-form-item.label-left, .app-form-item.label-right {
-  .app-form-item-label, .editor {
-      height: 100%;
-  }
+.app-form-item.label-left,
+.app-form-item.label-right {
+
+    .app-form-item-label,
+    .editor {
+        height: 100%;
+    }
 }
 
 .app-form-item.label-left {
-  .app-form-item-label {
-      float: left;
-      text-align: right;
-  }
+    .app-form-item-label {
+        float: left;
+    }
 }
 
 .app-form-item.label-right {
-  .app-form-item-label {
-      float: right;
-      padding: 6px 0px 6px 10px;
-  }
+    .app-form-item-label {
+        float: right;
+        padding: 6px 0px 6px 10px;
+    }
 }
 
 .app-form-item.label-none {
-  >.app-form-item-label {
-      display: none !important;
-  }
+    >.app-form-item-label {
+        display: none !important;
+    }
 }
\ No newline at end of file

src/components/app-form-item/app-form-item.vue

@@ -30,18 +30,18 @@
                 :style="labelstyle"
                 :class="labelclasses"
             >
-                <span v-if="required" style="color:red;">* </span>
-                    <span v-if="!isEmptyCaption">
-                        <el-tooltip v-if="isShowTip" placement="top" effect="light">
-                            <span v-html="caption"></span>
-                            <template >
-                                <span slot="content" v-html="caption" ></span>
-                            </template>
-                        </el-tooltip>
-                        <template v-if="!isShowTip">
-                            <span v-html="caption" ></span>
+                <span v-show="required" class="required">*</span>
+                <span v-if="!isEmptyCaption">
+                    <el-tooltip v-if="isShowTip" placement="top" effect="light">
+                        <span v-html="caption"></span>
+                        <template >
+                            <span slot="content" v-html="caption" ></span>
                         </template>
-                    </span>
+                    </el-tooltip>
+                    <template v-if="!isShowTip">
+                        <span v-html="caption" ></span>
+                    </template>
+                </span>
             </span>
             <div
                 v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')"
@@ -221,9 +221,7 @@ export default class AppFormItem extends Vue {
    * @memberof AppFormItem
    */
   get labelclasses(): string {
-    return this.labelStyle
-      ? this.labelStyle + " app-form-item-label"
-      : "app-form-item-label";
+      return `app-form-item-label ${this.required ? 'app-form-item-label--required' : ''} ${this.labelStyle || ''}`
   }
 
   /**

src/layout/edit-view-layout/edit-view-layout.scss

 .edit-view-layout {
-    
+    height: 100%;
+    padding: 0;
+    box-shadow: none;
+    background-color: transparent;
+    .view-header {
+        display: flex;
+        flex-direction: column;
+        .view-header__content {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
 }
\ No newline at end of file

src/styles/iview/card.scss

+.ivu-card {
+    .ivu-card-head {
+        font-size: 16px;
+        padding: 0;
+        height: 54px;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        color: var(--app-color-black);
+        border-bottom: 1px solid var(--app-color-gray-235);
+    }
+    &.ivu-card-bordered {
+        border-color: var(--app-color-gray-235);
+        border-radius: 0;
+    }
+}
\ No newline at end of file

src/styles/iview/form-item.scss

+.ivu-form-item {
+    margin-bottom: 10px;
+}
\ No newline at end of file

src/styles/iview/index.scss

@@ -3,4 +3,6 @@
 @import './checkbox-group.scss';
 @import './select.scss';
 @import './input.scss';
-@import './dropdown.scss';
\ No newline at end of file
+@import './dropdown.scss';
+@import './form-item.scss';
+@import './card.scss';
\ No newline at end of file

src/styles/var.scss

@@ -5,6 +5,8 @@
     --app-color-gray-100: #747480;
     // 安永灰2
     --app-color-gray-200: #C4C4CD;
+    // 安永灰2 35%
+    --app-color-gray-235: #E7E7E7;
     // 安永灰2 50%
     --app-color-gray-250: #E1E1E6;
     // 安永灰4