diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index c5e8129..c5e3013 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -1,143 +1,142 @@
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <div class="table-title">
+        <div class="title-header"><i class="el-icon-menu"/>案卷详情</div>
+        <div class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <el-input :value="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <el-input :value="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <el-input :value="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <el-input :value="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <el-input :value="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <el-input :value="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <el-input :value="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <el-input :value="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <el-input :value="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <el-input :value="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <el-input :value="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <el-input :value="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <el-input :value="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <el-input :value="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <el-input :value="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <el-input :value="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseDetail.casetypesTimeName">
-        <el-form-item label="立案标准">
-          <el-input :value="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <el-input :value="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <el-input :value="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-      <el-row v-if="caseDetail.isSupervise">
-        <el-form-item label="督办意见">
-          <el-input :value="caseDetail.superviseRemarks"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container">
-        <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="img" fit="contain" class="image"/>
-      </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.isSupervise" class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="督办意见">
+              <el-input :value="caseDetail.superviseRemarks"/>
+            </el-form-item>
+          </div>
+        </div>
+
+      </el-form>
+    </div>
+
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -149,12 +148,12 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row v-if="showProcess">
+    </div>
+    <div v-if="showProcess" class="detail-block">
       <div class="title">案卷处理:</div>
       <!-- 案卷处理 有权限控制-->
       <div class="case-process">
-        <el-form ref="processForm" :model="processForm" :rules="rules" class="form" label-width="90px" >
+        <el-form ref="processForm" :model="processForm" :rules="rules" class="form" size="small" label-width="90px" >
           <el-row>
             <el-form-item v-if="processRadioList.length>0" label="操作类型 " prop="operationKey">
               <el-radio-group v-model="processForm.operationKey" @change="selectNextOperation">
@@ -299,19 +298,19 @@
           </el-row>
         </el-form>
       </div>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="250" class="table" border>
+    </div>
+    <div class="detail-block">
+
+      <el-table :data="recordList" max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
+    </div>
     <el-row v-if="showProcess" style="text-align: center;">
-      <el-button class="button" type="primary" plain @click="submit">提交</el-button>
+      <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px; margin: 20px" @click="submit"> 提交 </el-button>
     </el-row>
 
     <el-dialog
@@ -321,7 +320,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -885,56 +884,59 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
+    position: relative;
     height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
+      position: absolute;
+      left: 15px;
+      top: 50%;
+      transform: translateY(-50%);
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
+    float:right;
     .edit_btn{
-      float: right;
-      margin:7px 3px; //为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+
+      margin:7px 10px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-    // max-height: 250px;
-  }
   .title{
-    margin-left: 38px;
-    margin-top: 10px;
-    margin-bottom: 10px;
     font-size: 14px;
     font-weight: bold;
+    margin: 10px;
+    margin-left: 20px;
   }
   .button{
     margin-bottom: 30px;
   }
