录入列表样式调整

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

 <template>
     <div class="record-list-wrapper">
       <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
-      <div class="record-list-content screenSet">
-        <div class="search-title">录入管理</div>
-        <div class="search-content">
+      <div class="record-list-content f-main-content screenSet">
+        <div class="page-title">录入管理</div>
+        <div class="search-div">
           <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-input v-model="searchData.planName" placeholder="请输入关键词" style="width: 250px"></el-input>
               </el-form-item>
               <el-form-item label="随访时间范围">
-                <el-select v-model="searchData.timeRange" placeholder="请选择时间范围">
+                <el-select v-model="searchData.timeRange" placeholder="请选择时间范围" style="width: 250px">
                   <el-option
                     v-for="(item,index) in timeRangeList"
                     :key="index"
@@ -27,77 +27,35 @@
               </el-form-item>
             </el-form>
           </div>
-          <div class="search-btns">
+          <div class="search-btn">
             <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">
-              <span slot="label">全部（{{allNum}}）</span>
-              <el-table :data="allData" style="width: 100%">
-                <el-table-column prop="name" label="姓名" min-width="100" align="center"></el-table-column>
-                <el-table-column prop="phoneNumber" label="手机号" min-width="100" align="center"></el-table-column>
-                <el-table-column prop="planName" label="随访计划名称" min-width="150" align="center"></el-table-column>
-                <el-table-column prop="followUpTime" label="随访时间" min-width="150" align="center">
-                  <template slot-scope="scope">
-                    <!--<span>{{ scope.row.status | statusFileter }}</span>-->
-                  </template>
-                </el-table-column>
-                <el-table-column prop="createdName" label="随访状态" min-width="100" align="center"></el-table-column>
-                <el-table-column label="操作" fixed="right" align="center" min-width="200">
-                  <template slot-scope="scope">
-                    <el-button type="primary" size="small" @click="editRow(scope.row)">随访录入 </el-button>
-                    <el-button type="primary" size="small" @click="changeStatusRow(scope.row)">| 变更随访状态 </el-button>
-                    <el-button type="primary" size="small" @click="sendRow(scope.row)">| 发送患教</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-            <el-tab-pane name="finished">
-              <span slot="label">已完成（{{finishedNum}}）</span>
-              <el-table :data="finishedData" style="width: 100%">
-                <el-table-column prop="name" label="姓名" min-width="100" align="center"></el-table-column>
-                <el-table-column prop="phoneNumber" label="手机号" min-width="100" align="center"></el-table-column>
-                <el-table-column prop="planName" label="随访计划名称" min-width="150" align="center"></el-table-column>
-                <el-table-column prop="followUpTime" label="随访时间" min-width="150" align="center">
-                  <template slot-scope="scope">
-                    <!--<span>{{ scope.row.status | statusFileter }}</span>-->
-                  </template>
-                </el-table-column>
-                <el-table-column prop="createdName" label="随访状态" min-width="100" align="center"></el-table-column>
-                <el-table-column label="操作" fixed="right" align="center" min-width="200">
-                  <template slot-scope="scope">
-                    <el-button type="primary" size="small" @click="editRow(scope.row)">随访录入 </el-button>
-                    <el-button type="primary" size="small" @click="changeStatusRow(scope.row)">| 变更随访状态 </el-button>
-                    <el-button type="primary" size="small" @click="sendRow(scope.row)">| 发送患教</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-            <el-tab-pane name="unfinish">
-              <span slot="label">未完成（{{unfinishNum}}）</span>
-              <el-table :data="unfinishData" style="width: 100%">
-                <el-table-column prop="name" label="姓名" min-width="100" align="center"></el-table-column>
-                <el-table-column prop="phoneNumber" label="手机号" min-width="100" align="center"></el-table-column>
-                <el-table-column prop="planName" label="随访计划名称" min-width="150" align="center"></el-table-column>
-                <el-table-column prop="followUpTime" label="随访时间" min-width="150" align="center">
-                  <template slot-scope="scope">
-                    <!--<span>{{ scope.row.status | statusFileter }}</span>-->
-                  </template>
-                </el-table-column>
-                <el-table-column prop="createdName" label="随访状态" min-width="100" align="center"></el-table-column>
-                <el-table-column label="操作" fixed="right" align="center" min-width="200">
-                  <template slot-scope="scope">
-                    <el-button type="primary" size="small" @click="editRow(scope.row)">随访录入 </el-button>
-                    <el-button type="primary" size="small" @click="changeStatusRow(scope.row)">| 变更随访状态 </el-button>
-                    <el-button type="primary" size="small" @click="sendRow(scope.row)">| 发送患教</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-          </el-tabs>
+          <el-radio-group v-model="activeName">
+            <el-radio-button label="all">全部（{{allNum}}）</el-radio-button>
+            <el-radio-button label="finished">已完成（{{finishedNum}}）</el-radio-button>
+            <el-radio-button label="unfinish">未完成（{{unfinishNum}}）</el-radio-button>
+          </el-radio-group>
+          <el-table :data="allData" style="width: 100%;margin-top: 20px;">
+          <el-table-column prop="name" label="姓名" min-width="100" align="center"></el-table-column>
+          <el-table-column prop="phoneNumber" label="手机号" min-width="100" align="center"></el-table-column>
+          <el-table-column prop="planName" label="随访计划名称" min-width="150" align="center"></el-table-column>
+          <el-table-column prop="followUpTime" label="随访时间" min-width="150" align="center">
+          <template slot-scope="scope">
+          <!--<span>{{ scope.row.status | statusFileter }}</span>-->
+          </template>
+          </el-table-column>
+          <el-table-column prop="createdName" label="随访状态" min-width="100" align="center"></el-table-column>
+          <el-table-column label="操作" fixed="right" align="center" min-width="200">
+          <template slot-scope="scope">
+          <el-button type="primary" size="small" @click="editRow(scope.row)">随访录入 </el-button>
+          <el-button type="primary" size="small" @click="changeStatusRow(scope.row)">| 变更随访状态 </el-button>
+          <el-button type="primary" size="small" @click="sendRow(scope.row)">| 发送患教</el-button>
+          </template>
+          </el-table-column>
+          </el-table>
         </div>
       </div>
     </div>
@@ -151,36 +109,15 @@
 </script>
 
 <style scoped lang="scss">
-  $borderStyle: 1px solid #efefef;
+  $inputDiv: 0;
+  $input: 205px;
+  $searchDiv: 160px;
+  @import '../../../style/followup/followup-common';
 .record-list-wrapper{
   .record-list-content{
-    padding: 30px;
-    background-color: #ffffff;
-    .search-title{
-      font-size: 20px;
-      padding-bottom: 10px;
-      border-bottom: $borderStyle;
-    }
-    .search-content{
-      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;
-        }
-      }
+    .search-input{
+      max-width: none;
+      flex: 1;
     }
     .teble-content{
       padding: 20px 0;