录入列表调整

src/views/followup/record-manage/record-list.vue

@@ -3,14 +3,12 @@
       <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
       <div class="record-list-content screenSet">
         <div class="search-title">录入管理</div>
-        <el-row :gutter="30" class="row search-content" type="flex" style="margin-top: 10px;">
-          <el-form ref="serchForm" :model="searchData" label-suffix=":" label-width="125px" style="width:100%;">
-            <el-col :span="6">
+        <div class="search-content">
+          <div class="search-input">
+            <el-form ref="serchForm" :model="searchData" :inline="true" label-suffix=":" label-width="125px">
               <el-form-item label="随访计划名称">
                 <el-input v-model="searchData.planName" placeholder="请输入关键词"></el-input>
               </el-form-item>
-            </el-col>
-            <el-col :span="6">
               <el-form-item label="随访时间范围">
                 <el-select v-model="searchData.timeRange" placeholder="请选择时间范围">
                   <el-option
@@ -21,23 +19,19 @@
                   </el-option>
                 </el-select>
               </el-form-item>
-            </el-col>
-            <el-col :span="6">
               <el-form-item label="姓名">
                 <el-input v-model="searchData.name" placeholder=""></el-input>
               </el-form-item>
-            </el-col>
-            <el-col :span="6">
               <el-form-item label="手机号">
                 <el-input v-model="searchData.phoneNumber" placeholder="请输入手机号"></el-input>
               </el-form-item>
-            </el-col>
-            <el-col :span="4" :offset="20" style="padding:0;text-align:right;padding-right:15px;">
-              <el-button type="primary" size="small" @click="search">查询</el-button>
-              <el-button type="default" size="small" @click="reseat" style="margin-left:0;">重置</el-button>
-            </el-col>
-          </el-form>
-        </el-row>
+            </el-form>
+          </div>
+          <div class="search-btns">
+            <el-button class="button-green" type="primary" @click="search">查询</el-button>
+            <el-button class="button-white" plain @click="reseat">重置</el-button>
+          </div>
+        </div>
         <div class="teble-content">
           <el-tabs v-model="activeName" type="card" @tab-click="handleClickTab">
             <el-tab-pane name="all">
@@ -157,20 +151,39 @@
 </script>
 
 <style scoped lang="scss">
+  $borderStyle: 1px solid #efefef;
 .record-list-wrapper{
   .record-list-content{
+    padding: 30px;
     background-color: #ffffff;
     .search-title{
-      padding: 30px;
       font-size: 20px;
-      color: #1E2F3D;
-      border-bottom: 1px solid #efefef;
+      padding-bottom: 10px;
+      border-bottom: $borderStyle;
     }
     .search-content{
-      padding: 20px 30px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 30px 0 10px 0;
+      border-bottom: $borderStyle;
+      .search-input{
+        /*max-width: 650px;*/
+        flex: 1;
+        .el-input{
+          width: 205px;
+        }
+      }
+      .search-btns{
+        min-width: 205px;
+        button {
+          width: 95px;
+          height: 40px;
+        }
+      }
     }
     .teble-content{
-      padding: 20px 30px;
+      padding: 20px 0;
     }
   }
 }