+
   .image-container {
-    // width: 80%;
-    // margin-top: 20px;
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 20px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index c5e8129..c5e3013 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -1,143 +1,142 @@
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <div class="table-title">
+        <div class="title-header"><i class="el-icon-menu"/>案卷详情</div>
+        <div class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <el-input :value="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <el-input :value="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <el-input :value="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <el-input :value="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <el-input :value="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <el-input :value="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <el-input :value="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <el-input :value="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <el-input :value="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <el-input :value="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <el-input :value="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <el-input :value="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <el-input :value="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <el-input :value="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <el-input :value="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <el-input :value="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseDetail.casetypesTimeName">
-        <el-form-item label="立案标准">
-          <el-input :value="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <el-input :value="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <el-input :value="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-      <el-row v-if="caseDetail.isSupervise">
-        <el-form-item label="督办意见">
-          <el-input :value="caseDetail.superviseRemarks"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container">
-        <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="img" fit="contain" class="image"/>
-      </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.isSupervise" class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="督办意见">
+              <el-input :value="caseDetail.superviseRemarks"/>
+            </el-form-item>
+          </div>
+        </div>
+
+      </el-form>
+    </div>
+
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -149,12 +148,12 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row v-if="showProcess">
+    </div>
+    <div v-if="showProcess" class="detail-block">
       <div class="title">案卷处理:</div>
       <!-- 案卷处理 有权限控制-->
       <div class="case-process">
-        <el-form ref="processForm" :model="processForm" :rules="rules" class="form" label-width="90px" >
+        <el-form ref="processForm" :model="processForm" :rules="rules" class="form" size="small" label-width="90px" >
           <el-row>
             <el-form-item v-if="processRadioList.length>0" label="操作类型 " prop="operationKey">
               <el-radio-group v-model="processForm.operationKey" @change="selectNextOperation">
@@ -299,19 +298,19 @@
           </el-row>
         </el-form>
       </div>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="250" class="table" border>
+    </div>
+    <div class="detail-block">
+
+      <el-table :data="recordList" max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
+    </div>
     <el-row v-if="showProcess" style="text-align: center;">
-      <el-button class="button" type="primary" plain @click="submit">提交</el-button>
+      <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px; margin: 20px" @click="submit"> 提交 </el-button>
     </el-row>
 
     <el-dialog
@@ -321,7 +320,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -885,56 +884,59 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
+    position: relative;
     height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
+      position: absolute;
+      left: 15px;
+      top: 50%;
+      transform: translateY(-50%);
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
+    float:right;
     .edit_btn{
-      float: right;
-      margin:7px 3px; //为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+
+      margin:7px 10px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-    // max-height: 250px;
-  }
   .title{
-    margin-left: 38px;
-    margin-top: 10px;
-    margin-bottom: 10px;
     font-size: 14px;
     font-weight: bold;
+    margin: 10px;
+    margin-left: 20px;
   }
   .button{
     margin-bottom: 30px;
   }
+
   .image-container {
-    // width: 80%;
-    // margin-top: 20px;
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 20px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/callCase/historyCaseList.vue b/src/views/callCase/historyCaseList.vue
index f279b4b..a4b0d1d 100644
--- a/src/views/callCase/historyCaseList.vue
+++ b/src/views/callCase/historyCaseList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <case-list
       v-loading="listLoading"
       :case-list="caseList"
@@ -8,7 +8,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="showDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -63,6 +63,10 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.listQuery.reporterPhone = this.$route.query.reporterPhone
+    this.fetchData()
+  },
   activated() {
     this.listQuery.reporterPhone = this.$route.query.reporterPhone
     this.fetchData()

diff --git a/src/components/CaseCommon/caseDetail.vue b/src/components/CaseCommon/caseDetail.vue
index c5e8129..c5e3013 100644
--- a/src/components/CaseCommon/caseDetail.vue
+++ b/src/components/CaseCommon/caseDetail.vue
@@ -1,143 +1,142 @@
 <template>
-  <div class="app-container">
-    <el-row class="table-title">
-      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-      <el-col :span="12" :offset="6" class="edit_btns">
-        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
-        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+  <app-container>
+    <div class="detail-title">
+      <div class="table-title">
+        <div class="title-header"><i class="el-icon-menu"/>案卷详情</div>
+        <div class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="detail-block">
+      <el-form ref="caseform" class="form" size="small" label-width="auto">
 
-      </el-col>
-    </el-row>
-    <el-form ref="caseform" class="form" label-width="90px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷编号">
-            <el-input :value="caseDetail.caseid"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="信息来源">
-            <el-input :value="caseDetail.sourceName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="举报人/电话">
-            <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="上报人员">
-            <el-input :value="caseDetail.createUserName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="案卷类别">
-            <el-input :value="caseDetail.eorcName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷大类">
-            <el-input :value="caseDetail.casetypeName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷小类">
-            <el-input :value="caseDetail.casetypeDetailName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="案卷等级">
-            <el-input :value="caseDetail.caseLevelName"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="所在区县">
-            <el-input :value="caseDetail.areaName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所在街道">
-            <el-input :value="caseDetail.streetName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属社区">
-            <el-input :value="caseDetail.communityName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格">
-            <el-input :value="caseDetail.gridId"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="登记时间">
-            <el-input :value="caseDetail.createTime"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="处理时限">
-            <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="完成时限">
-            <el-input :value="caseDetail.nodeLimittime"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
-            <el-input :value="caseDetail.shopkeeperName"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
-            <el-input :value="caseDetail.shopPhone"/>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="showNeedVisit==true" :span="6">
-          <el-form-item label="是否回访">
-            <el-input :value="isNeedVisit"/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row v-if="caseDetail.casetypesTimeName">
-        <el-form-item label="立案标准">
-          <el-input :value="caseDetail.casetypesTimeName"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="发生地点">
-          <el-input :value="caseDetail.fieldintro"/>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="案卷描述">
-          <el-input :value="caseDetail.description"/>
-        </el-form-item>
-      </el-row>
-      <el-row v-if="caseDetail.isSupervise">
-        <el-form-item label="督办意见">
-          <el-input :value="caseDetail.superviseRemarks"/>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <el-row v-show="showImage">
-      <!-- <div class="title">案卷图片:</div> -->
-      <!-- 图片展示 -->
-      <!-- <div class="image-container">
-        <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdProcess" :key="img" :src="img" fit="contain" class="image"/>
-        <el-image v-for="img in fileIdCheck" :key="img" :src="img" fit="contain" class="image"/>
-      </div> -->
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷编号">
+              <el-input :value="caseDetail.caseid"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="信息来源">
+              <el-input :value="caseDetail.sourceName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="举报人/电话">
+              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="上报人员">
+              <el-input :value="caseDetail.createUserName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷类别">
+              <el-input :value="caseDetail.eorcName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="案卷大类">
+              <el-input :value="caseDetail.casetypeName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷小类">
+              <el-input :value="caseDetail.casetypeDetailName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="案卷等级">
+              <el-input :value="caseDetail.caseLevelName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在区县">
+              <el-input :value="caseDetail.areaName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="所在街道">
+              <el-input :value="caseDetail.streetName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item">
+            <el-form-item label="所属网格">
+              <el-input :value="caseDetail.gridId"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="登记时间">
+              <el-input :value="caseDetail.createTime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="处理时限">
+              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="完成时限">
+              <el-input :value="caseDetail.nodeLimittime"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item label="是否回访">
+              <el-input :value="isNeedVisit"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
+              <el-input :value="caseDetail.shopkeeperName"/>
+            </el-form-item>
+          </div>
+          <div class="detail-item">
+            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
+              <el-input :value="caseDetail.shopPhone"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="立案标准">
+              <el-input :value="caseDetail.casetypesTimeName"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="发生地点">
+              <el-input :value="caseDetail.fieldintro"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="案卷描述">
+              <el-input :value="caseDetail.description"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div v-if="caseDetail.isSupervise" class="detail-row">
+          <div class="detail-item" style="width: 99%;display: block;">
+            <el-form-item label="督办意见">
+              <el-input :value="caseDetail.superviseRemarks"/>
+            </el-form-item>
+          </div>
+        </div>
+
+      </el-form>
+    </div>
+
+    <div v-show="showImage" class="detail-block">
       <el-tabs type="border-card" class="image-container">
         <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
           <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
@@ -149,12 +148,12 @@
           <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-    <el-row v-if="showProcess">
+    </div>
+    <div v-if="showProcess" class="detail-block">
       <div class="title">案卷处理:</div>
       <!-- 案卷处理 有权限控制-->
       <div class="case-process">
-        <el-form ref="processForm" :model="processForm" :rules="rules" class="form" label-width="90px" >
+        <el-form ref="processForm" :model="processForm" :rules="rules" class="form" size="small" label-width="90px" >
           <el-row>
             <el-form-item v-if="processRadioList.length>0" label="操作类型 " prop="operationKey">
               <el-radio-group v-model="processForm.operationKey" @change="selectNextOperation">
@@ -299,19 +298,19 @@
           </el-row>
         </el-form>
       </div>
-    </el-row>
-    <el-row>
-      <div class="title">数据流转记录:</div>
-      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" max-height="250" class="table" border>
+    </div>
+    <div class="detail-block">
+
+      <el-table :data="recordList" max-height="250" class="table" border>
         <el-table-column prop="operationTypeName" label="操作" align="center"/>
         <el-table-column prop="deptName" label="单位" align="center"/>
         <el-table-column prop="userName" label="人员" align="center"/>
         <el-table-column prop="time" label="时间" align="center"/>
         <el-table-column prop="remarks" label="意见" align="center"/>
       </el-table>
-    </el-row>
+    </div>
     <el-row v-if="showProcess" style="text-align: center;">
-      <el-button class="button" type="primary" plain @click="submit">提交</el-button>
+      <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px; margin: 20px" @click="submit"> 提交 </el-button>
     </el-row>
 
     <el-dialog
@@ -321,7 +320,7 @@
     >
       <tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -885,56 +884,59 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .detail-block {
+    border-top: 12px solid #ebebeb;
+    padding: 10px;
+  }
+  .detail-row {
+    display: flex;
+  }
+  .detail-item {
+    display: flex;
+    width: 20%;
+  }
+
   $tableTitleHeight:46px;
   .table-title{
-    background-color:rgba(243, 243, 243, 1);
+    position: relative;
     height: 46px;
+    background-color:#fff;
     .title-header{
-      line-height:$tableTitleHeight;
-      color: #606266;
+      position: absolute;
+      left: 15px;
+      top: 50%;
+      transform: translateY(-50%);
       font-size: 15px;
       i{
-        margin-left: 5px;
+        margin-left: 10px;
         margin-right: 5px;
       }
+      i:focus{
+        outline: none;
+      }
     }
   }
   .edit_btns{
+    float:right;
     .edit_btn{
-      float: right;
-      margin:7px 3px; //为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+
+      margin:7px 10px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
-  .app-container{
-    // padding-top: 50px;
-    margin-bottom: 20px;
-  }
-  .form{
-    margin: 20px;
-    // margin-left: 20px;
-    // margin-right: 20px;
-  }
-  .table{
-    margin: 20px;
-    width: 98%;
-    // max-height: 250px;
-  }
   .title{
-    margin-left: 38px;
-    margin-top: 10px;
-    margin-bottom: 10px;
     font-size: 14px;
     font-weight: bold;
+    margin: 10px;
+    margin-left: 20px;
   }
   .button{
     margin-bottom: 30px;
   }
+
   .image-container {
-    // width: 80%;
-    // margin-top: 20px;
-    margin-left: 40px;
-    margin-right: 20px;
-    margin-bottom: 20px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
   }
   .el-image.image {
     width: 150px;
diff --git a/src/views/callCase/historyCaseList.vue b/src/views/callCase/historyCaseList.vue
index f279b4b..a4b0d1d 100644
--- a/src/views/callCase/historyCaseList.vue
+++ b/src/views/callCase/historyCaseList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <app-container>
     <case-list
       v-loading="listLoading"
       :case-list="caseList"
@@ -8,7 +8,7 @@
       :table-columns="tableColumns"
       @changeQuery="changeQuery"
       @addDetail="showDetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -63,6 +63,10 @@
       listLoading: true // 加载动画
     }
   },
+  mounted() {
+    this.listQuery.reporterPhone = this.$route.query.reporterPhone
+    this.fetchData()
+  },
   activated() {
     this.listQuery.reporterPhone = this.$route.query.reporterPhone
     this.fetchData()
diff --git a/src/views/caseCommon/caseDetailRead.vue b/src/views/caseCommon/caseDetailRead.vue
index 2898f2f..beaa000 100644
--- a/src/views/caseCommon/caseDetailRead.vue
+++ b/src/views/caseCommon/caseDetailRead.vue
@@ -2,12 +2,12 @@
 <template>
   <app-container>
     <div class="detail-title">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
+      <div class="table-title">
+        <div class="title-header"><i class="el-icon-menu"/>案卷详情</div>
+        <div class="edit_btns">
           <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
-        </el-col>
-      </el-row>
+        </div>
+      </div>
     </div>
     <div class="detail-block">
       <el-form ref="caseform" class="form" size="small" label-width="auto">
@@ -262,8 +262,14 @@
 
   $tableTitleHeight:46px;
   .table-title{
+    position: relative;
+    height: 46px;
     background-color:#fff;
     .title-header{
+      position: absolute;
+      left: 15px;
+      top: 50%;
+      transform: translateY(-50%);
       font-size: 15px;
       i{
         margin-left: 10px;
@@ -275,9 +281,10 @@
     }
   }
   .edit_btns{
+     float:right;
     .edit_btn{
-      float:right;
-      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+
+      margin:7px 10px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
     }
   }
   .title{