style fixed

src/style/followup/followup-common.scss

+$borderBottomStyle: 1px solid #efefef;
+
+
+/*列表页布局*/
+.f-main-content {
+  background: #ffffff;
+  padding: 30px;
+  .page-title {
+    font-size: 20px;
+    padding-bottom: 20px;
+    border-bottom: $borderBottomStyle;
+  }
+  .search-div { //查询模块
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 30px 0 10px 0;
+    border-bottom: $borderBottomStyle;
+    .search-input {
+      max-width: $inputDiv; // 根据自己页面设置
+      .el-input {
+        width: $input; // 根据自己页面设置
+      }
+    }
+    .search-btn {
+      min-width: $searchDiv;  // 根据自己页面设置
+
+    }
+  }
+}

src/views/followup/plan-manage/resident-list.vue

@@ -6,8 +6,8 @@
       :curmbThird="curmbThird"
       :jumPathThird="jumPathThird">
     </bread-crumb>
-    <div class="resident-content screenSet">
-      <p class="title">随访计划名称</p>
+    <div class="resident-content f-main-content screenSet">
+      <p class="page-title">随访计划名称</p>
       <div class="search-div">
         <div class="search-input">
           <el-form :model="searchData" :inline="true" :label-width="labelWidth">
@@ -44,6 +44,13 @@
           <el-button class="button-white" plain>重置</el-button>
         </div>
       </div>
+      <div class="resident-table">
+        <el-radio-group v-model="tableType">
+          <el-radio-button>未完成(200)</el-radio-button>
+          <el-radio-button>进行中(200)</el-radio-button>
+          <el-radio-button>已结束(100)</el-radio-button>
+        </el-radio-group>
+      </div>
     </div>
   </div>
 </template>
@@ -57,52 +64,33 @@
     },
     data() {
       return {
+        /*面包屑配置*/
         curmbFirst: '随访管理',
         curmbSecond: '计划管理',
         curmbThird: '查看居民',
         jumPathThird: '/followUp/plan-manage',
-        labelWidth: '96px',
-        searchData: {},
-        groupOption: [{
+        /*面包屑配置*/
+        labelWidth: '96px',  //标题长度
+        searchData: {}, //查询数据
+        groupOption: [{ // 分组选项
           value: '全部',
           label: '全部'
-        }]
+        }],
+        tableType: ''
       }
     }
   }
 </script>
 
 <style lang="scss" scoped>
-  $borderStyle: 1px solid #efefef;
+  $inputDiv: 650px;
+  $input: 205px;
+  $searchDiv: 160px;
+  @import '../../../style/followup/followup-common';
+
   .resident-list {
     .resident-content {
-      background: #ffffff;
-      padding: 30px;
-      .title {
-        font-size: 20px;
-        padding-bottom: 10px;
-        border-bottom: $borderStyle;
-      }
-      .search-div {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        padding: 30px 0 10px 0;
-        border-bottom: $borderStyle;
-        .search-input {
-          max-width: 650px;
-          .el-input {
-            width: 205px;
-          }
-        }
-        .search-btn {
-          min-width: 205px;
-          button {
-            width: 95px;
-            height: 40px;
-          }
-        }
-      }
+
     }
   }
 </style>