diff --git a/src/views/fence/addFence.vue b/src/views/fence/addFence.vue
index 4401741..18013a3 100644
--- a/src/views/fence/addFence.vue
+++ b/src/views/fence/addFence.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addfence" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container id="addfence">
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -90,7 +90,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div class="search-div" style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
             <el-form-item class="selectForm-container-item" prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -110,7 +110,7 @@
             <el-form-item class="selectForm-container-item" prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value="" style="width: 100%"/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small"  type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -131,7 +131,7 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -427,4 +427,10 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>

diff --git a/src/views/fence/addFence.vue b/src/views/fence/addFence.vue
index 4401741..18013a3 100644
--- a/src/views/fence/addFence.vue
+++ b/src/views/fence/addFence.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addfence" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container id="addfence">
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -90,7 +90,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div class="search-div" style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
             <el-form-item class="selectForm-container-item" prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -110,7 +110,7 @@
             <el-form-item class="selectForm-container-item" prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value="" style="width: 100%"/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small"  type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -131,7 +131,7 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -427,4 +427,10 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/detailFence.vue b/src/views/fence/detailFence.vue
index 4a06633..241086f 100644
--- a/src/views/fence/detailFence.vue
+++ b/src/views/fence/detailFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="detaifence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="detaifence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -85,7 +85,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -332,4 +332,10 @@
   #detaifence .el-form-item {
     margin-bottom: 10px;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>

diff --git a/src/views/fence/addFence.vue b/src/views/fence/addFence.vue
index 4401741..18013a3 100644
--- a/src/views/fence/addFence.vue
+++ b/src/views/fence/addFence.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addfence" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container id="addfence">
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -90,7 +90,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div class="search-div" style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
             <el-form-item class="selectForm-container-item" prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -110,7 +110,7 @@
             <el-form-item class="selectForm-container-item" prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value="" style="width: 100%"/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small"  type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -131,7 +131,7 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -427,4 +427,10 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/detailFence.vue b/src/views/fence/detailFence.vue
index 4a06633..241086f 100644
--- a/src/views/fence/detailFence.vue
+++ b/src/views/fence/detailFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="detaifence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="detaifence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -85,7 +85,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -332,4 +332,10 @@
   #detaifence .el-form-item {
     margin-bottom: 10px;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/editFence.vue b/src/views/fence/editFence.vue
index 9bfbe11..43c5e30 100644
--- a/src/views/fence/editFence.vue
+++ b/src/views/fence/editFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="editfence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="editfence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -78,7 +78,7 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="（二）关联车辆" name="2">
-        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 10px;padding-right: 10px" @tab-click="handleClick">
+        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 20px;padding-right: 10px" @tab-click="handleClick">
           <el-tab-pane label="解绑当前车辆" name="first">
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px;padding-top: 20px">
               <el-checkbox-group v-model="removelist" class="checkbox">
@@ -91,7 +91,7 @@
           </el-tab-pane>
           <el-tab-pane label="增加绑定车辆" name="second">
             <div class="search-div" style="padding-left: 20px">
-              <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+              <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <el-input v-model.trim="listQuery.description" style="width: 180px" placeholder="车辆描述" clearable/>
                 </el-form-item>
@@ -111,7 +111,7 @@
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <dept-select v-if=" activeTab==='second'" v-model="listQuery.deptId" :dept-show="deptShow" style="width: 180px" placeholder="使用单位" clearable value=""/>
                 </el-form-item>
-                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+                <el-button class="filter-item" type="primary" size="small" icon="el-icon-search" @click="search">查 询</el-button>
               </el-form>
             </div>
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 20px">
@@ -129,7 +129,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -465,4 +465,10 @@
     background-color: orange;
     border-radius: 50%;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>

diff --git a/src/views/fence/addFence.vue b/src/views/fence/addFence.vue
index 4401741..18013a3 100644
--- a/src/views/fence/addFence.vue
+++ b/src/views/fence/addFence.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addfence" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container id="addfence">
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -90,7 +90,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div class="search-div" style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
             <el-form-item class="selectForm-container-item" prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -110,7 +110,7 @@
             <el-form-item class="selectForm-container-item" prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value="" style="width: 100%"/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small"  type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -131,7 +131,7 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -427,4 +427,10 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/detailFence.vue b/src/views/fence/detailFence.vue
