组件编写

src/assets/styles/rightContent.scss

 @import './main.scss';
 
+.Content{
+  padding-left:20px
+}
+
 .right-icon {
   position: absolute;
   right: 37px;

src/components/form.vue

 <template>
   <div id="formCommonPage">
     <div class="formContent" style="margin-top: 20px">
-      <div style="margin: 0px auto; border-radius: 8px; background: #fff">
+      <div style="margin: 0px auto; border-radius: 8px">
         <div class="groupTitleBox">
           <span class="groupTitle">{{ propFormField[0].title }}</span>
         </div>
@@ -11,6 +11,7 @@
           label-position="right"
           label-width="120px"
           :model="formLabelAlign"
+          style="margin-bottom: 40px"
         >
           <div
             class="paneGroupDiv"
@@ -1023,11 +1024,11 @@
           </div>
         </el-form>
         <slot name="xyrList"></slot>
-        <div class="button" id="spbtn">
-          <el-button type="info" @click="submit" class="finish">保存</el-button>
-        </div>
       </div>
     </div>
+    <div class="button" id="spbtn">
+      <el-button  @click="submit" class="finish">保存</el-button>
+    </div>
     <!-- <div class="prive_picture" v-if="filePreviewFlag" @click="closefilePreview">
       <el-image class="picture" :src="filePreview"> </el-image>
     </div>
@@ -1654,7 +1655,6 @@ $-header-fontSize: 18px;
 }
 #formCommonPage {
   width: 100% !important;
-  background: #f2f2f2;
   .sjjcShadow {
     width: 100%;
     height: 100vh;
@@ -1693,7 +1693,7 @@ $-header-fontSize: 18px;
   }
   // 表单内内容
   .formContent {
-    margin: 0 auto;
+    margin: 0 20px;
     // background: #ffffff;
     // box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
     border-radius: 4px;
@@ -1730,6 +1730,8 @@ $-header-fontSize: 18px;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
+      background: #ffffff;
+      border-radius: 8px 0 0 0;
       .groupTitle {
         height: 48px;
         font-size: 16px;
@@ -1747,7 +1749,6 @@ $-header-fontSize: 18px;
     //分块组级卡片
     .paneGroupDiv {
       background: #ffffff;
-      border-radius: 8px;
       // 表单元素的真实容器
       .zdyLine {
         padding: 0px 20px 20px 20px;
@@ -2056,18 +2057,6 @@ $-header-fontSize: 18px;
       box-shadow: 0px 4px 6px rgba(255, 152, 0, 0.12);
       opacity: 1;
     }
-    .button {
-      padding: 4px 0 36px 20px;
-      margin-left: 167px;
-      .finish {
-        margin-left: 8px;
-
-        background: #ffffff;
-        color: #666666;
-        border: 1px solid #d9d9d9;
-        border-radius: 4px;
-      }
-    }
     .day,
     .codeTag .tag {
       width: 100%;
@@ -2096,6 +2085,25 @@ $-header-fontSize: 18px;
     margin-left: -340px;
     z-index: 100;
   }
+  .button {
+    padding: 0 32px;
+    height: 48px;
+    background: #ffffff;
+    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.08);
+    opacity: 1;
+    z-index: -1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .finish {
+      width: 76px;
+      height: 32px;
+      background: #0061f7;
+      border-radius: 4px;
+      color: #ffffff;
+      line-height:9px
+    }
+  }
 }
 /*警员选择*/
 .jyDialog {

src/components/form_compontent.vue

@@ -8,9 +8,7 @@
       <div
         style="
           width: 97%;
-          margin: 0px auto;
           border-radius: 8px;
-          background: #fff;
         "
       >
         <el-form

src/layout/menuLayout.vue

@@ -55,7 +55,6 @@
             <el-breadcrumb-item>刑嫌对象信息管理</el-breadcrumb-item>
             <el-breadcrumb-item>新增关注人员</el-breadcrumb-item>
           </el-breadcrumb>
-          <router-view />
         </div>
         <div v-else>
           <el-tabs
@@ -70,9 +69,9 @@
               :key="item.id"
             >
             </el-tab-pane>
-            <router-view />
           </el-tabs>
         </div>
+         <router-view />
       </div>
     </div>
   </div>