人员进出记录统计样式优化

src/views/personnel_access_statistics/index.vue

@@ -3,109 +3,116 @@
     <addModal ref="exceptionInfoModel" />
     <!--搜索区-->
     <!--    <div style="margin-left: 10px">-->
-    <el-input
-      v-model="form.name"
-      placeholder="请输入姓名"
-      class="margin-left input"
-    />
-    <el-input
-      v-model="form.phone"
-      placeholder="请输入手机号"
-      class="margin-left input"
-    />
-    <el-input
-      v-model="form.idNumber"
-      placeholder="请输入身份证号"
-      class="margin-left input"
-    />
-    <el-input
-      v-model="form.cardIdEx"
-      placeholder="请输入卡号"
-      class="margin-left input"
-    />
-    <el-select
-      v-model="form.peopleType"
-      class="margin-left input"
-      filterable
-      clearable
-      placeholder="请选择人员类型"
-    >
-      <el-option
-        v-for="item in userTypeList"
-        :key="item.code"
-        :label="item.desc"
-        :value="item.code"
-      />
-    </el-select>
-    <el-select
-      v-model="form.status"
-      class="margin-left input"
-      filterable
-      clearable
-      placeholder="请选择在离场"
-    >
-      <el-option
-        v-for="item in statusList"
-        :key="item.code"
-        :label="item.desc"
-        :value="item.code"
-      />
-    </el-select>
-    <el-date-picker
-      v-model="form.startTimeToEndTime"
-      type="datetimerange"
-      class="margin-left"
-      range-separator="至"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-    />
-    <el-select
-      v-model="form.sn"
-      filterable
-      clearable
-      placeholder="请选择设备编号"
-      class="margin-left input"
-    >
-      <el-option
-        v-for="(item, index) in machineList"
-        :key="index"
-        :label="item.sn"
-        :value="item.sn"
-      />
-    </el-select>
-    <el-select
-      v-model="form.sn"
-      filterable
-      clearable
-      placeholder="请选择设备地点"
-      class="margin-left input"
-    >
-      <el-option
-        v-for="(item, index) in machineList"
-        :key="index"
-        :label="item.name"
-        :value="item.sn"
-      />
-    </el-select>
-    <el-button
-      type="primary"
-      icon="el-icon-search"
-      class="margin-left"
-      @click="query"
-    >搜索</el-button>
-    <el-tooltip
-      class="item"
-      effect="dark"
-      content="最大支持导出50000条数据！"
-      placement="top-start"
-    >
-      <el-button
-        type="primary"
-        icon="el-icon-download"
-        class="margin-left"
-        @click="download"
-      >导出记录</el-button>
-    </el-tooltip>
+    <div class="operation-box">
+      <!--操作区-->
+      <div class="operation-box_btn">
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="最大支持导出50000条数据！"
+          placement="top-start"
+        >
+          <el-button
+            type="primary"
+            icon="el-icon-download"
+            @click="download"
+          >导出记录</el-button>
+        </el-tooltip>
+      </div>
+      <div class="operation-box_search">
+        <!--搜索区-->
+        <el-input
+          v-model="form.name"
+          placeholder="请输入姓名"
+          class="search-input"
+        />
+        <el-input
+          v-model="form.phone"
+          placeholder="请输入手机号"
+          class="search-input"
+        />
+        <el-input
+          v-model="form.idNumber"
+          placeholder="请输入身份证号"
+          class="search-input"
+        />
+        <el-input
+          v-model="form.cardIdEx"
+          placeholder="请输入卡号"
+          class="search-input"
+        />
+        <el-select
+          v-model="form.peopleType"
+          class="search-input"
+          filterable
+          clearable
+          placeholder="请选择人员类型"
+        >
+          <el-option
+            v-for="item in userTypeList"
+            :key="item.code"
+            :label="item.desc"
+            :value="item.code"
+          />
+        </el-select>
+        <el-select
+          v-model="form.status"
+          class="search-input"
+          filterable
+          clearable
+          placeholder="请选择在离场"
+        >
+          <el-option
+            v-for="item in statusList"
+            :key="item.code"
+            :label="item.desc"
+            :value="item.code"
+          />
+        </el-select>
+        <el-date-picker
+          v-model="form.startTimeToEndTime"
+          type="datetimerange"
+          style="width: 390px;margin: 5px"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+        <el-select
+          v-model="form.sn"
+          filterable
+          clearable
+          placeholder="请选择设备编号"
+          class="search-input"
+        >
+          <el-option
+            v-for="(item, index) in machineList"
+            :key="index"
+            :label="item.sn"
+            :value="item.sn"
+          />
+        </el-select>
+        <el-select
+          v-model="form.sn"
+          filterable
+          clearable
+          placeholder="请选择设备地点"
+          class="search-input"
+        >
+          <el-option
+            v-for="(item, index) in machineList"
+            :key="index"
+            :label="item.name"
+            :value="item.sn"
+          />
+        </el-select>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          class="search-btn"
+          @click="query"
+        >搜索</el-button>
+      </div>
+    </div>
     <!--    </div>-->
     <!--主表格-->
     <div v-if="tableData.length>0" class="card-content">
@@ -520,6 +527,8 @@ export default {
   align-items: center;
   flex-wrap: wrap;
   margin-left: -10px;
+  height: calc(100vh - 315px);
+  overflow-y: scroll;
   &_item {
     width: 390px;
     min-height: 290px;