index 4a06633..241086f 100644
--- a/src/views/fence/detailFence.vue
+++ b/src/views/fence/detailFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="detaifence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="detaifence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -85,7 +85,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -332,4 +332,10 @@
   #detaifence .el-form-item {
     margin-bottom: 10px;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/editFence.vue b/src/views/fence/editFence.vue
index 9bfbe11..43c5e30 100644
--- a/src/views/fence/editFence.vue
+++ b/src/views/fence/editFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="editfence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="editfence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -78,7 +78,7 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="（二）关联车辆" name="2">
-        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 10px;padding-right: 10px" @tab-click="handleClick">
+        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 20px;padding-right: 10px" @tab-click="handleClick">
           <el-tab-pane label="解绑当前车辆" name="first">
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px;padding-top: 20px">
               <el-checkbox-group v-model="removelist" class="checkbox">
@@ -91,7 +91,7 @@
           </el-tab-pane>
           <el-tab-pane label="增加绑定车辆" name="second">
             <div class="search-div" style="padding-left: 20px">
-              <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+              <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <el-input v-model.trim="listQuery.description" style="width: 180px" placeholder="车辆描述" clearable/>
                 </el-form-item>
@@ -111,7 +111,7 @@
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <dept-select v-if=" activeTab==='second'" v-model="listQuery.deptId" :dept-show="deptShow" style="width: 180px" placeholder="使用单位" clearable value=""/>
                 </el-form-item>
-                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+                <el-button class="filter-item" type="primary" size="small" icon="el-icon-search" @click="search">查 询</el-button>
               </el-form>
             </div>
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 20px">
@@ -129,7 +129,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -465,4 +465,10 @@
     background-color: orange;
     border-radius: 50%;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/listFence.vue b/src/views/fence/listFence.vue
index 33483c9..c5eb69a 100644
--- a/src/views/fence/listFence.vue
+++ b/src/views/fence/listFence.vue
@@ -1,58 +1,39 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model.trim="listQuery.fenceName" placeholder="围栏描述" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-select v-model="listQuery.fenceType" filterable placeholder="围栏类型" clearable value="" @change="fetchData()">
-            <el-option
-              v-for="item in fencetypelist"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="申请单位" clearable value=""/>
-        </el-form-item>
-
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
-        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="add">增加围栏</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.fenceName" size="small" placeholder="围栏描述" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.fenceType" filterable size="small" placeholder="围栏类型" clearable value="" @change="fetchData()">
+          <el-option
+            v-for="item in fencetypelist"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="deptShow" size="small" placeholder="申请单位" clearable value=""/>
+      </search-item>
+    </search-area>
     <!--查询结果Table显示-->
-    <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-      <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
-      <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="column.class">{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="220" align="center">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="detail(scope.row)">详情</el-button>
-          <el-button type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[15,20,30]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" class="table" border size="small" @selection-change="handleSelectionChange" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-plus" @click="add">增加围栏</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" width="220" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button type="text" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 <script>
 import { getFenceInfoList, delFenceInfo } from '@/api/fenceInfo'

diff --git a/src/views/fence/addFence.vue b/src/views/fence/addFence.vue
index 4401741..18013a3 100644
--- a/src/views/fence/addFence.vue
+++ b/src/views/fence/addFence.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addfence" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container id="addfence">
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -90,7 +90,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div class="search-div" style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
             <el-form-item class="selectForm-container-item" prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -110,7 +110,7 @@
             <el-form-item class="selectForm-container-item" prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value="" style="width: 100%"/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small"  type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -131,7 +131,7 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -427,4 +427,10 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/detailFence.vue b/src/views/fence/detailFence.vue
index 4a06633..241086f 100644
--- a/src/views/fence/detailFence.vue
+++ b/src/views/fence/detailFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="detaifence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="detaifence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -85,7 +85,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -332,4 +332,10 @@
   #detaifence .el-form-item {
     margin-bottom: 10px;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/editFence.vue b/src/views/fence/editFence.vue
index 9bfbe11..43c5e30 100644
--- a/src/views/fence/editFence.vue
+++ b/src/views/fence/editFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="editfence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="editfence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -78,7 +78,7 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="（二）关联车辆" name="2">
-        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 10px;padding-right: 10px" @tab-click="handleClick">
+        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 20px;padding-right: 10px" @tab-click="handleClick">
           <el-tab-pane label="解绑当前车辆" name="first">
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px;padding-top: 20px">
               <el-checkbox-group v-model="removelist" class="checkbox">
@@ -91,7 +91,7 @@
           </el-tab-pane>
           <el-tab-pane label="增加绑定车辆" name="second">
             <div class="search-div" style="padding-left: 20px">
-              <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+              <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <el-input v-model.trim="listQuery.description" style="width: 180px" placeholder="车辆描述" clearable/>
                 </el-form-item>
@@ -111,7 +111,7 @@
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <dept-select v-if=" activeTab==='second'" v-model="listQuery.deptId" :dept-show="deptShow" style="width: 180px" placeholder="使用单位" clearable value=""/>
                 </el-form-item>
-                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+                <el-button class="filter-item" type="primary" size="small" icon="el-icon-search" @click="search">查 询</el-button>
               </el-form>
             </div>
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 20px">
@@ -129,7 +129,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -465,4 +465,10 @@
     background-color: orange;
     border-radius: 50%;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/listFence.vue b/src/views/fence/listFence.vue
index 33483c9..c5eb69a 100644
--- a/src/views/fence/listFence.vue
+++ b/src/views/fence/listFence.vue
@@ -1,58 +1,39 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model.trim="listQuery.fenceName" placeholder="围栏描述" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-select v-model="listQuery.fenceType" filterable placeholder="围栏类型" clearable value="" @change="fetchData()">
-            <el-option
-              v-for="item in fencetypelist"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="申请单位" clearable value=""/>
-        </el-form-item>
-
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
-        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="add">增加围栏</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.fenceName" size="small" placeholder="围栏描述" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.fenceType" filterable size="small" placeholder="围栏类型" clearable value="" @change="fetchData()">
+          <el-option
+            v-for="item in fencetypelist"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="deptShow" size="small" placeholder="申请单位" clearable value=""/>
+      </search-item>
+    </search-area>
     <!--查询结果Table显示-->
-    <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-      <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
-      <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="column.class">{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="220" align="center">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="detail(scope.row)">详情</el-button>
-          <el-button type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[15,20,30]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" class="table" border size="small" @selection-change="handleSelectionChange" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-plus" @click="add">增加围栏</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" width="220" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button type="text" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 <script>
 import { getFenceInfoList, delFenceInfo } from '@/api/fenceInfo'
diff --git a/src/views/route/addRoute.vue b/src/views/route/addRoute.vue
index 012d65b..ead6df8 100644
--- a/src/views/route/addRoute.vue
+++ b/src/views/route/addRoute.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-container>
+  <app-container id="addroute">
     <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
         <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">

diff --git a/src/views/fence/addFence.vue b/src/views/fence/addFence.vue
index 4401741..18013a3 100644
--- a/src/views/fence/addFence.vue
+++ b/src/views/fence/addFence.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addfence" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container id="addfence">
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -90,7 +90,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div class="search-div" style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
             <el-form-item class="selectForm-container-item" prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -110,7 +110,7 @@
             <el-form-item class="selectForm-container-item" prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value="" style="width: 100%"/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small"  type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -131,7 +131,7 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -427,4 +427,10 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/detailFence.vue b/src/views/fence/detailFence.vue
index 4a06633..241086f 100644
--- a/src/views/fence/detailFence.vue
+++ b/src/views/fence/detailFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="detaifence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="detaifence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -85,7 +85,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -332,4 +332,10 @@
   #detaifence .el-form-item {
     margin-bottom: 10px;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/editFence.vue b/src/views/fence/editFence.vue
index 9bfbe11..43c5e30 100644
--- a/src/views/fence/editFence.vue
+++ b/src/views/fence/editFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="editfence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="editfence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -78,7 +78,7 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="（二）关联车辆" name="2">
-        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 10px;padding-right: 10px" @tab-click="handleClick">
+        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 20px;padding-right: 10px" @tab-click="handleClick">
           <el-tab-pane label="解绑当前车辆" name="first">
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px;padding-top: 20px">
               <el-checkbox-group v-model="removelist" class="checkbox">
@@ -91,7 +91,7 @@
           </el-tab-pane>
           <el-tab-pane label="增加绑定车辆" name="second">
             <div class="search-div" style="padding-left: 20px">
-              <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+              <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <el-input v-model.trim="listQuery.description" style="width: 180px" placeholder="车辆描述" clearable/>
                 </el-form-item>
@@ -111,7 +111,7 @@
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <dept-select v-if=" activeTab==='second'" v-model="listQuery.deptId" :dept-show="deptShow" style="width: 180px" placeholder="使用单位" clearable value=""/>
                 </el-form-item>
-                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+                <el-button class="filter-item" type="primary" size="small" icon="el-icon-search" @click="search">查 询</el-button>
               </el-form>
             </div>
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 20px">
@@ -129,7 +129,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -465,4 +465,10 @@
     background-color: orange;
     border-radius: 50%;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/listFence.vue b/src/views/fence/listFence.vue
index 33483c9..c5eb69a 100644
--- a/src/views/fence/listFence.vue
+++ b/src/views/fence/listFence.vue
@@ -1,58 +1,39 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model.trim="listQuery.fenceName" placeholder="围栏描述" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-select v-model="listQuery.fenceType" filterable placeholder="围栏类型" clearable value="" @change="fetchData()">
-            <el-option
-              v-for="item in fencetypelist"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="申请单位" clearable value=""/>
-        </el-form-item>
-
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
-        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="add">增加围栏</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.fenceName" size="small" placeholder="围栏描述" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.fenceType" filterable size="small" placeholder="围栏类型" clearable value="" @change="fetchData()">
+          <el-option
+            v-for="item in fencetypelist"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="deptShow" size="small" placeholder="申请单位" clearable value=""/>
+      </search-item>
+    </search-area>
     <!--查询结果Table显示-->
-    <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-      <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
-      <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="column.class">{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="220" align="center">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="detail(scope.row)">详情</el-button>
-          <el-button type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[15,20,30]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" class="table" border size="small" @selection-change="handleSelectionChange" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-plus" @click="add">增加围栏</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" width="220" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button type="text" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 <script>
 import { getFenceInfoList, delFenceInfo } from '@/api/fenceInfo'
diff --git a/src/views/route/addRoute.vue b/src/views/route/addRoute.vue
index 012d65b..ead6df8 100644
--- a/src/views/route/addRoute.vue
+++ b/src/views/route/addRoute.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-container>
+  <app-container id="addroute">
     <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
         <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
diff --git a/src/views/route/detailRoute.vue b/src/views/route/detailRoute.vue
index cbe1b12..dad5e2f 100644
--- a/src/views/route/detailRoute.vue
+++ b/src/views/route/detailRoute.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-container>
+  <app-container id="detailroute">
     <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1">
         <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" size="small" style="padding-top:20px;padding-right: 40px">

diff --git a/src/views/fence/addFence.vue b/src/views/fence/addFence.vue
index 4401741..18013a3 100644
--- a/src/views/fence/addFence.vue
+++ b/src/views/fence/addFence.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addfence" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container id="addfence">
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -90,7 +90,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div class="search-div" style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
             <el-form-item class="selectForm-container-item" prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -110,7 +110,7 @@
             <el-form-item class="selectForm-container-item" prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value="" style="width: 100%"/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small"  type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -131,7 +131,7 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -427,4 +427,10 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/detailFence.vue b/src/views/fence/detailFence.vue
index 4a06633..241086f 100644
--- a/src/views/fence/detailFence.vue
+++ b/src/views/fence/detailFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="detaifence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="detaifence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -85,7 +85,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -332,4 +332,10 @@
   #detaifence .el-form-item {
     margin-bottom: 10px;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/editFence.vue b/src/views/fence/editFence.vue
index 9bfbe11..43c5e30 100644
--- a/src/views/fence/editFence.vue
+++ b/src/views/fence/editFence.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="editfence" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container id="editfence">
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="fenceForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="fenceForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="围栏描述" prop="fenceName" >
@@ -78,7 +78,7 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="（二）关联车辆" name="2">
-        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 10px;padding-right: 10px" @tab-click="handleClick">
+        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 20px;padding-right: 10px" @tab-click="handleClick">
           <el-tab-pane label="解绑当前车辆" name="first">
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px;padding-top: 20px">
               <el-checkbox-group v-model="removelist" class="checkbox">
@@ -91,7 +91,7 @@
           </el-tab-pane>
           <el-tab-pane label="增加绑定车辆" name="second">
             <div class="search-div" style="padding-left: 20px">
-              <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+              <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <el-input v-model.trim="listQuery.description" style="width: 180px" placeholder="车辆描述" clearable/>
                 </el-form-item>
@@ -111,7 +111,7 @@
                 <el-form-item class="selectForm-container-item" prop="keywords">
                   <dept-select v-if=" activeTab==='second'" v-model="listQuery.deptId" :dept-show="deptShow" style="width: 180px" placeholder="使用单位" clearable value=""/>
                 </el-form-item>
-                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+                <el-button class="filter-item" type="primary" size="small" icon="el-icon-search" @click="search">查 询</el-button>
               </el-form>
             </div>
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 20px">
@@ -129,7 +129,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -465,4 +465,10 @@
     background-color: orange;
     border-radius: 50%;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/fence/listFence.vue b/src/views/fence/listFence.vue
index 33483c9..c5eb69a 100644
--- a/src/views/fence/listFence.vue
+++ b/src/views/fence/listFence.vue
@@ -1,58 +1,39 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model.trim="listQuery.fenceName" placeholder="围栏描述" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-select v-model="listQuery.fenceType" filterable placeholder="围栏类型" clearable value="" @change="fetchData()">
-            <el-option
-              v-for="item in fencetypelist"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="申请单位" clearable value=""/>
-        </el-form-item>
-
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
-        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="add">增加围栏</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.fenceName" size="small" placeholder="围栏描述" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.fenceType" filterable size="small" placeholder="围栏类型" clearable value="" @change="fetchData()">
+          <el-option
+            v-for="item in fencetypelist"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="deptShow" size="small" placeholder="申请单位" clearable value=""/>
+      </search-item>
+    </search-area>
     <!--查询结果Table显示-->
-    <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-      <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
-      <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="column.class">{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="220" align="center">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="detail(scope.row)">详情</el-button>
-          <el-button type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[15,20,30]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" class="table" border size="small" @selection-change="handleSelectionChange" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-plus" @click="add">增加围栏</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" width="220" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button type="text" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 <script>
 import { getFenceInfoList, delFenceInfo } from '@/api/fenceInfo'
diff --git a/src/views/route/addRoute.vue b/src/views/route/addRoute.vue
index 012d65b..ead6df8 100644
--- a/src/views/route/addRoute.vue
+++ b/src/views/route/addRoute.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-container>
+  <app-container id="addroute">
     <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
         <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
diff --git a/src/views/route/detailRoute.vue b/src/views/route/detailRoute.vue
index cbe1b12..dad5e2f 100644
--- a/src/views/route/detailRoute.vue
+++ b/src/views/route/detailRoute.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-container>
+  <app-container id="detailroute">
     <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1">
         <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" size="small" style="padding-top:20px;padding-right: 40px">
diff --git a/src/views/route/editRoute.vue b/src/views/route/editRoute.vue
index 1444c55..24fae22 100644
--- a/src/views/route/editRoute.vue
+++ b/src/views/route/editRoute.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-container>
+  <app-container id="editroute">
     <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
         <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">